Command Palette Open
The palette drops a short distance into place with its results already filtering as it lands.
The animated component in this preview is rendered from the canonical file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useId, useRef, useState } from "react";
import {
AnimatePresence,
motion,
useReducedMotion,
type Variants,
} from "motion/react";
About this pattern
Power-user navigation, and the moment where motion has to get out of the way fastest: the palette appears under hands that are already typing. So the drop is short, the spring is damped well past the wobble threshold, and the field takes focus while the surface is still travelling — by the time it stops, the first keystroke has already narrowed the list. The rows begin arriving a beat before the palette settles, each a couple of frames after the last, which reads as a list that was there rather than one being built. Filtering afterwards uses AnimatePresence popLayout so a row that stops matching leaves the flow immediately and the rows beneath close the gap in the same frame, instead of stepping down after the fade.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Command palette
The palette drops in over the page with the first result already highlighted.