Framer Motion Components for React
Thirty-two components built on Motion, the animation library formerly published as Framer Motion. It ships as the motion package now, and these lean on it for what it does best: layout animation, gesture handling, and springs that survive interruption. Every one installs with a single dependency beyond React, and the source is unmodified idiomatic Motion, so it reads like code you would have written rather than a wrapper you have to learn.
32 components · all free
In This Collection
Mask Blur
Progressive edge blur — stacked backdrop-filter layers dissolve content toward a chosen edge.
Built with motion
Animated Number
Animated numeric transitions with flip, slide, fade, and bounce styles.
Built with motion
Variable Proximity
Text whose letters interpolate font weight by cursor proximity.
Built with motion
Letters Pull
A per-letter pull-up reveal — letters rise, sharpen from a blur, and fade in with a stagger.
Built with motion
Long Shadow
Text that casts a long shadow sweeping like a sundial through the hours.
Built with motion
Specter
Spectral RGB-split echoes drift off the letters and dissolve into the dark.
Built with motion
Lumen
Copy that lights up as you read it — words ahead sit dim and unfocused, and stay lit once you pass them.
Built with motion
Teletype
A line of type arriving one character at a time, at a rate that varies and with a beat at every mark.
Built with motion
Reflow
Text whose words keep their identity when the line breaks move — narrow the measure and the sentence travels instead of re-wrapping.
Built with motion
Spotlight Shell
A card shell with 3D magnetic tilt, radial glow, and a shimmer sweep.
Built with motion
Animated Hamburger
A three-bar hamburger that morphs to an X, driven by a toggle prop.
Built with motion
Morph Dialog
A dialog that morphs open from its trigger via shared-layout animation, with elements that travel between card and panel.
Built with motion
Corner Letters
Four glyphs pinned to the container corners that blur-and-scale in on mount and dissolve out on exit.
Built with motion
Hover List
A display-type list where a shared accent block springs between rows on hover while the text indents and inverts.
Built with motion
Stagger Menu
A menu overlay that blooms open as a clip-path circle spring while items stagger in with blur and rotation, then collapses back to its pill.
Built with motion
Magnetic Button
A button that leans into your cursor — caught in a magnetic field it slides toward the pointer while an amethyst aura swells with proximity, then snaps home on a spring and answers every click with a dark ripple bursting outward from the point of contact.
Built with motion
Shadow Cursor
A custom cursor with a shadow at its heel — a precise dot leads while a lagging blade trails on a spring, and when it crosses an interactive element the trail pools and swells around it, inverting whatever lies beneath. Scoped entirely to its own stage; the page cursor is never touched.
Built with motion
Hold
A confirm that has to be earned — the ring fills while you hold, snaps shut when it commits, and empties on a different curve entirely if you let go early.
Built with motion
Aperture
A camera iris. Blades pivot on a ring of pins and one shared angle drives the whole mechanism — wide open at 64% of the housing, past the centre and light-tight at zero, cutting the scalloped polygon a real iris makes on the way through.
Built with motion
Segmented
A segmented control whose indicator travels on a shared layout id and smears in the direction it is moving.
Built with motion
Tether
A popover that grows out of the corner nearest its trigger, and moves that origin when it flips.
Built with motion
Inline Edit
Text that becomes its own input with nothing moving — one padded box, two contents, sized in CSS.
Built with motion
Reorder
A sortable list that answers to a finger and to a keyboard equally — grab a row, and the rest step aside to make the space.
Built with motion
Passcode
A one-time-code field whose cells answer every keystroke: each character lands compressed and springs back, a paste distributes across the row rather than filling it on one frame, a wrong code shakes and clears itself, and a right one folds the whole row into a tick. Underneath there is exactly one real input holding the whole code — which is what keeps SMS autofill, password managers, select-all and a screen reader working, none of which survive six inputs with maxLength one.
Built with motion
Dial
A machined rotary knob: angular drag with detents you can feel on the way past, inertia on a flick, and a spring that settles into the nearest stop. The angle lives in a motion value rather than in React state — a drag writes it sixty times a second and a spring more often than that — so the only thing React holds is the detent index, and only when that integer actually changes. Arrow keys step through the same spring the hand does, so the keyboard is not a second, worse path to the same control.
Built with motion
Command Palette
A cmdk command menu with a plain or liquid-glass surface and hotkey trigger.
Built with motion
Parallax Rail
A pinned section where scrolling down drives content sideways across depth planes moving at different rates.
Built with motion
Approval Flow
A step-by-step approval checklist for agent permissions — radio and checkbox groups, an "Other…" escape hatch that grows a field in place, and per-step validation that blocks the commit. Answering a step sends the chosen option flying into a running record of what you have already decided, so the screen accumulates a decision trail instead of replacing itself.
Built with motion
Diff Review
A review surface for a patch an agent has proposed — accept or reject each hunk, fold long runs of unchanged lines away, and flip between unified and split. Switching views does not redraw the diff: every line is a shared element that flies from the stream into its column and back, so you never lose the line you were reading.
Built with motion
Ledger
A live activity log for a working agent. Consecutive events from the same source fold into one block instead of stacking as identical rows, the window holds a fixed number and lets the rest fall off the top, and the scroll stays pinned to the newest line only until you scroll away from it — after that it keeps running and tells you how far behind you are.
Built with motion
Rewind
An undo history you can scrub, and that refuses to throw the future away. Drag the head and the interface reverts live under your finger rather than on release; act from a past point and the abandoned future stays drawn on the rail as a branch you can walk back onto, instead of being silently destroyed the way every real undo stack destroys it. Controlled in the same shape as Ledger — it owns the rail, the gesture and the branch graph, and your reducer owns the states.
Built with motion
Stream
An AI response surface that streams the way live chat UIs stream — a shimmer while the model thinks, tokens arriving on an irregular clock and blurring into place, a generation caret riding the last word, and stop and regenerate controls that actually interrupt. The cadence rides the animation clock rather than timer chains, so pausing the bench freezes generation mid-word. Only the trailing window of tokens are live animated elements — everything older folds into one static text node, so a long answer never accumulates a thousand springs — and an invisible ghost of the full answer holds the final height, so neither the thinking-to-streaming swap nor the stream itself ever moves layout.
Built with motion