Components & Blocks/Framer Motion Components for React

Standalone: Components & Blocks

Framer Motion Components for React

Every component in this collection animates with Motion, the library formerly known as Framer Motion. Install it with the shadcn CLI, or remix it with AI.

Premium

Agent Feedback Loop

An isometric widget of six AI agent stages in a loop. Hover or tap one to lift it apart.

View Component

Premium

Agent Cost Flow

What one orchestrated agent run cost, drawn end to end: 178 source strands bundle into a spine, five subagent lanes read in parallel, and every band narrows from what that lane read to what it cost, so the small model that did the bulk reading lands as a sliver beside the expensive one that only judged.

View Component

Premium

AI Knowledge Map

A dotted AI orb sits above a confidence indicator and wires to five scored category cards. Clicking one fans its results out along a curved arc.

View Component

Free

Magnetic Logo Cluster

An interactive swarm of your logo. Marks fly in from off-screen, drift endlessly, and bend toward the cursor.

View Component

Free

Scroll Wipe Gallery

A full-bleed, scroll-driven photo gallery. Each photo wipes in from a different edge.

View Component

Premium

Perspective Showcase Hero

A hero section pairing a split editorial header with an endless CSS 3D carousel, no WebGL: cards tilt continuously with distance from the centre so the row reads as one arc, images counter-zoom inside their frames, and one velocity loop drives drift, drag, wheel, and keyboard input. Fully configurable via typed props.

View Component

Premium

Curved Frame Carousel

A fixed frame masks a drifting photo deck. Drag it and panels hinge into 3D at the edge.

View Component

Premium

Filter Menu

A skeuomorphic pill that expands into a multi-select filter checklist with Apply.

View Component

Free

Expanding Tabs

A monochrome tab bar of icon circles. Click one and it expands into a labeled pill.

View Component

Free

Delete Button

A red button that starts a five-second delete countdown, with a one-tap undo.

View Component

Free

Mood Tracker

A feelings check-in card with six expressive faces. Drag the segmented slider and the face, label, and liquid color wash shift with your mood.

View Component

Free

Crypto Swap

A crypto token-swap widget with live exchange rates, price impact, and an animated swap button.

View Component

Free

Interactive Card Stack

A scattered stack of photo cards. Drag, click, or arrow keys to focus any card.

View Component

Free

Product Card Deck

A draggable card deck you flick through one card at a time. The top card leans toward your drag, then spins away with momentum to reveal the next, and the deck loops endlessly. Every card pairs a picture with a title and a pill action button with hover and press states.

View Component

Free

Tilted Coverflow

3D coverflow card carousel of seven tilted photos. Drag or arrows to focus any card.

View Component

Free

Cube Carousel

An interactive 3D photo cube with six placeholder images on its faces. Drag with your cursor to spin it freely on both axes; release and it coasts naturally to a stop. No buttons, no snap, no controls, just the cube and your hand.

View Component

Free

Curious AI

A morphing 3D AI orb in Three.js with cyan and magenta rim lights, iridescent pink speckles on a wrinkled surface, and glowing pink robot-eye pills that follow your cursor and blink between idle looks.

View Component

Free

Signature Pad

A signature pad widget: pill button morphs into a canvas to draw with mouse or touch.

View Component

Free

Upload Progress

A collapsible file upload widget with a shimmer progress bar (indigo while uploading, amber on pause). Expand to see per-file rows with live progress, time remaining, and pause, resume, refresh, and stop controls.

View Component

Free

New Project Modal

A pill button that morphs into a soft-UI project creation form: title, description, 7-swatch color label picker, Private toggle, and a checkmark-confirm Create button.

View Component

Free

Live Session Pill

A compact live-session presence pill with an animated speaking indicator and overlapping avatars. Clicks open a soft-UI modal showing all participants with a Join Now button.

View Component

Free

Radial Cards

Seven health-metric cards bloom into a slowly rotating flower. Tap any petal to pull it forward and read your stats up close.

View Component

Free

Slice Type

A typographic magic trick. At rest you read one ambiguous word; hover and it splits into two: LIGHT lifting up, NIGHT sinking down, the shared letters resolving into separate glyphs.

View Component

Free

Ripple Type

SVG text animation warped by a turbulence filter. Toggle the fan and letters ripple.

View Component

Free

Halo Type

Rotating 3D ring text animation: the front arc reads upright, the back arc upside-down.

View Component

Free

Stack Tower

A column of 12 stacked words that reads as a rotating 3D cylinder. 2D transforms skew, scale and shift each row so the rotation travels down the stack. Hover lights one row in warm orange without breaking the rhythm.

View Component

Free

Wild Morph

Italic SVG word that warps under the cursor, a spring-physics text animation.

View Component

Free

Playful

Kinetic typography where letters jump, drop, and rotate on cursor proximity.

View Component

Free

Good Vibes

Interactive typography where letters scale 2x and become bold on hover.

View Component

Free

Responsive Letters

Interactive text where each letter responds to cursor proximity, animating variable font properties (weight, stretch, italic, letter-spacing, skew) to create a deformation-under-pressure effect.

View Component

Free

Emoji Reaction Jar

Glass jar widget. Click a reaction to spring the lid and watch the emoji bounce down.

View Component

Free

Sticker Wall

A draggable sticker card wall. Drop notes, toss emoji, pile them up with real 2D physics.

View Component

Free

Peel to Scan

A portrait card whose corner peels on tap, revealing a scannable Wi-Fi QR code.

View Component

Free

Danger Stripes

Three crossing caution-tape stripes on orange. Hover to shake, click to intensify.

View Component

Free

AI Job Cards

Three AI job card stacks with swipe-to-cycle. Brand logos, bookmark toggle, springs.

View Component

Free

Task Cards

A swipeable project task card stack where each card has a unique accent colour, status badge, and due date. Drag left or right to cycle through tasks. The dismissed card springs back to the bottom of the deck.

View Component

Free

Slide Deck

Swipeable card deck with four editorial slides. Navigate forward and back by drag or tap.

View Component

Free

Label Cards

Colour-blocked label cards scattered at random angles. Tap one to spring it to centre.

View Component

Free

Meet the Crew

A swipeable portrait card stack perfect for introducing a team, showcasing crew members, or picking an avatar. Four stacked cards fan out with soft rotations: drag to browse, tap to choose. Drop in your own photos and names for an About Us section, a character selector, or an onboarding profile picker.

View Component

Free

Travel Deck

A swipeable deck of destination cards. Drag the front card down to fling it off-screen and reveal the next. Each card reveals an animated hotels counter as it comes forward.

View Component

Free

Glass AI Composer

Glassmorphism AI chat input with image upload, web search toggle, and model switcher.

View Component

Free

Glass Toast

Frosted glassmorphism toast notification stack with 4 variants, auto-dismiss progress bar, and spring-animated stacking.

View Component

Free

Glass Search Bar

Glassmorphism search bar with animated suggestion dropdown, active state glow, and reduced-motion support.

View Component

Free

Glass Stepper

Glassmorphism numeric stepper with spring number flip, notification-style tinted buttons, and configurable min/max/step.

View Component

Free

Glass Progress

Glassmorphism progress bar panel with glowing gradient fills, spring-animated counters, staggered reveal, and replay button.

View Component

Free

Glass Sidebar

Collapsible glassmorphism sidebar with icon-only and full label states, spring-animated expand and collapse.

View Component

Free

Glass User Menu

Frosted glass user avatar trigger with animated dropdown, grouped menu items, and Log Out.

View Component

Free

Pill Toggle

A minimal iOS-style slider toggle: thumb glides between off (grey) and on (green) with a snappy spring. Fully responsive.

View Component

22 more components