103 components
Components
Click any to preview, copy the source, install with the CLI, or grab a ready-made AI prompt.
103 components
Click any to preview, copy the source, install with the CLI, or grab a ready-made AI prompt.
Animated components, carefully crafted for performance and delight.
A hero section lit by a radial spotlight
A motion-native starfield that scatters and brightens around your pointer.
An interactive particle field that scatters and brightens around the cursor
A dithered gradient backdrop, rendered live in the browser and themed to your accent.
An editorial hero over a dithered accent gradient rendered on WebGL
Soft, drifting shapes settle into place behind every screen you build.
A hero with soft, colourful shapes drifting in from off-screen
Beautifully animated components for your next project
A hero with an animated mesh-gradient backdrop
Copy, paste, and own beautiful animated components. No frameworks, no dependencies.
A hero laid out as an animated bento grid
Rest your cursor on the orb — it ripples and slowly turns to face you.
A glowing WebGL orb that ripples and turns to face the cursor on hover
A noise-driven, two-tone aurora glow band reacting to the cursor
Animated light beams sweeping across a dark field
A grid whose cells pulse with neon glow
Drifting particle starfield on canvas
A grid of short lines that all rotate to point toward the cursor
Two colour-blended light rays fanning from a corner, steering toward the cursor
A raymarched, ever-folding plasma field tinted to your accent colour
Vertical blinds of a shifting gradient with a cursor-following spotlight
A lattice of cells that glow near the cursor and fade behind it
A field of dots that bulge away from the cursor and glow as it passes
A bundle of noise-displaced threads that fan out and follow the cursor
A dense grid of connected lines rippling with noise and an elastic cursor drag
A scrolling square grid that fills and trails behind the cursor on hover
A flickering bolt of light carved from drifting fractal noise
A CRT-style grid of glowing glyphs with scanlines and glitch flicker
A line grid rippling outward from the centre, with a cursor-driven ripple
A perspective field of 3D cubes rising and falling in a wave, rippling under the cursor
A vertical laser beam with drifting wisps and volumetric haze that leans toward the cursor
A tunnel of light streaks rushing past that accelerates while you hold the pointer
A field of pixel shapes driven by noise, with ripples bursting from each click
Motion that means it
Decodes scrambled characters into the final text
Types text out with a blinking cursor
An animated gradient sweeping across the text
Staggers words into view on scroll
A button with a moving shine sweep
Two comet-like glows orbit the button's edge in opposite directions
A button that bursts thin radial spark lines from the click point
A button that leans toward the cursor
A button with an animated glowing border
A button that emits a ripple on click
Move your cursor across the card.
A card that tilts in 3D toward the cursor with a glare
Move your cursor to reveal the glow.
A card with a spotlight that follows the cursor
Light travels around the edge.
A card with a beam of light travelling its border
Hover to reveal
Smooth animations reveal richer content when you interact.
A card that reveals its content on hover
Hover to see what's on the other side.
Two faces stacked in one perspective plane, rotated on the Y-axis. No slide, no fade - a genuine flip.
A card that flips in 3D on hover to reveal a feature list
A stack of cards that fans out into a spread on click
Hot Reload
Dev Server
A frosted glass card with a liquid distortion effect and mock player controls
This week’s delivery cadence at a glance.
Three concentric progress rings animating in from a database
A grid that leans away from your cursor and lights up as it passes.
A dot grid that reacts to and repels from the cursor
Token-driven, no hardcoded colour.
Copy-paste source, zero required props.
Reduced-motion aware, 60fps by default.
A depth-stacked deck that auto-cycles, sending the front card to the back
A grid of tiles that tilt in 3D toward the cursor, with a ripple on click
Cool text animations for your projects.
Smooth motion for your projects.
Reusable pieces for your projects.
Beautiful backdrops and patterns.
A draggable, snap-to-slide carousel with dot indicators
Alex Rivera
@alexrivera
A profile card that tilts with a holographic sheen sweeping across it
A scrollable list whose bottom edge fades into a gradually increasing blur
Hover to reveal
A grid of pixels dissolves in from the edges on hover
A folder icon that fans out three papers on click
Move near an edge
The nearest side lights up
Only the edge nearest the cursor lights up
Hover me
A glare sweeps across on hover
A diagonal light glare that sweeps across the surface on hover
Dropped three Flux components into a client dashboard and it instantly looked like we'd hired a motion team.
The tokens just work. Everything themes together out of the box — no fighting stray hex values.
Copy, paste, done. My AI agent wires these up in seconds and they never jank on a scroll.
Dropped three Flux components into a client dashboard and it instantly looked like we'd hired a motion team.
The tokens just work. Everything themes together out of the box — no fighting stray hex values.
Copy, paste, done. My AI agent wires these up in seconds and they never jank on a scroll.
Finally a registry where every effect respects reduced-motion. Accessibility for free is a rare treat.
The tilt card alone earned its keep. Reviewers thought we'd spent a sprint on it — it was ten minutes.
Smooth, tasteful, and it all runs on transform and opacity. Exactly the kind of polish I want to ship.
Finally a registry where every effect respects reduced-motion. Accessibility for free is a rare treat.
The tilt card alone earned its keep. Reviewers thought we'd spent a sprint on it — it was ten minutes.
Smooth, tasteful, and it all runs on transform and opacity. Exactly the kind of polish I want to ship.
Two rows of review cards scrolling in opposite directions, fading at the edges and pausing on hover
A video poster whose play button springs open a modal player
A glowing rotating ring spinner
An animated gradient progress bar
Three dots pulsing in sequence
A skeleton placeholder with a shimmer sweep
Fetching the latest from the registry
A layered, multi-ring conic-gradient loader with a title and subtitle
A scrolling terminal-style task log with a progress ring
Looping shimmer status words for a busy state
Build #s175ap in progress
A spinner that morphs into a success checkmark as a task completes
A terminal that types a command then reveals an install log line by line
Shipped: Flux components now animate in under a millisecond of layout thrash.
Every effect in the registry runs on transform + opacity only, so it holds 60fps even on mid-range hardware.
Tried the tilt card in prod today, feels great on trackpad and touch alike.
A social-post style card with a quoted reply thread
Everything included, nothing extra to install.
Measured on every release.
Where Flux has been, and what's next.
First components shipped
Motion primitives added
Public registry launch
Reduced-motion audit
A bento-style grid mixing a checklist, a metric bar, and a timeline tile
Every animation renders at 60fps with zero layout thrashing.
Copy the source straight into your project - no package to install or maintain.
MIT-licensed, so you can ship it, fork it, or rebrand it freely.
Every prop, ref, and variant is fully typed end to end.
Built on Motion's spring physics for interactions that feel alive.
Paste a reference snippet and an agent rewrites it as a native component.
A grid of feature cards that tilt toward the cursor and dim their siblings on hover
A horizontally scrollable carousel of listing cards
Rapidly cycles short words in and out with a slide transition
Text that slices in half and reveals on hover
Text with a stacked drop-shadow that flattens on hover
Splits a line into characters that rise, un-tilt and fade in one after another
Clarityarrivesonewordatatime.
Words sharpen into focus from a blurred, offset start
A word ring that spins continuously and speeds up on hover
Move closer.
Letters scale and brighten the closer the cursor gets to them
A two-layer RGB-split glitch jittering behind the true text
A number that springs up to its target as it scrolls into view
Staysharponwhatmatters.
Cycles a sentence word by word, sharpening the active word
A button that bursts into particles on a successful click
A button that magnetically attracts nearby particles on hover
A button that expands into a row of share icons
A layered gradient button with a soft inner glow
A keyboard-shortcut button with a shine sweep on hover
A sun icon that flips between a light and dark label on click
A link button whose label slides up to reveal a second line on hover
A pill-shaped navigation bar that morphs around the active link
A vertical list of options that curves away from the selected item
A macOS-style dock where icons enlarge based on cursor distance
An active-item indicator that morphs between nav items with a liquid, gooey blur
A scrollable list whose rows fade and scale in as they enter view
A vertical nav where items nearest the cursor shift toward accent colour
A floating icon toolbar with an animated selection notification
Zero required props, every option typed with a sensible default.
A tab switcher with a sliding background pill and content crossfade
A command-palette style search input with a live results list
An account dropdown menu with a bending-line hover indicator
Tap to preview the sheet
A bottom-sheet drawer that slides up with staggered content
Drag a file here
or choose one from your device
A drag-and-drop file upload zone with animated states
Choose an avatar
A profile setup form with a colour-ringed avatar stage
Team size
An increment/decrement counter with an animated avatar stack
Add the component library to your project with your package manager of choice.
A multi-step flow with progress dots and sliding step transitions
50
A drag slider that squashes and springs back past its ends