CardStack NEW

An interactive, 3D card stack component supporting drag-and-swipe gestures with a CSS-first layout and zero hydration overhead.

Preview/Playground

Created by

Barsan

Fast, Lightweight, Reliable

Most animation libraries felt heavy for Astro projects. AstroAnimate gave us smooth motion with minimal overhead and great developer ergonomics.

Priya Raman UI Engineer, CraftLayer

Built for Real Projects

The components fit naturally into our Astro workflow. We shipped animations faster while keeping the codebase clean and maintainable.

Marcus Lee Senior Developer, Nova Studio

Smooth Developer Experience

AstroAnimate helped us add polished interactions without slowing down the site. The setup felt simple, and the performance stayed excellent.

Sarah Jenkins Frontend Lead, PixelForge

Astro

---
import CardStack from "@astroanimate/core/CardStack";

const cards = [
  {
    title: "Smooth Developer Experience",
    content: "AstroAnimate helped us add polished interactions without slowing down the site.",
    name: "Sarah Jenkins",
    role: "Frontend Lead, PixelForge"
  },
  {
    title: "Performance Stayed Excellent",
    content: "The setup felt simple, and the interactions stayed fast.",
    name: "Alex Rivera",
    role: "Product Engineer"
  }
];
---

<CardStack cards={cards} />

Installation

bash

npm install @astroanimate/core

Usage

---
import CardStack from "@astroanimate/core/CardStack";

const myCards = [
  { title: "Great UI", content: "Love the stack effect!", name: "Alice", role: "Designer" },
  { title: "Smooth", content: "Animations are flawless.", name: "Bob", role: "Dev" }
];
---

<CardStack cards={myCards} />

Renders a visually layered stack of cards that users can drag and swipe to reveal the next item.

Props

Prop	Type	Default	Description
`cards`	`Card[]`	`-`	Array of card data objects
`enhance`	`boolean`	`true`	Enable JS drag/swipe interactions
`stackSize`	`number`	`3`	Maximum number of visible layered cards
`swipeThreshold`	`number`	`120`	Drag distance (px) required to trigger a swipe
`rotationSensitivity`	`number`	`20`	Rotational tilt factor during drag
`animationDuration`	`number`	`500`	Fly-out swipe animation duration in ms
`cardBackgroundColor`	`string`	`"#ffffff"`	Fallback background color for cards
`cardTextColor`	`string`	`"#1a1a1a"`	Fallback text color for cards

Card object requires title and content. Optional fields: id, name, role, color, image, bgColor, textColor.

Use When

Showcasing a collection of testimonials, reviews, or bite-sized tips
Building an engaging "Tinder-style" swipe interface
Displaying multiple distinct items in a constrained screen space

Avoid When

Cards contain complex interactive elements (links, inputs) that conflict with drag gestures
Users need to easily refer back to previously swiped content (swipes cycle to the back of the stack)

Accessibility

Fully respects prefers-reduced-motion: reduce by disabling CSS transitions and JavaScript drag handlers

Performance

Zero Hydration: Interactive logic is powered by a lightweight, vanilla JS inline script
CSS-First: Initial 3D layout and layering are handled entirely by CSS (nth-last-child, perspective, translate3d)
Hardware Accelerated: Uses requestAnimationFrame and will-change: transform for 60fps drag physics