Claymation Shapes

About this style

Clay animation is stop-motion made with figures sculpted from oil-based modelling clay, re-shaped a little between each exposure. Because the material is soft, animators lean on squash and stretch, and the thumbprints and tool marks left in the surface became part of its charm. It is usually shot on twos, one new pose for every two frames, which gives it a stepped, handmade rhythm. Children's television, adverts and indie games use the look, and many studios now recreate it in 3D software.

Make a 10-second claymation piece: soft clay shapes squash, stretch and stack into a little tower, animated on twos like real stop-motion.

<inputs>
- Word, rolled from clay coils: PLAY (3–5 letters).
- Studio: Pipwell Clay Studio.
- Tagline: "Pressed, poked and rolled by hand."
- Length: 10 seconds.
If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Set: a painted card sweep, floor #E9A93A into backdrop #F2B947. Clay: tomato #E2553A, cobalt #2E58C9, mint #74CDAE, plum #6E3F78, pink #F296AE. Ink #4A2A12.
Shapes are hand-rolled, never perfect: ball, rounded cube, lathe puck, lathe gumdrop, ring, each pushed by low-frequency seeded noise (2.5% of size) and flattened where it rests. MeshPhysicalMaterial (roughness 0.78, sheen 0.35) with a canvas bump map of thumbprints (concentric elliptical ridges), tool drags and pits that show only in highlights. Letters are rolled coils, not a font: TubeGeometry along hand-drawn strokes, radius 0.2, ±8% seeded wobble, round caps.
A warm key #FFE6C4 from the upper left casts soft contact shadows. Camera fov 30, 14° above the table, locked off.
Everything moves on twos: drive all motion from tq = Math.floor(t * 12) / 12. Each step nudges every shape (±0.4% scale, ±0.3°, seeded) and swaps its noise among three variants, so the clay boils.
Squash and stretch keep volume (scaleY = s, scaleXZ = 1/√s). Falls stretch to 1.25 before contact, squash to 0.68, then recover with s(τ) = 1 − 0.32·e^(−7τ)·cos(16τ). Hops start with a two-step squash to 0.85. Each landing squashes the shapes below, a step later per level.
Layout: tower base at x 640, floor near y 860, 560px tall when built; letters from x 1040 to 1640, 240px tall. Tagline in Sniglet 800, 36px, centered under the letters, baseline y 970; studio name above in Sniglet 800, 22px, uppercase, tracking 0.16em.
Real clay feels touched: fingerprints, lumpy forms, weight, visible steps. Cheap is glossy perfect primitives tweening smoothly.
Banned: smooth unstepped motion, glossy highlights, perfect primitives, typeset letters, motion blur, bloom, outlines, faces, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.0s: a tomato ball drops onto the empty set at x 860, splats, wobbles back.
- 1.0–2.4s: a cobalt cube hops in from the right in three 0.44s hops to x 1080.
- 2.4–3.4s: a mint puck rolls in on its edge and flops flat at x 640.
- 3.4–5.6s: the cube hops over the ball onto the puck; the ball bounces onto the cube; a plum gumdrop drops on top.
- 5.6–6.6s: the tower breathes: squash 0.9, stretch 1.08, settle.
- 6.6–8.4s: letters plop down at right, 0.3s apart; a pink ring rolls against the puck.
- 8.4–9.0s: studio name and tagline step up 16px.
- 9.0–10s: hold; the boil continues at half strength.
Other lengths: scale the beats; keep 12 steps per second and 1s of hold.
</structure>

<build>
One self-contained index.html, inline CSS and JS, on a 1920×1080 (16:9) stage scaled to fit the window, built for 60fps. Google Fonts via <link>, awaited with document.fonts.load() before seek exists.
window.seek(t) sets every visual from t alone: no CSS transitions or animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Springs are closed-form in time since each event; noise variants are built at load.
Without ?render in the URL, drive seek from requestAnimationFrame; with ?render, don't start that loop.
three.js as an ES module pinned to three@0.160.0 via a jsDelivr import map (`three`, `three/addons/`); preserveDrawingBuffer: true; one render per seek. No image, model or typeface files beyond Google Fonts.
</build>

<check>
Before showing me, step through one frame per second (0–10s) and look at each. Fix overlaps, clipped or cramped text and anything off-style or Banned. Look for frames that change inside one 1/12s step, shapes floating above what they rest on, interpenetration in the stack, thumbprints reading as stripes. Confirm the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Low-Poly Landscape Flyover

Made by us

A slow golden-hour glide down a faceted valley: flat-shaded ridges, a low sun, fog melting the far range into the horiz…

Keynote Product Reveal

Made by us

A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…

Isometric Miniature City

Made by us

A toy-like isometric city block that builds itself on a floating slab: bevelled buildings rise floor by floor, cars loo…

Extruded 3D Type

Made by us

Chunky two-tone 3D letters swing into place one by one on a seamless studio sweep, lit like a product shot with soft sh…