Overview

Miniature product UI: a believable interface, framed in its space, as one still or a short animation in which one thing happens. The viewer recognizes the screen and sees the thing happen.

The one idea

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:

• Too much. Real text in every row, numbers everywhere, everything packed. The more detail, the more it looks generated.
• Wireframe. Two gray blobs and a button. Built too small, or stripped of what made it recognizable.
• Boxed. A whole window shrunk into a card with even margins: a screenshot pasted in, not a product shot.
• Flat. Every object the same weight in the same bordered card. The eye has nowhere to land.
• Bland. A gray window with a cursor, whatever the brief said. The brief's look and energy (a blueprint, glass over color, a Dynamic Island, a mascot) are the point; take what it asks for and build it to the rules, as hero-demo does with its typed popup and terminal satellite (a satellite is a smaller second object, a receipt, phone or detail card, straddling the hero's edge).

The fix: a full, structured screen in quiet grays, real words only on what the story is about, placeholder lines for the rest, room to breathe, a crop that puts the eye where the story is. Simplify the words, not the context. An empty corner, a void under a list, rows spread to fill a pane, a window floating on a plate (a backdrop or tinted field behind it): unfinished, not calm.

These are authored illustrations, not browser automation: a.click() draws the cursor pressing, a.set() changes the scene.

How hard to press

Build it the way a product designer builds a launch page they will be judged on. The gold examples below are the bar, not a reference: if yours is the emptier, flatter or smaller one beside the closest gold, that is the first fix. Then look at the frame the way the most exacting designer you know would, the one who screenshots the one wrong thing and sends it back with "what is this?": a dot off its avatar, a unit on its own line, a grabber under the island, copy touching a card. If you can picture that screenshot, you have found the next fix.

Examples

Film the closest one before you start: node scripts/mock/film.mjs "http://localhost:3001/mock/capture/<gold>" --select '#example' --still --out gold.png, with pnpm dev:ui running from the levenium root. The gold examples are the quality bar; product studies are for borrowing an interaction, never another product's identity; specimen sheets are catalogs, not compositions. Each one lives in apps/ui/app/components/mock-docs/examples/<id>/index.vue and plays at /mock/<id>. The bad/good pairs in apps/ui/app/components/mock-docs/teaching/ (Teaching pairs, shown at contrasts) are for diagnosing a problem; the bad halves are never starting points.

Gold

Need	Example	What to learn
Still or feature card	static-card	Quiet hierarchy, a hard crop, one satellite, real words only on the selected customer, its neighbors and the total
Dark still	dark-bento	One signal said once; album art keeps it a music app
Animated hero, a gesture	hero-demo	Five beats, named targets, an annotation, a terminal coming forward
Choreography, no cursor	payout-flow	Slow overlapping arrivals, reading time, a payoff that holds
Content changing in place	choreography	Retained tracks, soft masks, dependent timing
AI answer	ai-chat	The question sent, Thinking, the answer streaming in with its height, sources last; no sparkles, no purple
AI with cards	ai-cards	A multiple-choice card answered and kept as the record, a card of options opening in the thread, booked from its own button
Form validation	form-error	An error on the field that caused it, cleared by fixing it, then the button confirms on itself
Drag to reorder	reorder	A row lifted by its grip, the others making room, dropped into place
Chart scrub	chart-scrub	A hairline and dot that follow the pointer, the headline value rolling to the day under it
Edit in a table	table-edit	A cell edited in place, then the total it feeds rolls a beat later
Loading to content	loading	A skeleton at the content's own geometry, rows resolving top to bottom, real chrome throughout
Dark hero	dark-hero	Depth from surface steps on black, one lit color, a status that changes on its own pill
Live collaborators	presence	Each person one color everywhere, names riding their cursors, work shown in the doc's own marks
System story	subscriptions	A chip flies into a row, MRR rolls, a second scene is the reset
Close-up	close-up	One control at 1.4x with its window's chrome, the row whole, a large cursor to match
Many of one	many-of-one	A grid of one thing off every edge, one tile in focus by depth, the only one with words
Fade crop	fade-crop	A window fading out at its foot, over filler, instead of running off an edge
Panel over product	panel-annotation	A settings panel over the product's margin, one leader from the setting to what it changed
Overlapping windows	overlap	A card in front of a window, its edge on the window's sidebar line
Stacked cards	stacked-cards	Two components at one width, a small gap, the lower one off the bottom
Opposite corners	opposite-corners	A bento tile: copy bottom-left, the product hung from the top-right corner
Tilted stack	tilted-stack	A loose pile of paper, small alternating angles, only the top card has words
Corner chip	corner-chip	A small chip centered on a window's corner, half outside
Monochrome	monochrome	Other companies' products in a row, grayscale, faded at the foot
Row of windows	window-row	Sessions side by side at one height: focus by depth, neighbors cut by the stage, only filler cropped
Window and phone	device-pair	A dashboard and a lock screen telling one event; the phone straddles over margin, never over the figure
Related objects	story	An invoice, a plan, a connector, rolling totals
Calendar drag	calendar	A populated week, one focal event, a measured pickup
Free dragging	freeform-drag	Grab offset, a measured grid, a drop slot that snaps
Phone app	phone-touch	A card opens into its screen as one object, and the loop folds back
Dynamic Island	dynamic-island	One black shape, its content a separate layer
Messages	messages	Composer, typing, receipts, a bubble's lifetime
Cursors	cursors, cursor-morph, cursor-resize	Five styles, element-driven kinds, resize edges and corners, no cursor at all
Annotations	annotations	Leaders, dimensions, flows and a moving target; Annotations
Feature grid	bento	One hero, one window, a stat, an object, a diagram
Dark ruled grid	ruled-bento	Shared rules and technical imagery
Consumer grid	staggered-bento	Offset tiles, graphic art, physical objects
Image-led hero grid	hero-grid	Different grounds and materials composed as one picture
Upload	upload	A file dragged in from the desktop, an upload row with progress that settles as a file row
Share	share	A share popover over a document: an email becomes a chip, a role menu, a person added to the list
Swipe	swipe	A phone swipe to archive: press, swipe, a throw at the finger's speed, the gap closes

Product studies

Recognizable products (Figma, Linear, Slack, Raycast, Finder, Spotify, Notion, Gmail, Google's apps, Office, Wikipedia, Telegram, iMessage): read Product studies first. Borrow the interaction, not another product's identity.

Need	Example	What to learn
Design tool	figma	Canvas selection, a color picker, a second cursor
Issue tracker	linear	Command menu and assignment
Chat	slack	Messages, a reaction, a thread reply
Launcher	raycast	Search and clipboard history over a blurred desktop
Files	finder, finder-glass	Quick Look over a file list; a file moved into a folder; the same window in frosted glass
Music, dark	spotify	A dark desktop app with album art
Docs and editors	notion, google-docs	A slash command; a comment and its reply
Email	gmail	Hover actions, archive, an undo toast
Calendar, real app	google-calendar	Drag to create an event, the quick-create popup
Office	powerpoint, excel	Slide editing; AutoSum and a chart
Browser page	wikipedia	Search suggestions in a browser
Phone conversations	telegram, imessage	Native chat apps on an iPhone

Specimen and reference sheets

Catalogs of parts and grounds, described in Kit (Specimen sheets). Look up a part here; compose from a gold example.

Need	Example	What to learn
Kit specimens	chrome, phones, controls, buttons, cards, parts, kit-extras	Every frame and part
Glass	glass	Frosted surfaces over a color field
Backgrounds	backgrounds	One interface over twenty grounds; Backgrounds
Logos	brand-marks	Real marks, optically sized, on light and dark; Brand marks
A product's look	looks	Type, shape and color working together

The kit

The kit lives in layers/ui/app/components/mock/; import everything from @/components/mock. It needs only Vue: the lucide icons MockIcon draws (and MockField and MockChip use) are vendored at lucide 0.468.0 in core/lucide.ts; each part imports its own CSS. It does the parts that are hard to get right by hand and leaves the product's look to you. Kit has every part's props, slots and rules; read the entries for the parts you use.

• The stage. MockStage: design size and scale-to-fit, compact, scene state, playback, the look, the cursor. The scene goes in its scoped default slot, <template #default="{ s, rect, layout }">. The script gets an Act (set, wait, move, click, type and the rest: Kit, Act).
• Frames. MockWindow, MockPhone with MockLockScreen and MockNotification, MockKeyboard, MockThread with MockBubble, MockStamp, MockReceipt. Real geometry; never draw a window, device or bubble by hand.
• Motion. MockCollapse, MockRoll, MockSwap, MockCount, MockConnector, MockFly, MockFollow, MockStates, MockStream, MockPopover, MockScroll, MockCamera, MockExpand. They handle the frames a cold hand gets wrong.
• Small parts. MockBar, MockText, MockRow (every list is made of it), MockCard, MockDivider, MockAvatar, MockPin, MockIcon, MockMenu, MockField, MockDraft, MockButton, MockSegmented, MockToggle, MockTabs, MockBadge, MockChip, MockKbd, MockBrandMark, MockCode, MockChart, MockToast. Quiet starting points; restyle to the product, never reshape a kit part's geometry from outside.
• Use the kit part, never a lookalike. Before writing a class for a button, card, tab, avatar, field, toast, badge or shortcut, check this list: a hand-built one is where uneven padding, squeezed labels and unsized text come from. Restyle the kit part with its props and tokens instead. When a button's label or icon changes, change it on the same MockButton, which animates it; never swap in a second element (Motion, Story).
• stage/mock.css: tokens, looks, edge fades, chrome, phones, keycaps.

The references

Framing: the framing rules and the layout table. Craft: the still frame (restraint, type, spacing, icons, color, chrome). Motion: story, loops, pace, the cursor and drags. Verify: the checklist with a you-see / you-do table. Rehearse: how to film, and the film lines that are never intentional.