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. Drag, scroll or let it play.

Cards, drag, Motion

Install

npm i clsx lucide-react motion tailwind-merge && curl -o components/rolling-card-stack.tsx https://motion-brew.com/r/rolling-card-stack.tsx

One self contained file for React and Tailwind CSS: rolling-card-stack.tsx. Or ask your AI agent to add it through the MCP server.

Usage

import { RollingCardStack } from "@/components/rolling-card-stack";
import { TrendingUp, Users } from "lucide-react";

export default function Page() {
  return (
    <RollingCardStack
      interval={4000}
      cards={[
        { title: "Monthly revenue", value: 48290, prefix: "quot;, delta: "+12.4%", progress: 0.72, color: "#3d66d6", icon: TrendingUp },
        { title: "Active users", value: 12840, delta: "+8.1%", progress: 0.64, color: "#269a5a", icon: Users },
      ]}
    />
  );
}

Props

Prop	Type	Default	Description
cards	{ title; value; prefix?; suffix?; decimals?; delta?; progress; caption?; color; icon? }[]	five metrics	Cards in order
interval	number	3600	Milliseconds between automatic rolls; 0 turns autoplay off
peek	number	2	Cards peeking out behind the front one
pills	number	10	Pills in each card's bar
onChange	(index: number) => void		Called with the new front card
label	string	"Metrics"	Accessible name
className	string		Classes on the wrapper

More cards

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.

All animated react card components