Docs / 07

The director's rules and the lazy cut to refuse

The 13 rules Cinematic UI directs by, and the full list of lazy-cut patterns it refuses: what an undirected page looks like and why the shot gets reshot.

Two lists keep the agent honest. The director’s rules say what every decision must satisfy. The lazy cut says what an undirected page looks like. If the shot list contains anything from the second list, the scene is reshot.

The director’s rules

Mechanism, not mood. Every stylistic claim in the treatment names something visible on screen.
The medium, the grade and the world are cast, not defaulted. What the picture is made of, what colour its light is and what its world is built from all come from the film, researched and measured from its frames. Nothing (3D, grain, glow, a camera drift, a tint) is on screen because the kit had it switched on. Once cast, the grade is committed in full.
One lead, one arc. The eye always knows what to follow, and it is not the same at the end.
Changes and repetitions are both chosen. A new shot size, a repeated frame, the same cut twice: each has a reason. Sameness nobody chose is a slideshow; variety nobody chose is noise.
Motion is camera or performance. Something moves because the camera moved or an actor did something. A thing that fades up for no reason is neither.
Hold. A composed frame that stays still is a shot. Contrast makes energy; constant motion is noise.
Close-ups are earned. The shot is no closer than the asset can bear. Weak assets stay wide, in silhouette, or off screen.
Ask for what you cannot make. Real products, people and brands are requested, not invented.
The audience has a part. Beyond scrolling, the visitor does one thing that means something.
The frame is designed at rest, on every screen. Pause anywhere, at any window size: it should be a composition someone chose.
Words stay words. Copy, links and controls are real DOM text (readable, selectable, focusable, indexable) at every moment, on every device.
Two cuts ship. The theatrical cut, and the accessible cut (prefers-reduced-motion, small screens, no WebGL), with every scene still composed and every word still there.
Screened or it did not happen. Claims about how it looks come from rendered frames.

The lazy cut

Layout and motion

Centred headline, subhead, two buttons, and a glowing blob behind them.
A row of three equal cards, or a bento grid standing in for an idea.
Everything fading up 24 px as it enters the viewport, forever.
A strong first screen followed by ordinary feature, testimonial and FAQ blocks.
Scroll-jacking that traps the reader in a section with nothing developing.
Every section joined by a fade, or by the same clip-path wipe whatever the sections are.
Every performance scrubbed by scroll: nothing plays by itself, nothing waits for a click, a hover or a hand.
A centred mid-size headline (48-72 px) because nobody chose an extreme.

Medium and 3D

Photoreal 3D because the kit had a stage, on a film that was never solid or glossy.
A 3D object that floats and spins in the hero and is never seen again.
A close-up of code primitives pretending to be the product.
A filter over generic geometry, called hand-drawn; a brush font, called ink.
Purple-to-blue gradient, glassmorphism, and Inter, chosen by nobody.

The film reference, grade and world

A film reference that survives only as a palette and some adjectives.
A cast film whose colour never reached the page: tidy hex tokens on white, pictures ungraded, “retro” as one sepia overlay, “neon” as a pink-cyan gradient behind white type.
The two uncast grades: warm paper plus vermilion plus dark ink, and cool grey plus one blue or green accent.
The film’s grade on a template’s world (rounded cards, pill buttons and a four-column footer under a Wong Kar-wai light), or the opposite, its props pasted on as decoration: umbrellas, scorpions, holograms, a pink hotel.
A floating-heads hero, or the film’s poster reproduced: borrow the poster’s grammar, never its artwork or lettering.
A film “remembered” instead of researched: credits, palettes and set details written from memory and presented as fact.
A winner’s signature move copied whole (ticket buttons, barcode dissolve): study the mechanism, find this product’s own object.

Type, accent and chrome

An accent colour on every button and heading, meaning nothing; mono “[01]” labels on a product that is not about precision.
Type that only ever mask-rises: no type department, the kit’s type library left on the shelf.
A themed hero followed by stock UI: the world never reaches the buttons, the progress mark or the footer.
A spinner or a lone percentage as the loader; a loader that has nothing to do with the first shot.

Mobile

Mobile as the desktop page squeezed into a column.

Dashboards and back offices have their own lazy cut, covered in app mode.