AI CSS Animations

Game Trailer Title Drop

Out of a storm-teal sky of falling ash, a forged iron title, CINDERVOW, plunges onto a basalt plain and slams down: molten cracks race out under it, dust rings out and embers swirl up past its bright beveled edges, a light sweep rakes the letters, and a release date lands beneath.

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
Kinetic type · 3D · Particles
What Claude made from the prompt below in Claude Code: one HTML file rendered frame by frame to video. Silent preview.

About this style

The title drop is the moment in a game or film trailer when the name finally appears, usually near the end and followed by a release date. Its standard devices are a hard impact on the beat, debris and embers, metallic or carved lettering lit by a raking light, and a pause before the date. Since around 2010 the impact is often timed to a deep brass hit, a sound widely associated with the trailers for the film Inception. Game publishers, film studios and esports events use the format to end trailers, reveals and showcase segments.

The prompt

Make a 10-second cinematic title drop for a fictional game: a heavy forged-metal title falls out of an ash-filled sky and slams into the ground, cracks of molten light race out from under it, embers swirl up, a light sweep rakes the letters, and a release date lands.

<inputs>
If I don't give you something, use the default and don't ask.
- Studio line: "HOLLOWMERE INTERACTIVE PRESENTS" (fictional)
- Title: CINDERVOW (fictional)
- Subtitle: "BOOK I · THE NINTH FORGE"
- Release date: "11 · 06 · 2027"
- Platforms line: "ON PC AND CONSOLES"
- Length: 10 seconds.
</inputs>

<direction>
- Look: the end card of an expensive trailer: real 3D letters forged in blackened steel, a storm-teal sky full of falling ash, a basalt plain that cracks open with molten light on impact, embers that rise and cool, one camera push, one raking light sweep, and the date on the last beat. Heavy, slow and confident.
- Palette, not black and orange: sky storm teal #24393D at the top to ash rose #8C6F66 at the horizon, with a molten glow band #E07A45 low along it; haze #6B6A68 at 35%; ash flakes #CFC6BA; basalt #2B2A2B with lighter facets #45403E; crack cores #FFD98A through #FF8A3A to #C2381C at the edges; embers #FFB357 and #FF7A2E; the title's faces blackened steel #3A3C40 with hammered texture, its bevels polished, picking up warm highlights #F1D19A from the horizon and cool reflections #9CC6CC from the sky; small type #F2E8DA, secondary #C8B8A8. The cool sky and the warm cracks bracket the dark metal so its bright edges always read; nothing is pure black.
- The title, as real extruded letters from a Google Font: after the fonts load, draw CINDERVOW in Cinzel 900 at 600px into a 6144 × 1024 canvas (tracked 0.04em); trace its outlines with marching squares at the 50% alpha level, simplify each contour (Douglas–Peucker, 0.6px), sort outer contours and holes by winding and containment into THREE.Shape objects with holes (the counters of D, R and O), and build ExtrudeGeometry (depth 0.5 units for a 9-unit-wide title, bevelEnabled, bevelThickness 0.07, bevelSize 0.05, bevelSegments 4). Material: MeshPhysicalMaterial, color #3A3C40, metalness 1, roughness 0.42 on the faces with a generated hammered normal map (seeded dimples, tiling on the face UVs) and roughness 0.18 on the bevel and side groups, clearcoat 0.2, so the faces stay dark and the chamfered edges flare. The title stands upright, centered, its base on the ground.
- The ground: a 60 × 60 plane gently displaced by fBm into a basalt plain with a faceted normal map; a crack network precomputed at load (a seeded branching walk from 14 points under the title's base, branching two or three times, about 60 units of crack in all) drawn into a 2048 CanvasTexture that stores each crack texel's distance along the network from the impact. A shader lights cracks where that distance is under 18 units/s × (t − impact): a thin core #FFD98A, a wider #FF8A3A glow and a #C2381C fringe, each crack cooling over 3 s to a residual glow at 30%. At impact the ground dents under the title: a shallow radial depression with a raised lip of broken plates.
- The fall: the title drops from 14 units up, tilted 12° forward, accelerating (y = 14 − ½·30·τ²), lands at 2.42 s, levels its tilt in the last 0.2 s, sinks 0.06 into the ground and bounces 0.04 once. As it falls it parts the ash: flakes near its path swirl outward.
- Impact effects: a ring of ash dust expanding at 12 units/s, rising and thinning over 1.2 s; a low dust cloud of 600 soft billboard puffs drifting outward with drag and rising slowly, lit warm from the cracks below; 900 embers bursting up on ballistic paths with drag and curl-noise drift, precomputed once at load at a fixed 1/120 s step, each an additive sprite stretched along its velocity, cooling from #FFD98A to #C2381C and dying at seeded lifetimes of 1.5–4 s. The camera takes one push down (0.12 units, recovering over 0.3 s on a damped spring): one only. The impact brightens the frame by at most 15%: no flash.
- Sky and air: a sky dome ShaderMaterial with the gradient, slow cloud bands of scrolling fBm and the horizon glow; FogExp2 #5E5652 at density 0.035 so the far plain hazes into the horizon; 4,000 ash flakes falling slowly with a tumbling shimmer, y wrapped by their column height so any frame is direct.
- Light, readable from the first frame: a key DirectionalLight #FFC48A at 2.2 from low behind right (the horizon glow) laying a rim along the letters' tops; a cool fill DirectionalLight #9FC6D0 at 0.9 from the upper front left; a HemisphereLight #8FA9AD / #3A2A24 at 0.6; six PointLights #FF7A2E (decay 2) along the brightest cracks under the title, rising with the crack front so the lower bevels glow from below; an environment baked once with PMREMGenerator.fromScene from a small room (a warm low strip, a cool softbox above, dark walls) at envMapIntensity 1.0. ACESFilmic, exposure 1.2. The letters read as dark metal with bright edges the moment they appear, never as a black silhouette.
- The sweep: from 5.4 to 6.4 s a tall narrow softbox (a RectAreaLight 0.6 × 6 units, intensity 18, with RectAreaLightUniformsLib) slides across in front of the title from left to right, so a bright band rakes the bevels and faces letter by letter.
- Post: EffectComposer with UnrealBloomPass (strength 0.6, radius 0.5, threshold 0.82) so only embers, crack cores and the sweep highlight bloom, then OutputPass.
- Camera: fov 32. It opens looking out over the empty plain toward the horizon glow from 3 units up, tilted up 14° into the falling ash; as the title falls it tilts down to follow and dollies low (1.2 up, 10 units from the title) for the impact; then a slow push-in of 8% and a 6° arc to the right on easeInOutSine. In the final frame the title is centered at (960, 470), about 1300px wide, with the horizon glow behind it.
- Type (HTML over the canvas): the studio line in Red Hat Display 500, 22px, tracked 0.5em, #F2E8DA at 80%, centered on y 540; the subtitle in Red Hat Display 600, 24px, tracked 0.6em, secondary, centered on y 650; the date in Big Shoulders Display 800, 120px, tracked 0.08em, #F2E8DA, centered on baseline 860 with a 2px ember line (#FF8A3A) drawing out under it from the center; the platforms line in Red Hat Display 600, 22px, tracked 0.4em, secondary, centered on y 920; a soft #1A1818 scrim at 40%, feathered 120px, sits behind the date and platforms line so the cracks never fight the type.
- Premium: letters cut from a real typeface with chamfered bevels that catch the light, a slam with weight that dents and cracks the ground, embers that rise and cool, one camera push, a sweep that rakes the metal. Cheap: flat gold text with a lens flare, a white flash cut, sparks in a void, seconds of camera shake.
Banned: white or full-frame flashes, lens flares, chromatic aberration, real game, studio, store or platform logos and rating badges, gold or chrome text, more than one camera push, camera shake, skulls or gore, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–1.4s: the image fades up from #1A2224 to the ash sky over 0.6 s; flakes falling; the camera looks out over the plain; the studio line fades in at 0.3 s and out by 1.4 s.
- 1.4–2.42s: the title plunges out of the clouds from 1.45 s, dark with lit edges, tilted, the camera tilting down to follow; ash swirls away from its path.
- 2.42–4.0s: impact: the push, the dent, the dust ring; cracks race out from under the letters and light them from below; embers burst up.
- 4.0–5.4s: the dust settles and drifts; embers curl up past the letters; the camera pushes in; the subtitle fades in as its tracking closes (4.6 s).
- 5.4–6.4s: the sweep rakes CINDERVOW from left to right. At 6.0 s: the whole title lit, the sweep crossing its middle letters, cracks glowing, embers rising, the subtitle in place: a complete composition.
- 6.6–7.6s: the date slams in (6.8 s: scale 1.12 to 1 in 0.1 s), the cracks swell 10% on the beat and the ember line draws; the platforms line fades in (7.2 s).
- 7.6–8.6s: embers thin; the cracks cool toward deep red; the camera arc eases to rest.
- 8.6–10.0s: hold: ash falling, a few embers rising, the cracks breathing faintly.
For other lengths, stretch the settle after the impact; keep the fall, the impact, the date beat 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.
- Build the title geometry once after the fonts load. The fall, the dent, the crack front, the sweep and the camera are closed-form functions of t; embers and dust are precomputed once at load at a fixed step and read back by t; ash flakes are closed-form. 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 CINDERVOW reads clearly as solid 3D letters with chamfered bevels and the counters of D, R and O open; the letters are never a black silhouette and the frame is readable from the first second; the cracks spread outward from the impact and never appear before it; there is exactly one camera push; log mean frame brightness from 2.2 to 3.0 s and confirm the impact adds no more than 15%; the date and lines read cleanly and sit clear of the title; the 6.0 s and final frames are complete compositions. 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 inspirationKinetic typography inspirationParticle animation inspiration