Animated React components
Free animated React components built with Motion: marquees, split-flap boards, number rolls, tilt cards, text effects, spotlight panels and scroll reveals.
44 itemsFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
Motion should explain something: where an element came from, what changed, what to look at next. These components use Motion with spring physics and short durations, and every one respects reduced motion settings.
Several are driven by the shared light source, so shadows, sheens and highlights move together across the page rather than each effect doing its own thing.
Components 5
Light ProvideruiA page wide light source that follows the pointer and drifts when idle, driving shadows via CSS variables, plus a hairline, glass, metal and paper switcher.npx shadcn@latest add ui.minidev.pro/r/light-provider.jsonMarqueeuiAn infinitely scrolling Tailwind strip that loops its children horizontally, duplicated for a gapless cycle, and stops when users prefer reduced motion.npx shadcn@latest add ui.minidev.pro/r/marquee.jsonMorph PaneluiA React button that morphs into the panel it opens on a spring, blurring the label out and the form in. Ships with a feedback form and closes on Escape.npx shadcn@latest add ui.minidev.pro/r/morph-panel.jsonNumber RolluiAn odometer style animated number where each digit rolls on a spring and only changed digits move. Supports Intl formatting, trend tint and reduced motion.npx shadcn@latest add ui.minidev.pro/r/number-roll.jsonSplit FlapuiSplit-flap display that flips each character through the alphabet like a departure board, with a column ripple, tones, sizes and reduced motion support.npx shadcn@latest add ui.minidev.pro/r/split-flap.json
Motion 39
Animated Feature RowmotionA row of feature cards that slide up with a staggered delay when scrolled into view. Pass title and description pairs; reduced motion keeps them still.npx shadcn@latest add ui.minidev.pro/r/animated-feature-row.jsonCard TiltmotionA card that tilts in 3D toward the pointer on springs, with an accent glare that follows the cursor. It stays flat when reduced motion is preferred.npx shadcn@latest add ui.minidev.pro/r/card-tilt.jsonCursor Spotlight PanelmotionA panel whose accent radial spotlight follows the cursor, driven by Framer Motion values without re-renders. It shows a still surface for reduced motion.npx shadcn@latest add ui.minidev.pro/r/cursor-spotlight-panel.jsonDevice Frame StackmotionThree device frames labelled mobile, app and docs that spring into a fanned, rotated stack when scrolled into view. Works as a hero or feature visual.npx shadcn@latest add ui.minidev.pro/r/device-frame-stack.jsonFlip Stat BoardmotionA stat board where each number counts up with digits that flip in on a spring once in view. Pass values and labels; reduced motion shows the final value.npx shadcn@latest add ui.minidev.pro/r/flip-stat-board.jsonGrid RevealmotionA grid of labelled tiles that slide up in quick succession as the section scrolls into view. Pass any list of strings; it honors reduced motion.npx shadcn@latest add ui.minidev.pro/r/grid-reveal.jsonHorizontal Product RailmotionA horizontally scrolling rail of tagged product cards that slide in and lift on hover. The rail is a focusable, labelled region for keyboard scrolling.npx shadcn@latest add ui.minidev.pro/r/horizontal-product-rail.jsonLight FieldmotionA WebGL shader background of drifting color silk with a soft cursor light and grain. It renders at half resolution, pauses offscreen and adapts to dark mode.npx shadcn@latest add ui.minidev.pro/r/light-field.jsonLive Component RailmotionA rail of live component cards, including buttons, a badge, a switch and a destructive action, that rise into view with a quick stagger on scroll.npx shadcn@latest add ui.minidev.pro/r/live-component-rail.jsonMasked Gradient HeadlinemotionA gradient text headline that wipes in from left to right with a clip path reveal when it scrolls into view. Accepts any children as the heading text.npx shadcn@latest add ui.minidev.pro/r/masked-gradient-headline.jsonMetric Ticker BoardmotionA four cell metric board where each number counts up from zero with an eased tween when it enters the viewport, with optional suffixes like plus or %.npx shadcn@latest add ui.minidev.pro/r/metric-ticker-board.jsonOnboarding MotionmotionAn animated onboarding card with a clickable segmented step bar, content that slides between steps, back and continue buttons, and a final CTA.npx shadcn@latest add ui.minidev.pro/r/onboarding-motion.jsonOrbit Logo ClustermotionA cluster of logo chips orbiting a center badge in a slow continuous rotation, with labels counter rotating to stay upright. Pass center text and logos.npx shadcn@latest add ui.minidev.pro/r/orbit-logo-cluster.jsonParallax PanelmotionA panel where the heading text and a glowing accent orb move at different speeds as you scroll, giving scroll linked parallax depth with transforms only.npx shadcn@latest add ui.minidev.pro/r/parallax-panel.jsonPin Scroll GallerymotionA pinned horizontal scroll gallery: the section sticks while vertical scrolling slides frames sideways. Falls back to a three column grid for reduced motion.npx shadcn@latest add ui.minidev.pro/r/pin-scroll-gallery.jsonScroll Chapter StorymotionA scroll story of three chapters that slide in as you scroll, with a sticky progress bar that fills with scroll position across the whole section.npx shadcn@latest add ui.minidev.pro/r/scroll-chapter-story.jsonScroll RevealmotionA React wrapper that slides its children up into place once they scroll into view, with configurable offset and delay. Renders still for reduced motion.npx shadcn@latest add ui.minidev.pro/r/scroll-reveal.jsonSoft StackmotionA stack of three offset cards that spring up into a layered, slightly scaled pile when scrolled into view. A compact depth visual for feature sections.npx shadcn@latest add ui.minidev.pro/r/soft-stack.jsonStack Reveal StorymotionThree story cards that rise and overlap into a stack on wider screens as they scroll into view, falling back to a simple vertical list on mobile.npx shadcn@latest add ui.minidev.pro/r/stack-reveal-story.jsonStats CountermotionA single stat that counts up from zero to its value once it is in view, with a label below. Combine several in a row for landing page metrics.npx shadcn@latest add ui.minidev.pro/r/stats-counter.jsonSticky Feature StorymotionA sticky scroll section where the active step highlights as you scroll and a pinned preview swaps with a step counter. Pass your own steps as props.npx shadcn@latest add ui.minidev.pro/r/sticky-feature-story.jsonText ScramblemotionA text effect that scrambles random glyphs and resolves to the final string letter by letter when it scrolls into view. Its aria-label keeps the real text.npx shadcn@latest add ui.minidev.pro/r/text-scramble.jsonTypographic MarqueemotionA large type Tailwind marquee that loops phrases horizontally in an endless scroll. Pass a phrases array; the loop stops for users who prefer reduced motion.npx shadcn@latest add ui.minidev.pro/r/typographic-marquee.jsonShimmer ButtonmotionA React call to action with a slow band of light sweeping across it, a lit top edge and a press state. Ink or accent tone, renders as a button or a link.npx shadcn@latest add ui.minidev.pro/r/shimmer-button.jsonBorder BeammotionWrap any card with a beam of light that travels around its border. A masked conic gradient in your accent colors, with pricing card demo, pauses for reduced motion.npx shadcn@latest add ui.minidev.pro/r/border-beam.jsonGradient TextmotionHeadline text filled with a slowly drifting gradient built from your accent tokens. A real text node for SEO and screen readers, still for reduced motion.npx shadcn@latest add ui.minidev.pro/r/gradient-text.jsonWord RotatemotionRotates words inside a sentence: the old word lifts and blurs away as the next rises in. The slot keeps the widest word's width so the line never jumps.npx shadcn@latest add ui.minidev.pro/r/word-rotate.jsonOrbiting CirclesmotionIcons orbit a central hub on hairline rings for integration sections. Set radius, speed and direction per ring; icons stay upright while they travel.npx shadcn@latest add ui.minidev.pro/r/orbiting-circles.jsonAnimated BeammotionLight travels along curved paths from sources into a hub and out to a result, measured from the real DOM. Includes a Beam primitive to connect any two elements.npx shadcn@latest add ui.minidev.pro/r/animated-beam.jsonTyping TextmotionA React typewriter that types a phrase, holds, deletes and moves on, with a blinking accent caret. Starts in view and gives screen readers the plain text.npx shadcn@latest add ui.minidev.pro/r/typing-text.jsonAnimated ListmotionA live feed where new items drop in at the top with a spring and older ones slide down. Ideal for activity streams, notifications and happening now sections.npx shadcn@latest add ui.minidev.pro/r/animated-list.jsonConfetti ButtonmotionA React button that bursts confetti from itself on click, with gravity, drag and spin on a temporary canvas. No library, and skipped for reduced motion.npx shadcn@latest add ui.minidev.pro/r/confetti-button.jsonSparkles TextmotionHeadline text with four point stars that twinkle around it in your accent colors. The sparkles are decorative and hidden; the text stays plain and readable.npx shadcn@latest add ui.minidev.pro/r/sparkles-text.jsonText RevealmotionA paragraph that lights up word by word as it scrolls through the viewport, from muted to full ink, using Motion scroll progress. Still text for reduced motion.npx shadcn@latest add ui.minidev.pro/r/text-reveal.jsonMeteorsmotionMeteors is a React background effect that sends accent colored streaks with fading tails falling diagonally behind your content, with count, angle and speed props.npx shadcn@latest add ui.minidev.pro/r/meteors.jsonRetro GridmotionRetro Grid is a React background that draws a perspective grid floor receding to a glowing horizon and scrolling slowly toward the viewer, with angle and cell size props.npx shadcn@latest add ui.minidev.pro/r/retro-grid.jsonRipplemotionRipple is a React background of concentric rings that pulse outward from the center or any point, staggered and fading, with an extra ripple sent from each click or tap.npx shadcn@latest add ui.minidev.pro/r/ripple.jsonParticlesmotionParticles is a React canvas background of drifting points that repel or attract around the pointer, colored from your accent token and sharp on high density screens.npx shadcn@latest add ui.minidev.pro/r/particles.jsonFlickering GridmotionFlickering Grid is a React canvas background of small squares whose opacity flickers at random, with square size, gap, flicker chance, color and radial fade mask props.npx shadcn@latest add ui.minidev.pro/r/flickering-grid.json
See them live
Galleries render these components with sample data in every state.
Frequently asked questions
Which animation library do these use?
They use Motion (the successor to Framer Motion) where physics or gestures are needed, and plain CSS where a transition is enough.
Do animations respect reduced motion?
Yes. Every component checks prefers-reduced-motion and falls back to a static or instant version.
Will animations hurt performance?
They animate transform and opacity, pause when off screen where it matters, and avoid layout thrashing.