Showcase
One focused chapter from the Thorbis interface research. 11 rules. Read the research index for every chapter and focused study.
Showcase
- The product is the picture. Apple’s first rule of a product page: the object is larger than the headline. The first viewport is mostly the thing, a real Thorbis sheet, a real job, a real truck, isolated in a void. Type captions it. If you can remove the product shot and the page still “works,” the page failed. apple.com/macbook-pro (opens in a new tab).Monday · 12 jobsThe board
The sheet is the picture. Not a gradient behind a slogan. - A studio void, not a landing template. Dark canvas. One key light. A rim on the device so the sheet reads as an object. No gradient blob, no glass stack, no floating metric cards. Linear’s marketing uses the same void the workbench uses, the sheet is bright, the world is dim. linear.app (opens in a new tab).Monday · 12 jobsThe board
The sheet is the picture. Not a gradient behind a slogan. - One claim, one shot, per chapter. Scroll is a cut list, not a blog. Each viewport is a chapter: a short line and a product stage. Apple: “Fast runs in the family.” Then the machine. Framer: the canvas doing the work. Do not stack three benefits beside three icons.Monday · 12 jobsThe board
The sheet is the picture. Not a gradient behind a slogan. - Scrollytelling, not scroll-jacking. The scroll position may change a sticky stage, a board filling in, a sheet sliding from a row, a van door opening. The browser still owns the scroll. Do not hijack the wheel, lock the page, or invent a second scrollbar. Apple’s pages react to scroll; they do not fight it. Under
prefers-reduced-motion, the stage is a still. No pinned theater. - Show the work happening. Framer’s marketing works because you see the canvas being used, not a posed screenshot of an empty file. Thorbis Showcase shows a working-day board: named jobs, a tech en route, a real total. Seed data is a defect here too. framer.com (opens in a new tab).Monday · 12 jobsThe board
The sheet is the picture. Not a gradient behind a slogan. - Put the Linear sheet in the void. The cinematic object is the workbench we already designed: inverted-L, dim sidebar, bright sheet. Photograph or stage that composition large. Do not invent a prettier fake UI for marketing. The Showcase page and the product must be the same software.
The sheet is the work. Chrome recedes. - Few words. Operator-plain. Apple barely needs copy because the object is the copy. One short claim. One sentence under it, maybe. Workbench voice lives in Be clear & concise and Sentence case.
Experience the future of field service.
The board.
One claim. Then the thing. - A film when it earns it. Apple’s “Watch the film” is a named, rare delight, not autoplay behind type. If we shoot, we shoot the job: dispatch at 7 a.m., a crawlspace, the books on Friday. No stock drone suburb. Mute by default. Captions on. Reduced motion gets the poster frame.
- Industrial-cinematic, not luxury-cinematic. We are not selling glass and gold. Lighting can be filmic; the subject stays a tool. Think a well-shot wrench, not a perfume ad. Kenya Hara’s emptiness plus Apple’s void plus a dirty truck in the frame is the mix. Do not chrome-plate the trades.Monday · 12 jobsThe board
The sheet is the picture. Not a gradient behind a slogan. - A stage, not a card grid. Full-bleed or near-bleed product stage. Device or browser frame only if it clarifies scale. Sticky product + scrolling captions is the Framer/Apple pattern. A row of three equal cards is the template we refused in the workbench, it is also refused here.Monday · 12 jobsThe board
The sheet is the picture. Not a gradient behind a slogan. - The delight budget lives here only. One authored cinematic moment per chapter, or none. Springs and parallax are Showcase tools. They are banned on a dispatch board. If a marketing motion leaks into Admin, that is a defect, not a brand extension.
I built this for the dispatcher at 7 a.m., the tech in a crawlspace, and the owner closing the books. Quiet chrome. Precise work. I’m still learning. These are the notes.
Applied bookmark research
Reviewed 2026-09-06. These examples reinforce the existing owners; they do not introduce another visual style or claim the product behavior is implemented. Read the 26-source review and access limits.
Motion explains the product; it does not become the product
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.
Open the cinematic skill · Evidence: You Don't Need Animations; React Bits Pro; Design Engineering at Vercel; animations.dev