# Motion Brew

> Animated React components (micro interactions, cards, menus, charts and text effects) built with motion/react, GSAP and Tailwind CSS v4. 94 components, free to copy. Each one is a single self contained .tsx file.

## Use it from an AI agent

- MCP server (Streamable HTTP, no key): https://motion-brew.com/mcp
- Tools: search_components, list_components, get_component, get_install_plan, get_setup
- One file per component: https://motion-brew.com/r/<slug>.tsx (component, animated icons and cn() inlined)
- Setup guide: https://motion-brew.com/mcp

## FAQ

### What is Motion Brew?

Motion Brew is a free library of 94 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.

## Components

- [AccountMenu](https://motion-brew.com/components/account-menu): A profile pill that morphs into a full account card. Trigger: press. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/account-menu.tsx
- [ActionMenu](https://motion-brew.com/components/action-menu): A dropdown of actions and links with a crafted feel. Trigger: press, then hover. Engine: Motion + GSAP. Packages: @gsap/react, clsx, gsap, motion, tailwind-merge. One file: https://motion-brew.com/r/action-menu.tsx
- [AddCard](https://motion-brew.com/components/add-card): An empty state for payments: a white card that asks for a first payment card. Trigger: press. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/add-card.tsx
- [AmountSlider](https://motion-brew.com/components/amount-slider): A white card for picking an amount. Trigger: drag. Engine: Motion. Packages: clsx, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/amount-slider.tsx
- [AnnotationText](https://motion-brew.com/components/annotation-text): Hand-drawn pen marks draw themselves around words when they scroll into view: an underline, a circle, a box or a strike-through, each with a slightly wobbly stroke so it reads as drawn, not ruled. Trigger: in view, once. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/annotation-text.tsx
- [AuraCard](https://motion-brew.com/components/aura-card): A feature card on a live two colour gradient: a main pool flows in the lower left and a second colour drifts in from the lower right, blending into it under a moving film grain (on the colour only) while the top stays clear for the title and copy. Trigger: in view and timeline, plus hover and press. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/aura-card.tsx
- [AuthCard](https://motion-brew.com/components/auth-card): One white card for signing in and signing up. Trigger: press and type. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/auth-card.tsx
- [AvatarTestimonial](https://motion-brew.com/components/avatar-testimonial): A testimonial card driven by a row of avatars. Trigger: press. Engine: Motion. Packages: clsx, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/avatar-testimonial.tsx
- [BackspaceText](https://motion-brew.com/components/backspace-text): Types a word, holds, backspaces it letter by letter and types the next, on a loop, with a blinking caret. Trigger: timeline, looping. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/backspace-text.tsx
- [BellToggle](https://motion-brew.com/components/bell-toggle): A pill toggle for notifications. Trigger: press. Engine: Motion + GSAP. Packages: @gsap/react, clsx, gsap, motion, tailwind-merge. One file: https://motion-brew.com/r/bell-toggle.tsx
- [BinaryText](https://motion-brew.com/components/binary-text): The text scrambles into 0s and 1s, then decodes left to right back into the real characters. Trigger: hover and focus, plus once in view. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/binary-text.tsx
- [BlurAccordion](https://motion-brew.com/components/blur-accordion): An accordion whose panels open on a spring and smear with a vertical motion blur while they move. Trigger: press. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/blur-accordion.tsx
- [BlurText](https://motion-brew.com/components/blur-text): Words (or letters) rise out of a blur one after another as the text scrolls into view, settling sharp and in place. Trigger: in view, once. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/blur-text.tsx
- [BookingCard](https://motion-brew.com/components/booking-card): A white booking card for a trial class, a demo call or any slot someone reserves. Trigger: press. Engine: Motion + GSAP. Packages: @gsap/react, clsx, gsap, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/booking-card.tsx
- [BrandBridge](https://motion-brew.com/components/brand-bridge): A feature card for any site or app. Trigger: press and hover. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/brand-bridge.tsx
- [CalendarAgenda](https://motion-brew.com/components/calendar-agenda): A day planner card: a week strip on top and the chosen day's events below, each with its time, length and a colored bar. Trigger: drag. Engine: Motion. Packages: clsx, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/calendar-agenda.tsx
- [ChannelMix](https://motion-brew.com/components/channel-mix): A white marketing card: a light gray header with an icon tile, a title and a line of copy, then a white panel that overlaps it with the week's sessions on rolling digits and a row of slim ticks that splits them by channel. Trigger: in view, then hover and press. Engine: Motion. Packages: clsx, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/channel-mix.tsx
- [ColumnCard](https://motion-brew.com/components/column-card): A tall white card with a small live pill, a headline, a short line of body text and a few big rounded columns standing in a soft gray stage over faint guide lines, each carrying its value inside at the top, with a dot legend and the total in a footer. Trigger: in view, then hover, press and keys. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/column-card.tsx
- [ContactCard](https://motion-brew.com/components/contact-card): A Contact link that lives inside a sentence ("Not just a simple Contact button."), set in the sentence's own size, weight and colour with just an arrow after it. Trigger: hover. Engine: Motion. Packages: clsx, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/contact-card.tsx
- [ContextMenu](https://motion-brew.com/components/context-menu): Wraps any content and opens a white menu at the pointer when it is right clicked, springing out of that corner while its rows rise in. Trigger: right click. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/context-menu.tsx
- [ContourFeatureCard](https://motion-brew.com/components/contour-feature-card): A product feature card: a browser window with a small dashboard rises in front of a live topographic map. Trigger: hover and press. Engine: Motion. Packages: clsx, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/contour-feature-card.tsx
- [ContourLines](https://motion-brew.com/components/contour-lines): A background of live topographic contour lines. Trigger: hover and press. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/contour-lines.tsx
- [DecayCard](https://motion-brew.com/components/decay-card): A full-bleed image card with its text laid over the picture. Trigger: hover. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/decay-card.tsx
- [DeployStreak](https://motion-brew.com/components/deploy-streak): A white card for a team's shipping streak: a title with an animated flame, a big count of days in a row with a deploy and a grid of dots, one per day. Trigger: in view, then hover. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/deploy-streak.tsx
- [DepthCarousel](https://motion-brew.com/components/depth-carousel): A stack of cards receding into depth along a diagonal, each turned a little toward the viewer. Trigger: hover, drag and scroll. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/depth-carousel.tsx
- [DeviceTraffic](https://motion-brew.com/components/device-traffic): A white traffic card: a light gray header with an icon tile, a title and a line of copy, then a white panel that overlaps it with the total visitors on rolling digits and a column per device. Trigger: in view, then hover, plus a live timeline. Engine: Motion. Packages: clsx, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/device-traffic.tsx
- [DownloadButton](https://motion-brew.com/components/download-button): An ink pill that shows a download from start to finish. Trigger: press. Engine: Motion + GSAP. Packages: @gsap/react, clsx, gsap, motion, tailwind-merge. One file: https://motion-brew.com/r/download-button.tsx
- [EventCard](https://motion-brew.com/components/event-card): A minimal white card with the details of one event: a small kind line over the title, then the date and a time whose clock hands sweep round to the start when the card comes into view. Trigger: hover and press. Engine: Motion + GSAP. Packages: @gsap/react, clsx, gsap, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/event-card.tsx
- [FileDrop](https://motion-brew.com/components/file-drop): A white upload card with a drag and drop zone. Trigger: drag. Engine: Motion + GSAP. Packages: clsx, gsap, motion, tailwind-merge. One file: https://motion-brew.com/r/file-drop.tsx
- [FlipWords](https://motion-brew.com/components/flip-words): One word in a sentence flips to the next on a loop. Trigger: timeline, looping. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/flip-words.tsx
- [FluxCard](https://motion-brew.com/components/flux-card): A feature card on a pixelated gradient. Trigger: in view and timeline, plus hover and press. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/flux-card.tsx
- [FuseButton](https://motion-brew.com/components/fuse-button): An action button whose done state carries an undo on a burning fuse. Trigger: press, then a timed undo. Engine: Motion. Packages: clsx, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/fuse-button.tsx
- [GlobeCard](https://motion-brew.com/components/globe-card): A feature card, for a team or about page or anywhere else, with a dotted 3D globe rising from its bottom edge over a soft colored glow. Trigger: drag. Engine: Motion + Three.js. Packages: clsx, lucide-react, motion, tailwind-merge, three. One file: https://motion-brew.com/r/globe-card.tsx
- [GoalGauge](https://motion-brew.com/components/goal-gauge): A half-ring goal meter split by source. Trigger: in view, then hover. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/goal-gauge.tsx
- [GradientCard](https://motion-brew.com/components/gradient-card): A metric card on a live mesh gradient. Trigger: drag. Engine: Motion. Packages: clsx, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/gradient-card.tsx
- [GradientText](https://motion-brew.com/components/gradient-text): A slow gradient flows through the letters on a seamless loop, clipped to the glyphs. Trigger: timeline, looping. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/gradient-text.tsx
- [GravityTagPile](https://motion-brew.com/components/gravity-tag-pile): Tags drop into the card, bounce, spin and pile up under real physics. Trigger: drag. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/gravity-tag-pile.tsx
- [GrowthStream](https://motion-brew.com/components/growth-stream): A total built up over time, drawn as nested bands that step wider before each checkpoint. Trigger: in view, then hover. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/growth-stream.tsx
- [HighlightText](https://motion-brew.com/components/highlight-text): A marker sweeps behind chosen phrases one after another as the paragraph scrolls into view, with a slight hand-held skew. Trigger: in view, once. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/highlight-text.tsx
- [HoldToConfirm](https://motion-brew.com/components/hold-to-confirm): A button you hold to confirm. Trigger: press and hold. Engine: Motion. Packages: clsx, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/hold-to-confirm.tsx
- [InfiniteGallery](https://motion-brew.com/components/infinite-gallery): An endless wall of work you can move in any direction and never reach the edge of. Trigger: drag. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/infinite-gallery.tsx
- [IntegrationHub](https://motion-brew.com/components/integration-hub): A ring of app tiles wired into one hub in the middle. Trigger: hover. Engine: Motion. Packages: clsx, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/integration-hub.tsx
- [LiquidCard](https://motion-brew.com/components/liquid-card): A tall card with a huge icon bleeding off its right edge, used as a glass container. Trigger: drag. Engine: Motion + GSAP. Packages: @gsap/react, clsx, gsap, motion, tailwind-merge. One file: https://motion-brew.com/r/liquid-card.tsx
- [LiquidMetalCard](https://motion-brew.com/components/liquid-metal-card): A white image card that melts into a second picture under a flood of black liquid metal. Trigger: hover. Engine: Motion + GSAP. Packages: @gsap/react, clsx, gsap, motion, tailwind-merge. One file: https://motion-brew.com/r/liquid-metal-card.tsx
- [LiquidTabs](https://motion-brew.com/components/liquid-tabs): Icon tabs over a white panel, where the chosen tab is a white bump that grows out of the panel's top edge, joined to it by soft inward curves so the tab and the panel read as one piece. Trigger: press. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/liquid-tabs.tsx
- [MagneticButton](https://motion-brew.com/components/magnetic-button): A button that leans toward the cursor on a spring. Trigger: magnetic cursor. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/magnetic-button.tsx
- [MagneticFlow](https://motion-brew.com/components/magnetic-flow): A stack of cards that follows the leader like a snake, then bursts open like the sun. Trigger: hover, then press. Engine: GSAP. Packages: @gsap/react, clsx, gsap, tailwind-merge. One file: https://motion-brew.com/r/magnetic-flow.tsx
- [MessageComposer](https://motion-brew.com/components/message-composer): A white rich text composer for a chat or a comment thread. Trigger: type. Engine: Motion. Packages: clsx, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/message-composer.tsx
- [MetalCardStack](https://motion-brew.com/components/metal-card-stack): A stack of metal payment cards that feel like the real thing: brushed metal with a fine grain, bevelled edges that catch the light, a visible card edge underneath, an embossed number and a light sheen that slides across the surface as the front card tilts toward the pointer. Trigger: drag. Engine: Motion + GSAP. Packages: @gsap/react, clsx, gsap, motion, tailwind-merge. One file: https://motion-brew.com/r/metal-card-stack.tsx
- [MetricSplit](https://motion-brew.com/components/metric-split): A card that splits a total across three metrics: one rounded bar of proportional segments (solid, light, striped), with each metric's dot, label and odometer number under its segment. Trigger: in view, then hover and press. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/metric-split.tsx
- [MonthCalendar](https://motion-brew.com/components/month-calendar): A white month calendar. Trigger: hover and press. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/month-calendar.tsx
- [MorphSearch](https://motion-brew.com/components/morph-search): A search pill that turns into a white card on focus. Trigger: focus, then type. Engine: Motion. Packages: clsx, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/morph-search.tsx
- [OrbitCard](https://motion-brew.com/components/orbit-card): A feature card for a community, a network or a user count. Trigger: drag. Engine: Motion. Packages: clsx, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/orbit-card.tsx
- [OtpCode](https://motion-brew.com/components/otp-code): A white card that asks for a one time code sent to an email address or a phone. Trigger: type. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/otp-code.tsx
- [ParticleCard](https://motion-brew.com/components/particle-card): A product feature card whose hero visual is made of particles. Trigger: hover. Engine: Motion. Packages: clsx, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/particle-card.tsx
- [PaymentForm](https://motion-brew.com/components/payment-form): A white card for adding a payment card. Trigger: type. Engine: Motion + GSAP. Packages: @gsap/react, clsx, gsap, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/payment-form.tsx
- [PillTabs](https://motion-brew.com/components/pill-tabs): Tabs on a tinted track with a white pill that slides to the active tab. Trigger: press. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/pill-tabs.tsx
- [PixelBlast](https://motion-brew.com/components/pixel-blast): A background of dithered pixel clouds. Trigger: hover and press. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/pixel-blast.tsx
- [PixelFeatureCard](https://motion-brew.com/components/pixel-feature-card): A product feature card: a phone with a small app screen stands in front of a field of dithered pixel clouds. Trigger: hover and press. Engine: Motion. Packages: clsx, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/pixel-feature-card.tsx
- [PixelScroll](https://motion-brew.com/components/pixel-scroll): A scroll-driven pixel transition. Trigger: scroll. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/pixel-scroll.tsx
- [PricingCard](https://motion-brew.com/components/pricing-card): One plan as a white card resting in a soft grey shell, like a print in a mount, with a label strip along the top of the shell. Trigger: hover. Engine: Motion. Packages: clsx, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/pricing-card.tsx
- [PrismCarousel](https://motion-brew.com/components/prism-carousel): An endless loop of cards, images or metrics, circling slowly through a soft stage that fills its container, with a liquid glass lens at each edge. Trigger: drag. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/prism-carousel.tsx
- [PrismFlow](https://motion-brew.com/components/prism-flow): A dark background crossed by a soft band of light that bends and drifts like a ribbon caught in slow air. Trigger: hover. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/prism-flow.tsx
- [PrivacyBanner](https://motion-brew.com/components/privacy-banner): A white cookie consent card. Trigger: press. Engine: Motion. Packages: clsx, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/privacy-banner.tsx
- [ProfileMenu](https://motion-brew.com/components/profile-menu): A white profile menu card for a workspace app. Trigger: hover and press. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/profile-menu.tsx
- [ProjectIndex](https://motion-brew.com/components/project-index): An editorial project index: a numbered list of projects beside a large image panel. Trigger: hover or press. Engine: Motion + GSAP. Packages: clsx, gsap, motion, tailwind-merge. One file: https://motion-brew.com/r/project-index.tsx
- [PromptInput](https://motion-brew.com/components/prompt-input): A white composer for an AI assistant. Trigger: type. Engine: Motion + GSAP. Packages: @gsap/react, clsx, gsap, motion, tailwind-merge. One file: https://motion-brew.com/r/prompt-input.tsx
- [QuotaGauge](https://motion-brew.com/components/quota-gauge): A white card for a plan's credit quota: a three quarter gauge made of radial ticks, like a speedometer, around a bolt. Trigger: in view, then hover. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/quota-gauge.tsx
- [RangeChart](https://motion-brew.com/components/range-chart): A white card that charts a range for each day, like heart rate: a pill from each day's low to high on a soft column track, separate bubbles for outlying readings, and a dashed average line. Trigger: hover. Engine: Motion. Packages: clsx, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/range-chart.tsx
- [ReactionCard](https://motion-brew.com/components/reaction-card): A white post card with three reaction buttons, each with its own pop-up of choices in the spirit of a social feed. Trigger: hover and press. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/reaction-card.tsx
- [ReceiptButton](https://motion-brew.com/components/receipt-button): A pay button that turns into a receipt printer. Trigger: press, then a timeline. Engine: GSAP. Packages: @gsap/react, clsx, gsap, tailwind-merge. One file: https://motion-brew.com/r/receipt-button.tsx
- [RibbonGallery](https://motion-brew.com/components/ribbon-gallery): An endless ribbon of cards wrapped on the inside of a curved screen and tilted across the frame, 20 degrees by default. Trigger: drag. Engine: Motion. Packages: clsx, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/ribbon-gallery.tsx
- [RoadmapCard](https://motion-brew.com/components/roadmap-card): A white card that walks through the phases of a product roadmap like stories. Trigger: press. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/roadmap-card.tsx
- [RollingCardStack](https://motion-brew.com/components/rolling-card-stack): A deck of metric cards that rolls forward like a rolodex. Trigger: drag. Engine: Motion. Packages: clsx, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/rolling-card-stack.tsx
- [RollingStepper](https://motion-brew.com/components/rolling-stepper): A number stepper whose digits roll like an odometer. Trigger: press. Engine: Motion. Packages: clsx, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/rolling-stepper.tsx
- [RotatingText](https://motion-brew.com/components/rotating-text): Text set on a circle spins slowly around a center badge. Trigger: hover. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/rotating-text.tsx
- [ScoreCard](https://motion-brew.com/components/score-card): A white chart card with a big score and a few pill bars. Trigger: in view, then hover, press and keys. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/score-card.tsx
- [SearchModal](https://motion-brew.com/components/search-modal): A search field with a card that drops down once it is used. Trigger: type and press. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/search-modal.tsx
- [ShimmerText](https://motion-brew.com/components/shimmer-text): A bright band sweeps across muted text on a loop, the thinking sheen used for AI and loading states. Trigger: timeline, looping. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/shimmer-text.tsx
- [SidebarNav](https://motion-brew.com/components/sidebar-nav): A white app sidebar that folds between a full rail of icons and labels and a slim rail of icons only. Trigger: press and hover. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/sidebar-nav.tsx
- [SlideCommit](https://motion-brew.com/components/slide-commit): A slide-to-confirm pill for actions worth a deliberate gesture: paying, sending, deleting. Trigger: drag. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/slide-commit.tsx
- [SpatialGallery](https://motion-brew.com/components/spatial-gallery): A WebGL media tunnel that turns a list of images and videos into an endless space you travel through. Trigger: scroll, drag and hover. Engine: Motion + GSAP. Packages: clsx, gsap, motion, tailwind-merge. One file: https://motion-brew.com/r/spatial-gallery.tsx
- [SpendingMeter](https://motion-brew.com/components/spending-meter): A spending card with a segmented bar. Trigger: in view, then hover. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/spending-meter.tsx
- [TabBar](https://motion-brew.com/components/tab-bar): A white, fully rounded mobile bottom navigation in three styles. Trigger: press. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/tab-bar.tsx
- [TeamMemberCard](https://motion-brew.com/components/team-member-card): A white card for a person on the team. Trigger: hover and press. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/team-member-card.tsx
- [TeamMorph](https://motion-brew.com/components/team-morph): A presence pill that morphs into a team card. Trigger: press, then hover. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/team-morph.tsx
- [TiltCard](https://motion-brew.com/components/tilt-card): A card that tilts in 3D toward the cursor on a spring, lifts slightly, and catches a glare highlight that slides opposite the tilt. Trigger: hover. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/tilt-card.tsx
- [TiltCarousel](https://motion-brew.com/components/tilt-carousel): A row of photo cards that moves on by itself: the one in the middle faces you square on and every card beside it turns away in 3D, shrinking, dimming and softening a little more the further out it sits. Trigger: drag. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/tilt-carousel.tsx
- [ToastStack](https://motion-brew.com/components/toast-stack): Notifications gathered in a neat stack in the middle of their container instead of a screen corner. Trigger: drag. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/toast-stack.tsx
- [UsageRing](https://motion-brew.com/components/usage-ring): A white card for plan usage: a ring made of short segments around a big percent. Trigger: in view, then press and hover. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/usage-ring.tsx
- [VerifyFlow](https://motion-brew.com/components/verify-flow): A verification card in three stages: connect, check, verified. Trigger: timeline. Engine: Motion + GSAP. Packages: @gsap/react, clsx, gsap, lucide-react, motion, tailwind-merge. One file: https://motion-brew.com/r/verify-flow.tsx
- [VoicePrompt](https://motion-brew.com/components/voice-prompt): A composer for an AI assistant that you can talk to. Trigger: press. Engine: Motion + GSAP. Packages: @gsap/react, clsx, gsap, motion, tailwind-merge. One file: https://motion-brew.com/r/voice-prompt.tsx
- [WalletCard](https://motion-brew.com/components/wallet-card): A balance card with a currency switch and quick actions. Trigger: in view, then press and hover. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/wallet-card.tsx
- [WaveText](https://motion-brew.com/components/wave-text): A heading whose words warp like liquid when you touch them. Trigger: hover. Engine: Motion. Packages: clsx, motion, tailwind-merge. One file: https://motion-brew.com/r/wave-text.tsx