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.

Components

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.

Text

Magnetic Text

Per-letter cursor-tracking text effect. Every glyph leans toward the pointer under its own spring; linear falloff inside the configured radius, capped at the configured strength. Soft white glow fades in near the cursor. Wrapper carries an aria-label; per-glyph spans are aria-hidden so screen readers never spell the word out.

Cards

Meteors Card

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

Components

Mini Mac Keyboard

Pure CSS decorative compact Mac-style keyboard with subtle spring entrance from motion.dev — ideal for hero device mockups.

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

Typed, zero-dependency data grid that auto-switches between a hand-rolled virtualized engine (10 to 100,000 rows) and a standard engine with row grouping and rowspan. Search, single and multi sort, multi-select, row expansion, frozen columns, column groups, pinned rows, and feature presets.

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 mega outlined headline with theme-aware stroke colours; optional hover swaps the outline for an SVG gradient stroke (hollow fill).

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.

Components

Macbook Mock

Faux MacBook frame with a hover-driven lid open and a fade-or-flap screen reveal. Hover to lift the lid; the idle screen crossfades or folds back to expose your image or React node.

Cards

Liquid Glass Panel

A frosted container that physically refracts the content behind it via SVG turbulence + displacement — not a simple backdrop blur. Sub-pixel-crisp text on top, slow specular sheen, Fresnel-like edge highlight, and a hover boost on the displacement strength. Honors prefers-reduced-motion.

Backgrounds

Shader Mesh Gradient

GPU-rendered mesh gradient: a fragment shader warps multiple OKLCH color blobs through 3-octave simplex noise so they flow continuously instead of locking into a static pattern. Pointer position subtly attracts the nearest blob; reduced-motion freezes a single curated frame; falls back to a static CSS radial gradient on devices without WebGL2.

Effects & Animations

Chromatic Aberration Reveal

Reveal an image with an RGB split that converges into a clean final frame. Three channel-shifted layers spring to alignment with subtle staggering, plus a one-pass wave sweep during convergence. Supports in-view once, mount-triggered, and manual visibility control.

Components

Iridescent Foil Button

A holographic foil CTA button with pointer-reactive hue/angle shifts, soft specular sheen, and fine grain texture. Built as a drop-in button with proper focus states, disabled support, and reduced-motion-safe scale behavior.

Text

Kinetic Variable Headline

A large display headline that animates variable font weight per glyph on entrance and pointer proximity. Letters inflate like a magnetic field while preserving readable text semantics.

Cards

Caustic Light Card

A premium card surface with animated pool-like caustic highlights rendered by a lightweight WebGL2 fragment shader. Caustics are masked to the lower region, brightest near the bottom, with hover-driven boosts to intensity and speed. Off-screen cards pause automatically and only four visible cards animate at once.

Cursor Effects

Refractive Cursor Lens

A circular liquid-glass lens that follows the cursor with spring lag and refracts the content underneath via SVG turbulence + displacement. A radial-falloff mask attenuates distortion toward the center, so the rim ripples while the middle stays calm — opposite of a fisheye. Pass-through clicks, screen-reader hidden, disabled on touch and reduced-motion.

Cards

Ambient Glow Card

A single responsive card whose copy you write as normal JSX children. A soft radial-gradient blob slowly drifts between the four corners — colour and speed are props. Headings inherit the page font; paragraphs get muted body styling. Fills any parent column via w-full h-full.

Navigation & Overlays

Animated Tooltip

An accessible, spring-animated tooltip with a customizable pointing arrow. Background, text, and arrow colours are independently configurable, and it follows WAI-ARIA guidance — hover/focus triggers, role="tooltip", aria-describedby, and Escape to dismiss.

Components

Autocomplete Search

Accessible combobox with debounced filtering, async-ready search, full keyboard navigation, grouped options, matched-text highlighting, and loading / empty / error states.

Components

Dropdown

Animated single and multi select dropdown with search, select all / deselect all, removable chips, per-option icons, color dots, descriptions, disabled options, grouping, and checkbox / radio / check indicators. Fully keyboard accessible.