ui.plan.ai
Agent-generated UI streams.
01
Holographic workbench
- Visual
- A heads-up display floating in pure black. One frame is centered like a hologram, its click zones traced in luminous cyan. A spine of metadata typewrites beside it. A single status badge breathes through the promotion gates. No chrome — just the work, lit from inside.
- Desktop 16:9
- Wide HUD. 12% agent rail · 60% frame canvas · 28% metadata column · 1px status strip at the bottom. Faint vignette at the corners. The frame canvas is a hi-fi UI mock with click-zone outlines glowing cyan.
- Mobile 9:16
- Vertical stack: agent pill top · frame canvas in 16:9 letterbox · metadata column · status strip. Pillarbox bars are absolute black, indistinguishable from the page background.
- Loop
- 8 seconds, four beats. (0–2s) frame fades up, metadata typewriters in. (2–4s) click zones pulse 1 → 4. (4–6s) status badge crossfades needs_review → team_visible → promoted. (6–8s) the whole HUD dims to the loop seam.
- Palette
- Pure black · cyan-white strokes (#a5f3fc) · electric green status (#4ade80) · warm white text (#fafafa).
- Docs link
- Pill chip, bottom-center of the HUD, mono. Dimmer than the primary text. The only clickable element in the artwork.
02
Filmstrip in the void
- Visual
- A continuous filmstrip drifting through the void. Each cell is a tiny rendered agent UI; sprocket holes glow as luminous dots; the date ticks up between cells; a soft cyan halo bleeds into the dark.
- Desktop 16:9
- Strip rotated 5–8° toward the viewer, drifts left → right. 5–7 cells visible at any time. The leader margin runs ui.plan.ai/docs along its length like a printed reel ID.
- Mobile 9:16
- Strip vertical, drifts bottom → top. 3–5 cells visible. The leader runs up the left margin, type rotated 90°.
- Loop
- 12 seconds of constant-velocity scroll. No discrete beats — the loop point is invisible because nothing changes phase.
- Palette
- Pure black · cool white film edges · faintly warm overlay on cells · amber (#fbbf24) for the etched docs leader.
- Docs link
- Etched into the leader margin in mono, repeating with a centerdot separator: "ui.plan.ai/docs · ui.plan.ai/docs · ". The whole leader is the link target.
03
Constellation of agents
- Visual
- A star map. A faint 80px grid hangs in the void. Scattered glowing agent nodes labeled by slug; tiny frame-rectangles emit from each node along curved bezier paths toward a central hub — the workbench — which pulses gently on arrival.
- Desktop 16:9
- Hub anchored at the right third. 6–10 agent nodes scattered across left and upper. Several frames in flight at any time; trails decay smoothly.
- Mobile 9:16
- Hub at the bottom third. Nodes scattered above. Trails descend in soft S-curves.
- Loop
- 10 seconds. Asynchronous emission cadence per agent means there is always a frame mid-flight at the loop seam — the cut is invisible.
- Palette
- Pure black · cyan agent nodes (#22d3ee) · white frames with cyan trail · green hub (#34d399).
- Docs link
- Label below the hub, mono. Pulses faintly in sync with the hub whenever a frame arrives.