MOC — Faux UI
Faux product UI — the still or short animated product shot on a landing page, feature card, docs hero or bento tile. A believable interface simplified to what the viewer needs, framed with intent, every motion caused, then filmed and checked frame by frame. Distilled from Benji Taylor's Stageshow.
Raw markdown On GitHubreferences/faux-ui/MOC-faux-ui.md
Taught in
A product shot is not the product. It is an illustration of one moment in it: a window cropped to the panel where the story happens, a cursor that does one satisfying thing, a payoff that holds. Agents can build the parts; what they get wrong is the hundred small decisions around them, and the result reads as generated. This cluster writes those decisions down.
The one sentence the cluster hangs on: it reads as a real product, simplified to what the viewer needs, framed with intent, and every motion has a cause.
Five ways it fails, each owned by a node:
| Failure | Looks like | Owner |
|---|---|---|
| Too much | Real text in every row, numbers everywhere | faux-ui-restraint |
| Wireframe | Two grey blobs and a button | faux-ui-restraint |
| Boxed | A whole window shrunk into a card with even margins | product-shot-framing |
| Flat | Every object the same weight in the same bordered card | product-shot-framing, bento-grids |
| Bland | A grey window and a cursor, whatever the brief's style was | faux-ui-restraint (character is real too) |
Order of work
Most of the quality is decided before code. Run /design-engineering stage (cmd-stage) or follow this order by hand:
- product-shot-framing — medium, size, layout and crop, decided first.
- faux-ui-restraint — the word budget, fidelity, type, spacing, icons and chrome of the still.
- demo-story-and-loops — story shape, beats, poster, loop and reset, the timing of things that change.
- demo-cursor-and-touch — the cursor, drags, selection, scroll, camera, phones.
- demo-rehearsal — film it, read every frame, a fresh-eye review, the handover note.
A grid of tiles is one picture planned as a set: bento-grids. With Stageshow installed it owns the build: stageshow-reconciliation.
Cross-cluster
- A product demo inside a rendered launch film is launch-video-ui-demo: a different medium with bigger cursors and no replay. stageshow-reconciliation says which owns which.
- Page-level motion rules (marketing-surface-rules) still bind the page around the demo; a looping demo needs the pause wcag-thresholds asks for.
- Fake content tells (content-authenticity, ai-default-tells) apply to the words a demo shows; filler bars at its edges are not lorem ipsum.
- Collaborators shown live in a demo follow presence-signals.
mocfaux-uiproduct-shotmarketingdemobento