AI CSS Animations

Paper Quilling

On a teal card in macro, a coral paper strip winds onto a slotted tool, springs open and is pinched into a teardrop, then 66 strips standing on edge assemble into a floral emblem of petals, leaves, lilac flowers and scrolls, their lit top edges shimmering as the light swings round.

Written and rendered by AI CSS Animations Oct 19, 2026

Type
prompt
Made with
Claude Opus 5.5 in Claude Code
Built in
three.js
Topics
Shapes · 3D
What Claude made from the prompt below in Claude Code: one HTML file rendered frame by frame to video. Silent preview.

About this style

Quilling, or paper filigree, rolls narrow strips of paper into coils and scrolls, pinches them into shapes and glues them on edge to build a design. Its name comes from the feather quills the strips were once wound around; Renaissance nuns and monks are said to have used gilded paper strips to imitate metal filigree, and in 18th-century England it became a pastime for well-to-do young women. Its basic shapes have names, among them the tight coil, loose coil, teardrop, marquise and scroll. Paper artists use it today for illustration, packaging and editorial images, lit low to show its relief.

The prompt

Make a 10-second 3D paper quilling film: thin paper strips roll into coils, spring open, are pinched into teardrops and scrolls, and assemble on edge into a floral emblem.

<inputs>
If I don't give you something, use the default and don't ask.
- Studio: Coilwright Paper Studio (fictional).
- Title: "Rolled, pinched, placed"
- Line: "A quilled emblem from 66 strips of 5 mm paper."
- Pieces (66): 1 fringed center flower · 8 coral teardrop petals · 8 moss marquise leaves · 4 lilac flowers, each 5 blush teardrops round a plum tight coil (24) · 8 cream S-scrolls · 16 saffron dewdrops · 1 ring frame.
- Length: 10 seconds.
</inputs>

<direction>
- Look: macro studio photography of real paper filigree. Strips stand on edge on a matte card, their top edges catching a low key light, with soft shadows inside every coil and around every piece.
- Palette: backing card lagoon teal #1E6E72 with a fine fiber texture, lifting to #2A8085 under the key; strips coral #F26B5B, blush #F6B3A6, saffron #F2B33D, marigold #E58A1F, cream #F5EDDC, leaf #6DB05A, moss #2E7D53, lilac #B79CDB, plum #6C3B78; tool steel #B9BEC3 with a turned beech handle #D8B88A; card shadows #11474A; type #F5EDDC, secondary #BFE0DE, accent saffron.
- How the colors interact: coral and saffron are complements to the teal, so the warm petals jump forward; every strip's top edge is lit almost to white in its own hue while its walls fall to a deeper shade, so a coil reads as rings of light and shadow; teal shows through the gaps of every loose coil; shadows on the card are deep teal, never grey.
- Strips (1 unit = 1 mm): paper 0.12 thick and 5 tall, its top edge faintly fibrous (±2% height noise). Build each piece as a ribbon standing on edge along a 2D curve: offset the curve ±0.06 for its two faces and close the top with its own edge strip so it can catch the light; MeshStandardMaterial, roughness 0.85, with a faint fiber CanvasTexture. A tiny glossy glue bead sits where each strip's end meets its coil.
- Shapes, with real quilling geometry:
  - tight coil: an Archimedean spiral r = 0.5 + (0.13/2π)·θ, wound until the strip's length runs out;
  - loose coil: the same length relaxed so its turns spread from 0.13 apart at the center to about 0.8 at the outside, its center drifting a little off-center as real loose coils do;
  - teardrop: a loose coil pinched at one point: the outer turns take a teardrop outline with a sharp point, the inner turns stay rounder and crowd toward the round end;
  - marquise: pinched at two opposite points into an eye shape, with a slight crease along its axis for a leaf;
  - S-scroll: a strip whose two ends roll loosely in opposite directions;
  - fringed flower: a 10-tall strip cut into fine fringe every 0.5 along one edge, rolled tight, its fringes then splayed outward into a tuft;
  - dewdrop: a small tight coil;
  - ring frame: one strip closed into a circle of radius 42 with an overlapped joint.
- The emblem, centered on the card and about 92 mm across: the fringed center (coral fringe round a saffron core); eight coral teardrop petals radiating from it, points inward; between them eight moss marquise leaves pointing outward; four lilac flowers on the diagonals, five blush teardrops round each plum center; eight cream S-scrolls swirling between the flowers; sixteen saffron dewdrops spaced evenly round the inside of the ring; the ring around everything.
- Tool: a slotted quilling tool, a steel shaft 0.9 thick with a 0.4 slot at its tip, in a turned beech handle that leaves the frame at the lower right.
- Light, bright from the first frame: a key DirectionalLight #FFF1E0 at 2.4 from the upper left at 32° elevation with soft shadows (PCFSoftShadowMap, 2048, a tight shadow camera, bias tuned so thin walls don't acne), so each wall shades the inside of its coil and the card; a HemisphereLight #F4FFFD / #1E6E72 at 1.0; a soft rim DirectionalLight #FFE0C8 at 0.6 from the back right for the far edges; RoomEnvironment through PMREMGenerator at envMapIntensity 0.3 for the glue beads and the steel. ACESFilmic, exposure 1.05. Shaded walls stay at least 55% as bright as lit top edges.
- Motion:
  - winding: the strip feeds in along the card from the left and winds onto the spinning tool (2.5 turns a second), the coil growing turn by turn as its length is used up, then slides off the tip;
  - release: the tight coil springs open into a loose coil, its pitch overshooting 8% and settling as 1 − e^(−τ/0.09)·cos(2π·3τ);
  - pinch: two small dimples press in at the pinch points (no fingers) and the coil draws into its shape over 0.25 s on cubic-bezier(0.3, 0, 0.2, 1);
  - placing: each finished piece glides in on a low arc 6 mm above the card, lands and settles with a 2% squash of its height over 0.08 s, its shadow tightening as it touches down; pieces arrive in waves from the center out, 40–60 ms apart;
  - the fringe blooms: the center's fringes splay outward one by one in a spiral over 0.5 s;
  - the ring frame unrolls round the emblem as one strip curving into its circle.
- Camera: fov 30. It opens in macro on the tool tip, the coil about 260px across at (1100, 520), pitched 50° down; it cranes up to a near top-down view (pitch 72°) of the whole emblem, about 720px across and centered at (1200, 540), turning 8° across the piece. No depth-of-field blur.
- Type (HTML over the canvas): kicker "COILWRIGHT PAPER STUDIO" in Kumbh Sans 600, 20px, tracked 0.18em, accent, at (120, 96); title Gilda Display 400, 80px, #F5EDDC, two lines, beneath it; line Kumbh Sans 400, 26px, secondary; at (120, 880), "Strips" in Kumbh Sans 500, 22px, over a count "0/66" in Kumbh Sans 600, 44px, tabular figures, ticking as each piece lands. Everything stays left of x 640. Text rises 12px as it fades in over 0.5 s on cubic-bezier(0.22, 1, 0.36, 1).
- Premium: paper with real thickness standing on edge, lit top edges, soft shadows inside every coil, coils that spring open and pinch with their inner turns crowding to one side. Cheap: flat spiral drawings, tubes lying flat, perfectly concentric circles, grey shadows.
Banned: flat 2D spirals, tubes or tori in place of strips on edge, glitter or metallic paper, hands or fingers, oversized glue blobs, outlines, bloom, depth-of-field blur, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.6s: macro on the tool: a coral strip winds into a tight coil as the tool spins, slides off the tip and springs open into a loose coil; the kicker rises in at 0.4 s.
- 1.6–2.4s: it is pinched into a teardrop; beside it a moss strip winds and pinches into a marquise in quick time-lapse, and a cream strip curls into an S-scroll.
- 2.4–3.4s: the camera cranes up and the counter appears at 0/66; the fringed center lands and blooms; the eight petals glide in round it.
- 3.4–5.0s: the leaves land, then the four lilac flowers (petals round their centers), then the S-scrolls.
- 5.0–5.8s: the ring frame unrolls round everything and the sixteen dewdrops dot in inside it; the count reaches 66/66.
- 5.8–6.6s: the emblem complete in near top-down view (the 6.0 s frame: the whole emblem centered, every piece in place, soft crisp shadows).
- 6.6–7.8s: the key light swings 25° round toward the top, so the shadows turn inside the coils and the top edges catch the light in turn.
- 7.8–8.6s: the title and line rise in.
- 8.6–10.0s: hold.
For other lengths, change the gaps between placement waves; keep the winding, release and pinch timings and at least 1 s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps. No image, video, texture or model files: every shape and texture is generated in code.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative is solved analytically from t or precomputed once at load at a fixed step. Past the end, seek clamps to the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link> are fine; await document.fonts.load() for each face before defining window.seek.
- Engine: three.js as an ES module pinned to three@0.160.0 through an import map on jsDelivr (`three` and `three/addons/`). WebGLRenderer with antialias, preserveDrawingBuffer: true and setPixelRatio(window.devicePixelRatio); render once at the end of every seek. Text is HTML over the canvas.
- Each piece's curve is a closed-form function of t (wound length, release spring, pinch blend, placement arc); rebuild only the animating pieces' ribbon geometry each seek and build finished pieces' geometry once at load.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check the strips read as paper on edge with lit tops and visible thickness, coils show rings of light and shadow with teal in the gaps, shadows are soft and teal, teardrops have one point and marquises two, nothing intersects, the count reaches 66/66 exactly as the last dewdrop lands, the 6.0 s frame shows the whole emblem, and the type stays clear of it. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

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

Similar prompts

More like this on the motion design inspiration board: 3D motion design inspirationMotion graphics inspiration