Components
A collection of beautiful, animated components built with React, Tailwind CSS, and Motion. Copy and paste into your apps.
Moving Border
SVG-path-tracing animated border that orbits a button or card.
Typewriter Text
Character-by-character typing with blinking cursor, configurable speed, and delete-retype loop.
3D Tilt Card
Perspective-shifting card that tilts toward the cursor with parallax layers and glare overlay.
Spotlight Card
Card with a radial spotlight that follows the mouse cursor across its surface.
Aurora Background
Flowing aurora borealis gradient animation using layered blurred blobs.
Animated Tabs
Tab bar with a sliding pill that morphs between active tabs using layout animation.
Magnetic Button
Button that stretches toward the cursor when nearby and snaps back with spring physics.
Infinite Marquee
Seamless infinite-scrolling ticker with pause-on-hover and variable speed.
Scroll Reveal
Elements animate into view when they enter the viewport, with 6 animation presets.
Skeleton Shimmer
Skeleton loading placeholders with animated shimmer gradient sweep and pulse fade.
Morphing Modal
Modal that expands from the trigger element with spring physics and backdrop blur.
Gradient Text Reveal
Word-by-word text reveal with gradient coloring and blur-to-clear spring animation.
Scramble Text
Matrix-style text scramble effect that resolves characters left-to-right.
Meteors Card
Card with animated meteor/shooting star particles falling through the background.
Flip Card
3D card flip with spring physics, supporting hover or click triggers.
Dot Grid Background
Interactive dot-grid pattern with a glowing cursor-following effect.
Floating Dock
macOS-style dock with magnetic scaling, spring physics, and tooltips.
Confetti Burst
Click-triggered confetti particle explosion with customizable colors and physics.
Drawer Slide
Slide-out drawer panel with drag-to-dismiss, spring physics, and backdrop blur.
Notification Stack
Stacked toast notifications with auto-dismiss progress, sliding animations, and multiple types.
Animated Timeline
Scroll-triggered timeline with 4 distinct Motion.dev animation variants: vertical spring, horizontal growing line, alternating cards, and numbered steps.
Nested Comments
Threaded comment section with infinite nesting, animated expand/collapse, inline reply composer, and spring-physics like button.
Hover Reveal Card
Card that displays an image with teaser content, then slides up a full details panel on hover with staggered Motion.dev animations.
Bento Grid
Responsive masonry-style grid layout with staggered scroll-reveal entrance, hover border glow, and icon scale animations per cell.
Particle Field
Canvas-based floating particles with mouse-repulsion physics and responsive connecting lines.
Horizontal Scroll Gallery
Converts vertical scroll into horizontal movement with momentum physics for immersive galleries.
Radial Menu
Circular flyout menu that bursts items outward from a center trigger with staggered spring animation.
Cursor Trail
Glowing trail that follows the cursor with decay physics, like a sparkler or comet tail.
Glow Hero Section
Physics-driven hero section with an interactive aqueous mesh canvas, spring-based motion text entrance, and fully configurable badge, heading, description, colors, and dimensions.
Limelight Nav
Adaptive fluid navigation bar with a limelight spotlight and spring-animated tabs.
Morphing Card Stack
An interactive collection of cards that smoothly layout-morphs between Stack, Grid, and List configurations using Framer Motion springs.