Components & Blocks/Cards & Modals

Standalone: Components & Blocks

Animated React Cards and Modals

Animated card and modal dialog components for React. Built with Tailwind CSS and Motion, ready to copy and paste or install via the shadcn CLI.

3D Product Card

3D Product Card

An e-commerce product card with a real WebGL turntable. At rest it's a normal shop card (product, name, price, add-to-cart); hovering tilts the card into a 3D display floor while the product lifts and spins so shoppers can inspect it from any angle. Drag to orbit, pick a finish swatch to recolor the upholstery live, drop in your own .glb, adapts to light and dark themes.

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.

Interactive Card Stack

Interactive Card Stack

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

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.

Tilted Coverflow

Tilted Coverflow

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

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.

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.

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.

Peel to Scan

Peel to Scan

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

AI Job Cards

AI Job Cards

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

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

Slide Deck

Slide Deck

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

Label Cards

Label Cards

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

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.

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.

Glass Card

Glass Card

Glassmorphism content cards with 3D tilt-on-hover, spring physics, and a cursor-following glare highlight.

Glass Modal

Glass Modal

Centered dialog with deep glass blur, scale-spring entrance, and staggered content reveal.

Polaroid Stack

Polaroid Stack

Five polaroid photo cards stacked in a casual pile. Click to fan them out in a spring-animated arc, hover to lift, click a card to spotlight it.