# Stop-Motion Feel (Claymation) — `stop-motion-feel@1.0.0`

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.

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.

- Kind: motion; status: published; digest sha256:8868e2405e60b5adfb5bfeaac3b8295da0a639b31a051a6a7ab38419b24a9759
- Role: Timing and shading helpers for a handmade, stop-motion feel (Canvas 2D).
- Implementation: canvas2d; entry `src/stop-motion-feel.js`
- Files: https://aipixelwizard.com/registry/stop-motion-feel/1.0.0/<path> (`LICENSE`, `asset.json`, `demo.js`, `index.html`, `src/stop-motion-feel.js`)
- Manifest JSON: https://aipixelwizard.com/api/v1/visuals/stop-motion-feel/versions/1.0.0
- Runnable demo: https://aipixelwizard.com/registry/stop-motion-feel/1.0.0/index.html (open over http; it imports sibling packages by relative path)
- Dependencies (exact): `apw-runtime@1.0.0` (demo) — Demo harness and colour helpers. src/stop-motion-feel.js has no dependencies.

## Exports
- `createStopMotion({ fps?, jitter?, boil?, seed? }) => { stepTime(info), hold(info, scale?) }` — Holds time in pictures per second and gives a per-picture jitter and boil seed. Pure function of frame and seed.
- `drawClay(ctx, { x, y, radius, width?, height?, corner?, color, squashX?, squashY?, boil?, boilSeed?, dimples?, seed? })` — A lit clay ball or rounded block with thumbprints and a boiling outline.
- `drawFelt(ctx, { width, height, top?, color?, seed?, fibres? })` — A felt table with fibre texture.
- `clayPalette: Record<string, string>` — A few clay colours that read as handmade.

## Parameters
- `fps` (integer 4–24, default 12) — Pictures per second: 12 is classic stop motion; 8 is chunkier; 24 is smooth.
- `jitter` (number 0–8, default 3) — Camera jitter: Pixels the whole picture shifts between held frames.
- `boil` (number 0–2, default 1) — Outline wobble
- `hops` (integer 2–8, default 4) — Hops per clip
- `jump` (number 0.4–1.6, default 1) — Jump height
- `seed` (integer 1–9999, default 7) — Variation
- `colorA` (color, default "#d9603a") — Ball clay
- `colorB` (color, default "#8fae7a") — Block clay 1
- `colorC` (color, default "#e0a62a") — Block clay 2
- `felt` (color, default "#b8a98c") — Felt
- `background` (color, default "#dfe6ea") — Sky

## 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.
- Works with: spring-motion, kinetic-title, gradient-background, dither-animation
- 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.

## Output and loop
- 1080×1080, 30 fps, 8 s, procedural
- Seamless loop: yes — 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.
- Verified 2026-10-03 in Chrome 154.0.8037.97 headless on Linux 7.0.0-38-generic (x64), Node 22.14.0 (Canvas 2D); deterministic: yes; loop check: Frame 0 vs end state (progress 1): mean |Δ| 0.0000, max |Δ| 0 of 255.

## Use it
New project: createStopMotion once; each frame call hold(info), translate by the jitter, draw your scene with drawClay using the held time.

Existing project: Copy src/stop-motion-feel.js. Replace info.time with hold(info).time in your motion code and translate by the jitter before drawing.

Reuse ideas:
- 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.

## 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
MIT. Copyright (c) 2026 AI Pixel Wizard. Released under the MIT License. See LICENSE in this folder.

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.