A fully customizable, smooth aurora light background mimicking the northern lights. Configurable via exact hex props alongside automatic integration with the current light or dark mode theme. Accessibility: Respects prefers-reduced-motion (drifting pauses smoothly).

Navigation & Overlays

Animated Tabs

Tab bar with a sliding pill that morphs between active tabs using layout animation.

Effects & Animations

Magnetic Button

Button that stretches toward the cursor when nearby and snaps back with spring physics.

Effects & Animations

Infinite Marquee

Seamless infinite-scrolling ticker with pause-on-hover and variable speed.

Effects & Animations

Scroll Reveal

Elements animate into view when they enter the viewport, with 6 animation presets.

Effects & Animations

Skeleton Shimmer

Skeleton loading placeholders with animated shimmer gradient sweep and pulse fade.

Navigation & Overlays

Morphing Modal

Modal that expands from the trigger element with spring physics and backdrop blur.

Text

Gradient Text Reveal

Word-by-word text reveal with gradient coloring and blur-to-clear spring animation.

Text

Scramble Text

Matrix-style text scramble effect that resolves characters left-to-right.

Cards

Meteors Card

Card with animated meteor/shooting star particles falling through the background.

Cards

Flip Card

3D card flip with spring physics, supporting hover or click triggers.

Backgrounds

Dot Grid Background

Interactive dot-grid pattern with a glowing cursor-following effect.

Navigation & Overlays

Floating Dock

macOS-style dock with magnetic scaling, spring physics, and tooltips.

Effects & Animations

Confetti Burst

Click-triggered confetti particle explosion with customizable colors and physics.

Navigation & Overlays

Drawer Slide

Slide-out drawer panel with drag-to-dismiss, spring physics, and backdrop blur. Portals above page chrome by default.

Navigation & Overlays

Notification Stack

Stacked toast notifications with auto-dismiss progress, sliding animations, and multiple types. Renders through a portal above page chrome by default.

Effects & Animations

Animated Timeline

Scroll-triggered timeline with 4 distinct Motion.dev animation variants: vertical spring, horizontal growing line, alternating cards, and numbered steps.

Social & Interaction

Nested Comments

Threaded comment section with infinite nesting, animated expand/collapse, inline reply composer, and spring-physics like button.

Cards

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.

Cards

Bento Grid

Responsive masonry-style grid with staggered scroll-reveal, pointer-follow spotlight, hover lift and shadows, optional spin borders, and spring micro-interactions per cell.

Backgrounds

Particle Field

Canvas-based floating particles with mouse-repulsion physics and responsive connecting lines.

Effects & Animations

Horizontal Scroll Gallery

Converts vertical scroll into horizontal movement with momentum physics for immersive galleries.

Navigation & Overlays

Radial Menu

Circular flyout menu that bursts items outward from a center trigger with staggered spring animation.

Cursor Effects

Cursor Trail

Glowing trail that follows the cursor with decay physics, like a sparkler or comet tail.

Cursor Effects

Interactive Cursor

Spring-smoothed cursor overlay with magnetic hover states, click ripples, optional particles, and support for full-page or container-scoped interactions.

Cursor Effects

Pen Cursor

Physics-driven ribbon trail rendered on canvas — a chain of linked points follows the mouse with spring-damping inertia, width scales with speed, and colors interpolate head-to-tail. Inspired by obsidianassembly.com.

Backgrounds

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.

Navigation & Overlays

Limelight Nav

Adaptive fluid navigation bar with a limelight spotlight and spring-animated tabs.

Data & Layout

Data Table

Configurable data table with optional column freeze (left/right), customizable header and body colors and backgrounds, optional borders, and optional sortable columns.

Cards

Morphing Card Stack

An interactive collection of cards that smoothly layout-morphs between Stack, Grid, and List configurations using Framer Motion springs.

Navigation & Overlays

Multi-Step Auth Card

Animation-first enterprise auth flow: email discovery, first-time and returning user paths, password create/login, and OTP verification with spring transitions between steps.

Text

Shiny Text

A shimmering highlight that continuously sweeps across text — perfect for hero taglines and call-to-action copy.

Text

Outlined Mega Mark

Full-width responsive outlined headline with transparent fill and separate stroke colors for light and dark backgrounds — ideal for landing footers.

Text

Blur Reveal

Characters or words materialise from a soft blur — the cinematic text entrance used in top SaaS hero sections.

Text

Count Up

An animated number that counts from a starting value to a target when scrolled into view — essential for metrics and stats sections.

Effects & Animations

Border Beam

A glowing comet that continuously orbits the border of a container — instantly upgrades cards, code blocks, and feature sections.

Backgrounds

Ripple

Luminous orbs that drift slowly across the viewport — a liquid nebula hero background with warm, organic colour blooms.

Text

Word Rotate

A list of words that cycle with slide, flip, or fade transitions — the signature hero-headline effect used across modern SaaS sites.

Backgrounds

ShootingStarsGrid

A cinematic hero-section background: a faint grid bathed in dark-emerald glow, with thin white streaks that race along grid lanes like falling stars. Built on Motion.dev with compositor-only transforms for smooth 60fps.

Components

DynamicInfo

An interactive profile pill that shows avatar, name, role, and a live ticking clock. Click to reveal social links and a status indicator. Drop-in floatable via the position prop.