Theme 002 · Product UI as the stage

⌘K Keyboard Symphony

The product dims and blurs behind one oversized command palette; the typed query is the headline and chunky 3D keycaps get struck on the kick drum. Acme Pulse lives inside the palette, so finding the anomaly and deciding what to do are the same two keystrokes.

readability ●●●trust ●●○effort low

How many dashboards did you check today?

dash38 results

Checkout funnelviewed 09:02

Signups · dailyviewed 09:14

p95 latencyviewed 10:31

Error ratenot today

Active users+33 more

cmd⌘

1 · HOOK0:00–0:08

The K keycap slams down on the first kick (translateY 10 px, 80 ms) and the palette springs up from 96 % scale; the query types one letter per 1/8 note and the “38 results” counter ticks up on beat 4.

pulse

Acme Pulse↵

Watch every metric⌥W

Pulse settings

return↵

2 · REVEAL0:08 (drop)

On the drop the ↵ key strikes and the top result expands in place (height 82→170 px, back.out 1.4, 0.3 s) into the Acme Pulse lockup; two teal rings radiate outward from the palette on the next two beats while the app behind stays blurred.

Pulse ›checkout

ANOMALY · 09:44

Checkout conversion −18%

since 09:42 · after deploy #2231

YOUR CALL

Roll back deploy #2231⌥R

Acknowledge⌥A

Open deploy #2231⌥O

opt⌥

Rolled back · resolved in 6 min

3 · PROOF MOMENT0:12–0:32

The anomaly row drops in from the top of the list (y −24→0, power3.out 0.25 s) and the result rows FLIP-re-rank beneath it; the selection bar slides onto “Roll back” and the coral ⌥ R keycaps strike together on the snare. The human's keystroke is the decision.

Every metric. Every minute.

Acme Pulse

Start free↵

acme.example/pulse

return↵

4 · CTA0:36–0:45

The palette shrinks to three rows (FLIP, 0.25 s power3.out) as the tagline types in above it; the coral ↵ keycap is struck on the last downbeat and holds, glowing, under the “Start free” row.

COMPONENT KIT

Palette modal — search field + result list; the whole stage.
3D keycap HUD — ⌘ K, ↵, ⌥ R keys that physically press on the beat.
Fuzzy-match highlight — matched letters in coral as the query types.
Scope chip — “Pulse ›” shows we are now inside the agent.
Result row with shortcut hint — right-aligned ⌥ R / ⌥ A keys; the selected row carries a teal bar.
Half-visible last row — faded row that hints there is always more (+33).

MOTION · MUSIC

Beat-typed query — one character per 1/8 note (0.25 s at 120 BPM), caret blink 530 ms between phrases.
Result re-rank — rows swap places with FLIP, 0.25 s power3.out; the new top row lands exactly on a beat.
Keycap press — translateY 10 px + shadow collapse in 80 ms on the kick, spring release (elastic.out 1, 0.5) 0.2 s later.

WHY / RISK · ADAPT IT

Why: the command palette is the most recognisable “power user” gesture in modern software, and it makes human control literal: the anomaly only goes away when a key is pressed. Readable at feed size because it is one centred box. Risk: reads developer-only; soften with plain-language result rows and keep the typed query short.

Adapt to your product: replace the result rows with your own objects and actions, and let your product's name be the scope chip; the final ↵ is always your CTA.

References: Superhuman — building a remarkable command palette · Linear — behind the design refresh