Color Picker Swatch
A ring grows around the chosen swatch and travels to the next one, while the preview eases to the new color.
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 {
useId,
useRef,
useState,
type KeyboardEvent as ReactKeyboardEvent,
} from "react";
import { motion, useReducedMotion } from "motion/react";
About this pattern
A palette answers two questions at once: which one is chosen, and what choosing it does. So a single ring is shared across the whole row — it grows into place on the first render and then travels between swatches on a damped spring, which makes the change legible even when the two colors are close neighbours. The preview above crosses to the new hue on a CSS transition rather than an animation frame loop, because color is a state change and not motion; easing it over a quarter of a second is what stops a palette from strobing while someone walks it with the arrow keys. Selection follows focus, so the keyboard produces exactly the same motion as the pointer.
Where it shows up
Screens we drew to show where this motion usually sits. Illustrations, not captures of any product.
- Document page
A swatch row where the active color is marked by a surrounding ring.
Related patterns
- Currency Input FormatSeparators fade in where they belong as the amount groups itself, and the caret holds its place.
- Date Picker OpenThe calendar unfolds from the field and the days arrive in a wave, today already marked.
- Field Reorder DragA row lifts onto a shadow while the rows around it part to make room — by pointer, and by arrow key from a grabbed state.