Windows.
The site shows the product as small windows laid on the sheet: a title bar with three dots and a mono label, and a body that does one thing, live. A visitor can pick one up and move it, which says “this is real software” better than a screenshot.
Playground.
The real window. Drag its title bar.
Trailing
Boundary plate
Drag the title bar to move it.
import { DraggableWindow } from "#/ui/site/draggable-window";
<DraggableWindow label="Boundary plate" className="max-w-[420px]">
{/* the mock */}
</DraggableWindow>Anatomy.
Title bar: three dots, then the label in mono uppercase, short enough to read at a glance; an optional trailing mark on the right, such as a live light. Body: a paper sheet with a hairline frame. Shadow: the one soft shadow on the site, because a window floats over the sheet rather than lying on it.
The drag is bounded by the window’s stage, so a window can be moved but not lost.
Best practices.
Do
- Show one thing per window: one part, one check, one result.
- Run the real product, or a faithful mock of exactly what it does.
- Label it in two or three words.
- Pause a window's animation while the pointer is over it.
Don't
- Do not fill a window with a screenshot.
- Do not put two windows' worth of ideas in one.
- Do not hand-roll a title bar; use DraggableWindow, or match its dots and label exactly.
- Do not let a window cover the copy that explains it.