A button that leans toward the cursor with a springy, physical pull.
73 components
Free Animated React Components
Every component on this page is free: open it, play with it, then copy the TypeScript source into your project or install it with one shadcn CLI command. There's no npm package to keep updated and no account needed. They're built with React, Tailwind CSS and Motion, they work in Next.js, Vite and Astro, and each one respects reduced motion and comes with an accessibility report. Free components are for personal projects; commercial and client work needs MotionKit Plus.
A dark button with a light sweep that draws the eye without shouting.
A button that fills while held, so destructive actions can never happen by accident.
Morphs from its label to a spinner, then to a drawn tick or a shake, so every save feels answered.
A card with a soft glow that tracks the pointer across its surface.
A 3D card that tilts toward the pointer, with an optional moving glare.
One soft beam follows the pointer across a grid, lighting the borders and faces of the cards it passes.
A container whose border carries a light that travels around it.
A small light that travels around any element's border at a steady pace. Subtle, premium, never distracting.
A deck you swipe through: fling the top card and it tucks in at the back.
Cards that morph smoothly into a full detail view, then fold back into place.
Headline text with a slowly flowing, seamlessly looping gradient.
Text that decodes itself character by character, terminal style.
Counts up to a value with an eased finish when it scrolls into view.
Words lift out of a blur one after another as the line scrolls into view.
Rotates through a list of words, letters rising in and drifting out.
Headlines that rise letter by letter, slide up line by line, blur into focus or light up as you scroll.
A marker-pen sweep draws behind your key words as they scroll into view, line by line like a real pen.
A hand-drawn scribble, swoosh, double line, circle or strike-through traces itself around your words.
Bars cover the key facts like a classified file, then lift one by one on scroll, hover or click.
A narrow glint of light sweeps across the letters every few seconds, like light catching metal.
Letters near the cursor swell to a heavier weight and ease back as it moves on, using a variable font.
Each letter leans toward the cursor and springs home, like a magnetic button for every character.
On hover or focus, the letters swap places a few times and slide home. Made for links and buttons.
Types a phrase, pauses, backspaces and types the next, with a human rhythm and a caret that blinks only at rest.
Text circles slowly around an icon, like a stamp. Pauses under the pointer and picks up where it stopped.
A pinned sentence whose key word changes as you scroll, with the space around it resizing smoothly.
Accessible tabs with a sliding indicator and soft content transitions.
A floating icon bar that magnifies and lifts around the pointer, with tooltips and a gliding active indicator.
A ⌘K palette with live filtering, grouped results and a highlight that glides between them.
A pill navbar where a soft highlight glides to whatever you point at or tab to.
A switch whose knob stretches like liquid on its way across, then settles.
One-time-code boxes where each digit pops in, with paste and phone autofill built in.
Stacking notifications with swipe-to-dismiss, hover-to-pause and variants.
A seamless infinite scroller for logos and testimonials that pauses on hover.
Progress through steps: the line fills, and each finished step draws its own tick.
A headline number that counts up beside a sparkline that draws itself, with a change badge and hover readout.
Every digit rolls on its own wheel to the new value, like a mileage counter, rather than counting up.
FAQ panels that open with a smooth, springy height and a turning chevron.
Drag a handle across two layers to compare before and after, smoothly sprung.
A line that draws itself through your steps when the section scrolls into view, with a dot of light travelling along it.
Icons, labels and shapes circling a central logo on rings, each with its own speed and direction.
Drifting, blurred color fields for hero sections and empty states.
A quiet dot grid that lights up in teal around the pointer.
Slow, drifting colour with a fine film grain, for warm editorial heroes.
Thin grid lines with streaks of light falling down them at scattered times.
A tiled grid where a click sends a wave of light rolling outward.
Topographic lines that slowly shift like terrain, with a vignette for your content.
A slow-drifting night sky with twinkling stars, for space, launch and AI product heroes.
A retro perspective grid rolling toward a glowing horizon, synthwave style.
Shooting stars streaking across a dotted sky at scattered times.
A field of tiny squares that flicker softly, drawn on a canvas so it stays light.
A cone of light from above that sways gently and turns to follow the pointer.
A soft ribbon of light behind the pointer, across the window or inside one section.
A like or favourite toggle: the heart pops, a ring expands, sparks fly and the count rolls up.
A range slider with give: the value bubble leans as you drag, and pulling past the ends stretches the track like rubber.
A password field with a four-bar strength meter and requirements that tick themselves off as you type.
Segments draw themselves in on scroll; hover, tap or tab to one to lift it and read its value and share in the middle.
Letters lift and settle one after another, like a wave running through the word: on hover, or as a gentle loop.
A short burst of digital glitch: the word splits into two coloured channels, slices jump sideways, then it snaps back clean.
A soft, blurred conic gradient turning slowly behind your content, like light moving round a room.
Out-of-focus orbs of light drifting slowly upwards and swaying, like the background of a night photograph.
A copy-to-clipboard button whose clipboard icon spins into a drawn tick while the label swaps to Copied, without the button changing width.
Keycaps for a keyboard shortcut that press down when you hold the real keys, for command menu hints, docs and onboarding.
A live status indicator for services and deploys: the dot blends between colours and pulses softly only when something needs attention.
An install command in npm, pnpm, yarn and bun, with a sliding pill, a copy button and a choice that follows to every block on the page.
The rim of a dark planet catching the light, with a soft atmosphere and a highlight gliding along the curve. Pure CSS.
A radar scope with range rings and a turning beam, where contacts flare as the beam passes over them, then fade.
Flying down an endless tunnel: rings rush towards you, streaks of light race past and the vanishing point leans to the cursor.
A paragraph that reads itself in as you scroll: words start faint and brighten one after another, at the pace of your scrolling.
A heading drawn as an outline that floods with solid colour from left to right, on hover or as it scrolls into view.
A halftone screen in motion: dots swell and shrink with slow, crossing waves like a printed gradient breathing, and grow around the cursor.
Columns of code characters raining down, each led by a brighter glyph and fading into the dark. A calmer, on-brand take on code rain.