- name
- stageshow
- description
- Build faux product UI that looks like a real product, as a still illustration or an animated demo with a cursor. Browser and app windows, dashboards, phones, notifications, terminals, bento grids and cursor walkthroughs, framed, masked and cropped the way a marketing page, feature card or docs hero needs them. Use whenever someone wants a fake or mocked UI, a product demo or walkthrough animation, a hero or feature-card illustration of an app, a product shot in the style of a polished marketing site, or an animated cursor doing things in an interface, even if they never say "faux UI". React and plain CSS.
- metadata
- version: 1.1.1
Stageshow
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
examples/hero-demodoes 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 in examples/ 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.