Film Leader Countdown

About this style

A countdown leader is spliced onto the head of a film reel so the projectionist can thread up and start the picture on cue. The SMPTE Universal Leader counts down from 8 to 2 at one number per second, each with a clockwise sweep, and the 2 lasts a single frame with a short beep on the soundtrack, two seconds before the first picture. A full-aperture scan of the film shows everything around the picture as well: perforations, the optical soundtrack and the frame lines. Filmmakers and designers borrow the leader to open films, trailers and music videos with an analog feel.

Make a 10-second film countdown leader seen as a full-aperture 35mm scan, with perforations, soundtrack and frame lines in view: the count runs from 8 to 2 with a clockwise sweep, then the film's title appears.

<inputs>
If I don't give you something, use the default and don't ask.
- Title: "The Orchard Year". Credit: "a film by Ilse Marten".
- Start frame: PICTURE START, with REEL 1.
- Edge print: HALDEN SAFETY FILM 4210 (fictional).
- Length: 10 seconds.
</inputs>

<direction>
- The strip: one frame of 35mm film fills the stage as on a film scanner, at about 50px per mm. The film runs from x 85 to 1835, its edges dense black-brown #1A1816. Four perforations per frame on each side, rounded rectangles 140×99 (corner radius 18) on a 237.5px pitch at x 185–325 and x 1595–1735, with warm light #F4EFE2 shining through them, cropped by the top and bottom of the stage. The optical soundtrack runs in a strip at x 380–480 (black, with a 2px clear centerline when silent). The picture area is 1050×764 at x 505–1555, y 158–922, with the black frame lines above and below it and the neighboring frames just off-stage. Edge print in the dark margin outside each row of perforations, rotated 90°: HALDEN SAFETY FILM 4210 and key numbers in "Share Tech Mono" 400, 20px, amber #C99A45.
- Leader frames, drawn in code in the manner of a universal leader: a mid-grey field #8E8B84; two concentric white circles (radius 300 and 335, 5px lines) centered in the picture; a white crosshair across the whole picture (3px); the sweep, a darker sector #4E4C47 growing clockwise from 12 o'clock with a 3px black leading edge, one full turn per number; the number centered in "Saira Extra Condensed" 700, 470px, near-black #141414; small registration marks in the corners.
- Start frame: a pale #D8D4CB field with PICTURE START in "Saira Extra Condensed" 700, 150px, black, inside a 6px black rectangle, and REEL 1 beneath it at 56px.
- Film time: everything on the film changes at 24 frames a second, on film frame n = floor(t × 24). Each number holds exactly 24 frames, and its sweep advances in 24 steps.
- The 2: shown for exactly one film frame, and on that frame alone the soundtrack carries the tone, a dense band of 1 kHz sine waves drawn as a variable-area track (a white waveform mirrored about the centerline). That is the 2-pop.
- After the 2 comes black leader: the picture area goes black, still carrying grain and specks.
- Film artifacts, seeded per film frame: grain from 6 pre-rendered frames (7% amplitude, mean-neutral so the brightness doesn't pulse); 0–3 specks per frame (2–8px, white on dark areas and black on light, each lasting one frame); two hairs that cling to the gate edge for 6–10 frames; one fine vertical scratch that wanders slowly across the picture; gate weave moving the whole strip by smooth noise of ±1.5px sideways and ±1px vertically, stepped per film frame; and density breathing of no more than ±2% at under 2 Hz.
- Title: on the black, "The Orchard Year" in "Fraunces" italic (opsz 144, weight 300), 120px, warm white #F1E9D8, centered in the picture, with the credit beneath in "Fraunces" 400 roman, 30px, tracked 0.12em. It is printed on the film too: it weaves, grains and catches specks, with a soft halation (a 6px warm glow at 20%) as bright areas bloom on print stock. It fades in from black over 1.0s, like a printed fade, while the soundtrack carries a soft seeded music waveform that changes every film frame.
- Safety: mean brightness changes by no more than 5% from one film frame to the next, except at the single cut to black after the 2 and during the title fade; specks stay small and never cluster; nothing flickers.
- Premium: true 24-frame timing, a full-aperture scan with perforations and an optical track, dust that lives for one frame, and a weave you feel more than see. Cheap: a stock countdown overlay with a scratched-film filter and a heavy flicker.
- Banned: color beyond the warm greys, the amber edge print and the warm-white title; film burns, light leaks, heavy flicker, perforations that drift out of step with the picture, smooth (non-24-frame) motion on the film, real film stock or studio names, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.5s: the strip runs into frame from below and the framing locks (the frame line travels up and settles over 0.4s, as a projectionist racks the framing); PICTURE START holds.
- 0.5–1.5s: 8, with its sweep.
- 1.5–2.5s: 7.
- 2.5–3.5s: 6.
- 3.5–4.5s: 5.
- 4.5–5.5s: 4.
- 5.5–6.5s: 3.
- 6.5s: one film frame of 2, with the pop on the soundtrack.
- 6.54–7.4s: black leader, grain and specks.
- 7.4–8.4s: the title and credit fade up.
- 8.4–10.0s: hold on the title, weaving gently on the film.
For other lengths, keep every number at exactly 24 frames, change the black and the title hold, and keep at least 1s 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: Canvas 2D, repainting every frame from scratch, the backing store sized from CSS size × devicePixelRatio. Canvas won't fetch fonts itself, so the awaited loads matter.
- Generate the grain frames, the speck schedule and the hair and scratch paths once at load from a seeded PRNG keyed to the film frame index, so any t draws the same film frame.
</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 each number holds exactly 24 film frames with one full sweep, the perforations, soundtrack and picture weave together as one strip, specks last one film frame, the 2 shows for one film frame with the tone on the track, brightness never flickers by more than 2%, and the title is centered and clean 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

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,…