Free animated React component library
Animated card components.
Pricing, profile, feature, wallet and testimonial cards that tilt, morph and answer the pointer. 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.
Animated React card 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.
- Recap card: A summary that reads like a sentence: its numbers count up in little chips, and milestone badges pop in below.
- 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.
- 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.
- Aura card: A feature card on a live shader gradient that leans toward the pointer and ripples when pressed.
- Pricing card: A plan card in a soft shell.
- 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.
- Roadmap card: A product roadmap that plays like stories: the bar fills, the number rolls, the text blurs across and the milestones check in.
- 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.
- 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.
- 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.
- 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.
- Reaction card: A post with three reaction buttons.
- 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.
- 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.
- 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.
- 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.
- Wallet card: A balance card that counts up on odometer wheels like the chart cards.
- Tilt card: A card that tips in 3D toward your cursor, lifts a little, and catches a glare that slides the other way.
- Team morph: A presence pill that morphs into a team card: the shell reshapes while each avatar flies from the stack to its row.