Motion Presets Command Menu Block for React

So you can see it without a click. On load the menu is the Command with its track band drawn inline over a picture of the panel, in a plain shell that is not modal, so nothing is trapped, hidden or focused and the page around the preview keeps working. The header's field opens the real command dialog, modal, with its focus trap, Escape and focus return, and the inline copy stays closed until a reload. Both show the same Palette and share the block's state, so the preset set in the copy is the one the dialog opens on. In your app keep the dialog and drop the copy: the "in-place" state, the scrim with its shell and the Escape and blur effects.

Yes. The track's dot is a CSS transition of its inline position with the preset's transition-timing-function and transition-duration set inline: the easing rows use their cubic-bezier(), the duration rows use ease-out over that time, and the spring rows use a linear() easing list sampled from a damped spring with the row's stiffness and damping, stepped in 1/240 s and ending exactly on 1, so a bouncy spring overshoots the goal and settles. The row's time is where the spring settles within one percent. Browsers without linear() ignore the declaration and fall back to the default easing.

Only when you press something: an arrow key (or Home or End) that moves the highlight, the Replay button, Alt and R (Option and R on a Mac, read from the key's code so the Option character doesn't matter), and Enter, which also runs the track on the drawn panel behind. Moving the pointer over rows only changes which preset the band shows, so sweeping the list never makes the dot dart about. Each press runs the dot once, the status line is not touched by highlighting, and nothing repeats.

Nothing moves. The dot has no transition under prefers-reduced-motion, so it is at the goal at once, and the line under the track changes to a sentence that names the preset's time in words ("This preset takes 300 ms"), so the information that the animation would carry is still there. The curves in the rows are still pictures of the timing and carry no movement.

All of it. The nine presets and the chosen one are typed state in the block; nothing is saved and nothing leaves the page. In your app build PRESETS from your own timing tokens, write the choice to the selected animation in pick, and keep the track as the preview.

Yes. Type to search by name, timing or word ("ease", "spring", "bounce", "300"), the arrow keys move through the presets, Enter uses the highlighted one and Escape closes the menu and puts focus on the field; Tab reaches Replay. Ctrl or ⌘ K opens the dialog while focus is inside the block, and only then. The rows are options of a cmdk listbox; the block turns off its own fuzzy filter and lists the rows itself. The curves and the track are pictures and hidden from assistive technology; each row names its preset and its timing in words.

The copy shown on load docks to the top of the page at full width, so the keyboard does not cover the foot; the key hints go, the count stays, and the track band keeps its full width under the list. The real dialog keeps the Command dialog's own phone layout.