SVG gradient trace
A radial gradient stroke that follows the cursor across SVG paths.
Motion components
for Interfaces
MotionKit is a free collection of 18 hand-tuned React animations, plus seven playgrounds for SVG, shaders, ASCII and more. Copy a file, paste it, ship it.
- Reactv19.2
- Tailwind CSSv4
- Motionv12
- Next.jsv16
Staggered list
- Component Library
- Animation Guide
- Design System
- Motion Kit
Bunny mascot
Play / pause
Character counter
12
Smooth button
Letter swap
Animated counter
0
Components
Gooey search
Gooey dropdown
Typewriter
Premium Animations
Text scramble
MotionKit
Squiggly text
Wiggly!
Magnetic button
Copy-paste components
with motion built in
Buttons, counters, menus, text effects and SVG tricks. Every card is the real component running live.
Play / pause morph
Icon paths morph between states on a spring.
Gooey dropdown
A menu that melts out of its trigger with an SVG goo filter.
Animated counter
Digits roll into place with blur and stagger.
Character counter
A limit ring whose spring velocity grows as you near the end.
Presence modes
sync, wait and popLayout exits, side by side.
Stacked cards
A draggable deck of 3D cards you can flick away.
Gooey search
A search button that stretches into an input.
Text scramble
Characters resolve out of noise with a soft blur.
Staggered list
Rows cascade in one after another.
Smooth button
Idle, loading and success states that blur into each other.
Typewriter
Multi-phrase typing with a blinking caret.
Magnetic button
A button that leans toward your cursor.
Letter swap
Shared letters glide between words.
Parallax tilt card
3D perspective and glare that track the pointer.
Scroll reveal
Fade and rise as content enters the viewport.
Squiggly text
A hand-drawn wobble from an SVG turbulence filter.
Bunny mascot
An SVG character whose eyes follow you around.
Interactions worth playing with
Springs you can interrupt, filters that melt, cards that lean. Pick one, poke at it, then tune it live.
Playgrounds for every kind of motion
Seven browser tools for drawing, shading and animating, plus templates that put the pieces together.
SVG maker
Draw paths and export animated SVG.
Shaders
Tweak GPU gradients in real time.
ASCII animator
Turn images into living text art.
Isometric maker
Stack blocks on an isometric grid.
Shadow studio
Layer soft, realistic box shadows.
Backgrounds
Gradient and grid backdrops.
CSS playground
Try properties and copy the result.
Templates
Bigger compositions, ready to drop in.
Copy once. Own it forever.
MotionKit isn't a dependency. Each component is a single file you paste into your project and shape however you like.
- Spring physics
- Stiffness and damping instead of guessed durations, so motion settles the way objects do.
- Interruptible
- Change your mind mid-gesture and the animation follows from where it is.
- One file each
- No package to install or keep up to date. The code is yours to edit.
- Tunable live
- Every component exposes its springs and timings as props you can dial in on this page.
- Light and dark
- Each demo is checked against both themes before it ships.
- Small details
- Blur on crossfades, press feedback and staggered entrances come built in.
Frequently
asked questions
Anything else? Open an issue on GitHub.
Still have a question?
Issues and ideas are welcome.
Start shipping interfaces
that feel alive
Grab a component, paste it in, and tune the spring until it feels right.