Animated React components, AI agent interfaces and app blocks built with Motion and Tailwind CSS, with ten switchable design styles.
Horizontal conversion funnel whose stages grow in one by one; hovering a stage reads its step conversion.
Arc meter with threshold bands; the fill and a springy needle swing to the value together.
GitHub-style contribution calendar; cells fade in week by week and arrow keys read each day.
Smooth monotone lines with dots, a snapping cursor and one tooltip for every series.
Concentric progress rings with rounded caps that fill clockwise toward a target.
Word-sized trend line for stat tiles that ends on the latest value, with a spoken summary.
A complete agent conversation workspace composing navigation, messages, streaming, planning, approvals, tools, code, diffs, generated media, sources, and prompt input.
Form choice control with a draw-on checkmark, spring press feedback and indeterminate state support.
Checkout flow on Stepper — shipping with a gliding delivery-speed choice, display-only payment fields and an editable review — beside an order summary with compact quantity steppers, a promo code that shakes when invalid and pops a removable badge when valid, and subtotal, discount, tax and total that roll on every change.
Inline citation markers paired with a collapsible, progressively rendered reference collection for grounded agent responses.
A syntax-highlighted code surface with stable streaming updates, line numbers, focused lines, smooth following, and copy feedback.
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.
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.
Searchable combobox with a morphing portal, grouped filtering, keyboard navigation, and controlled or uncontrolled state.
⌘K palette with fuzzy filter, spring-animated active row and glass surface.
Plan comparison grid with a monthly/yearly switch that rolls every price, plan columns in a sticky header over scrolling feature rows, collapsible feature groups, check / dash / partial / text cells, a recommended column tinted top to bottom, and a plan switcher with one cross-fading column in narrow containers — the detailed companion to PricingTable.
Contact section with name, email, a topic select and an auto-growing message textarea with a live character counter, validation that only flags fields after blur, an async submit that shakes on error and morphs the card into a drawn-check thank-you panel, plus a side panel of contact methods.
Long-form marketing content block in three variants: split copy beside media that stays pinned while paragraphs scroll, a stats layout whose callouts roll their numbers up on view, and a pull quote framed by large typographic quote marks, with paragraphs revealed as they scroll into view.
Token usage indicator (`ContextMeter`) whose compact ring and "42k / 200k" readout expand on hover or click into a breakdown bar of system, conversation, files and tool segments in chart colors, turning warning then critical near the limit and offering an async "Compact conversation" action; drops into PromptInput's `leadingAction` slot.
Chat history sidebar list grouped into Pinned, Today, Yesterday, Previous 7 days and Older from a now read after mount, with search, a spring-gliding active highlight, hover or focus row actions to pin, rename in place through InlineEdit and delete with a slide-out exit while neighbours glide up, and new chats that drop in at the top with a streaming title caret.
Cookie consent card that springs up after mount with Accept all, Reject non-essential and Customize, where Customize grows the card into Necessary (locked on), Analytics and Marketing switches with Save; the choice is reported through onConsentChange and can persist to localStorage, anchored bottom-left, bottom or bottom-right, fixed to the viewport or contained in a parent.
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.
Closing call-to-action section in a centered layout (large headline, two CTAs and a reassurance checklist inside a card) or a split layout (copy beside a visual or an email capture with a stateful submit), with a word-by-word headline reveal on scroll, a rotating gradient beam on the card border or a soft dotted field, and a layout that adapts to its own container width.
A carousel whose items line the inside of a cylinder, receding into the center and growing toward the edges. Drag, scroll or arrow-key to roll it, with a springy glide and snap. Reduced-motion drops the glide.
Container-sized app shell whose sidebar collapses to icons with tooltips and a gliding active pill, a top bar with a Mod+K search field and avatar menu, and a content slot with breadcrumbs, title and actions that cross-fades per page; below `md` the sidebar moves into a Drawer — a data-driven complement to the viewport-height AnimatedSidebar primitives.
Two-month stay picker with nightly prices under each day and the cheapest days tinted, booked nights struck through, a minimum stay, and a footer with dates, nights, total and a Reserve button.
Inline single-date calendar; the selected pill glides between days. Weekends disabled in this demo.
Date field whose calendar morphs open from the trigger corner and closes on pick.
Range field whose two-month calendar morphs open beside one-click presets and commits once the end day is picked.
One field whose panel morphs open with the calendar beside time wheels; edits a draft and commits on Done, labelled like "Oct 14, 2026, 9:30 AM".
Twelve-month grid with a gliding selection pill, year slides and a zoom-out year grid, single or range mode, min/max and full keyboard navigation, plus a popover month field.
iOS-style hour, minute and AM/PM drums composed from WheelPicker, inline or as a time field whose wheels morph open and commit on Done.
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.
macOS-style dock with grouped actions and a gliding active pill.
Side panel that slides in from the left or right with a spring, backdrop blur, body scroll lock and esc-to-close.
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.
iOS-style island pill that morphs between live activity views with bouncy shell resize and blur crossfades.
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.
Month and week event calendar: month cells pack events into lanes so multi-day events become bars across the week row and overflowing days open a "+N more" list, while week view places timed events on an hour grid, side by side where they overlap, with a live now line and optional 15-minute drag to reschedule. Periods slide in from the direction you travel, the Month/Week switcher pill glides between views, and day cells support arrow-key navigation.
Compact icon actions that expand into labeled controls on hover or focus with shared layout motion.
Icon tab bar where the active tab expands to a labelled pill, with a panel above that morphs height and slides content direction-aware on switch.
FAQ page section with an eyebrow, heading and description column beside an accordion that opens one or many answers with height-morphing panels and a rotating plus, an optional search that narrows questions with spring layout reflow and highlights matches, a Still have questions CTA slot, optional hash deep links, and a layout that splits into two columns based on its own container width.
Marketing features section with a vertical tab list beside a visual panel that cross-fades and slides in the direction of travel to each feature's visual, autoplay that fills a progress rail on the active row and advances, pausing on hover or focus, with a pause button and keyboard tabs.
Corner trigger that morphs open into a feedback popup with message entry and animated sending, success and retry states.
A syntax-highlighted file change disclosure with progressive rows, line numbers, live change counts, smooth following, and completion collapse.
File browser with breadcrumb navigation, folders that slide in from the side you travel, grid/list views, click / Cmd-Ctrl-click / Shift-click range selection with arrow-key movement, kind-tinted file icons, a sort menu, a storage usage meter, and a drop overlay that adds dragged-in files to the open folder.
A mixed attachment workspace with a dropzone, staggered file and image rows, animated upload, success, failure, retry and removal feedback, shared-layout image previews, and an audio waveform.
A drag-and-drop upload queue with progress rows, upload states, retry, and removal.