A ~64 s parody heist-movie trailer in which a crew of CSS techniques attempts the impossible: centering a div. Then someone opens it in Safari.

Everything is code. The picture is a Remotion project, and the music and sound effects come from a small synthesizer written from scratch in TypeScript — no samples, no After Effects, no audio files.

▶️ Watch the film (MP4 in the latest release)

Made with Claude Code (Claude Opus 5.5), working autonomously: it wrote the scenes and the synth, rendered, reviewed its own frames, and iterated.

Requires Node ≥ 23.6 (the audio renderer runs TypeScript directly).

npm install
npm run studio   # synthesize the soundtrack, then open Remotion Studio
npm run render   # synthesize the soundtrack, then render out/center-the-div.mp4
npm run audio    # soundtrack only → public/audio/score.wav (~7 s)

The Preview composition is the same film at 30 fps for faster renders.

• One timeline for picture and sound. src/timeline.ts holds the tempo (90 BPM) and every section's length in beats. Scenes and the score both read it, so cuts always land on the beat.
• Pure, deterministic animation. Each scene in src/scenes/ is a function of the frame number: easing curves, springs, seeded noise. No timers, no randomness at render time.
• Real physics. The Safari collapse is a matter-js simulation (src/physics.ts), computed once. The audio renderer runs the same simulation, so every falling letter gets a thud at its exact impact time.
• A synth in TypeScript. audio/dsp.ts has oscillators with PolyBLEP, biquad filters, Karplus–Strong strings, Freeverb, a sidechain, a look-ahead true-peak limiter and BS.1770 loudness metering. audio/instruments.ts builds the band (drums, upright bass, organ, brass, vibes, strings) and the foley (whooshes, typing, a 56k modem, crickets, a sad trombone…). audio/score.ts is the arrangement, and audio/render.ts mixes it down to −14 LUFS.

More detail in docs/design.md.

• scripts/sheet.sh <name> <from> <to> renders a contact sheet of a frame range to judge motion at a glance.
• node scripts/check-sync.ts out/center-the-div.mp4 checks the audio inside a render against the generated soundtrack.

• Code: MIT.
• Fonts in public/fonts/ (Archivo, Instrument Serif, JetBrains Mono, Tinos, Caveat) are under the SIL Open Font License; the license texts are in public/fonts/licenses/.
• Remotion has its own license: free for individuals and companies of up to 3 people, a company license is required beyond that.

"Stack Underflow" is a parody. Safari is a trademark of Apple Inc.; this project isn't affiliated with or endorsed by Apple, and no Apple assets are used.