# cards

Components⚛ TSX Live preview

Fan-Out Card Stack

Three data cards stacked that fan open with rotation on hover; click one to spring it to the front.

HTMLCSSJavaScriptAdvanced

6.9k36.3k7.4kOpen

3D Tilt Card Stack

A fanned deck of release-note cards in perspective 3D — hover to fan them apart; the whole stack leans toward your mouse.

41100Open

UI Elements Live preview

Frosted Glass Pricing Cards

Backdrop-blur pricing tiers floating over animated aurora blobs; the popular plan scales up with a gradient flag.

29800Open

UI Elements Live preview

Expanding Accordion Card Deck

Five gradient panels in a row — click one and it smoothly stretches while the others shrink to a rail.

33100Open

Featured Animations Live preview

Sticky Stacking Cards Story

Full-height intro then four step cards that pin and stack over each other as you scroll, tinted per card.

33800Open

Perspective 3D Card Wall

A tilted grid wall of tiles that lean toward your mouse and pop out toward the viewer on hover with glow.

37600Open

3D page-flip book stack

A stack of pages fans open like a book on hover — layered rotateY flips with left-edge transform origin.

38900Open

Featured Site Templates Live preview

Sticky stacking story cards

Full-height sticky cards pile up as you scroll a 4-step story, each with its own gradient atmosphere.

48700Open

Pricing monthly/yearly toggle

Pill toggle switches prices between monthly and yearly (-20%) with a number roll transition; middle plan highlighted.

37400Open

Tinder-style swipe card stack

Drag the top card to like/nope — it flies off with rotation, stamps fade in at the edges, stack reshuffles. Pointer events.

51300Open

Selectable pricing radio cards

Plan picker where whole cards are radio targets — checked card gets a gradient border, filled tick and glow.

35600Open

Expanding flex card accordion

Click a panel in the horizontal row and it expands to 3.2× while others compress — description fades in.

38700Open

Depth-focus bento row

Hovering the row brings one panel forward (flex grow, color, label) while siblings recede and desaturate.

36600Open

Snap Card Carousel · Rose Gold

A scroll-snap card carousel with arrow controls and live pagination dots. Rendered in the Rose Gold palette.

71500Open

Snap Card Carousel · Ocean Sky

A scroll-snap card carousel with arrow controls and live pagination dots. Rendered in the Ocean Sky palette.

63900Open

Snap Card Carousel · Mint Breeze

A scroll-snap card carousel with arrow controls and live pagination dots. Rendered in the Mint Breeze palette.

35900Open

Snap Card Carousel · Candy Pink

A scroll-snap card carousel with arrow controls and live pagination dots. Rendered in the Candy Pink palette.

45300Open

Snap Card Carousel · Royal Gold

A scroll-snap card carousel with arrow controls and live pagination dots. Rendered in the Royal Gold palette.

12100Open

Snap Card Carousel · Crimson Heat

A scroll-snap card carousel with arrow controls and live pagination dots. Rendered in the Crimson Heat palette.

68100Open

Snap Card Carousel · Deep Indigo

A scroll-snap card carousel with arrow controls and live pagination dots. Rendered in the Deep Indigo palette.

28800Open

Snap Card Carousel · Aurora Teal

A scroll-snap card carousel with arrow controls and live pagination dots. Rendered in the Aurora Teal palette.

62600Open

Snap Swipe Deck · Rose Gold

A Tinder-style card stack: drag, rotate and fling cards with LIKE/NOPE stamps; the deck refills when empty. Rendered in the Rose Gold palette.

54000Open

Snap Swipe Deck · Ocean Sky

A Tinder-style card stack: drag, rotate and fling cards with LIKE/NOPE stamps; the deck refills when empty. Rendered in the Ocean Sky palette.

46400Open

Snap Swipe Deck · Mint Breeze

A Tinder-style card stack: drag, rotate and fling cards with LIKE/NOPE stamps; the deck refills when empty. Rendered in the Mint Breeze palette.

60400Open

Snap Swipe Deck · Candy Pink

A Tinder-style card stack: drag, rotate and fling cards with LIKE/NOPE stamps; the deck refills when empty. Rendered in the Candy Pink palette.

74400Open

Snap Swipe Deck · Royal Gold

A Tinder-style card stack: drag, rotate and fling cards with LIKE/NOPE stamps; the deck refills when empty. Rendered in the Royal Gold palette.

15600Open

Snap Swipe Deck · Crimson Heat

A Tinder-style card stack: drag, rotate and fling cards with LIKE/NOPE stamps; the deck refills when empty. Rendered in the Crimson Heat palette.

24400Open

Snap Swipe Deck · Deep Indigo

A Tinder-style card stack: drag, rotate and fling cards with LIKE/NOPE stamps; the deck refills when empty. Rendered in the Deep Indigo palette.

53300Open

Snap Swipe Deck · Aurora Teal

A Tinder-style card stack: drag, rotate and fling cards with LIKE/NOPE stamps; the deck refills when empty. Rendered in the Aurora Teal palette.

9100Open

Terra — Travel Booking Landing

Wanderlust landing with parallax destination cards, search bar and seasonal deal highlights.

ChefKart — Food Delivery Landing

Appetizing food delivery landing with floating ingredient cards, category pills and order CTA.

Vantage — Real Estate Landing

Property showcase landing with filter chips, listing cards and an interactive map teaser.

Bloom — Wellness & Meditation Landing

Calming wellness landing with breathing circle, session cards and testimonial row.

Sora — Education Platform Landing

Friendly e-learning landing with course cards, progress bars and instructor strip.

Dune — Gaming Studio Landing

Immersive gaming landing with neon hero, game cards and trailer section.

Feature Spotlight Cards

Bento feature cards with gradient glow, icon float and hover lift.

Payment Method Picker

Card payment selector with radio cards, logos and selected glow.

Animations⚛ TSX Live preview

Scroll Reveal Cards

Cards that fade/slide in as they enter the viewport.

HTMLCSSJavaScriptAdvanced

Components⚛ TSX Live preview

3D Stacked Album Cards

Album art cards fanning in 3D perspective with hover fan-out and track chips.

HTMLCSSJavaScriptAdvanced