Surfaces
FreeOne highlight that glides between choices, scroll-linked effects with a progress bar, and a gentle shader backdrop.
Scroll the article
Designing for the quiet middle
Most of a product's life is ordinary use. Motion should explain what changed and then get out of the way.
A scale-in card keeps its place in the reading order while it settles into view.
Effects follow the scroll position, so scrolling back reverses them. Nothing waits for a timer, and reduced motion shows everything at rest.
A clipped reveal wipes this panel in from the left as it enters.
The bar at the top fills with your position in this article.
Page appearance
Components #
Each component has its own page with a focused preview, installation, usage and API.
- Shared highlightA highlight that glides between the items of a list as focus or hover moves.
- Scroll effectsTools for effects that follow scroll position, such as progress and reveals.
- Shader backgroundA GPU-drawn animated background.
- Auto heightA container that follows its content's height, so a wizard step, a validation summary or a details panel grows and shrinks instead of snapping. The content changes at once.
- Celebration burstOne small burst of confetti when a real milestone completes: the first deploy, a finished setup, a paid invoice. Skipped under reduced motion; the words say what happened.
- StaggerChildren of a group arrive one after another on mount or when scrolled into view, so a new list reads in order.
- ShakeNudges a field or control sideways once to say “not accepted”, with an outline instead under reduced motion.
- Loading swapSwaps a loading placeholder for its content without a jump: the content fades in while the height eases once.
- Slide to confirmA deliberate commit: drag the handle to the end, or use the arrow keys, and it confirms; let go early and it springs back.
- Slide panelsSteps that move like pages: forward slides in from the right, back from the left, the height eases, and focus arrives with the new panel.
- Condensing headerA page header that makes room as you read: the title shrinks into a bar, the description folds away and a border appears, following the scroll.
- View transitionMoves between views without a cut: the old view fades or slides out as the new one comes in, with the View Transition API where available.
- Scroll aware fabThe main action kept in reach: it shows its label at the top and when scrolling up, and shrinks to its icon while you scroll down.
- Selection toolbarActions for the words you selected, where you selected them: the toolbar grows out of the selection and leaves with it; Alt+T reaches it from the keyboard.
- Drop overlayLets a whole area take dropped files: a clear target rises over the content while files are dragged in and names what will happen.