05Main title

Say something. It becomes an opening title.

Turn on the microphone and talk. Each phrase is cut into shots of a few words, and every shot is set and animated on the fly. Pick a style under the title. Saul Bass cuts it the way he cut his title sequences: three colours — a slightly faded red, black and white — two typefaces, paper shapes, bars, spirals, irises. Horror plays it as a fright film: cellar black, bone white and slime green, with blood kept for small touches; letters that drip, a flashlight searching the dark, a knife, giant shadows on the wall, a swarm of flies, a typewriter that will not stop. Your voice moves the picture before the words are even recognised: loudness swells the letters, every syllable kicks them, a pause lets the shot settle into a title card — and in the horror style, whispering builds the tension that a scream releases.

Typewriter types it, and you hear every keystroke: cream paper, black ink and the red half of a two-colour ribbon, with carbon blue for small touches. The sheet curls around the platen while the carriage steps and the bell rings at the margin; calendar pages tear off and fly at the camera; a ticker tape twists away through space; a letter folds itself into a paper plane and takes off; a book closes with your phrase as its title. Shout and the ribbon switches to red; whisper and the ink barely takes.

The motion borrows the twelve principles of Disney’s animators. Letters stretch as they fall and squash when they land; accents land after their letters; a shadow grows on the floor before a letter drops; words travel in arcs; flat type turns into solid 3-D block letters. When the recogniser changes its mind, the word morphs into the new one. Some choreographies are shared, dressed by each style; each style adds its own. Keep talking to see them all.

Saul Bass: Justified stack · Squash & stretch (after It’s a Mad, Mad, Mad, Mad World) · Slices (Psycho) · Spiral (Vertigo) · Bars (The Man with the Golden Arm) · Solid drawing · Marquee (Ocean’s 11) · Doors (The Seven Year Itch) · Facade (North by Northwest) · Cut paper (Anatomy of a Murder) · Camera roll · Disc · Morph
Horror: Melt (after Creepshow) · Flashlight (The Blair Witch Project) · Jump scare (Cat People) · Slash (Halloween) · Shadow play (Nosferatu) · Swarm (The Fly) · Typewriter (The Shining) · Hallway (Poltergeist) · Justified stack · Slices (Psycho) · 3-D (It Came from Outer Space) · Metamorphosis (The Wolf Man)
Typewriter: Platen (after All the President’s Men) · Tear-off calendar (the Hollywood montage) · Ticker tape (Wall Street) · Paper plane (Paperman) · Storybook (Snow White) · Rubber stamp (Catch Me If You Can) · Ransom note (Se7en) · Screenplay (Sunset Boulevard) · Typed stack
Cuts: Straight cut · flash frame · bar wipe · iris · slices · whip pan · through the counter of a letter · card flip · blinds · quarter turn · vortex — for horror: slime curtain · knife · blink · TV static · lightning — and for the typewriter: pulled sheet · torn page · page turn · sheet laid on top · platen feed
Gestures: Turn on the mic, then speak — French or English · T — type instead · S — sound on or off · H — hide the interface · F — full screen · Esc — stop listening
Sound: The typewriter’s keystrokes, space bar, bell, carriage return, paper feed and pull, tearing, folding, page turns, scissors, stamp and ticker were generated with ElevenLabs sound effects, then cut into a single sound sheet. Each strike plays on the very frame its letter lands, slightly varied in pitch, force and place in the stereo field. Sound starts after your first click, and goes into the recording with your voice. Headphones help the speech recognition hear you over the keys.
Voice: Words come from your browser’s speech recognition (Chrome, Edge, Safari); Chrome may send the audio to Google’s service. Browsers without a speech service (Brave, Arc, apps built on Electron…) can load Whisper instead — a speech model that runs inside the page, about 300 MB, downloaded once, nothing leaves the computer. The Type lab records and stores nothing. Without either, type the words: your voice still moves them.
Typefaces: Staatliches (Brian LaRossa, Erica Carras — SIL OFL) · Slackey (Sideshow — Apache 2.0) · Bahiana (Omnibus-Type — SIL OFL) · Creepster (Font Diner — SIL OFL) · Special Elite (Astigmatic — Apache 2.0) · Abril Fatface (TypeTogether — SIL OFL)
Technique: Canvas 2D with a hand-built perspective camera. Glyph outlines are read from the font files (opentype.js), given scissor-cut edges, morphed point by point and extruded into 3-D. Web Speech API for the words — or Whisper small on WebGPU (Transformers.js) in a worker — and Web Audio for loudness and syllable onsets. Grain, gate weave, flicker and paper fibres are drawn into the frame. All code, no images; the typewriter’s sounds are generated recordings, played with Web Audio.
Status: In progress — 2026