Motion-first React primitives and animated UI components for shadcn/ui. Copy, customize, and ship fluid interfaces.
A pill-shaped tab bar that expands into a floating panel, with Motion driving the shell, label, and content transitions.
Pill tab bar expanding into a floating profile/notifications/settings panel.
Inline text that materializes through a soft, turbulent WebGL fog mask, inherits font and color from CSS, and cycles through an array of messages.
Inline text that materializes through a WebGL fog mask and cycles through messages, inheriting the surrounding font and color.
Crossfading hero image slideshow with a progress pill, play/pause, and prev/next controls.
Hero image slideshow cycling through a set of project preview screenshots.
A Motion-powered highlight effect that allows you to highlight elements on hover, click or with a controlled value.
Per-item fade background activated on click — menu list style.
Shared sliding highlight pill moving between nav items on hover.
(No description)
An infinite card stack that advances with wheel, touch, or keyboard input using spring-based Motion transitions.
Preview for the infinite stacked image scroll effect.
A flowing quote stream where each avatar reveals its author on hover, with Motion fading and blurring the rest.
Hover any avatar to reveal the author while the rest of the quote stream blurs out.
Staggered logo column swapper with fade, vertical shift, and motion blur powered by Motion.
Staggered four-column logo swapper with blur and vertical motion.
A fanned stack of cards that fling away from the cursor on release, with GSAP InertiaPlugin easing each one back to rest.
A fanned stack of cards reacting to cursor movement with GSAP-driven spring physics.
Base UI accordion allowing multiple panels to expand simultaneously.
An animated, digit-by-digit number counter with a smooth rolling odometer effect, powered by Motion.
Number Flow demo with currency, input overlay, and countdown examples.
A wrapper that emits glowing, pooled particles from the cursor while hovering any button or link.
A heart-particle sponsor link, styled after the anime.js navbar Sponsor button.
A canvas-based image that resolves from a blocky, pixelated placeholder up to full sharpness as it loads.
A stacked-layer blur that ramps smoothly from sharp to fully blurred toward an edge, for fading content under a fixed header or above a scroll boundary.
A scrollable panel with progressive blur fading content under the top and bottom edges.
An interactive button component built on Radix UI Slot with Motion hover/tap scaling and shadcn/ui variants.
Interactive showcase of Radix UI Slot Button variants, sizes, icon combinations, and Motion scaling.
Disabled Radix UI button displaying an animated spinner.
Customizable hover and tap Motion spring scaling on Radix UI button.
Radix UI button size presets from extra small to large.
Showcase of all visual Radix button variants: default, secondary, destructive, outline, ghost, and link.
Radix UI button combined with leading and trailing Lucide icons.
An accessible, stylable checkbox built on Radix UI with a Motion-friendly animated indicator.
Selectable card container with embedded animated Radix UI checkbox.
Interactive showcase of Radix UI animated Checkbox with SVG stroke draw animation.
Radix UI checkbox in a partially checked indeterminate state.
Radix UI checkbox with supplementary title and description text.
An accessible modal dialog built on Radix UI with smooth Motion spring entrance and exit animations.
Interactive showcase of Radix UI modal Dialog with 3D perspective spring entrance and exit animations.
Radix UI dialog with scrollable content area.
Interactive Radix UI dialog with link copying and sharing.
Per-character slot-machine reveal that rolls each letter into place once it scrolls into view, powered by Motion.
A draggable, chaptered progress-bar nav — two-way cursor/scroll sync, ghost-cursor hover preview, snap-to-step seeking, and a per-chapter panel that can opt in or out of showing.
Five chapters with a draggable, chaptered progress-bar nav — two of them opt out of showing a panel.
A full-viewport sticky scroll slider with strip-mask image transitions and animated title swaps, driven by GSAP ScrollTrigger.
Sticky scroll slider with 4 slides, strip-mask transitions, and animated title swaps.
Shared GSAP ScrollTrigger helpers (window/scroller detection, ready/resize waiting) used by scroll-driven primitives.