AI CSS Animations

Lantern Festival

From the end of a jetty at dusk, 1,200 paper sky lanterns rise from a lake shore and small boats and bend into a river of warm light on the wind, one drifting close enough to show its seams, hoop and flame, all doubled in still water under a pink band of twilight.

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
Particles · 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

Sky lanterns are small hot-air balloons of thin paper on a bamboo or wire frame, lifted by a burning fuel cell hung in the opening at the base. They have been made in China for centuries, and mass releases are part of festivals such as the Pingxi Sky Lantern Festival in Taiwan and Yi Peng in northern Thailand. Released together at dusk over water, they fill the sky with drifting points of warm light that the lake doubles. Many places now restrict releases because of fire risk and litter, so the look lives on in film, illustration and motion design.

The prompt

Make a 10-second 3D film of a sky lantern release at dusk: hundreds of paper lanterns rise from the shore of a still lake, glowing warm against the twilight and doubled in the water.

<inputs>
If I don't give you something, use the default and don't ask.
- Event: Lantern Night on Lake Seravin (fictional).
- Title: "Lift"
- Line: "Lake Seravin · 1,200 lanterns · the first night of autumn"
- Length: 10 seconds.
</inputs>

<direction>
- Look: a calm, cinematic dusk: the sky in its true twilight bands, a mirror-still lake, a dark far shore with a few warm windows, and lanterns rising in a slow river of warm light, from glowing paper envelopes close by to pinpricks high above.
- Palette: zenith indigo #23264D through #4B4475 to a pink twilight band #D79AA5 low in the sky, above a slate-blue band #56607F along the horizon (the Earth's shadow, because we face away from the sunset); far hills #262A45 with a faint lighter rim #3A3F60; town windows #FFC37A; lake #121A33 reflecting the sky; jetty planks #3A2E2C; lantern paper lit #FFB66B, hot near the flame #FFE3B0, cooler at the crown #E07A3E, seams #B4532C; flame #FFF5D8; embers #FFB45A; type #FFF3E6, secondary #D9C4CF. Warm apricot light floats on cool indigo and slate, with the pink band tying the two together.
- A lantern, built like the real thing (1 unit = 1 m): a rice-paper envelope 0.9 tall, a rounded-square tube 0.55 wide at the top and 0.42 at its open base, its top closed in a soft dome, its sides four panels joined by glued seams; a bamboo hoop round the base; two crossed wires holding a burning fuel cell at the center of the opening. Its glow, a ShaderMaterial on the envelope, lit from inside: brightest low and near the flame, falling off toward the crown, seams as darker lines, the far wall showing faintly through the near one, a fine paper-fiber texture; seen from below, the opening shows the white-hot flame.
- 1,200 lanterns, instanced at three levels of detail (the full mesh within 30 units, a simplified envelope out to 150, a soft sprite beyond), each with an additive glow sprite sized by its brightness. They launch from seeded points along the left half of the far shore (a 500 m stretch, 400–600 m away) and from 14 small rowing boats on the lake (dark silhouettes, 100–300 m out), with launch times seeded from three minutes before the film starts to 5.0 s: so at the start hundreds are already aloft, high and downwind, and new ones keep lifting off the shore in waves.
- Motion, closed form per lantern: rising speed v(τ) = v_t·(1 − e^(−τ/1.4)) with v_t 1.0–1.7 m/s; a wind blowing to the right and slightly away from the camera that strengthens with height, u(h) = 0.6 + 0.012·h m/s, so older, higher lanterns sit farther downwind and the release reads as one long diagonal river rising from the shore at lower left to the upper right; a pendulum sway of ±3° at 0.4–0.6 Hz; a slow turn about its axis of 4–9°/s; a flame that breathes ±8% at 0.8–2.4 Hz, never faster. Height and drift are the analytic integrals of these. At load, sample every path and nudge launch points so no two lanterns ever come within 1.2 m of each other.
- Embers: about 600 tiny sparks shed by the fuel cells, rising a little faster than their lanterns and fading over 0.8–1.6 s, with a faint flicker under 2 Hz.
- The lake: a Reflector (three/addons/objects/Reflector.js) whose reflection is distorted by two slowly scrolling procedural ripple normal fields (small amplitude, so it is nearly still) and darkened to about 65% of the sky; under every bright lantern within 200 units, a soft vertical glitter streak on the water (an additive quad stretched toward the camera, 3–6 times longer than wide, shimmering at under 2 Hz), the way points of light smear on rippled water. Every reflection and streak sits exactly under its source.
- The near scene: a wooden jetty runs out from the lower left (planks with gaps, two posts, a coil of rope), dark against the water. One hero lantern lifts from the end of the jetty at 1.0 s with full detail, its seams, hoop and flame readable, and drifts up and to the right across the frame by 6.0 s; a warm PointLight #FFB66B rides inside it, its intensity following the flame, and lights the planks as it leaves.
- Light: the sky is the key: a HemisphereLight in the sky colors at 0.7; a cool DirectionalLight #A8B4D8 at 0.4 from the right (the afterglow behind us); the hero lantern's PointLight. ACESFilmic, exposure 1.15. The lake, hills and jetty read as clear dark shapes against the bright twilight from the first frame, and nothing is pure black.
- Post: EffectComposer with UnrealBloomPass (strength 0.7, radius 0.6, threshold 0.55) so lanterns and their reflections bloom softly, then OutputPass.
- Camera: fov 40. It opens low over the water at the end of the jetty (1.2 m up), the horizon at y 640, seeing the shore launches and the lowest part of the river; it cranes up to 6 m while tilting up 7° over 1.6–6.4 s on easeInOutSine, revealing the lanterns already high in the sky while the lake keeps the lower part of the frame, and pans 6° right with the drift. In the final frame the horizon sits at y 820, the lake below it holds the reflections, and the lantern river sweeps from the lower left to the upper right, leaving the upper-left sky open for the title.
- Type (HTML over the canvas): title Petrona 300 italic, 132px, #FFF3E6, top-left with its baseline at (120, 230); line Mulish 500, 24px, uppercase, tracked 0.24em, secondary, beneath. Both rise 12px as they fade in over 1.0 s on cubic-bezier(0.22, 1, 0.36, 1).
- Premium: real paper lanterns with seams, a hoop and a flame, light that glows from inside, wind that bends the release into a river, a lake that doubles everything. Cheap: orange dots floating up a gradient, glowing ovals, a mirror flip without ripples.
Banned: fireworks, lanterns passing through each other or the camera, people (only small boat silhouettes), the sun or moon in frame, lens flares, real place names, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.4s: dusk over the still lake from the end of the jetty; the first lanterns lift from the far shore, their reflections under them; the hero lantern glows on the jetty's end and lifts at 1.0 s.
- 1.4–3.6s: waves of lanterns rise along the shore and from the boats; the camera begins to crane up; the hero lantern climbs past at the right of frame, its seams and flame clear, lighting the planks.
- 3.6–6.0s: the tilt reveals the sky full of earlier lanterns, the whole release bent by the wind into a river to the upper right; embers drift. At 6.0 s the camera is nearly at height: hundreds of lanterns span the sky, doubled in the lake, the hero lantern high at center right.
- 6.0–7.6s: the last wave lifts; the twilight deepens 10% and the town windows brighten; the title and line rise in at 6.6 s.
- 7.6–8.8s: the camera settles.
- 8.8–10.0s: hold the composition: the camera still, lanterns drifting slowly up and on, embers fading.
For other lengths, stretch the release waves; keep 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.
- Every lantern's position, sway, turn and flame, the embers and the camera are closed-form functions of t and seeded launch data; set instance matrices and per-instance brightness each seek. Call composer.render() once per seek in place of renderer.render().
</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 lanterns read as paper lanterns with seams and a lit opening up close and as soft points of light far away, every reflection and glitter streak sits under its lantern, the sky keeps its twilight bands, no flame flickers faster than 3 times a second, no lantern crosses the title, the lake, hills and jetty read clearly from the first frame, and the 6.0 s frame is a full, composed sky. 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 inspirationParticle animation inspiration