Docs / 03
The production: ten stages from logline to delivery
Cinematic UI runs a real production in ten stages: logline, director, medium and grade, lead, screenplay, shot list, animatic, shoot, screening, delivery.
Work happens in a fixed order. Each stage ends with something written or something rendered. All the writing lives in one file, treatment.md, next to the build. It stays lean (the shot list and the copy are its bulk) and it is what the build is checked against.
| # | Stage | What comes out |
|---|---|---|
| 1 | Development | Logline and audience arc |
| 2 | Cast the director | A casting session: three candidates, one kept, mechanisms extracted |
| 3 | Choose the medium | What the picture is made of, the grade, the world, the poster |
| 4 | Casting and the asset call | The lead and its arc; one message asking for what the film needs |
| 5 | Screenplay | Every visible word |
| 6 | Storyboard | Form, skeleton, a shot list for every scene, the audience’s part |
| 7 | Animatic | The whole page, rough, in the chosen medium |
| 8 | Principal photography | Cast, set, light, frame, cuts |
| 9 | Screening | Contact sheets, the projection room, notes, reshoots |
| 10 | Delivery | An honest report: what was screened, what is a stand-in, what is still needed |
1. Development
Find the product truth: what it is, who it is for, the one action that matters, what can honestly be claimed. If the product or page scope is genuinely unknowable, the agent asks once. Otherwise it decides and proceeds.
Then it writes the logline, one sentence in which someone wants something, something is in the way, and something changes. And the audience arc: what they believe when they arrive and what they believe when they leave. Every scene exists to move them along that arc.
2. Cast the director
Pick one director and one of their films, or take yours. The choice is made by the dramatic problem the product has (it needs trust, awe, intimacy, speed, order, wit), not by genre association. The agent studies a specific sequence and extracts five to seven mechanisms. Directors and films covers this in full.
It then holds a casting session in the treatment without waiting for you: three candidates, three lines each (the mechanism that solves the problem, a signature shot, the risk, what it is wrong for), one kept, and a note on why the other two were set aside. The winner has to pass a test: could a competitor use this direction unchanged? If yes, it is not a direction yet.
It also reads the filmography, a file at ~/.cinematic-ui/filmography.md with one line per past production. The new treatment must say how it differs from the last three on at least four of: director, medium, form, skeleton, type, lead, interaction, ending.
3. Choose the medium
Decide what the picture is made of, from the film: observed (photography, footage), constructed (photoreal 3D), drawn (line, cel, painted multiplane, ink), designed (flat shapes, print, type), heightened (neon, grain, gradient light), elemental (ink, liquid, cloth), handmade (stop motion). The 3D stage is one medium, not the default, and the treatment carries a “why not 3D” line (or a “why 3D” line). See media and looks.
The grade. The film’s colour is part of its mechanism, so it is cast. The agent gathers six to twelve reference stills of the cast sequence, measures them with grade-from-stills.mjs, and writes a GRADE block: where the colour comes from, the blacks, the highlights, the hues and banned hues, the grain, the look numbers. With no stills it uses the look book’s starting values and marks the grade unmeasured. See grades.
The world and the poster. The ART block turns the production designer’s decisions (shape, material, ornament, era of making, density, in-world graphics) into a UI map: the frame, grid, cards, buttons, dividers, forms and footer. The POSTER line records the composition grammar that the first frame, the OG image, title cards and end credits borrow from the film’s key art. The props, logos and the poster itself are costume.
4. Casting, locations and the asset call
Name the lead: an object, a material, a figure, a typeface behaving like a character, a light. The director decides how the camera looks at it, and the product’s verb decides what it does. A lead that files, pours, deploys or connects gets an arc of at least three visible states: planted early, paid off at the turn, resolved in the final image. A lead that only rotates is an extra.
Then the asset call: one message listing every asset the film needs, with the routes for each. Real things such as logos, products, people, screenshots and numbers come from you. The agent also runs a casting test before promising a close-up: render the asset at that size and look. If it does not survive, get a better asset or change the shot.
5. Screenplay
Every visible word is written now: headlines, body, labels, calls to action and title cards. Product-first, so that a reader who has never heard of the film understands everything.
6. Storyboard: the shot list
First the form: a long scroll film, a chaptered piece, a mostly flowing document with a few set pieces, or several pages. The product’s information decides, and not every site is a theatrical scroll.
Before the rows, the award pass fills in how the director’s mechanisms reach every frame: the world object and every place it reaches (loader, cuts, buttons, progress, cursor, footer), the lead’s states, the loader as shot one, what the cuts are made of, the one accent and its meaning, the type switch and display extreme, the instruments, the visitor’s verb, and the triggers. It is distilled from twenty-one Awwwards winners.
Then one row per scene, hero to credits: the beat, the copy, shot size, lens and angle, camera move, blocking, light and colour, set density, what must be built, the asset, the cut out, length, energy, the money frame and the mobile cut. See the worked example in references/storyboard.md.
It also writes the audience’s part: one interaction that enacts the product’s promise (action, response, lasting consequence, the same thing by keyboard and touch), and sets the skeleton: the shape of the energy, where the turn falls, how it opens, how it ends.
7. Animatic
Build the whole page rough, in the chosen medium: real copy, stand-in art, the moves and cuts from the shot list. A drawn film blocks with rough layers and silhouettes, a photographed one with placeholder frames, a 3D one with grey geometry. Scroll it. Rhythm and blocking problems are cheap here. The kit’s site-dom.html (no canvas) and site.html (3D stage) are the starting points.
8. Principal photography
Shoot it scene by scene. Within a scene the order is the order on a set: blocking, light, material, lens, grade. Build or place the cast and set, light it, design the frame, cut it together.
9. Screening
Render it and look at it. screening.mjs shoots every scene on desktop, a short laptop and a phone, and lays the frames out as contact sheets. Then five frames are opened at full size: the opening, the closest shot of the lead, the densest reading section, the primary control, and the mobile signature moment. If an agent can be delegated, a fresh one holds a test screening from the contact sheets alone and says what the product is, what to do and which frame is the climax. Notes are written as named corrections, then reshoot and screen again.
At least one full screening happens before anything is called finished, and the accessible cut is screened too (--reduced).
10. Delivery
The report states what was screened and what was not, the director, medium and mechanisms, whether the GRADE, ART and POSTER blocks were researched or written from memory, every stand-in and every generated asset, any open asset call, and how to run it. It never describes a frame that was not looked at. One line is appended to the filmography, the only file the skill keeps outside the project.