{"id":"stop-motion-feel","version":"1.0.0","title":"Stop-Motion Feel (Claymation)","summary":"Makes any motion look hand-made frame by frame: pictures held at 12 a second, a tiny camera jitter, outlines that wobble, and clay shading with thumbprints under warm overcast light.","kind":"motion","target":"canvas2d","collections":["satisfying","kinetic-text","backgrounds"],"tags":["stop motion","stop-motion","claymation","clay","handmade","12fps","stepped","jitter","boil","felt","craft","tactile","cozy","2d","canvas"],"loopable":true,"motion":"procedural","durationSeconds":8,"status":"published","media":{"poster":"https://aipixelwizard.com/media/stop-motion-feel/1.0.0/poster.webp","preview":"https://aipixelwizard.com/media/stop-motion-feel/1.0.0/preview.mp4","sample":"https://aipixelwizard.com/media/stop-motion-feel/1.0.0/sample.mp4","sampleBytes":617831,"sampleNote":"Pre-rendered with the default settings. Customised settings must be exported locally (npm run render)."},"urls":{"page":"https://aipixelwizard.com/visuals/stop-motion-feel","manifest":"https://aipixelwizard.com/api/v1/visuals/stop-motion-feel/versions/1.0.0","agentMd":"https://aipixelwizard.com/registry/stop-motion-feel/1.0.0/agent.md","files":"https://aipixelwizard.com/registry/stop-motion-feel/1.0.0/","demo":"https://aipixelwizard.com/registry/stop-motion-feel/1.0.0/index.html"},"description":"The claymation look taking over feeds in 2026, as motion you can apply to anything: time is held in steps like a stop-motion camera taking twelve pictures a second, each held picture gets a tiny camera shift, outlines boil from picture to picture, and shapes are shaded like matte clay with thumbprint dimples, a soft warm key and a cool rim from an overcast sky. The demo is a clay ball hopping past a stack of clay blocks on a felt table. Set the pictures per second, the jitter, the boil, the clay colours and the felt.","role":"Timing and shading helpers for a handmade, stop-motion feel (Canvas 2D).","useCases":["Cozy product or explainer clip","Handmade-feeling title or sticker","Giving a 2D scene a stop-motion rhythm"],"synonyms":["claymation effect","stop motion look","handmade animation","clay animation","frame by frame look","stuttery animation","cozy animation","craft animation","plasticine"],"digest":"8868e2405e60b5adfb5bfeaac3b8295da0a639b31a051a6a7ab38419b24a9759","implementation":{"target":"canvas2d","runtime":"browser","language":"javascript","module":"esm","entry":"src/stop-motion-feel.js","exports":[{"name":"createStopMotion","signature":"createStopMotion({ fps?, jitter?, boil?, seed? }) => { stepTime(info), hold(info, scale?) }","description":"Holds time in pictures per second and gives a per-picture jitter and boil seed. Pure function of frame and seed."},{"name":"drawClay","signature":"drawClay(ctx, { x, y, radius, width?, height?, corner?, color, squashX?, squashY?, boil?, boilSeed?, dimples?, seed? })","description":"A lit clay ball or rounded block with thumbprints and a boiling outline."},{"name":"drawFelt","signature":"drawFelt(ctx, { width, height, top?, color?, seed?, fibres? })","description":"A felt table with fibre texture."},{"name":"clayPalette","signature":"clayPalette: Record<string, string>","description":"A few clay colours that read as handmade."}],"reusable":["src/stop-motion-feel.js"],"demo":"demo.js","harness":"index.html"},"dependencies":[{"id":"apw-runtime","version":"1.0.0","scope":"demo","reason":"Demo harness and colour helpers. src/stop-motion-feel.js has no dependencies."}],"uses":[],"usedBy":[],"params":[{"key":"fps","label":"Pictures per second","help":"12 is classic stop motion; 8 is chunkier; 24 is smooth.","type":"integer","min":4,"max":24,"step":1,"default":12},{"key":"jitter","label":"Camera jitter","help":"Pixels the whole picture shifts between held frames.","type":"number","min":0,"max":8,"step":0.5,"default":3},{"key":"boil","label":"Outline wobble","type":"number","min":0,"max":2,"step":0.1,"default":1},{"key":"hops","label":"Hops per clip","type":"integer","min":2,"max":8,"step":1,"default":4},{"key":"jump","label":"Jump height","type":"number","min":0.4,"max":1.6,"step":0.05,"default":1},{"key":"seed","label":"Variation","type":"integer","min":1,"max":9999,"step":1,"default":7},{"key":"colorA","label":"Ball clay","type":"color","default":"#d9603a"},{"key":"colorB","label":"Block clay 1","type":"color","default":"#8fae7a"},{"key":"colorC","label":"Block clay 2","type":"color","default":"#e0a62a"},{"key":"felt","label":"Felt","type":"color","default":"#b8a98c"},{"key":"background","label":"Sky","type":"color","default":"#dfe6ea"}],"presets":[{"id":"default","label":"Terracotta hop","params":{}},{"id":"chunky","label":"Chunky 8 fps","params":{"fps":8,"jitter":5,"boil":1.6,"colorA":"#7fb3d9","colorB":"#8c5a8f","colorC":"#efe4cf","felt":"#6f7f6a","background":"#f1ece2"}},{"id":"smooth","label":"Smooth & still","params":{"fps":24,"jitter":0.5,"boil":0.3,"hops":3,"colorA":"#3a3238","colorB":"#d9603a","colorC":"#e0a62a","felt":"#c9b99a"}}],"output":{"width":1080,"height":1080,"fps":30,"durationSeconds":8,"posterSeconds":1,"alpha":false,"motion":"procedural","loop":{"seamless":true,"cycleSeconds":8,"method":"Whole hops per clip and the ball crosses the table once per clip; held pictures, jitter and boil are functions of the held picture index, which wraps."},"seed":{"param":"seed","behavior":"Same seed and settings give identical jitter, boil and thumbprints on every run."}},"composition":{"inputs":"Frame info; a seed.","outputs":"Held time and a per-picture jitter to translate the canvas by; clay drawing helpers.","coordinates":"Pixels. Call hold(info) once per frame, translate by jitterX/Y, then draw.","lighting":"Shading assumes a soft key from the upper left and a cool rim lower right.","timing":"hold() quantises time; feed its time (not info.time) to your motion for the stepped feel.","compatibleWith":["spring-motion","kinetic-title","gradient-background","dither-animation"],"notes":["Apply hold() to a Three.js scene too: step the time you pass to your animation and offset the camera by the jitter.","Keep fps whole and the clip duration a whole number of seconds so the held pictures divide the loop evenly."]},"reuse":["Feed hold(info).time into Spring Motion’s hop() for a clay character that bounces in held frames.","Draw a Kinetic Title with drawClay blocks as letters for a handmade sticker title.","Use drawFelt as a backdrop and the jitter alone to make any existing 2D scene feel shot on a tabletop."],"integration":{"newProject":"createStopMotion once; each frame call hold(info), translate by the jitter, draw your scene with drawClay using the held time.","existingProject":"Copy src/stop-motion-feel.js. Replace info.time with hold(info).time in your motion code and translate by the jitter before drawing."},"performance":{"notes":"Gradients per object; a few dozen objects are fine. drawFelt draws its fibres each frame; cache it to an offscreen canvas for big scenes.","limits":"Canvas 2D only in this demo; the timing helper works anywhere."},"limitations":["Clay shading is a 2D illusion (gradients), not a 3D material.","Thumbprints and boil are random per held picture by seed, not sculpted detail."],"license":{"spdx":"MIT","notice":"Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.","thirdParty":[]},"rights":{"approvedForPublicRelease":true},"provenance":"Original code written for AI Pixel Wizard on 3 October 2026 by an automated agent, inspired by the claymation AI trend (OpusClip’s write-ups of claymation TikToks: 12 fps stutter, thumbprints, overcast light). No code, images or textures were copied.","changelog":[{"version":"1.0.0","date":"2026-10-03","notes":"Initial release."}],"verification":{"testedOn":"2026-10-03","inputs":{"stop-motion-feel@1.0.0":"8868e2405e60b5adfb5bfeaac3b8295da0a639b31a051a6a7ab38419b24a9759","apw-runtime@1.0.0":"5be859cdac74823ba0bcc32c6daf06688a871104d24db5d4ceaffffd84d7c40d"},"environment":"Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0","renderer":"Canvas 2D","width":1080,"height":1080,"fps":30,"frames":240,"renderSeconds":16.8,"loopCheck":{"checked":true,"seamless":true,"maxDifference":0,"note":"Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255."},"determinism":{"checked":true,"identical":true},"errors":[],"media":{"poster":"/media/stop-motion-feel/1.0.0/poster.webp","preview":"/media/stop-motion-feel/1.0.0/preview.mp4","sample":"/media/stop-motion-feel/1.0.0/sample.mp4","sampleBytes":617831}},"files":[{"path":"LICENSE","size":1072,"sha256":"8a5f3a96f07e11522ec4bdd0a583356f99bad1245920f9709cee09b995a45153","contentType":"text/plain; charset=utf-8","url":"https://aipixelwizard.com/registry/stop-motion-feel/1.0.0/LICENSE"},{"path":"asset.json","size":8653,"sha256":"4df2653d62883ebcde1ad06d6194b891664396d13f6e9e15438a90d32227f866","contentType":"application/json; charset=utf-8","url":"https://aipixelwizard.com/registry/stop-motion-feel/1.0.0/asset.json"},{"path":"demo.js","size":3862,"sha256":"1178885dbe1f039e752ebafa934546a4b6f8c85ec50d512a88c8d0b0858ca77c","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/stop-motion-feel/1.0.0/demo.js"},{"path":"index.html","size":530,"sha256":"d323578bac2c7dbdc37aeb2b017f082422ad9a18ec815185afd6f1609e3a4821","contentType":"text/html; charset=utf-8","url":"https://aipixelwizard.com/registry/stop-motion-feel/1.0.0/index.html"},{"path":"src/stop-motion-feel.js","size":8497,"sha256":"88abbcfa7f3187d6a667e17cb33fd06e21e4bd66df13ff32c0b022b8084f8ae8","contentType":"text/javascript; charset=utf-8","url":"https://aipixelwizard.com/registry/stop-motion-feel/1.0.0/src/stop-motion-feel.js"}],"warnings":[]}