Free animated React component library

Interfaces that move like they mean it.

Hand-tuned motion components for React, completely free. Play with each one live, then copy the code or give your AI agent the prompt that comes with it.

Browse by kind

All 99 components

Profile card: A creator profile whose pastel cover flows toward your pointer.
Bill list: Upcoming bills that rise in while the total counts up.
Mix chart: Stacked bars in vivid colours that grow in while the total counts up.
Activity grid: A year of daily activity as a heatmap that sweeps in while the totals count up.
Recap card: A summary that reads like a sentence: its numbers count up in little chips, and milestone badges pop in below.
Prism flow: A dark background crossed by a soft band of light that bends and drifts, its edges splitting into colour like light through a prism.
Search modal: A search field whose card drops down with a gliding scope control and live counts, recent things as soft cards, a featured top result, highlighted matches and an open hint.
Tab bar: A white, fully rounded mobile bottom navigation in three styles: a gliding soft gray pill, icons with labels and a dot, or a raised action button.
Project index: An editorial project index with large photography: hover a project and its image arrives through a pixel, grain, gradient or mirror transition, then open it with one press.
Spatial gallery: A WebGL media tunnel of images and videos that never ends: scroll or drag to travel, and the ring twists into a turning spiral as you go.
Brand bridge: A feature card with big brand tiles wired to a hub by gradient lines in each brand's colours, glowing comets and a particle field that scatters from the pointer.
Account menu: A profile pill that morphs into an account card: a status picker that recolours the avatar's dot, quick tiles that lift, a workspace switcher whose check flies, a filling storage meter and a log out that asks twice.
Flux card: A feature card on a pixelated, dithered gradient with a negative magnetic field: squares flee the pointer and leave a hole that follows it.
Message composer: A white rich text composer: a text style menu that pours open, formatting that lights up under the caret, @ mentions, emoji, uploading thumbnails, a voice note timer, an AI polish, scheduled sending with a calendar, and a split send button whose plane flies off.
OTP code: A one time code card with split boxes and no confirm button.
Auth card: Sign in and sign up in one card.
Liquid tabs: Icon tabs where the chosen tab is a white bump grown out of the panel.
Aura card: A feature card on a live shader gradient that leans toward the pointer and ripples when pressed.
Channel mix: A marketing card where a row of slim ticks splits the week's sessions by channel.
Device traffic: Visitors by device on tall gauges, one color each, that fill to each share.
Sidebar nav: An app sidebar that folds to a slim rail of icons.
Pricing card: A plan card in a soft shell.
Prism carousel: An endless carousel circling through liquid glass lenses at both edges.
File drop: A drag and drop uploader.
Toast stack: Notifications stacked in the middle of the container.
Voice prompt: An AI composer you can talk to.
Range chart: A daily range chart, like heart rate, over 7, 15 or 30 days.
Liquid card: Four status cards with an icon as a glass container: liquid pours in, waves roll and bubbles rise.
Team member card: A team member card with pixels burning up the photo like fire.
Deploy streak: A shipping streak: the count rolls up while a grid of daily deploys pops in as a wave.
Usage ring: Plan usage as a segmented ring that warms round the colour wheel as it fills.
Quota gauge: A speedometer of ticks that light up as credits roll up.
Roadmap card: A product roadmap that plays like stories: the bar fills, the number rolls, the text blurs across and the milestones check in.
Context menu: Right click the card for a menu where every icon animates.
Privacy banner: A cookie consent card.
Profile menu: A workspace profile menu where every icon has its own micro interaction as you hover its row.
Pixel blast: A background of dithered pixel clouds that drift, shimmer and light up under the cursor.
Contour lines: A background of live topographic lines that bend around the cursor.
Contour feature card: A browser window in front of a live topographic map.
Live gradient card: A metric on a drifting mesh gradient, with a dot matrix number that morphs dot by dot.
Integration hub: App tiles wired into one hub, with packets of dots flowing in along every wire.
Pixel feature card: A phone in front of dithered pixel clouds that drift, shimmer and light up under the cursor.
Amount slider: Drag the grip thumb and the amount rolls like an odometer while the monthly payment works itself out.
Column card: A tall card whose columns grow up from the floor while their values count up inside.
Score card: A score card whose bars slide in and whose number counts up.
Metal card stack: A stack of brushed metal payment cards that look like the real thing.
Tilt carousel: A looping row of photo cards that glides on its own: the middle one faces you while the rest turn away in 3D.
Contact card: Not just a simple Contact button: an inline link that opens a card with an avatar, email to copy, LinkedIn and Book a call.
AI prompt input: A composer for an AI assistant: a growing field with rolling placeholders, file chips, a model picker, web search, voice with a rippling particle ring, and a send that launches into a shimmering working state.
Bell toggle: A pill toggle where a press rings the bell, crossfades the label and unfurls the pill.
Slide commit: Slide to confirm: drag the handle past the line and it commits with a spinner and a green check; let go early and it springs home.
Decay card: A 3D tilting image card with text over it that rots away from the inside when you hover, until a second picture takes the whole card, then grows back.
Liquid metal card: Hover and black liquid metal pours in from the nearest corner, beaded rivulets running ahead, until a second picture surfaces from inside it.
Depth carousel: A stack of cards receding into depth with motion blur.
Reaction card: A post with three reaction buttons.
Download button: A download pill whose page icon fills up like liquid as the percentage counts, while a waving fill sweeps across, then a check lands on the page.
Month calendar: A month view where a soft disc follows your pointer, an ink disc springs to the picked day and months slide the way you travel.
Event card: Minimal event details with a clock that sweeps to the start time, a guest stack that fans out, and round GSAP-drawn tools beside a Join button.
Payment form: Card details with a focus ring that glides between fields, floating labels, card network logos and a lock that snaps shut, ending on a sealed confirmation.
Add card: An empty state for payments: a card floats over its slot and tilts toward you.
Booking card: Pick a month, a day and a time: ink pills glide between choices, the times unfold, and the button rolls to your slot and the whole card turns into a confirmation with GSAP-drawn icons.
Orbit card: A community card where people and app chips orbit a center mark.
Globe card: A feature card with a dotted three.js globe: arcs fly between people around the world and land with their avatar.
Calendar agenda: A day planner: swipe an event left to mark it done and confetti rises out of the card, or right to delete it.
Avatar testimonial: Testimonials driven by a row of avatars: each quote rises in word by word out of a blur, and a ring fills around the active avatar until the next one.
Pixel scroll: A scroll-driven pixel transition from one color or image to another, with directions, patterns, easings and accent pixels in the moving band.
Rolling card stack: A deck of metric cards that rolls forward like a rolodex: the front card tips away, the next glides in and counts up.
Particle card: A product feature card whose hero visual is a particle field: it morphs like ripples on water and parts around the cursor.
Verify flow: Connect, check, verified: a segmented bar fills, a highlight slides down the checks as each one passes, and a green seal bursts in when you are connected.
Ribbon gallery: An endless ribbon of cards curved like a wraparound screen and tilted across the frame.
Infinite gallery: An endless wall of work that loops seamlessly in every direction.
Gravity tag pile: Tags fall, bounce, spin and pile up with real physics.
Blur accordion: Panels spring open and smear with a vertical motion blur that follows their speed, while the plus folds into a minus and the answer rises into focus.
Blur text: Words rise out of a soft blur one after another as the line scrolls into view, then settle sharp.
Flip words: One word in a sentence flips to the next on a loop, letter by letter in 3D, while the sentence reflows smoothly around it.
Gradient text: A slow gradient flows through the letters on a seamless loop, clipped to real, selectable text.
Highlight text: A marker sweeps behind key phrases one after another as the paragraph scrolls into view.
Rotating text: Text set on a circle spins around an arrow badge.
Shimmer text: The thinking sheen: a bright band sweeps across muted text on a loop, for AI and loading states.
Annotation text: Hand-drawn pen marks draw themselves around words in view: circles, underlines, boxes and strikes, chained one after another.
Backspace text: Types a word, holds, backspaces it letter by letter and types the next, with a blinking caret.
Binary text: Text scrambles into 0s and 1s, then decodes left to right.
Wave text: A heading whose words warp like liquid under your cursor: noise-driven displacement bends each glyph into flowing bands, then it settles back to crisp type.
Team morph: A presence pill that morphs into a team card: the shell reshapes while each avatar flies from the stack to its row.
Pill tabs: Tabs whose white pill slides like a rubber band, stretching and thinning, then settling, with a motion blur that follows its speed.
Morph search: A search pill that lifts into a card.
Wallet card: A balance card that counts up on odometer wheels like the chart cards.
Action menu: A dropdown where every action answers back: the highlight slides between items, copy draws a check, download bounces and washes a light gray fill across, links nudge their arrow.
Growth stream: A total built up over time as nested bands that widen at each checkpoint.
Metric split: Three metrics on one proportional bar, each with its number counting up on odometer wheels.
Spending meter: A spending card whose pills fill in turn as the amount counts up on odometer wheels.
Goal gauge: A half-ring goal meter split by source.
Magnetic flow: Cards follow the leader like a snake, then burst open like the sun.
Receipt button: A pay button that turns into a receipt printer: progress fill, check draw, line-by-line paper feed and a torn-off receipt.
Fuse button: An action button whose done state carries an undo on a burning fuse.
Magnetic button: A button that leans toward your cursor on a spring.
Tilt card: A card that tips in 3D toward your cursor, lifts a little, and catches a glare that slides the other way.
Hold to confirm: Hold to fill, let go to cancel.
Rolling stepper: A stepper whose digits roll like an odometer.

Questions, answered

What is Motion Brew?

Motion Brew is a free library of 99 animated React components: micro interactions, buttons, cards, menus, charts, galleries and text effects. Each one is animated with Motion or GSAP, styled with Tailwind CSS v4, and ships as a single .tsx file that you own and can change.

Is there a free animated React component library for Tailwind CSS?

Yes. Motion Brew is built for exactly that: every component is free for personal and commercial use, styled only with Tailwind CSS v4 classes, and animated with hand tuned springs and timelines. You can play with each one live on the site, tweak it, and add it to your project in one command.

Which React component library works with Claude Code, Cursor and Codex?

Motion Brew has a hosted MCP server at https://motion-brew.com/mcp. Add that URL to Claude Code, Claude, Grok, Cursor, Codex, VS Code, Gemini CLI or any MCP client, then ask for a component in plain words. The agent searches the library and adds the exact file to your project. No key or account is needed.

How do I install a component?

With one line that installs its packages and downloads the file, for example: npm i motion clsx tailwind-merge && curl --create-dirs -o components/sidebar-nav.tsx https://motion-brew.com/r/sidebar-nav.tsx. Each component is one self contained file with its icons and helper inside, so there is no CLI and no config.

Can I use the components in commercial projects?

Yes. Every component is free to use in personal and commercial work. Copy the file, change anything you like and ship it.

Do the components work with Next.js?

Yes. Every file starts with "use client", so it works in the Next.js App Router as it is. The components also work in Vite, Remix and Astro islands with React 18 or 19 and Tailwind CSS v4.

Do the components use Framer Motion or GSAP?

Most use Motion (formerly Framer Motion) for springs, layout animations and gestures. A few use GSAP for multi step timelines and scroll work, and one uses Three.js. Each component lists exactly which packages it needs.

Are the animated components accessible?

Yes. They work with the keyboard, use proper roles and labels, and respect the reduced motion setting: when it is on, movement gives way to instant state changes.

Who makes Motion Brew?

Md Eftakher, an AI product designer in Almería, Spain who has been designing products since 2013. Every component is designed and built by hand. You can find him on X and Instagram as @easiblu.

How can I request a component?

Send a message on X to @easiblu or book a short call from the footer of the site. New components land at the top of the home page with a New tag.