Docs / 02
How Cinematic UI works
A site is a film whose playhead is the scrollbar. See the one rule behind Cinematic UI and how it differs from a typical premium-site prompt.
The idea
A site is a film whose playhead is the scrollbar. A section is a scene, the viewport is the frame, a scroll is a cut or a camera move, and the visitor is the audience, the editor and, once, a participant. The agent is not decorating a layout. It is deciding what the audience sees, in what order, from where, in what light, made of what, for how long, and why.
One rule carries the whole skill: borrow the film’s mechanics, never its costume.
A director’s style is a set of decisions: where the camera stands, how long a shot holds, what the light hides, how a cut lands, what the picture is made of. Those decisions become structure, motion, medium and material on the page. Film titles, characters, props and quotes never appear in the product’s UI unless you ask for a homage.
The film’s decisions are kept and its props are left behind. What reaches the page is something a developer can implement and a visitor can point at.
The crew
Every film job has a counterpart on a web project. The producer is the brief. The screenwriter is the real copy, written before any layout. The director is the agent, with one point of view. The lead actor is the one entity the eye follows through the page, and it must change. The cinematographer chooses the medium, the gaffer places the light, the editor owns scroll rhythm and cuts, and the colourist owns the grade. Sound is silent by default and opt-in only.
What it does differently
| Most premium prompts | Cinematic UI |
|---|---|
| Pick a style, apply it to a layout | Pick a director by the product’s dramatic problem, extract 5-7 observable mechanisms |
| Default to one look (usually glossy 3D or glass) | Cast the medium from the film: ink, pencil, cel, pixel, print, neon, type, photography, or 3D |
| Design a hero, then fill sections | A shot list for every scene: beat, shot size, lens, move, blocking, light, cut, length |
| Invent placeholder imagery | The asset call: ask once. You supply, a free licensed library, it generates, or the shot changes |
| Animate things as they enter the viewport | One scrubbed timeline; every cut between scenes is a decision |
| “Looks good” | Screening: contact sheets on three viewports, five frames judged at full size, named corrections |
| Every site ends up related | A filmography and a skeleton check, so the next production differs from the last three |
Why mechanisms, not moods
Every stylistic claim in a treatment has to name something visible on screen. “Moody” is not a mechanism. “The camera holds a locked-off wide frame while a single element moves” is one. Each mechanism is tested with two questions: could a developer build it from this sentence, and could a viewer point at it on screen?
This is also why the skill has no film library. Any film can be cast and is researched live. The point is to extract decisions from a specific sequence, not to repeat a director’s reputation.
Where to go next
- The production: the ten stages from logline to delivery.
- Directors and films: how a director is cast.
- Media and looks: what the picture can be made of.