Snappy stack
A swipeable card stack powered by motion/react (Framer Motion).
There’s something oddly satisfying about flicking through cards, the smooth drag, the springy snap and that tactile feel of movement. That’s what SnappyStack is built for, a fluid, swipeable card stack powered by motion/react (Framer Motion).
const cards = [
{
imageUrl: image1,
title: "Japan",
description: "A country in East Asia.",
},
{
imageUrl: image2,
title: "China",
description: "A country in East Asia.",
},
{
imageUrl: image3,
title: "United Kingdom",
description: "A country in Europe.",
},
];
return (
<SwipeableCardStack>
{cards.map((card) => (
<SwipeableCard key={card.title} {...card} />
))}
</SwipeableCardStack>
);Now, drag the top card sideways and feel that spring. The top card snaps away, reappears at the bottom, and everything reflows beautifully.
Component heavily inspired by Florian.
Other experiments
Explore two more experiments from the lab.