60s Spy Title Sequence — our demo

One example among many. Don't reuse its story, arc, shots, props or timings.

Demo: The Velvet Cipher (44 s) · spy-titles.mp4 · source in demo/

A 30–60 second film: an agent chases a courier and a stolen key through sets built from the credits, and the key turns out to open the film's title.

Story & structure

The graphic grammar of late-1950s / 1960s title design (Saul Bass's North by Northwest, Anatomy of a Murder, Vertigo; the 2002 homage by Kuntzel + Deygas for Catch Me If You Can): flat, opaque inks on paper, hand-cut edges, abstraction down to silhouettes, and typography that is part of the picture's structure. A title sequence is a story in itself: one goal, one chase, a few locations, one reveal — and the reveal is the title.

It is not a gun-barrel opening, not a tiptoeing cartoon panther, not a copy of any real title's logo, lettering, characters or shots. The credits contain only fictional roles ("A LEMOLAB PICTURE", "STARRING THE AGENT", "MUSIC BY THE SAMPLER") — never real names.

Pick stories that are a pursuit of something that turns out to be the film itself. The demo used all five native powers, the strongest (the diagonal grid assembling the title) at the peak:

Native power Story use
Type is the set Each location is exactly one line of credits, and that line is the architecture: letters as colonnade pillars (the hero hides behind the I), words as train carriages (he leaps the gaps between words), the O of a name as a roulette wheel, an em-dash as a roof ledge, a letter as a lock. At some moment every line must be fully readable.
Credits are rhythm Credits land on beats. Brass stabs = hard cuts. Hold each credit long enough to read it alongside a subtitle.
Graphic match cuts Abstraction makes shape rhymes cheap and powerful: wheel → roulette → pupil → moon → keyhole. Cut on the brass, and make the interval shrink (2 bars → 1.5 bars → 2 beats) as the chase accelerates.
The diagonal grid The opening splits along a 30° diagonal that multiplies into a grid; at the climax every fragment flies back along the same diagonals to assemble the title; the title closes along the same cut. Opening wound → closing seam.
Silhouette puppets Figures are flat cut paper, always in profile, animated on twos. All acting is outline and timing: run, flatten, look back, freeze.

Adapting any topic: make the topic the MacGuffin and the title its destination. A product launch → the product is the stolen object, and its logo is what the fragments assemble into. A lecture → the key idea is chased through four "chapters" set as credits. A birthday → the chase ends with the name assembling.

Emotional arc (35–45 s): a cold open on one shape + one line of briefing (hook in 3 s) → the theft → pursuit through 3–4 locations, each shorter than the last → a gag (hero half-hidden; stop-time freeze) → acceleration montage of shape-match cuts → the catch in silhouette against a giant circle → the world shatters along the grid and assembles into the title → a quiet button: one beat of silence, one bongo, one deadpan line.

Shots

Beat Camera
Cold open Locked, centered single shape (the keyhole) on black. It is secretly an extreme close-up of the title's I.
Every credit-set location Start wide enough to read the entire credit line, then push/truck in to the action.
Chase Lateral tracking (Catch Me grammar): screen direction always left → right, pursued ahead, pursuer behind.
Montage Hard cuts on brass stabs; circles keep the same screen position and size across the cut.
Hero moment Silhouette in front of a giant cream moon.
Ending Push in on the title's lock until the frame matches the cold open exactly, then hard-cut back to the full title on the final bongo.

Score structure

Palette & props

Titles, subtitles & end card

Pitfalls

Build notes

styles/spy-titles/demo/
  paper.js   four inks, scissor edges (cached), cut gaps, paper shadow, texture, silhouette layer + joint slits
  glyph.js   League Gothic → opentype.js outlines → re-cut letters
  chars.js   agent / courier rigs (side, front, back), poses, run/walk cycles, key + keyhole
  title.js   custom title glyphs, lock-plate I, diagonal split
  scenes.js  keyhole, grid, velvet, intro, airport, train, wheel, casino, pupil, rooftop, title background
  film.js    timeline, acting, cameras, subtitles, sound events     story.js  132-BPM grid (single source of truth)
  sheet.js / frames.js   model sheet and style frames
  music/score.py   original big-band score (sampler)      mix.py  foley + tape voice + ducking
  1. node core/render/still.mjs styles/spy-titles/demo 12 20.8 --q nosub=1 — review stills (?sheet=1&v=1, ?frame=airport|train|title).
  2. core/tts/tts.py lines.json voices → core/tts/asr_check.py (6/6).
  3. python music/score.py → node core/render/events.mjs → python mix.py.
  4. node core/render/video.mjs styles/spy-titles/demo --fps 24 --workers 3 (1058 frames ≈ 17 s, Canvas2D).
  5. CRF=24 sh demo/tools/mux.sh out/video24.mp4 mix.wav spy-titles.mp4 24 6 (core mux + a CRF knob: flat inks + grain at crf19 = 270 MB, at crf24 = 18.5 MB with no visible difference). Or just sh demo/build.sh.