Origami Fold
A pre-creased square of persimmon paper on a linen table folds itself, crease by crease, into a stylized crane, lifts into a three-quarter view under raking light, and a studio name sets beside it.
Written and rendered by AI CSS Animations Oct 12, 2026
- Type
- prompt
- Made with
- Claude Opus 5.5 in Claude Code
- Built in
- three.js
- Topics
- 3D · Shapes · Logo reveal
About this style
Origami is the Japanese art of folding a single uncut sheet into form, and the crane is its most recognized model. Because paper facets stay flat and only rotate about their creases, folding maps neatly onto rigid 3D transforms, which is why it translates so well to motion. Brands reach for it to signal craft, care and transformation, and its appeal lives in the light: every facet catches a slightly different value.
The prompt
<inputs>
- BRAND. Default: "Kamifold Studio".
- TAGLINE. Default: "Made by hand, one crease at a time."
- SHAPE. Default: a crane (or a simple logo silhouette I describe).
- PAPER. Default: persimmon #D9482B front, cream #F6F0E4 back.
If I don't give you something, use the default and don't ask.
</inputs>
<direction>
A pre-creased square on a linen table folds itself, decisively, into a crane that lifts and turns to the light. Calm, tactile, exact.
- Mesh and folds: triangles over a crease pattern, subdivided so each fold moves whole triangles. Folds are data: {hinge (two points on the flat sheet), moving vertices, angle, start, duration}; positions at t = folds 1…n applied in order, each rotating its set about its already-transformed hinge by angle × ease(progress).
- Don't attempt a true crane (20+ folds, squash and reverse folds). Design 6–7 folds ending in a stylized crane that reads from a 3/4 view: pointed neck and head, tail, two raised wings. Sketch the end silhouette, then work back to the creases.
- Offset stacked layers 0.0015 units per fold depth to stop z-fighting.
- Material: MeshStandardMaterial, flatShading, roughness 0.92, distinct front and back colors. A seeded canvas paper-fiber texture at 6% contrast as map and bumpMap (bumpScale 0.002), with faint darker crease lines.
- Light: warm DirectionalLight #FFF1DE (2.6) raking from upper left at 35°, so every facet takes its own value; HemisphereLight #DCE6F2 / #B9A58A at 0.5; soft shadows (PCFShadowMap, 2048 map, radius 6) on a #E8E1D5 table.
- Camera: fov 30, easing from 65° pitch (nearly top-down) to a 25° 3/4 view.
- Motion: each fold 0.9–1.2s easeInOutCubic, 0.15–0.3s pauses, no overshoot: paper doesn't bounce.
- Type (HTML, right third, centered on the crane): brand in Instrument Serif 72px, #2A2520; tagline Inter 400, 20px, letter-spacing 0.06em, #6E655C.
Banned: glossy paper, smooth shading across creases, visible self-intersection, sparkles, simultaneous folds, anything flashing more than 3 times per second.
</direction>
<structure>
- 0.0–1.0s: flat sheet, raking light, creases visible.
- 1.0–2.2s: fold 1, the diagonal valley.
- 2.4–3.6s: folds 2–3, side flaps into a kite.
- 3.8–5.6s: folds 4–5, narrowing; neck and tail rise.
- 5.6–6.6s: folds 6–7, head turns down, wings lift to 35°.
- 6.6–7.8s: crane lifts 0.25 units and yaws 30° toward camera; shadow softens.
- 7.8–8.8s: brand rises 12px and fades in, tagline 200ms later.
- 8.8–10.0s: hold; crane bobs ±0.015 units on a 3s sine.
For longer pieces lengthen the pauses, not the folds.
</structure>
<build>
- One self-contained index.html, 1920×1080 (16:9) stage, designed for 60fps.
- window.seek(t), t in seconds, computes every visual from t: no CSS transitions or CSS animations, no setTimeout/setInterval, no state carried between frames (anything cumulative is solved analytically from t or re-simulated from 0 at a fixed step), randomness only from a seeded PRNG.
- No ?render in the URL: drive seek from requestAnimationFrame. With ?render: don't start that loop. Define seek once fonts and assets load.
- Google Fonts via <link> are fine.
- three.js as an ES module from a CDN, version pinned (import map: `three` and `three/addons/` to three@0.160.0 on jsDelivr). WebGLRenderer with preserveDrawingBuffer: true; render once per seek call.
</build>
<check>
Before showing me, screenshot one frame per second (t = 0…10) and look at each. Fix overlaps, clipped or cramped text, and anything that reads as a cheap demo. The crane must read at a glance, with no z-fighting or interpenetration, every fold turning the right way, and type clear of crane and shadow. Confirm the final frame holds as a composed end card.
</check> Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.
Similar prompts
A slow golden-hour glide down a faceted valley: flat-shaded ridges, a low sun, fog melting the far range into the horiz…
A device built in three.js rises out of total darkness while a softbox reflection glides along its titanium edge, then…
A toy-like isometric city block that builds itself on a floating slab: bevelled buildings rise floor by floor, cars loo…
Chunky two-tone 3D letters swing into place one by one on a seamless studio sweep, lit like a product shot with soft sh…