⚠️ Mobile is not supported yet.
Search for a command to run...
Primitives and components with serious attention to animation and design. Copy, own, ship.
Coffee brand demo with a sticky hero card and five rotating feature cards.
Animated toggle switch with a spring-driven thumb, smooth fill transition, and optional label.
Four labeled toggle switches showing common settings controls.
A set of layered sections of content—known as tab panels—that are displayed one at a time.
Rounded outlined tags with six built-in pastel variants and an optional stacked group layout.
A vertical stack of outlined icon tags using the six built-in color variants.
A stacked deck of team member cards that fans out on hover (desktop) or tap (mobile), each with an animated CTA pill and spring physics.
A stacked deck of team member cards that fans out on hover, each with a spring-animated CTA pill.
Scroll-driven word-by-word or character-by-character text reveal using Motion's useScroll and useTransform.
Word-by-word and character-by-character scroll-driven text reveal.
Animated dark / light mode toggle button with a spring-driven sun ↔ moon icon swap and optional View Transition reveal.
Animated dark/light mode toggle with spring icon transitions.
An effect that allows you to toggle the theme gradually.
An effect that allows you to animate elements with a tilt effect on mouse hover.
A spring-animated 3D tilt wrapper that tracks the cursor inside the element.
A card with 3D spring tilt, optional floating image, badge and radial shine on hover.
Three tilt cards showcasing badge variants, floating image and custom children.
An animated tooltip that shows contextual info on hover or focus and smoothly glides to the next element without disappearing between transitions.
Link tooltip that reveals a website preview card with title, description, image and favicon.
Links showing website preview cards on hover.
A typing text animation.
A hook that allows you to automatically adjust the height of an element based on its content.
React hook for controlled and uncontrolled component state.
A hook that allows you to get the data-state of an element.
A hook that allows you to check if an element is in view.
A hook that allows you to use a motion value state.
A highlight effect with smooth spring physics that tracks the active element across hover or click interactions.
Interactive highlight with velocity-based scaling effects.
A number display that animates the transition between values with a blur + slide effect, with a hook to throttle rapid updates.
Demo showing an animated number counter with blur + slide transitions.
A scroll-driven text list that snaps exactly to each item. The active item scales up with an optional prefix, others fade and indent — all animated with Motion springs.
Six items cycling with 'We Design' prefix — scroll to snap between them.
Two columns of tweet cards scrolling vertically in opposite directions with progressive fade at the edges.
Two-column vertical tweet marquee scrolling in opposite directions with progressive fade edges.
A video card with ambient blurred reflections and optional overlay styling.
A video carousel with animated slide transitions and playback controls.
A morphing SVG wave divider that transitions between sections. Supports scroll-driven morphing and ambient looping animation modes.
Demo showcasing scroll-driven and ambient wave dividers — as a page section divider, inside a card, and in both directions.
An effect that allows you to animate elements with a zoom effect on first view or load.