Cinematic

First

1. Name the object before you draw. The board. The phone in the van. The invoice. The truck.
2. Name the mode: router, explore, film, or store. D-022.
3. Name the one idea in the first viewport.
4. Is the UI in the shot the UI we ship? Real jobs, real streets, real times. Not Acme. Not a dribbble board.

If you cannot name the object, you do not have a Showcase page. You have a feature-card grid. Delete it.

Modes

There is not one Showcase layout. Intent sets density.

A workbench is none of these. Do not pour a film into Admin. Do not pour a store into Open.

The homepage answers “where do I go?” The product page answers “why do I want this?” The store answers “what does it cost, and how do I start?”

Hiding practical information behind cinema, on a pricing page, is friction. Apple does not do that in the Store. Neither do we.

The actual simplicity

Simplicity is not “show less.”

It is: one level of information at a time, in a deliberate sequence.

Thorbis is a large operating system. The site feels simple when that size is split across pages, sections, and moments. Never ask them to process the whole platform in one viewport. D-022.

Reveal in this order. Do not skip forward. Do not dump the spec in Open.

1. What it is.
2. Why it matters.
3. What is new, or what it joins.
4. How it looks and feels.
5. How it performs in the shop.
6. Technical evidence.
7. Configuration, price, start.

Emotion first. Proof second. Purchase last. A contractor still needs evidence. Apple can lean on recognition. We cannot.

One idea per scene

Each major section is a slide. It can be understood without the section above it.

A scene has:

• One idea.
• One visual subject.
• One headline.
• One reading direction.

Isolation is the hierarchy. Scale, empty space, contrast, position, type, photography. Not a badge kit. Not a card grid of six benefits, three screenshots, and four buttons.

Whitespace is a tool. It replaces decoration. Empty space around a weak claim is still a weak claim.

Object

One object per page or chapter. Everything else is ground. Ground recedes: void, quiet type, no second hero.

If two things compete, you have two frames. Cut.

The UI in the shot is the UI we ship. Real jobs, real streets, real times.

Frame

One object. The void is ground. Type is a caption.

Video and stills sit on a thirds grid unless you name a centered poster.

Golden ratio is optional. Prefer thirds. They are easier to hold across a cut.

Where the object sits

Horizon sits on a third. Never through the middle unless the shot is a reflection you can name.

Lead room in the direction of the face or the move. A little headroom. Do not crowd the nose, the grille, or the cursor against the edge.

Match the line across a cut so the object does not jump left-third to right-third.

Caption in the empty third, never larger than the product. Inter. Cream. Not a trailer font.

Safe area: keep the object inside the middle 80%. Captions sit in the lower third, not on the product.

Center is legal on Open when the object is the poster. Say so. A truck dead-center. Then Proof breaks the center so the UI can work.

Establish the whole object first. Extreme crop later. Do not shrink the desktop hero onto a phone. Recompose: the product gets larger in the frame, the crop gets closer.

Copy is HTML, sitting in a third. It is not painted into the picture. Localization, search, and contrast depend on that.

Open references/frame.md when you are placing an object on a thirds grid, leaving lead room, or checking gestalt. This page keeps the short law. That file keeps the picture law that does not fit here: gestalt, a face on the upper third, motion across the grid, and type burned into a frame.

Chapters

The void is the workbench canvas so the jump into the product does not change worlds.

Open is not a spec sheet. Ask is not a second cinema. Proof may be a scroll-tied join only when the motion explains the architecture.

A long Film page may add a local chapter map (name, buy, sections). That is not a second header on a workbench.

The page is a film

A product page follows a cut list. Open, Proof, Cut, Ask still hold. This is the longer form.

Copy in the scene

Router and Open:

• Product, or one line.
• One supporting sentence.
• Two actions of different intent, or one. Explore Thorbis. See how it works. Start dispatch. Not two commits of equal weight.

“Learn more” is evaluation. “Start” is transaction. They are not twins.

Headlines are title cards. Short. Benefit, not an argument. Qualifications move down.

Centered type is ceremony: a hero, a symmetrical product, a universal claim. Left-aligned type is reading: specs, comparisons, chapters, proof. Do not center a paragraph of performance numbers.

Type is Inter. Neutral. Drama from scale and crop, not a costume font. Body is smaller, lighter, narrower. Grey, not a second black. Type. SF Pro stays on Apple. Title Case is allowed on Showcase headlines only.

Crop, light, color

• Dark void for performance, materials, the board at night, the product as a thing. Light void when the message is everyday, thin, friendly, the invoice on a counter.
• The background follows the story. Do not alternate dark and light for decoration.
• The product supplies the color. Interface stays grey. Screen content, a finish, a photo may carry hue. Blue remains a pointer, not a wash. D-018.
• Rotate evidence: the object, the UI, the inside, a person in the shop, a number. Do not shoot the same laptop from six angles.
• Same palette as the workbench. No teal-and-orange grade. No second blue. Color.

Scroll is a timeline

On Film pages, a sequence may be tied to scroll: it moves when they move, pauses when they stop, reverses when they go back. The visitor owns speed and attention.

The browser still owns the wheel. Do not pin the page and fake a reel. Do not hijack or artificially slow the scroll. Motion.

Motion must explain a join, a before/after, a config, a dimension, a workflow. Headings that drift, cards that float, objects that spin for atmosphere: refuse.

Preserve one subject. Change one or two properties: scale, position, rotation, light, opacity, camera distance, a component separating. Many objects moving at once is a template, not a film. Scaling, spinning, parallax, blur, and fake depth can hurt. Prefer a dissolve, a highlight, or a color change. Do not delete the meaning and leave a broken scene.

A film intensifies. It is not the only explanation. Ship static poster frames, real headings and body, play and pause where there is a film. No essential fact only inside video. Reduced-motion stills of the same crop. A usable page before cinematic assets load.

Media holds its hole. Aspect-ratio. D-019.

Shell on a Showcase page

Global nav stays compact and quieter than the hero. It is the exit, not a second billboard.

A long Film page may add a local product nav: the name, the purchase action, chapter links. That is a chapter map. Do not put twenty chapter links in it.

Full-width scenes, then a contained gallery, then a narrow text passage, then a table, then purchase. Changing format resets attention. A page of only full-bleed cinema is exhausting. A page of only cards has no drama.

Dense links, legal, and the rest of the platform live in the footer. Do not “minimal” them out of existence. Do not put them in the hero.

Mix

About:

• 60–70% calm product: real UI, short copy, restrained motion.
• 20–30% evidence: workflows, time, money, shops, modules.
• 10–15% cinema: one or two sequences, a reveal, a spatial join.

Apple can make a phone the hero. Our hero is the shop running as one system. Every cinematic beat must show how Thorbis connects, simplifies, or accelerates the work. Do not add movement so the site “looks like Apple.”

One or two sequences on a homepage. Breadth is a grid, not another film. Price is easy to find.

A Thorbis homepage

Router, not a two-minute film.

1. Promise. One statement. One supporting sentence. The product is the object. Two actions of different intent.
2. Join. One controlled sequence: call, customer, property, stop, tech, estimate, invoice, payment assembling into one timeline. Scroll explains the architecture.
3. From the shop to the row. Full workspace, then dispatch, customer, job, invoice. The camera says every detail belongs to one system.
4. Chapters. Isolated. One real product view and one operational outcome each. Answer. Dispatch. Context in the van. Work into money. The board as a whole.
5. Breadth. A structured grid of modules. CRM, schedule, comms, field, money, inventory, sites, reports. Not another cinematic pass.
6. Evidence. Time saved, response, admin work, revenue captured, a shop, migration.
7. Price. Starting commitment, what’s in, usage, seats, implementation, support, data. Easier to find than Apple hides it.

One or two cinematic moments. Not cinematic behavior in every section.

Rules, short

1. The product is larger than the type. Headline is a caption under the object, not a billboard over it.
2. Dark void. Same canvas as the workbench. One light. A rim so the sheet reads as a thing.
3. Scroll is a cut list. The browser owns the wheel.
4. One entrance per chapter. Reduced motion is stills of the same crop.
5. Few words. Operator-plain. One action at the end, or two of different intent. Start dispatch, not Get started.
6. Title Case is allowed on Showcase headlines only. Body stays sentence case.
7. Delight lives here only. Do not export this motion into Admin.
8. One idea per scene. Intent sets the mode. D-022.
9. Disclose in order. Do not dump the spec in Open.
10. Every cinematic beat explains a join, a simplification, or speed. Motion that only resembles Apple: refuse.

Audit

• Mode named: router, explore, film, or store. D-022
• One idea in the first viewport
• Object sits on a third, or center is named
• Lead room in the direction of face or move
• First viewport is mostly product
• Object is real Thorbis or a real trade scene
• No feature-card grid
• Scroll still belongs to the browser
• Reduced-motion stills exist
• Film is not the only proof
• Price is findable if this page sells
• One primary action, or two of different intent
• Nothing here could be a dispatch board
• Copy is HTML, not baked into the picture
• No gradient unless the brief named it. No solid colored side rail. D-018

Two failures: restage.

Never

• This skill on a workbench
• Fake UI
• Scroll-jack
• Cinematic motion inside Admin
• A second brand color “for marketing”
• A thirds overlay in the finished file
• Jumping the object from left third to right third on a cut
• A gradient, mesh, or aurora behind the product, unless the brief named that wash
• A solid colored side rail on a frame or a card
• Specs in the hero
• Extreme crop before they know the object
• Video as the only explanation
• Hiding price behind a film
• Shrinking a desktop hero onto a phone
• Baking the headline into the picture
• SF Pro
• One layout for homepage, product, and pricing
• Six ideas in one viewport
• Empty space around a vague claim

Done

Name the mode, the object, and the one idea. Name the sequence you refused to put on a board.

Applied bookmark research

Reviewed 2026-09-06. These are Thorbis applications and review exercises, not replacements for DESIGN.md, COMPONENTS.md, or the owning skill. Linear remains the operational baseline. External advice that conflicts with the constitution stays out.

These worked examples are not a claim that the product behaviors have been implemented or verified.

Motion explains the product; it does not become the product

Owning skill: cinematic.

An impressive effect can consume attention without helping a contractor understand what Thorbis does.

Name the product idea a Showcase scene explains. Use representative trade content, keep the next action clear, and compare against a static explanation. Make animation optional to comprehension and task completion.

Thorbis example: A single scene can explain how a completed job becomes an invoice. It should not hide the invoice behind a long sequence, invent product capabilities, or turn routine billing into a celebratory animation.

Verify: Check the initial viewport, static and reduced-motion alternatives, readable copy, reserved media geometry, and the real cost of any proposed asset. Record license and dependency review before reuse.

Do not import: No effect collection imported as a style system, no shaders in the workbench, and no made-up conversion or performance evidence.

Evidence: You Don't Need Animations (opens in a new tab); React Bits Pro (opens in a new tab); Design Engineering at Vercel (opens in a new tab); animations.dev (opens in a new tab). Source access limits.

All 26 sources and review limits.