RZ · Portfolio · 2026

← Back home

Design note · Optical command palette

One command, in focus

A ⌘K palette where the list stays soft and only the active command is pulled into focus — magnified and sharp under a glass band. Type to filter, then arrow up and down and watch the focus settle.

Jump to Selected WorkGo
Open Refractive Lens — design noteLab
Read the colophonGo
Email ryan.runsheng@gmail.comMail
Copy link to this pageCopy
View source on GitHubCode
Toggle reduced motionPref
Switch to dark paperPref
  • Jump to Selected Work
  • Open Refractive Lens — design note
  • Read the colophon
  • Email ryan.runsheng@gmail.com
  • Copy link to this page
  • View source on GitHub
  • Toggle reduced motion
  • Switch to dark paper

What I decided, and why

Attention is the interface
A command list asks you to read everything to find one thing. Here the list stays soft and the active row is the only thing in true focus — magnified, sharp, edged with a thin spectrum. Navigating isn't highlighting a row; it's pulling a command into focus.
Optics, not a highlight bar
The whole list is one WebGL texture under a depth-of-field shader. The focus band samples sharp and magnified while the rest is genuinely defocused, so the active command sits on a different focal plane — the way your eye actually resolves one line at a time.
The component still works
It's a real palette underneath: a focused input, subsequence fuzzy matching, ↑/↓ to move, esc to clear, and a hidden listbox so screen readers get the same list. The craft rides on top of a thing that does its job.
Glass with weight
The focus band chases the selection through a critically-damped spring, so it lags and settles rather than snapping between rows. A soft sheen and a contact shadow seat it on the paper — no glow, no gradient.