Launch Countdown

About this style

The launch countdown is often traced to Fritz Lang's 1929 film Woman in the Moon, and it became a broadcast ritual with the space programs of the 1950s and 60s. Mechanical drum counters, found in odometers, tape counters and fuel pumps, roll numbered wheels into view, each full turn carrying into the next wheel. Pairing stepped digits with a smoothly draining ring shows both the count and the continuous time behind it. Event openers, product launches and livestreams use countdowns to gather attention before a reveal.

Make a 10-second event countdown from 10 to 0 on mechanical number drums, revealing the event at zero.

<inputs>
Event: SABLEWOOD. Line: "Design Conference 2026 · Doors open". Details: "Pier Hall · 16 October · 19:00". Count from: 10. Duration: 10s. If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Palette: concrete #E5E2DA, plate #D6D2C8, ink #161616, drum face #F5F2EB, inset well #1C1C1C, ring track #C9C4B9, and signal orange #FF5A1F, used only on the ring and at the reveal.
Type: Barlow Condensed 600 for the digits (330px, lining figures) and 800 for the event name (150px, tracking 0.02em); the line in Barlow Condensed 600 at 36px; IBM Plex Mono 500, 22px, tracked 0.2em, for the labels ("T-MINUS", "SECONDS") and the details.
Instrument, centered on the stage: a ring 820px across with a 16px stroke. The time remaining is an orange arc from 12 o'clock running clockwise, shrinking back toward 12 as time passes, with a 10px orange dot on its moving end; 60 tick marks sit outside it (2px minor, 5px major at every sixth). Inside, a 560×380 plate with a 1px light top edge (#F8F6F1) and a 1px dark bottom edge (#B3AEA3) holds a 440×300 inset well with two drums side by side; "T-MINUS" sits 40px above the plate and "SECONDS" 40px below it.
Drums: each a 10-face prism in CSS 3D (perspective 1400px on the well, rotateX), faces 300px tall, radius 150 / tan(18°). Order the digits so every tick turns the drum the same way, the next lower digit rolling down from above. Shade each face by its angle to the viewer, brightness 0.35 + 0.65 × cos(angle), so faces rolling in and out darken; the well's top and bottom 40px fall to near black.
Timing: a tick every 0.7s. The drums show 10 from 0.4s, tick at 1.1s, 1.8s and so on, and reach 00 at 7.4s. Each tick turns the units drum 36° along 1 − e^(−14s)·cos(22s), s seconds since the tick: about 5° of overshoot, settled by 0.35s, like a detent. The tens drum turns only on the carry from 10 to 09, on the same curve. Meanwhile the ring drains continuously and linearly from 0.4s to 7.4s: stepped digits against a smooth ring is the style.
Reveal: at zero the ring's track fills orange in one 0.6s clockwise sweep; the plate and labels drop 140px and fade over 0.4s (ease-in); the event name rises out of a mask at the center, with the line and details beneath.
Premium is weighty drums turning on a detent with honest depth shading, against a ring that never stops moving. Cheap is numbers fading in and out with a glow.
Banned: glow, neon, seven-segment or LED digits, confetti, fireworks, camera shake, lens flares, the ring blinking, emoji, flashing more than 3 times per second.
</direction>

<structure>
0.0–0.4s: concrete ground; the ring track draws clockwise from 12 o'clock as the plate and drums fade up showing 10.
0.4–7.4s: the ring drains as one smooth motion while ten ticks take the drums from 10 down to 00.
7.4–8.4s: the reveal: SABLEWOOD rises centered at y 500, the line at y 600, the details at y 650.
8.4–10.0s: hold the lockup inside the full orange ring, completely still.
For other start counts or durations, keep the tick curve, scale the tick interval, and keep at least 1.2s of final hold.
</structure>

<build>
One self-contained index.html, CSS and JS inline. The stage is 1920×1080 (16:9), scaled to fit the window. Design for 60fps. window.seek(t), t in seconds, must compute every visual from t alone, clamping past the end to the last frame: no CSS transitions or animations, no setTimeout or setInterval, no state carried between frames, and randomness only from a seeded PRNG. Anything cumulative is precomputed once at load at a fixed step or solved analytically, so seek can jump to any time. Load Google Fonts via <link> and await document.fonts.load() for each face before defining window.seek. 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.
Engine: HTML/CSS with CSS 3D transforms for the drums (each face a div with a shading overlay set from its angle) and inline SVG for the ring and ticks. No canvas or three.js.
</build>

<check>
Before showing me, step through one frame per second (0–10s): screenshot each and look at it. Fix overlaps, clipped or cramped text, accidental edge collisions, and anything off-style or Banned. Check the digits after every tick (10, 09 … 00) with no frame showing a wrong pair, the tens drum moving only on the carry, the dot riding the arc's end, and the event lockup fully inside the ring with margin. 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

Gradient Mesh Brand Film

Made by us

A slow, ribbon-like gradient mesh flows in a skewed band behind sharp headline type, while white payment, API and chart…

Cut-Paper Title Sequence

Made by us

A jazz-tempo film title sequence in flat vermilion, mustard, bone and black: hand-cut paper shards jab in on the beat,…

Split-Flap Departure Board

Made by us

A mechanical station departure board where every flap steps through its drum to land on times, destinations and statuse…

Swiss Grid Typography

Made by us

A Swiss-style event poster that builds itself on a visible 12-column grid: grotesque type rises out of baseline masks,…