Skip to content

Stop-Motion Feel (Claymation)

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.

Motion, D1 Motion2DSeamless loop, verified170 lines of codev1.0.0

In Craft & heritage, Art & illustration styles

Next: Paper-Cut HillsSurprise me

Stop-Motion Feel (Claymation) preview
Starting live preview…
00:00:00:00 / 00:00:00:01

Live, running the real source.

Your current settings go with it. Combine several clips and hand them over together from your sequence.

Effect controls

Presets

12

12 is classic stop motion; 8 is chunkier; 24 is smooth.

3

Pixels the whole picture shifts between held frames.

1
4
1
7

The preview runs the same code your AI receives. These settings travel with the hand-off.

Info

What it is

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.

Reuse it in your own idea

  • 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.

Which part is reusable

src/stop-motion-feel.js is the ingredient your AI reuses. demo.js is only the example scene around it, and uses the demo harness only for the demo.

Good to know

  • Clay shading is a 2D illusion (gradients), not a 3D material.
  • Thumbprints and boil are random per held picture by seed, not sculpted detail.

Technical details

Technical details
Implementation
Canvas 2D — plain browser JavaScript, no libraries · ES module src/stop-motion-feel.js
Exports
  • createStopMotion({ fps?, jitter?, boil?, seed? }) => { stepTime(info), hold(info, scale?) }
  • drawClay(ctx, { x, y, radius, width?, height?, corner?, color, squashX?, squashY?, boil?, boilSeed?, dimples?, seed? })
  • drawFelt(ctx, { width, height, top?, color?, seed?, fibres? })
  • clayPalette: Record<string, string>
Dependencies (exact)
  • apw-runtime@1.0.0 (demo) — Demo harness and colour helpers. src/stop-motion-feel.js has no dependencies.
How it fits a scene

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.

Output
1080×1080, 30 fps, 8 s · procedural (computed from the frame number) · seamless loop — 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.
Tested
Rendered 240 frames on 2026-10-03 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (Canvas 2D). Same frame twice from fresh pages: identical. Loop: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.
Performance
Gradients per object; a few dozen objects are fine. drawFelt draws its fibres each frame; cache it to an offscreen canvas for big scenes. Canvas 2D only in this demo; the timing helper works anywhere.
Export a video yourself
Download the source, then in the folder: npm install npm run render -- stop-motion-feel/1.0.0 --out my-video.mp4Needs Node 18+, ffmpeg and Chrome/Chromium. Add --params my-settings.json (from Copy settings) for your own settings.
Version
1.0.0 · sha256:8868e2405e60b5ad…
Files
License
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder. License details
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.
BinMore like this

Lava Lamp

3D object3DSeamless loop15 seconds