133 animated React components · updated every week

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.

TypeScript Tailwind CSS v4 Motion for React Reduced-motion aware
Try it in your colours
Your own colours →

Founding member

No. 0042

Move your pointer across

Holographic Card
Magnetic Dock
$48,200

Monthly revenue

Number Ticker
Liquid Toggle

New this month

See everything →

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.

View all 133 components

A button that leans toward the cursor with a springy, physical pull.

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.

Drag a handle across two layers to compare before and after, smoothly sprung.

A retro perspective grid rolling toward a glowing horizon, synthwave style.

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

See how we audit →

04 · How it works

From idea to shipped, in four steps.

Scroll through. Each step is a real part of MotionKit.

  1. 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 Button
    Shimmer Button
    Hold to Confirm
    Submit Button
    Spotlight Card
    Tilt Card
    Depth Card
    Holographic Card
    Spotlight Grid
    Orbit Border
    Border Beam
    Liquid Glass Cards
  2. Tune 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.

  3. Make it your colours

    Pick a theme in Theme Studio and every preview, snippet and install follows, shade by shade.

    ButtonPetrol
    ButtonIndigo
    ButtonEmerald
    ButtonRose
  4. Install 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";

Built with MotionKit: Scroll Showcase →

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.

Open Page Builder

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.

Compare plans

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.