Components & Blocks/Framer Motion Components for React

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.

Free
Magnetic Logo Cluster

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

Scroll Wipe Gallery

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

View Component
Premium
Perspective Showcase Hero

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

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

Filter Menu

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

View Component
Free
Expanding Tabs

Expanding Tabs

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

View Component
Free
Delete Button

Delete Button

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

View Component
Free
Mood Tracker

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

Crypto Swap

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

View Component
Free
Interactive Card Stack

Interactive Card Stack

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

View Component
Free
Product Card Deck

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

Tilted Coverflow

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

View Component
Free
Cube Carousel

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

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

Signature Pad

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

View Component
Free
Upload Progress

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

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

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

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

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

Ripple Type

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

View Component
Free
Halo Type

Halo Type

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

View Component
Free
Stack Tower

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

Wild Morph

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

View Component
Free
Playful

Playful

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

View Component
Free
Good Vibes

Good Vibes

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

View Component
Free
Responsive Letters

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

Emoji Reaction Jar

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

View Component
Free
Sticker Wall

Sticker Wall

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

View Component
Free
Peel to Scan

Peel to Scan

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

View Component
Free
Danger Stripes

Danger Stripes

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

View Component
Free
AI Job Cards

AI Job Cards

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

View Component
Free
Task Cards

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 — springs back the dismissed card to the bottom of the deck.

View Component
Free
Slide Deck

Slide Deck

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

View Component
Free
Label Cards

Label Cards

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

View Component
Free
Meet the Crew

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

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

Glass AI Composer

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

View Component
Free
Glass Toast

Glass Toast

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

View Component
Free
Glass Search Bar

Glass Search Bar

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

View Component
Free
Glass Stepper

Glass Stepper

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

View Component
Free
Glass Progress

Glass Progress

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

View Component
Free
Glass Sidebar

Glass Sidebar

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

View Component
Free
Glass User Menu

Glass User Menu

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

View Component
Free
Pill Toggle

Pill Toggle

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

View Component
Free
Mark Toggle

Mark Toggle

An iOS-style pill toggle in warm earth and sand tones — the thumb carries a small icon that morphs from X to checkmark as it slides across.

View Component
Free
Taga Toggle

Taga Toggle

A playful pill toggle with an expressive face on the thumb — dead (×× eyes, flat mouth) when off, happy (arc eyes, big smile) when on. Track warms from grey to yellow.

View Component
Free
Blind Pull Toggle

Blind Pull Toggle

A dark/light mode toggle styled as a window-blind pull cord — click to yank the cord and watch the icon swap through a venetian-blind slat animation.

View Component
19 more components