Motion primitives for React

Wrap a product shot, pricing tier or profile in TiltCard and it leans toward the cursor in 3D while a soft highlight follows the pointer; tilt angle and glare are props, and it stays flat on touch screens and under reduced motion.

Three buttons in one install: a Button that dips when pressed (with an opt-in Material ripple), a StatefulButton that rolls its label through loading, success and error, and a MagneticButton that drifts toward the pointer. Every size gets an invisible 44px hit area on touch screens.

Three call-to-action buttons for moments that deserve more than a click: an arrow tile that stretches across the button, a press-and-hold button that fills up before it fires, and a swipe-to-confirm track for actions nobody should trigger by accident.

Loops logos, testimonials or tickers without end in any of four directions on a plain CSS keyframe animation, with adjustable speed and gap, a soft fade mask at both ends and an optional pause while the pointer rests on it.

Tabs, TabsList, TabsTrigger and TabsContent in pill, segment or underline styles; the active marker slides to the chosen trigger on a slightly weighty spring, hidden panels stay in the HTML for crawlers, and triggers grow to a 44px hit area on touch screens.

An on/off control exposed as role="switch": a heavy spring carries the thumb across, it squashes a little while held, it shakes if pressed while disabled, and on coarse pointers the hit area grows to 44px. Label text is optional.

A labelled form field with left and right icon slots: setting error shakes it, turns the border red and blurs a message in underneath, while success draws a check mark at the right edge. Works controlled or uncontrolled, with a classNames hook for every part.

A dropdown for choosing one value from a short list. The standard Select pops its list out of the trigger with a springy pinch and flips upward near the bottom of the screen; MorphSelect grows the trigger itself into the list. Both close on Escape.

A select you type into: the input is the trigger, items filter by label or extra keywords across groups, arrow keys move a sliding highlight, and the list springs open in a portal that holds its side while closing. Value, open state and query are controllable.

A role="checkbox" control whose tick is drawn as an SVG stroke, that dips when pressed and shows a dash for the mixed state through indeterminate. Takes an optional label and aria-describedby for error text, and grows to a 44px hit area on touch devices.

RadioGroup and RadioGroupItem for picking one option: the filled dot travels from the old choice to the new one through a shared layoutId, items dip when pressed, groups run vertically or horizontally, and every item gets a 44px touch target.

A mobile-style sheet you drag between snap points (screen fractions or auto height); a fast flick or long pull dismisses it. It portals to the body, pins the page so iOS cannot scroll underneath, and closes on Escape or a scrim tap.

Wrap a scrollable feed to get the gesture from native apps: dragging down from the top meets growing resistance, the indicator shows pull, release and refreshing states, and onRefresh can return a promise that keeps the spinner up until it resolves. Mouse drags work too.

Put it around a list of links or menu rows and a soft highlight follows whichever item is under the pointer, sliding from row to row through a shared layout animation and blurring in or out as you enter or leave the list.

Vertical navigation where the active marker swings out on a curve to reach the newly chosen item rather than sliding straight down, bowing wider and landing heavier on longer trips. Items can be links or buttons with icons; selection is controlled or uncontrolled.

An app-shell sidebar in shadcn's shape (provider, header, groups, menus, sub-menus, rail) whose nested menus open with a clip reveal. On desktop it collapses to an icon strip or off-canvas with Ctrl/Cmd+B; under 768px it becomes a sheet that traps and returns focus.

A slim navigation rail of short tick marks, modeled on the Codex app: hovering swells the ticks near the pointer into a pyramid and floats a card with the destination's label and details. Runs vertically or horizontally and accepts your own preview renderer.

A floating toolbar after the macOS dock: Dock, DockItem and DockSeparator group icon actions on a frosted surface, and a highlight slides to whichever item is marked active. Items render as buttons or wrap links you supply.

Short labels for icon buttons and clipped text: shown after a brief delay on hover or keyboard focus, at once if another tooltip just closed, and on tap for touch users. A fixed portal keeps overflow from cutting it off.

A right-click menu assembled from parts (items, checkbox and radio items, labels, separators, shortcuts) that opens from the exact spot you clicked, or long-pressed on touch, with a highlight that slides between rows, arrow-key movement and type-to-jump search.

Two popovers with different personalities: a gooey one that melts away from its button via an SVG filter, a sticky neck stretching and then snapping, and a morph one that unclips from the trigger's nearest corner as a single surface. Both can be controlled.

A modal for multi-step flows, inspired by the Family app: change viewId and one panel resizes to fit the next screen while the old content blurs out and the new content blurs in. Anchors to the bottom like a sheet or sits centered.

A dialog that opens by growing out of its own middle: the full panel starts clipped to a small rounded point at the center and expands to every edge, then shrinks back on close. Traps Tab, closes on Escape or backdrop, and hands focus back to its trigger.

Five ways to put headlines and labels in motion: a glyph scramble, a Dia-browser-style colored sweep that cycles the last word, a word or letter rise-in, a shimmering gradient for loading copy, and a departure-board letter cascade for text that changes.

Two ways to animate figures on dashboards and pricing pages: AnimatedNumber eases up to its value, optionally once it scrolls into view, and NumberTicker spins each digit like an odometer with prefix, suffix and en-US grouping.

A small status pill for neutral, info, success, warning, danger and loading states. Each state brings its own icon, changing status rolls the icon over, and a soft breathing ring (on by default while loading) draws the eye. Comes in two sizes.

Buttons and slots that change their label or icon in place, for copy-to-clipboard, follow/unfollow or play/pause controls. ActionSwapButton steps through items on click; ActionSwapText and ActionSwapIcon swap content you control using blur, roll or per-letter cascade transitions.

Notifications that gather into a compact stack in any of six screen positions: toasts spring in, change status in place (loading to success or error), leave with a sideways swipe or close button, and can carry an action. A useAnimatedToastStack hook handles ids, timers and promises.

A light/dark switch for next-themes that animates the whole page change with the View Transition API: wipe the new theme in as a rectangle from a corner, center or bottom, grow a sharp or blurred circle, or open it like window blinds.

An FAQ-style list where one row opens at a time: the open row breaks away from its neighbours with a bouncy gap and rounded corners, its content expands to its measured height, and rows can carry icons. Collapsible, controlled or uncontrolled.

An off-canvas panel for filters, carts or settings that springs in from either side of the screen over a blurred backdrop, stops the page behind it from scrolling, and closes on Escape or a backdrop click unless dismissable is turned off.

Scroll tools for long pages: SmoothScroll wraps Lenis and shares position, progress and velocity, while ScrollProgress, Parallax, ScrollTo and ScrollReveal add a reading meter, depth, anchor jumps and entrance effects. Each falls back to native behaviour under reduced motion.

Five slider designs on one shared engine: stepped dots, a thumbless liquid fill, equalizer bars, a speed-reactive value bubble and a scrolling ruler. All handle dragging, arrow, Page and Home/End keys and controlled values, with 44px touch targets on coarse pointers.

An iOS-style scroll wheel: options sit on a 3D drum with its own momentum physics, so a flick coasts and snaps to a row with a soft bounce. Drag, mouse wheel or arrow keys pick; line several up for dates or times. Optional tick sound.

Animated SVG charts in the shadcn style with zero chart-library dependencies: area and line charts with monotone, linear or stepped curves that reveal left to right (and again when the range changes), grouped, stacked or horizontal bars that grow from the baseline, donut and pie slices that sweep in clockwise, and radial progress rings. Every chart shares one tooltip with dot, line or dashed indicators, arrow-key reading, a legend and a screen-reader table. Colors come from the theme's --chart-1…5 tokens, validated for color-blind separation; reduced-motion safe.

Drag-to-reorder list where only the grip handle lifts a row, the lifted row rises with a soft shadow and slight scale while its siblings spring out of the way, and a full keyboard path (Space to pick up, arrows to move, Space to drop, Escape to restore) announces every move to screen readers. Generic over any item with an id, controlled/uncontrolled, reduced-motion safe.

Keyboard-first WAI-ARIA tree with spring-rotating chevrons, height-morphing nested groups, indent guide lines, a selection pill that glides between rows via shared layout, typeahead, and controlled or uncontrolled selection and expansion.

Horizontal or vertical split panes with pointer-captured drag handles, per-panel min/max sizes, collapsible panels that spring shut below a threshold, double-click reset, nestable layouts, and keyboard-resizable separators.

Before/after comparison whose top layer is clipped by a spring-smoothed clip-path divider, with a draggable knob, optional hover-follow mode, edge-fading labels, keyboard slider control, and images or any React node on either side.

Vertical changelog timeline whose connector line draws with scroll progress, with dots that pop in, content that slides into view, done/current/upcoming states, a pulsing ring on the current step, and a static line under reduced motion.

Chip field where Enter, comma or Tab adds a tag that springs in while the rest glide aside via shared layout, with Backspace-twice removal, arrow-key chip navigation, a filtered keyboard-navigable suggestion combobox, max tags, duplicate prevention and a shake on validation rejection; controlled/uncontrolled, reduced-motion safe.

HSV color picker with a 2D saturation/brightness area, hue and optional alpha sliders whose thumbs spring to a clicked point and follow drags 1:1, a validated hex field, preset swatches with a gliding selection ring and a ColorPickerPopover trigger mode; keyboard accessible, dependency-free color math.

Star rating radiogroup with hover preview fill, a staggered spring bounce on pick, optional half-star precision from the pointer position, click-to-clear, arrow/Home/End keyboard control, custom icons and a read-only display mode; controlled/uncontrolled, reduced-motion safe.

Spinbutton with −/+ controls whose digits roll in the direction of change, press-and-hold repeat that accelerates, direct typing, arrow/Page/Home/End keys, min/max/step with a shake when pushed past a bound, and Intl.NumberFormat formatting; controlled/uncontrolled.

Page navigation with sibling and boundary ellipsis logic, a spring-gliding active pill, numbers that roll as the window shifts, arrow-nudge prev/next controls, and a compact dots variant.

Copy-to-clipboard button with a blur-and-scale copy-to-check icon morph, optional rolling Copy/Copied label, execCommand fallback, error state, and screen reader announcements.

Swipeable slide carousel driven by one motion value: momentum drag that snaps to slides with rubber-band edges, seamless loop, responsive slidesPerView, dot or thumbnail indicators with a gliding active pill, and autoplay with a progress bar that pauses on hover, focus or hidden tabs.

Textarea Markdown editor with an undo-safe formatting toolbar and shortcuts, list continuation and Tab indenting, a floating selection toolbar, Write/Preview/Split tabs with a gliding indicator, and a built-in safe renderer that outputs React elements, never raw HTML.

Onboarding tour that dims the page and cuts a rounded spotlight around each target, gliding and resizing it from step to step, with a card that flips and shifts to stay in the viewport, a gliding progress dot, Back/Next/Skip/Done, targets scrolled into view, Escape to close, trapped focus that returns to the trigger, controlled/uncontrolled open and step, and reduced-motion safe.

Overlapping avatar stack that springs apart on hover or keyboard focus, with name tooltips, online/away/busy presence dots, an optional is-typing pulse ring and a +N chip that opens the full list in a popover, plus LiveCursors: collaboration cursors with colored arrows and name labels that spring toward container-relative positions.

Composable WAI-ARIA dropdown menu that springs open with a scale and fade from the trigger side, with a gliding active-row highlight, checkbox and radio items, icons and shortcuts, a destructive variant, hover-intent submenus, typeahead, full arrow/Home/End/Escape keyboard support and viewport-aware flipping.

Hover card that springs out of its trigger after an open delay and stays open while the pointer travels into it; also opens on keyboard focus, closes on Escape or blur, and flips and aligns on any side to stay in the viewport, while touch taps simply follow the link.

Keyboard key chips and key combos that render ⌘ or Ctrl for the visitor's platform without hydration mismatch, in two sizes, with a spring dip when pressed and an optional listen mode that animates each key as the real one is held.

Composable modal Dialog and AlertDialog that portal to the body over a blurred backdrop, scale the panel up and exit faster, trap focus, close on Escape, lock page scroll without layout shift and hand focus back to the trigger, with controlled/uncontrolled open, a bottom-sheet layout below sm, an alertdialog that ignores outside clicks and focuses Cancel first, and an optional type-to-confirm field that shakes when Delete is pressed too early.

Inline alert banner in info, success, warning and destructive tones that keep contrast in light and dark, with icons, a title, description and optional actions, polite status or assertive alert roles by severity, and a dismiss that fades the banner and collapses its height so the content below slides up, plus an AlertStack whose gaps collapse with it.

Progress indicators in three forms: a linear Progress bar whose fill springs smoothly with an optional label and rolling percentage, a ProgressCircle ring drawn around a centered value, and ProgressSteps segments that fill in sequence; indeterminate modes slide or spin, every variant exposes role="progressbar" with value text, and reduced motion swaps movement for an opacity pulse.

Loading placeholders: Skeleton blocks in rect, circle or text shapes with a gradient shimmer, SkeletonText paragraphs with a natural short last line, and SkeletonSwap, which cross-fades from skeleton to real content in one grid cell and holds the last measured height on reload so nothing jumps; reduced motion swaps the shimmer for an opacity pulse.

Empty-state block with an icon or illustration slot, title, description, primary and secondary actions, three sizes and an optional dashed border; the default SVG art (a floating document stack or a search lens) draws in and drifts gently, and the whole block staggers in when scrolled into view.

Composable breadcrumb trail with a hover underline that slides in from the left, links that render through your router via a render prop, and a data-driven items mode whose maxItems collapse folds middle crumbs into an ellipsis that either expands them inline with a spring layout reflow or opens a small keyboard-navigable menu.

Form-ready SegmentedControl with radiogroup semantics, a raised thumb that glides between options on a shared-layout spring, icon and/or label options, sizes, full-width layout, disabled options, arrow-key roving where selection follows focus and an optional hidden input for forms, plus a ToggleGroup of spring-pressed buttons in single or multiple mode.

Searchable multi-value select whose field is the combobox input: picked options ride as chips that spring in, glide aside and collapse into a "+N" overflow chip, over a grouped listbox with draw-in check marks, a gliding active row, Select all / Clear actions, a max limit that shakes on refusal, optional creatable options, full keyboard control and controlled/uncontrolled string[] value.

International phone field with a searchable country picker (emoji flags, dial codes, ~45 built-in countries or your own list), per-country grouping applied as you type without losing the caret, E.164 output with { country, national, valid }, paste-a-full-+number country detection, and a blur-time length check that shakes the field with an inline error.

Password field with an eye icon that morphs to eye-off, a caps-lock warning, a segmented strength meter whose bars spring-fill and recolor with a sliding Weak/Fair/Good/Strong label from a length-weighted NIST-style heuristic, an optional requirement checklist whose items check off with a draw-in tick, and onStrengthChange.

Multi-line companion to Input with the same label, error shake and message API plus a description line, auto-growing between minRows and maxRows through a measured height transition before it scrolls behind a thin themed scrollbar, and an optional maxLength counter that shifts to warning then destructive near the limit and shakes when a keystroke or paste is refused.

Click-to-edit text that turns into an input or auto-growing textarea in the exact same box (no layout jump) on click, Enter or F2, saves on Enter or blur and cancels on Escape, blocks saves with a validate message and shake, and runs async onSave with a pending spinner, rollback plus error on rejection, and a drawn check-mark flash on success.

Composable toolbar toggles: a standalone aria-pressed Toggle plus a shadcn-shaped ToggleGroup of ToggleGroupItem children in single or multiple mode, with default/outline variants, sm/md/lg sizes, one roving tab stop with arrow/Home/End keys, a pressed surface that glides between items in single mode and pops per item in multiple mode — the composable, icon-first counterpart to SegmentedControl's radiogroup.

Plain, shadcn-compatible Card building block (CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter) with default, outline, elevated and interactive variants — the interactive one lifts on hover and dips on press and becomes a whole-card link or button via asChild — plus an optional height-morphing CardExpandTrigger/CardExpandContent disclosure.

Native-scrolling container that keeps wheel, touch momentum and keyboard scrolling but hides the browser bar behind an overlay thumb (vertical, horizontal or both) that fades in on hover or scroll and out when idle, drags, pages on track click, and pairs with distance-scaled edge fade masks, all sized by a ResizeObserver.

Unstyled disclosure primitive (Collapsible, CollapsibleTrigger with asChild, CollapsibleContent) with controlled or uncontrolled open state, an in-flow height morph that fades content in and closes faster than it opens, aria-expanded/aria-controls wiring, an inert closed panel and a reduced-motion snap.

Calm shadcn-compatible accordion built on Collapsible (Accordion, AccordionItem, AccordionTrigger, AccordionContent) with type single or multiple, collapsible, controlled or uncontrolled value, a spring-rotating chevron, height-morphing panels and Arrow/Home/End focus movement between triggers; the quiet counterpart to the springy Bouncy Accordion.

Desktop-app menubar (File / Edit / View) on the WAI-ARIA menubar pattern where every menu renders into one shared floating panel, so once a menu is open hovering another title or pressing Left/Right switches instantly while the panel glides and resizes to fit, with Kbd shortcuts, checkbox and radio rows, separators, disabled items, hover-intent submenus, typeahead and a spring-gliding active row.

General-purpose badge in default, secondary, outline, destructive, success and warning (soft or solid), three sizes, with an optional pulsing status dot or icon, removable filter chips whose x plays an exit before onRemove while siblings glide into the gap, and a count mode whose digits roll in the direction of change and cap at 99+ (complements AnimatedBadge, which animates status transitions).

Multi-step flow with an active ring that glides between step markers, connectors that fill as steps complete, panels that slide in from the direction of travel while the container morphs to each panel's height, and an async per-step guard that shakes the marker when it refuses. Linear or free navigation, controlled/uncontrolled, reduced-motion safe.

Month-grid calendar with a selection pill that glides between days, directional month slides, single, range, week or multiple-day selection across one or several side-by-side months, ISO week numbers, per-day labels, min/max and per-day disabling, full keyboard grid navigation, a date field, a two-month range field with presets, a booking calendar with nightly prices, time and date-time wheels and a month picker. Locale-aware, reduced-motion safe.

Two data tables: a virtualized Table that renders only the visible rows of large datasets, with sorting, row selection, resizable and movable columns and editable cells, and a paginated DataTable with filters and expandable rows. Both can turn rows into cards on narrow screens with mobileLayout="stack".

Twenty-one GPU shader fills from Paper Design behind one typed variant prop, from mesh and grain gradients to warp, water, voronoi, metaballs, god rays, dithering and noise fields. Animated variants hold still when the visitor prefers reduced motion.

A horizontal carousel that bends items around a cylinder: concave makes the middle item smallest and enlarges toward the edges, convex does the reverse. Roll it by drag, mouse wheel or arrow keys, snap to items, or let it auto-rotate until someone touches it.

Seventeen loading animations behind one Loader component: comet, helix, metaballs and Newton's cradle next to classic spinners, bouncing dots and bars, a dot matrix, dithered noise, morphing shapes, a text scramble, a percent counter and five ASCII spinners. One size prop, currentColor, role="status".