AI CSS Animations

Paper Plane Journey

A dart folded from lined notebook paper glides over a landscape of folded card: accordion hills, a blue paper river, slotted card trees and a village of folded houses, the camera chasing it under a bridge and round the steeple to a landing by the post box.

Written and rendered by AI CSS Animations Oct 18, 2026

Type
prompt
Made with
Claude Opus 5.5 in Claude Code
Built in
three.js
Topics
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

Paper-craft animation builds its worlds from folded and cut card, either as real stop-motion models or as 3D renders that copy paper's thickness, creases and soft fibers. Folds split each surface into a lit and a shaded face, slotted cut-outs stand in for trees and buildings, and a low sun makes the relief read. The dart, folded from a single sheet, is one of the simplest and most familiar paper planes. The look suits travel, education and greeting-card brands that want warmth and a handmade feel.

The prompt

Make a 10-second 3D paper-craft film: a paper plane carries a note across a landscape made of folded card, the camera following it from a hilltop to a village.

<inputs>
If I don't give you something, use the default and don't ask.
- Place: Tansey Fold (fictional), a village.
- Title: "The long way round"
- Opening line: "A letter for Tansey Fold"
- Place line: "TANSEY FOLD · POP. 212"
- Note on the wing: "See you Sunday! x Ottilie"
- Length: 10 seconds.
</inputs>

<direction>
- Look: a handmade paper model lit by a low morning sun. Everything is card or paper with real thickness: crisp creases that split light from shadow, cut edges that show a paler core, slot joints, a little curl and fiber. These are folds, not low-poly facets: every surface is a flat sheet bent along explicit crease lines.
- Palette: a paper sky backdrop #CFE3EA fading to #F6E7D2 at the horizon, with a cut-paper sun #FFE2A6; hills sage #9BBB8C, moss #6F9A6A and pistachio #C5D8A0; fields ochre #E1B76A and kraft #C7A57B; river #6FA6C6 with #B5D6E4 bank strips; houses cream #F6EFDF with roofs brick #C45A40 and slate #5E6C84; trees #4F7F57 and #7DA66A; post box #D8432F; the plane #FBF7EC ruled in #9DB6D8 with a #E07A7A margin line and handwriting in #3A4A7A; type #2E3A3C, secondary #5F6E6A.
- Paper: MeshStandardMaterial, roughness 0.9, double-sided, with a seeded fiber CanvasTexture (fine noise plus a few longer fibers) giving ±3% tone and a subtle bump; every sheet shows a 0.012-unit cut edge in a 10% lighter tone. Folds stay sharp: flat normals per facet, no smoothing across creases.
- Landscape, about 60 units long, built once at load from a seeded PRNG:
  - hills are accordion-folded strips: a sheet folded into alternating ridges and valleys across its width (8–14 folds, 0.6–1.0 apart) and bent over a gentle arch along its length, so faces alternate lit and shaded like real folded card;
  - fields are a patchwork of paper squares with two corners lifted 3–6°;
  - the river is one long ribbon of blue paper winding between the hills, with a pale bank strip along each side and a few cut-paper ripple chevrons; a humpback bridge is a curved strip on two folded tabs;
  - trees are pairs of identical card silhouettes slotted together at right angles (pines, and round crowns on trunks), standing on the ground;
  - the village is nine houses folded from card: box bodies with printed windows and doors (CanvasTexture), prism roofs folded on the ridge with 0.06 eaves, folded-tab chimneys, and a church with a tall folded steeple and a clock face; a red post box (a rolled-card cylinder with a folded cap and a slot) stands on the green;
  - clouds are flat cut-paper shapes hung from straight 1px threads that rise out of frame.
- The plane: a classic dart modeled from its real fold pattern: a pointed nose, a keel folded down along the center (0.9 units long), two wings with a 6° dihedral and slightly upturned trailing edges, a visible crease along each wing root, and ruled lines running at the angle they'd have after folding. The note is handwritten on the right wing in Caveat. Its pose comes from its path: heading from the tangent, bank from the path's curvature (up to 25°), plus a gentle pitch bob of ±2° at 0.6 Hz.
- Flight: one CatmullRom path, about 70 units long, arc-length parameterized at load and paced with an easeInOutSine speed profile: off a hilltop at the left; a glide down the valley over the river; a skim under the bridge 0.4 units above the water; a climb over a row of slotted trees; a wide banked turn around the church steeple; a gentle landing on the green that touches down, slides 0.4 units and stops beside the post box with its nose tipped down 4°.
- Camera: fov 40, a chase camera 2.2 units behind and 0.9 above the plane, looking 3 units ahead, its position lagged by sampling the path 0.35 s earlier (closed-form, no smoothing state). Through the turn it swings wide to show the village; for the landing it cranes up and back to a high three-quarter view (pitch 34°) with the green, the post box, the church and the river in frame, the plane at about (1220, 640) and plain fields across the lower left. It never passes through a hill, tree or house.
- Light, bright and raking: a low warm sun DirectionalLight #FFE6C4 at 2.6 from the left at 28° elevation so every fold shows a lit and a shaded face; soft shadows (PCFSoftShadowMap, 2048, a shadow camera that follows the plane) so the plane's shadow glides over the folds and slides along the river; a HemisphereLight #FFF3E2 / #A8BFA0 at 0.9 so shaded faces stay about 65% as bright as lit ones; light fog toward #F6E7D2 to layer far hills. ACESFilmic, exposure 1.0.
- Type (HTML over the canvas): the opening line in Caveat 600, 44px, #3A4A7A, top-left at (120, 110), writing on left to right over 0.8 s behind a soft mask; the title DM Serif Display 400, 104px, #2E3A3C, bottom-left with its baseline at y 920; the place line beneath it in DM Sans 600, 20px, tracked 0.18em, secondary.
- Premium: card with real thickness, creases that catch the sun, slotted trees, a plane that banks into its turns and a camera that follows like a drone. Cheap: smooth green hills with a paper texture on top, a plane sliding along a line without banking.
Banned: faceted low-poly terrain without crease structure, photo paper textures, outlines, people or hands, birds, the plane or camera passing through anything, camera shake, motion blur, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.2s: close behind the plane on the hilltop as it tips off and starts to glide; the opening line writes on.
- 1.2–3.0s: down the valley over the accordion hills, its shadow rippling over the folds; it skims the river and passes under the bridge at 2.6 s.
- 3.0–4.6s: it climbs over the slotted trees and the village comes into view.
- 4.6–6.6s: a wide banked turn around the steeple, the camera swinging out so the village and river show; at 6.0 s the plane is banked about 20° in the lower-left third with the steeple and houses behind it.
- 6.6–8.0s: it lines up with the green, flares and lands by the post box; the camera cranes up to the high three-quarter view; the opening line fades out.
- 8.0–8.8s: the title and place line rise 14px as they fade in on cubic-bezier(0.22, 1, 0.36, 1).
- 8.8–10.0s: hold; only the cloud threads sway ±1°.
For other lengths, stretch the valley glide and the turn; keep the landing at 1.4 s 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.
- The plane's position, heading and bank and the camera are closed-form functions of t through the arc-length table; the landscape is built once at load from a seeded PRNG, and CanvasTextures with type are drawn after the fonts 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 every hill shows alternating lit and shaded fold faces, trees read as two slotted cards, cut edges show paper thickness, the plane banks into each turn and never clips the terrain, its shadow lies under it on the ground, the camera never enters geometry, and the title sits over plain fields in the final frame. 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 inspiration