Component Registry

A collection of drop-in animated components for your next project. Copy and paste or install with a single command.

Production-ready, animated React components for shadcn/ui and Next.js: copy and paste, or install any one with a single command. Each is built from techniques in my Design Engineering series, like clip-path reveals and easing curves that feel natural.

Animated Underline
Animated underline that tracks hover/active state and slides beneath nav items. Add data-link-index to list items for correct positioning.
No dependencies
Aurora Background
Living aurora background with multiple variants. Sunset, ocean, forest, lavender, ember, ice.
framer-motion
Cursor Spotlight
Cursor spotlight effect. Dimmed background with bright radial gradient following cursor.
No dependencies
Fluid Cursor Trail
Canvas particle trail that follows the cursor. Fixed overlay, customizable color, physics, and particle count.
No dependencies
Gravity Scroll Cards
Cards that stack and unstack with scroll. Gravity-style depth effect.
gsap
Handwriting SVG
SVG path that draws itself on mount. Pass path for custom shapes or text to render handwriting.
framer-motionopentype.js@1.3.4
Horizontal Scroll Gallery
Pinned section where vertical scroll drives horizontal gallery position. Same pattern as Scroll-Linked Video Scrubber.
No dependencies
Infinite Circular Scroll
Vertical list of cards with infinite scroll. Scroll past the last to wrap to the first.
No dependencies
Line Draw SVG
SVG path that draws itself on scroll, hover, or mount. Presets: diamond, circle, star, heart, arrow.
gsap
LQIP Image
Image component with Low Quality Image Placeholder (LQIP). Shows a blurred placeholder that fades into the full image on load.
No dependencies
Lonely Tab Title
Changes the page title to a custom message when the user switches away from the tab. Uses the Page Visibility API.
No dependencies
Magnetic Cursor Dock
macOS-style dock with magnetic cursor effect. Items scale and lift as cursor approaches.
framer-motion
Network Image
Image component that adapts quality and loading strategy in real-time based on connection speed using the Network Information API.
No dependencies
Number Counter
Animated number counter that counts from 0 to target. Tabular nums prevent layout shift, smooth ease-out-expo easing, respects reduced motion.
No dependencies
Not Found Page
Animated 404 page with subtle icon motion and reduced-motion support.
framer-motionlucide-react
Parallax Image
Scroll-linked parallax effect for images or content. Moves children on scroll for depth.
framer-motion
Party Popper
Confetti celebration effect on click. Wraps any trigger element and fires particles on interaction.
gsap
Resizable Panels
Drag-resizable panels for dashboards, IDEs, and editors. Nest groups for complex layouts like sidebar | editor/terminal.
No dependencies
Scroll-Linked Video Scrubber
Sticky video that scrubs forward/backward as you scroll. Uses a tall wrapper and position: sticky - no scroll hijacking.
No dependencies
Scroll Progress
Fixed bar at the top that scales horizontally with scroll progress. Uses Framer Motion for smooth updates.
framer-motion
Slide In Text
Animates text sliding in from the left with a fade when it enters the viewport.
gsap
Stagger Reveal Grid
Grid that reveals items with wave-like stagger on scroll. Configurable columns and timing.
gsap
Swap Button
Shadcn button that swaps two labels (and optional icons) with a crossfade, with no width jump. Drop-in on top of Button.
No dependencies
SVG Morph Button
Button with SVG path morph animation. Supports custom paths for idle, hover, loading, success.
flubbergsap
SVG Particle
Three.js particle field from SVG source. Pass icon components from lucide-react, react-icons, Heroicons, Tabler, Phosphor, or any <svg /> - works out of the box. Particles react to the cursor and spring home.
@react-three/fiberthree
Tabs
Accessible tabs with icon support, sliding indicator, and optional content panels. Keyboard navigable.
lucide-react
Text Scramble
Text that decrypts character by character with a scramble effect. Trigger on scroll, hover, or mount.
No dependencies
Theme Toggle
Accessible dark mode toggle with View Transitions API support. Icon, icon-label, or dual-tab variants.
lucide-reactnext-themes
Tilt Card Glare
3D card with tilt and holographic glare effect that follows the cursor.
framer-motion
Typewriter
Typewriter effect that cycles through phrases with variable typing speed and blinking cursor. Pauses when out of viewport.
framer-motion