# MotionKit > Copy-paste animated React components built with TypeScript, Tailwind CSS and Motion. 66 free components, no package to install: copy each component's source into your project. Works with Next.js, Vite and Astro. Requires the `motion` package. Every component respects reduced motion and ships with a WCAG 2.2 AA accessibility report. Categories: [Buttons](https://motionkitui.com/components/category/buttons), [Cards](https://motionkitui.com/components/category/cards), [Text](https://motionkitui.com/components/category/text), [Navigation](https://motionkitui.com/components/category/navigation), [Inputs](https://motionkitui.com/components/category/inputs), [Feedback](https://motionkitui.com/components/category/feedback), [Charts](https://motionkitui.com/components/category/charts), [Layout](https://motionkitui.com/components/category/layout), [Backgrounds](https://motionkitui.com/components/category/backgrounds) ## Animated React Button Components - [Magnetic Button](https://motionkitui.com/components/magnetic-button): A button that leans toward the cursor with a springy, physical pull. - [Shimmer Button](https://motionkitui.com/components/shimmer-button): A dark button with a light sweep that draws the eye without shouting. - [Hold to Confirm](https://motionkitui.com/components/hold-button): A button that fills while held, so destructive actions can never happen by accident. - [Submit Button](https://motionkitui.com/components/submit-button): Morphs from its label to a spinner, then to a drawn tick or a shake, so every save feels answered. ## Animated React Card Components - [Spotlight Card](https://motionkitui.com/components/spotlight-card): A card with a soft glow that tracks the pointer across its surface. - [Tilt Card](https://motionkitui.com/components/tilt-card): A 3D card that tilts toward the pointer, with an optional moving glare. - [Depth Card](https://motionkitui.com/components/depth-card): A card that tilts toward the cursor while its layers float at different depths, so each moves at its own speed. - [Holographic Card](https://motionkitui.com/components/holographic-card): A metallic rainbow foil that shifts and shimmers as the pointer moves, like a holographic trading card. - [Spotlight Grid](https://motionkitui.com/components/spotlight-grid): One soft beam follows the pointer across a grid, lighting the borders and faces of the cards it passes. - [Orbit Border](https://motionkitui.com/components/orbit-border): A container whose border carries a light that travels around it. - [Border Beam](https://motionkitui.com/components/border-beam): A small light that travels around any element's border at a steady pace. Subtle, premium, never distracting. - [Liquid Glass Cards](https://motionkitui.com/components/liquid-glass-cards): Crystal-clear glass cards with lens-like edges, rainbow dispersion, a rim highlight that tracks the pointer and a liquid press. - [Card Stack](https://motionkitui.com/components/card-stack): A deck you swipe through: fling the top card and it tucks in at the back. - [Expand Card](https://motionkitui.com/components/expand-card): Cards that morph smoothly into a full detail view, then fold back into place. ## Animated Text Effects for React - [Gradient Text](https://motionkitui.com/components/gradient-text): Headline text with a slowly flowing, seamlessly looping gradient. - [Text Scramble](https://motionkitui.com/components/text-scramble): Text that decodes itself character by character, terminal style. - [Number Ticker](https://motionkitui.com/components/number-ticker): Counts up to a value with an eased finish when it scrolls into view. - [Word Rise](https://motionkitui.com/components/word-rise): Words lift out of a blur one after another as the line scrolls into view. - [Morphing Text](https://motionkitui.com/components/morphing-text): Rotates through a list of words, letters rising in and drifting out. - [Kinetic Text](https://motionkitui.com/components/kinetic-text): Headlines that rise letter by letter, slide up line by line, blur into focus or light up as you scroll. - [Split-Flap Display](https://motionkitui.com/components/split-flap): An airport departures board: every tile flips through its drum, one character at a time, to land on your text. - [Kinetic Headline](https://motionkitui.com/components/kinetic-headline): Headlines that arrive word by word or letter by letter: slide, blur, hinge or rise from behind a mask, from any direction. - [Liquid Gradient Text](https://motionkitui.com/components/liquid-gradient-text): Pools of colour swirl and flow inside the letters, for headings that feel alive without moving an inch. - [Highlighter](https://motionkitui.com/components/highlighter): A marker-pen sweep draws behind your key words as they scroll into view, line by line like a real pen. - [Underline Draw](https://motionkitui.com/components/underline-draw): A hand-drawn scribble, swoosh, double line, circle or strike-through traces itself around your words. - [Redacted Reveal](https://motionkitui.com/components/redacted-reveal): Bars cover the key facts like a classified file, then lift one by one on scroll, hover or click. - [Shiny Text](https://motionkitui.com/components/shiny-text): A narrow glint of light sweeps across the letters every few seconds, like light catching metal. - [Variable Proximity](https://motionkitui.com/components/variable-proximity): Letters near the cursor swell to a heavier weight and ease back as it moves on, using a variable font. - [Magnetic Letters](https://motionkitui.com/components/magnetic-letters): Each letter leans toward the cursor and springs home, like a magnetic button for every character. - [Shuffle Text](https://motionkitui.com/components/shuffle-text): On hover or focus, the letters swap places a few times and slide home. Made for links and buttons. - [Typewriter](https://motionkitui.com/components/typewriter): Types a phrase, pauses, backspaces and types the next, with a human rhythm and a caret that blinks only at rest. - [Signature](https://motionkitui.com/components/signature): A name writes itself in a flowing hand, pen-stroke by pen-stroke, then finishes with a flourish. - [Rotating Badge](https://motionkitui.com/components/rotating-badge): Text circles slowly around an icon, like a stamp. Pauses under the pointer and picks up where it stopped. - [Scroll Word Swap](https://motionkitui.com/components/scroll-word-swap): A pinned sentence whose key word changes as you scroll, with the space around it resizing smoothly. ## Animated React Navigation Components - [Animated Tabs](https://motionkitui.com/components/animated-tabs): Accessible tabs with a sliding indicator and soft content transitions. - [Magnetic Dock](https://motionkitui.com/components/dock): A floating icon bar that magnifies and lifts around the pointer, with tooltips and a gliding active indicator. - [Command Menu](https://motionkitui.com/components/command-menu): A ⌘K palette with live filtering, grouped results and a highlight that glides between them. - [Command Centre](https://motionkitui.com/components/command-centre): A ⌘K command palette with recent actions, fuzzy search across pages and commands, and scope tabs. - [Hover Nav](https://motionkitui.com/components/hover-nav): A pill navbar where a soft highlight glides to whatever you point at or tab to. ## Animated React Input Components - [Liquid Toggle](https://motionkitui.com/components/liquid-toggle): A switch whose knob stretches like liquid on its way across, then settles. - [Code Input](https://motionkitui.com/components/code-input): One-time-code boxes where each digit pops in, with paste and phone autofill built in. ## Animated React Feedback Components - [Toast](https://motionkitui.com/components/toast): Stacking notifications with swipe-to-dismiss, hover-to-pause and variants. - [Stepper](https://motionkitui.com/components/stepper): Progress through steps: the line fills, and each finished step draws its own tick. ## Animated React Chart Components - [KPI Card](https://motionkitui.com/components/kpi-card): A headline number that counts up beside a sparkline that draws itself, with a change badge and hover readout. - [Odometer](https://motionkitui.com/components/odometer): Every digit rolls on its own wheel to the new value, like a mileage counter, rather than counting up. ## Animated React Layout Components - [Marquee](https://motionkitui.com/components/marquee): A seamless infinite scroller for logos and testimonials that pauses on hover. - [Accordion](https://motionkitui.com/components/accordion): FAQ panels that open with a smooth, springy height and a turning chevron. - [Compare Slider](https://motionkitui.com/components/compare-slider): Drag a handle across two layers to compare before and after, smoothly sprung. - [Motion Path](https://motionkitui.com/components/motion-path): A line that draws itself through your steps when the section scrolls into view, with a dot of light travelling along it. - [Parallax Stack](https://motionkitui.com/components/parallax-stack): Overlapping images that drift at different speeds and tidy into a stack as you scroll, for editorial storytelling. - [Orbit](https://motionkitui.com/components/orbit): Icons, labels and shapes circling a central logo on rings, each with its own speed and direction. ## Animated React Background Components - [Aurora Background](https://motionkitui.com/components/aurora-background): Drifting, blurred color fields for hero sections and empty states. - [Dot Glow Background](https://motionkitui.com/components/dot-glow-background): A quiet dot grid that lights up in teal around the pointer. - [Grain Gradient](https://motionkitui.com/components/grain-gradient): Slow, drifting colour with a fine film grain, for warm editorial heroes. - [Light Beams](https://motionkitui.com/components/light-beams): Thin grid lines with streaks of light falling down them at scattered times. - [Ripple Grid](https://motionkitui.com/components/ripple-grid): A tiled grid where a click sends a wave of light rolling outward. - [Contour Lines](https://motionkitui.com/components/contour-lines): Topographic lines that slowly shift like terrain, with a vignette for your content. - [Star Field](https://motionkitui.com/components/star-field): A slow-drifting night sky with twinkling stars, for space, launch and AI product heroes. - [Horizon Grid](https://motionkitui.com/components/horizon-grid): A retro perspective grid rolling toward a glowing horizon, synthwave style. - [Meteors](https://motionkitui.com/components/meteors): Shooting stars streaking across a dotted sky at scattered times. - [Flicker Grid](https://motionkitui.com/components/flicker-grid): A field of tiny squares that flicker softly, drawn on a canvas so it stays light. - [Stage Light](https://motionkitui.com/components/stage-light): A cone of light from above that sways gently and turns to follow the pointer. - [Cursor Trail](https://motionkitui.com/components/cursor-trail): A soft ribbon of light behind the pointer, across the window or inside one section. - [Aurora Mesh](https://motionkitui.com/components/aurora-mesh): Fields of violet, blue and cyan light drift and blend under swaying aurora ribbons. - [Infinite Perspective Grid](https://motionkitui.com/components/perspective-grid): A true 3D floor of glowing lines that recedes forever to a lit horizon, with an optional ceiling for a tunnel. - [Cursor Atmosphere](https://motionkitui.com/components/cursor-atmosphere): A feathered light follows the cursor, revealing a glowing texture. On touch screens it drifts on its own and follows a drag.