Animated React components, AI agent interfaces and app blocks built with Motion and Tailwind CSS, with ten switchable design styles.
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.
Composable Popover, PopoverTrigger, PopoverContent; the panel oozes out of the trigger through an SVG goo filter with a liquid neck, crisp content fading in on top. Click or hover, controlled or uncontrolled.
Composable MorphPopover, MorphPopoverTrigger, MorphPopoverContent; the panel is laid out full size but clipped to the corner nearest the trigger, then unclips as one piece — a single-surface morph with a drop-shadow that hugs the shape. Side/align aware, controlled or uncontrolled.
Prediction market trade ticket with buy/sell modes, outcome prices, rolling amount entry, quick add chips and trade states.
Codex app-inspired navigation rail with compact ticks that form a hover pyramid and reveal a floating destination preview.
Pricing block with a monthly/yearly toggle whose pill glides between options beside a Save 20% badge, prices that roll digit by digit to the new period, three plans with a highlighted Popular card, feature lists with check and cross rows, per-plan CTA buttons, Intl currency formatting and cards that stack based on their own container width.
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.
An interactive project folder that opens its file fan on hover or focus, expands into a focus-managed overlay, then retraces the complete path when closed.
An auto-growing agent composer with prompt actions, model selection, keyboard submission, and animated send and stop states.
Suggested prompt cards or chips (`PromptSuggestions`) that stagger in on first reveal, filter and highlight as the composer text changes via `query`, reflow with spring layout, move with arrow keys and hand the chosen prompt to `onSelect` — built for empty-chat welcome screens above a PromptInput.
Native-feeling pull-to-refresh container with drag resistance, threshold feedback and async refresh handling.
Single-select choice control with a gliding layoutId indicator dot and spring press feedback.
Grab the thumb and a value bubble pops out of it. The bubble tilts and squashes with how fast you drag, then settles upright.
No thumb. The fill slides behind a rounded liquid cap, and the label flips color wherever the fill covers it.
Tick dots, and a vertical-bar thumb that bounces as it lands on each step.
The needle stays put and the scale scrolls under it. A flick keeps going and settles on the nearest tick. Fractional steps read at the step's own precision.
Equalizer bars peak around the handle and drop back once it passes, so the value moves down the track as a wave.
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.
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.
Public product roadmap with Planned, In progress and Shipped columns or a quarter timeline, where cards fly between the two views through shared layout, re-sort by votes as you upvote with a direction-aware rolling count, carry tag badges, and can be filtered by status.
Wrapper that drifts its children at a speed factor as they cross the viewport, on either axis. Reduced-motion safe.
Reading-progress indicator — fixed bar or circular ring — driven by scroll position via useSmoothScroll, with spring smoothing.
Reveals its children with a spring slide and blur as they enter the viewport, once or every time. Reduced-motion keeps a fade.
Button that smooth-scrolls to a target (offset, selector or element) via the active SmoothScroll provider; reduced-motion jumps instantly.
Smooth-scroll provider over Lenis with a useSmoothScroll hook exposing scroll offset, progress and velocity. Reduced-motion safe.
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.
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.
Composable primitives (MorphSelect, MorphSelectTrigger, MorphSelectValue, MorphSelectContent, MorphSelectItem) where the trigger morphs into the panel via a shared layoutId — one continuous surface that grows open and shrinks back, never detaching.
Composable primitives (Select, SelectTrigger, SelectValue, SelectContent, SelectItem); the panel pinches off the trigger and separates, with staggered items. Position-aware (opens upward when needed).
Account settings with a side nav whose pill glides between Profile, Notifications, Appearance and Billing, sections built from inline edits, switches, selects, toggle groups and usage bars, a draft that slides up a sticky unsaved-changes bar with Reset and an async Save that shakes on failure, and a danger zone behind a type-to-confirm dialog.
Canvas shader backgrounds (mesh gradient, grain, warp, waves, voronoi, dot orbit and more) with a single typed variant prop. Reduced-motion freezes animated variants.
A pill that glides between hovered items via motion's shared layout, with blur enter/exit.
Composed sign-up form that flags a field only once it is left, then clears the moment it is fixed, with a length-weighted strength meter, password reveal and an animated submit lifecycle.
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.
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.
KPI tiles whose headline numbers roll digit by digit to each new value, with Intl number, currency, percent and compact formatting, a delta badge with an up or down arrow toned by whether the move is good news, an inline sparkline that redraws when its data changes, a period caption, a skeleton loading state and a container-query StatGrid layout.
Service status block with an overall banner derived from today's worst status, per-service 90-day uptime bars that grow in on view and reveal a date, status and incident tooltip on hover or arrow-key focus, computed uptime percentages, and an incident timeline whose entries expand into their update history, all formatted in UTC from deterministic data.
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.
A stable response surface with completion actions, rendered content, and an expandable source summary.
Mobile-style list rows that swipe left or right to reveal contextual action buttons.
Toggle with a spring-driven thumb and press feedback.
Paginated DataTable with multi-column sort (Shift+click adds keys, rows glide into place), per-column text/select filters and global search, column hide and drag or keyboard reorder, expandable detail rows and Shift-range selection with a selected-count bar.
Loads pages on demand — skeleton rows on first load, then infinite scroll via onEndReached as the virtualized list nears the bottom.
10k virtualized rows with sortable headers, row selection, column resize and reorder.
Edit cells inline and insert or delete rows and columns via border handles; the table re-renders from the updated data and column defs.
Pill, segment or underline tabs with a spring layoutId indicator.
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.
Team page section with member cards that stagger in on view and slide up a bio and links on hover or focus, department filter chips with a gliding pill and spring layout reflow, and a click that opens a focus-managed dialog with the member's full bio, location and links.