@karaui

3D perspective tilt on hover with cursor-tracked glare.

Press scale, hover lift, variants and sizes.

Idle → loading → success / error with blur-swap slots and morphing width.

Button composed with the Magnetic wrapper for cursor-attracted pull.

An accent tile that expands into a dotted-arrow trail on hover or focus.

Hold to complete with a vertical or horizontal liquid fill; release early to cancel.

Drag the thumb to the end to confirm an action; release early to spring back.

Infinite horizontal or vertical scroll with pause-on-hover.

Pill, segment or underline tabs with a spring layoutId indicator.

Toggle with a spring-driven thumb and press feedback.

Text input with label, left/right icons, error shake and success check draw.

Composable primitives (Select, SelectTrigger, SelectValue, SelectContent, SelectItem); the panel pinches off the trigger and separates, with staggered items. P…

Composable primitives (MorphSelect, MorphSelectTrigger, MorphSelectValue, MorphSelectContent, MorphSelectItem) where the trigger morphs into the panel via a sh…

Searchable combobox with a morphing portal, grouped filtering, keyboard navigation, and controlled or uncontrolled state.

Form choice control with a draw-on checkmark, spring press feedback and indeterminate state support.

Single-select choice control with a gliding layoutId indicator dot and spring press feedback.

Vaul-inspired draggable bottom sheet with snap points, inertia and glass surface.

Native-feeling pull-to-refresh container with drag resistance, threshold feedback and async refresh handling.

A pill that glides between hovered items via motion's shared layout, with blur enter/exit.

A vertical sidebar whose active dot jumps between destinations on a curved, spring-loaded path.

A composable application sidebar with morphing nested navigation that folds into an animated icon rail on desktop and becomes a focus-managed sheet on mobile.

Codex app-inspired navigation rail with compact ticks that form a hover pyramid and reveal a floating destination preview.

macOS-style dock with grouped actions and a gliding active pill.

Hover or focus tooltip with blur enter/exit and spring spawn.

Composable context-menu primitives with a pointer-origin clip morph, a gliding active row, checkbox and radio choices, keyboard navigation, typeahead, and long…

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…

Composable MorphPopover, MorphPopoverTrigger, MorphPopoverContent; the panel is laid out full size but clipped to the corner nearest the trigger, then unclips …

Family-app-style modal. A single panel that morphs its height as you navigate between inner views, with blur cross-fade on content.

A composable modal whose full-size surface unfolds from its exact center toward every edge, then folds back the same way with an inset close control.

A controlled character scramble that resolves changed text while keeping its final value accessible.

A Dia-inspired text effect with a fixed sentence prefix and a cycling final word revealed by a colorful sweep.

Word or character reveal with spring slide-up and blur.

Gradient sweep across text for loading or emphasis.

Letter-by-letter slot roll for standalone text — old letters drop away as new ones land, left to right.

Slot-machine rolling digits with staggered entry.

Spring-driven count-up triggered when in view.

Status badge with animated state icons, pulse feedback and compact size variants.

Letter-by-letter slot roll — the old label's letters drop away as the new ones land, left to right.

Copy-button style swap with blur, opacity and scale.

The next text or icon rolls in from below with blur.

Stacked toasts with status morphs, swipe dismissal, actions and six screen positions.

One toast tracks a promise: a spinner while pending, then it morphs in place into success or error and starts its dismiss timer.

Theme toggle button that repaints the whole page through the View Transition API — a rectangle or circle clip-path reveal, or slats that open across the screen…

Single-open accordion with weighted spring layout, icon rows and reduced-motion-safe content reveals.

Side panel that slides in from the left or right with a spring, backdrop blur, body scroll lock and esc-to-close.

Smooth-scroll provider over Lenis with a useSmoothScroll hook exposing scroll offset, progress and velocity. Reduced-motion safe.

Reading-progress indicator — fixed bar or circular ring — driven by scroll position via useSmoothScroll, with spring smoothing.

Wrapper that drifts its children at a speed factor as they cross the viewport, on either axis. Reduced-motion safe.

Button that smooth-scrolls to a target (offset, selector or element) via the active SmoothScroll provider; reduced-motion jumps instantly.

Reveals its children with a spring slide and blur as they enter the viewport, once or every time. Reduced-motion keeps a fade.

Tick dots, and a vertical-bar thumb that bounces as it lands on each step.

No thumb. The fill slides behind a rounded liquid cap, and the label flips color wherever the fill covers it.

Equalizer bars peak around the handle and drop back once it passes, so the value moves down the track as a wave.

Grab the thumb and a value bubble pops out of it. The bubble tilts and squashes with how fast you drag, then settles upright.

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.

iOS-style picker wheel: a 3D drum on native momentum scroll that snaps to the nearest notch, with wheel, drag and keyboard control. Composes side by side for d…

Stacked gradient areas with a time-range switch; the reveal replays whenever the range changes.

Grouped columns that grow from the baseline; hovering a category dims the rest and reads every series.

Smooth monotone lines with dots, a snapping cursor and one tooltip for every series.

Slices sweep in clockwise; the hovered slice lifts and the center swaps from the total to its value and share. variant="pie" for a solid pie.

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.

GitHub-style contribution calendar; cells fade in week by week and arrow keys read each day.

Arc meter with threshold bands; the fill and a springy needle swing to the value together.

Horizontal conversion funnel whose stages grow in one by one; hovering a stage reads its step conversion.

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,…

Keyboard-first WAI-ARIA tree with spring-rotating chevrons, height-morphing nested groups, indent guide lines, a selection pill that glides between rows via sh…

Horizontal or vertical split panes with pointer-captured drag handles, per-panel min/max sizes, collapsible panels that spring shut below a threshold, double-c…

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 label…

Vertical changelog timeline whose connector line draws with scroll progress, with dots that pop in, content that slides into view, done/current/upcoming states…

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 navi…

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 …

Star rating radiogroup with hover preview fill, a staggered spring bounce on pick, optional half-star precision from the pointer position, click-to-clear, arro…

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…

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,…

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 read…

Swipeable slide carousel driven by one motion value: momentum drag that snaps to slides with rubber-band edges, seamless loop, responsive slidesPerView, dot or…

Textarea Markdown editor with an undo-safe formatting toolbar and shortcuts, list continuation and Tab indenting, a floating selection toolbar, Write/Preview/S…

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 shift…

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 an…

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,…

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…

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…

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 …

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…

Progress indicators in three forms: a linear Progress bar whose fill springs smoothly with an optional label and rolling percentage, a ProgressCircle ring draw…

Loading placeholders: Skeleton blocks in rect, circle or text shapes with a gradient shimmer, SkeletonText paragraphs with a natural short last line, and Skele…

Empty-state block with an icon or illustration slot, title, description, primary and secondary actions, three sizes and an optional dashed border; the default …

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 ite…

Form-ready SegmentedControl with radiogroup semantics, a raised thumb that glides between options on a shared-layout spring, icon and/or label options, sizes, …

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 chi…

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 …

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/…

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 meas…

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 c…

Composable toolbar toggles: a standalone aria-pressed Toggle plus a shadcn-shaped ToggleGroup of ToggleGroupItem children in single or multiple mode, with defa…

Plain, shadcn-compatible Card building block (CardHeader, CardTitle, CardDescription, CardAction, CardContent, CardFooter) with default, outline, elevated and …

Native-scrolling container that keeps wheel, touch momentum and keyboard scrolling but hides the browser bar behind an overlay thumb (vertical, horizontal or b…

Unstyled disclosure primitive (Collapsible, CollapsibleTrigger with asChild, CollapsibleContent) with controlled or uncontrolled open state, an in-flow height …

Calm shadcn-compatible accordion built on Collapsible (Accordion, AccordionItem, AccordionTrigger, AccordionContent) with type single or multiple, collapsible,…

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 hoveri…

General-purpose badge in default, secondary, outline, destructive, success and warning (soft or solid), three sizes, with an optional pulsing status dot or ico…

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…

Date field whose calendar morphs open from the trigger corner and closes on pick.

Inline single-date calendar; the selected pill glides between days. Weekends disabled in this demo.

Range field whose two-month calendar morphs open beside one-click presets and commits once the end day is picked.

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, n…

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.

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 popov…

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.

Loads pages on demand — skeleton rows on first load, then infinite scroll via onEndReached as the virtualized list nears the bottom.

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 dr…

Canvas shader backgrounds (mesh gradient, grain, warp, waves, voronoi, dot orbit and more) with a single typed variant prop. Reduced-motion freezes animated va…

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 sprin…

Loading indicator with seventeen variants: spinner, dots, bars, dot-matrix, dither, morph, comet, scramble, metaballs, newton, helix, percent, and five termina…

A mic button that morphs into a recording pill with a live Web Audio waveform, elapsed timer, cancel and confirm actions, a shimmering transcription state, and…

A focused conversational surface with visual tones, independent alignment, grouped messages, expandable content, and interactive link or button support.

Composable conversation primitives for message rows, grouped bubbles, avatars, metadata, live markers, and a mount-only trailing-edge pop-up for newly sent row…

A reader-aware conversation viewport that follows streamed output at the live edge and releases control when the reader moves away.

An auto-growing agent composer with prompt actions, model selection, keyboard submission, and animated send and stop states.

A collapsible agent task plan with morphing status marks, a completion count, compact metadata, and smooth list updates.

A syntax-highlighted code surface with stable streaming updates, line numbers, focused lines, smooth following, and copy feedback.

A human-in-the-loop decision surface for approvals, single or multiple-choice questions, custom responses, and multi-step review flows.

A syntax-highlighted file change disclosure with progressive rows, line numbers, live change counts, smooth following, and completion collapse.

A lightweight execution disclosure for syntax-highlighted terminal output and request responses that collapses into a compact completed state.

A stable response surface with completion actions, rendered content, and an expandable source summary.

A stable generated-image surface that moves from queued work through progressive refinement to a completed result without layout shift.

A human-in-the-loop permission card for reviewing tool details, allowing once, remembering access, or denying execution.

Inline citation markers paired with a collapsible, progressively rendered reference collection for grounded agent responses.

One adaptive activity stream for reasoning, searches, tool calls, structured execution traces, or a chronological mix.

Shimmering reasoning copy with an ASCII loader and cascade, phrase-swap, or per-letter scramble transitions.

A quiet shimmer that keeps the agent's current status readable while work continues.

A compact activity glyph, action verb, and live tabular timer for longer-running agent work.

Searchable AI model picker (`ModelSelector`) that morphs open from its trigger with models grouped by provider, generic geometric provider glyphs, vision/tools…

Token usage indicator (`ContextMeter`) whose compact ring and "42k / 200k" readout expand on hover or click into a breakdown bar of system, conversation, files…

Suggested prompt cards or chips (`PromptSuggestions`) that stagger in on first reveal, filter and highlight as the composer text changes via `query`, reflow wi…

Assistant message action row (`MessageActions`) with copy that morphs into a drawn check, regenerate that spins (continuously while its promise runs), exclusiv…

Version switcher for regenerated or edited messages: `Branches` shares a controlled or uncontrolled index, `BranchContent` cross-fades and slides the active ve…

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 hi…

Side canvas that slides open beside a chat (its width eases so the conversation reflows smoothly) to show a generated artifact, with a version switcher whose l…

Audio-reactive orb for voice mode whose blurred --chart and --primary color blobs orbit inside a glossy sphere and swell with a 0..1 level prop, easing between…

A collapsible AI workspace sidebar for folders, projects, files, and bookmarks with keyboard navigation, optimistic moves, inline rename, and overflow-aware la…

A complete agent conversation workspace composing navigation, messages, streaming, planning, approvals, tools, code, diffs, generated media, sources, and promp…

Mail client with a folder rail and unread counts (virtual folders like Starred via `filter`), a searchable message list with unread dots, stars, checkboxes and…

Now-playing card with a token-gradient cover that breathes with playback, title and artist that cross-fade in the skip direction, a draggable scrub bar with bu…

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 …

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 …

Plan comparison grid with a monthly/yearly switch that rolls every price, plan columns in a sticky header over scrolling feature rows, collapsible feature grou…

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, auto…

Blog index with category chips and a gliding pill, a wide featured post, and cards with gradient or image covers, excerpt, author avatar, read time and an en-U…

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 an…

Release notes list with a version and date rail, New/Improved/Fixed badges, entries that expand to reveal their staggered change lines, a tag filter with count…

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-sor…

Sign-in card that pairs with Signup Form — email, password and remember-me with generic SSO/passkey buttons — whose "Forgot password?" flow morphs inside the s…

Account settings with a side nav whose pill glides between Profile, Notifications, Appearance and Billing, sections built from inline edits, switches, selects,…

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 bl…

Checkout flow on Stepper — shipping with a gliding delivery-speed choice, display-only payment fields and an editable review — beside an order summary with com…

Printable invoice with number and UTC-formatted dates, an animated Paid / Due / Overdue status badge, bill-from and bill-to, a staggered line-item table and su…

Getting-started card with a progress ring and bar and steps that expand to a description and an async CTA; finishing a step pops its check, strikes its title a…

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 visua…

Trusted-by logo strip with an infinite marquee variant behind edge fade masks that pauses on hover or focus, and a grid variant whose logos fade in with a stag…

Numbered steps section whose connector draws from marker to marker as it scrolls into view, lighting each marker as the line arrives; horizontal on wide contai…

Integrations showcase pairing a hub-and-spoke orbit (your logo at the center, integration icons on counter-rotating rings that keep icons upright and pause on …

Photo gallery laid out as a masonry or uniform grid sized by its own container width, with hover zoom and caption reveal, category filters behind a gliding chi…

Newsletter signup section with an email field, light validation and a submit button that steps through idle, loading, success and error from your onSubscribe p…

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 spr…

Long-form marketing content block in three variants: split copy beside media that stays pinned while paragraphs scroll, a stats layout whose callouts roll thei…

Chronological activity log grouped by day with actor avatars, verb-plus-target summaries, relative times, severity and category badges, actor, action-type and …

Review queue for pending expense, access, deploy and time-off requests with row and bulk selection, approve and reject that swipe rows out optimistically with …

Log stream viewer with a volume histogram you click or drag across to narrow the time window, level filters, a text query with highlighted matches, a virtualiz…

Dashboard report with a date range picker and previous-period compare switch, rolling KPI cards with delta badges, an area trend chart that adds the previous p…

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),…

Site navbar with a logo slot, plain links and mega-menu panels: a hover pill glides between items, the dropdown viewport morphs its size to each panel while co…

Bento layout of feature tiles on a container-query grid that collapses to one column in narrow containers, with per-card column and row spans, icon, title, des…

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…

Bell trigger whose unread badge springs when the count rises, opening a panel that grows out of the bell with All/Unread tabs and a gliding indicator, Today/Ea…

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 …

Testimonial wall of quote cards with names, roles, initials avatars and optional star ratings, laid out in masonry-like columns that scroll vertically in alter…

Landing hero with a New pill badge, a headline revealed word by word with a spring blur-in, supporting copy that follows, primary and secondary CTAs, an instal…

Site footer with a brand column of logo, tagline and social icons that lift on hover, link columns that collapse into disclosures in narrow containers, a newsl…

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" lis…

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 …

Task board whose cards drag within and across columns, opening a dashed drop slot where they will land, lighting up the column underneath and flying into place…

Responsive virtualized masonry that measures variable-height cards and loads more data as the user nears the end.

Compact notification cards that spring from a stacked summary into a readable list on hover, focus or tap.

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.

The tournament drawn radially. The champion holds the hub, each round is a ring further out, and the teams themselves form the rim. Nodes spring in ring by rin…

Pages one round at a time. The leftmost round stacks at a fixed rhythm, each later round centers between its two feeder matches, and cards, elbow connectors, h…

Weekly availability editor where each day springs between available and unavailable, time ranges add and remove with blur-slide motion, times pick from a scrol…

Cross-chain swap widget with chain + token selectors, morphing views, animated flip and quote.

iOS-style island pill that morphs between live activity views with bouncy shell resize and blur crossfades.

⌘K palette with fuzzy filter, spring-animated active row and glass surface.

Search field or compact icon that morphs into a glass results surface, whether opened by click or keyboard shortcut.

Compact icon actions that expand into labeled controls on hover or focus with shared layout motion.

Connected pill rail for primary actions that springs open to reveal extra controls.

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.

Reorderable tabs whose selected item grows into a white content surface, with the active shape gliding as tabs move and a shared morph between rooms.

Mobile-style list rows that swipe left or right to reveal contextual action buttons.

A mixed attachment workspace with a dropzone, staggered file and image rows, animated upload, success, failure, retry and removal feedback, shared-layout image…

A drag-and-drop upload queue with progress rows, upload states, retry, and removal.

Prediction market trade ticket with buy/sell modes, outcome prices, rolling amount entry, quick add chips and trade states.

Wallet overview card with an account switcher and search that morph open from their triggers, a cascading balance with a live change pill and privacy toggle, c…

One-time-code input with a gliding focus ring, digits that roll in per slot, error shake and a success check draw.

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 a…

A button that morphs open into a menu and blooms iris-out from the center, the grid revealing in every direction with radially staggered items.

Corner trigger that morphs open into a feedback popup with message entry and animated sending, success and retry states.

Digits scramble through random glyphs before resolving, with a chromatic split on hover.

Each digit is cursor-attracted via the Magnetic wrapper and springs back on leave.

A dark panel where a cursor-tracked spotlight reveals the bright code from a dim base.

A code card over a hidden stack that fans out with a spring on hover.

A terminal window that types a failed cd command and a 404 status, with a blinking caret.