A button that leans toward the cursor with a springy, physical pull.
Motion that makesinterfaces feel alive.
Copy-paste React components built with TypeScript, Tailwind CSS and Motion. No package to install and no lock-in. The code is yours.
Founding member
No. 0042
Move your pointer across
Monthly revenue
New this month
See everything →- ButtonsNewArrow Slide ButtonA call to action whose arrow slides out on hover while a fresh one slides in from the left. Pure CSS, solid or outline.
- ButtonsNewInk Fill ButtonAn outline button that floods with colour from exactly where the cursor came in, and drains out towards where it leaves.
- ButtonsNewRipple ButtonA button that sends a ripple out from exactly where it was pressed, or from the centre when pressed from the keyboard.
- ButtonsNewPush ButtonA chunky, tactile 3D button that lifts a little on hover and presses down onto its base when clicked, like a real key.
- ButtonsNew · PlusConfetti ButtonA celebratory burst of brand-coloured confetti that flies up, flutters as it falls and fades, for sign-ups, purchases and wins.
- ButtonsNew · PlusSlide to ConfirmConfirm by sliding the knob all the way across, for payments and deletions. Tapping the knob or the arrow keys work too.
01 · The library
Small details. Big impact.
Animated buttons, cards, text effects, navigation, backgrounds and whole sections for React. Every preview is the real component. Open one to copy its full source.
A small light that travels around any element's border at a steady pace. Subtle, premium, never distracting.
Crystal-clear glass cards with lens-like edges, rainbow dispersion, a rim highlight that tracks the pointer and a liquid press.
Text that decodes itself character by character, terminal style.
Accessible tabs with a sliding indicator and soft content transitions.
A ⌘K palette with live filtering, grouped results and a highlight that glides between them.
Drifting, blurred color fields for hero sections and empty states.
Drag a handle across two layers to compare before and after, smoothly sprung.
A retro perspective grid rolling toward a glowing horizon, synthwave style.
02 · Why MotionKit
Built for people who care about the details.
One command to install
The shadcn CLI adds the file and its dependencies. Plus members get every component in their own theme.
Fits your stack
Built with TypeScript, Tailwind CSS v4 and Motion. Works in Next.js, Vite and Astro.
03 · Accessibility
Every component audited. Reports included.
All 133 components are checked against WCAG 2.2 for keyboard, screen readers, reduced motion and contrast. Each page publishes the result, including where a component only partly meets a criterion and what to do about it.
- Keyboard
- 54/ 55 pass1 partial, with notes · 78 not applicable
- Screen readers
- 133/ 133 passNo exceptions
- Reduced motion
- 114/ 133 pass19 partial, with notes
- Colour contrast
- 85/ 107 pass22 partial, with notes · 26 not applicable
04 · How it works
From idea to shipped, in four steps.
Scroll through. Each step is a real part of MotionKit.
Find the right motion
Browse by category or by how things move: cursor effects, scroll animations, loops and micro-interactions. Every preview is the real component.
Search 133 components…Magnetic ButtonShimmer ButtonHold to ConfirmSubmit ButtonSpotlight CardTilt CardDepth CardHolographic CardSpotlight GridOrbit BorderBorder BeamLiquid Glass CardsTune it live
The playground has a control for every prop. Drag, toggle and type until it feels right, then share the exact setup as a link.
Make it your colours
Pick a theme in Theme Studio and every preview, snippet and install follows, shade by shade.
ButtonPetrolButtonIndigoButtonEmeraldButtonRoseInstall in one line
Copy the source or run one shadcn command. The file is yours: no package, no lock-in.
$ npx shadcn@latest add @motionkit/magnetic-button
✔ Installing dependencies: motion
✔ Created components/motionkit/magnetic-button.tsx
import { MagneticButton } from "@/components/motionkit/magnetic-button";
05 · Page Builder
A landing page in five minutes.
Stack MotionKit sections, reorder them and write your own words. Plus members export the whole page as one page.tsx, in their own colours, with a single command to install everything it uses.
06 · Categories
Find the right motion.
- Animated buttons14 componentsMagnetic Button, Shimmer Button, Hold to Confirm and more
- Animated cards11 componentsSpotlight Card, Tilt Card, Depth Card and more
- Animated text32 componentsGradient Text, Text Scramble, Number Ticker and more
- Animated navigation7 componentsAnimated Tabs, Magnetic Dock, Command Menu and more
- Animated inputs6 componentsLiquid Toggle, Code Input, Elastic Slider and more
- Animated feedback4 componentsToast, Stepper, Status Dot and more
- Animated charts6 componentsKPI Card, Odometer, Donut Chart and more
- Animated layout7 componentsMarquee, Accordion, Compare Slider and more
- Animated backgrounds39 componentsAurora Background, Dot Glow Background, Grain Gradient and more
- Animated sections7 componentsPricing Section, Launch Hero, Bento Grid and more
07 · MotionKit Plus
Start free. Go Plus when you're ready.
Premium components and sections, every colour and style control, Theme Studio, Page Builder and commercial use.
Free
£0/ forever
Get started with MotionKit
- Free components with full React source
- Live previews and playgrounds
- Basic customisation: sliders, toggles and text
- Install free components with the shadcn CLI
- Try Theme Studio and Page Builder
Plus Monthly
£12/ month
For developers who prefer flexibility
- Every premium component and full-page section
- Complete React and TypeScript source code
- Every colour and style control
- Theme Studio: your colours across every preview, snippet and install
- Page Builder: export whole landing pages as page.tsx
- Personal token for the shadcn CLI
- Commercial use
- New premium components while subscribed
- Cancel anytime
Plus Yearly
Best value£96/ year
Equivalent to £8/month, billed annually.
Save £48 per year. 33% off.
- Everything in Plus Monthly
- Commercial use for client projects
- Save 33% compared with monthly
- Priority access to new features
Made by Hizmedia
Built in the UK, used worldwide.
MotionKit is designed and maintained by Hizmedia, a UK studio building custom CMS platforms, ecommerce systems, apps and websites for clients worldwide. Built for your needs. Compatible with your site. Owned by you.
Start free. Make it yours.
133 components, live previews and real code you own. Upgrade to Plus when you want the lot.
