A booking film in one take

A launch film made of one shape and one camera, that you can play, drag and run backwards.

48 / Motion · timeline

Every frame is worked out from the time alone, so dragging the bar backwards shows the same pictures in reverse. The whole film is one shape and one camera.

The word sail squeezes into its own full stop. The stop grows into a button that says Book a crossing.
A tap turns the button into a ticket: Quay to Pier Isle, Saturday 10:40, £14.50, with a Book button.
A second tap floods the screen blue, and the flood shrinks into a Booked pill.
The pill becomes a boarding bar, then a crossing card where a boat runs a wave to Pier Isle.
The card becomes a tick. The tick floods the screen black, the black shrinks back into the full stop, and the word returns.

Remake it

Build one web component called 'A booking film in one take' for an invented ferry company, Sampleton Ferries, as a 15 second film at 120 BPM (30 beats) drawn on a fixed 1280 by 720 sheet scaled to its container. Every frame must be a pure function of the beat: write seek(beat) that reads nothing else, no CSS transitions, timers or carried state, so the film can be played, dragged backwards and stopped on any frame. Use one absolutely positioned shape that morphs through keyframes (centre, width, height, radius, colour) with eased legs: a full stop, a pill, a ticket, a full-screen flood that shrinks back into a pill, a progress bar, a crossing card, a tick. The word 'sail' squeezes into its own full stop and springs back at the end, so the last frame equals the first. Text rises out of a mask line and leaves the same way. One camera transform with a single push in and a single pull out, zoom interpolated per leg. A cursor that clicks twice, with a ring at each click. Pop things in with a closed-form damped spring, never a CSS bounce. Floods must reach the corners and take about 0.35 seconds. Banned: crossfades, blurs, 3D, particles, templates. Add a Play button, a scrub bar labelled for screen readers, a readout of the beat and scene, a numbered written version of the film below, play only while on screen, and start stopped on a still frame under reduced motion.

Write the keyframe tracks first: one array of [beat, value] per property of the shape, plus the camera and cursor.
Write seek(beat) so it sets every style from those tracks and nothing else, then call it from a requestAnimationFrame loop and from the scrub bar.
Make text rise from a mask line, and make every pop a closed-form spring step response.
Check the loop: seek(0) and seek(30) must give the same picture, and dragging backwards must retrace the frames.

Notes: when it suits, when it does not, how it fails

When it suits: A product launch, an app walkthrough or an onboarding story that has to be shown, scrubbed and sent as a link as well as filmed.
When it does not: A page that must be read at the visitor's own speed, or anything whose point is in the small print.
How it fails: A film that only plays: no pause, no scrub, nothing to read. Here there is a Play button, a scrub bar, a written version of every scene under the film, and under reduced motion it starts stopped on a still frame.

Made from Pete's note on a launch film he liked: text that moves at the speed of the music, scenes made out of each other, and a timeline you can hold in your hand.