Snappy Stack

Il y a quelque chose de satisfaisant dans le fait de faire défiler des cartes à la main : le glissement fluide, le retour élastique et cette sensation tactile du mouvement. C'est exactement ce que propose SnappyStack, une pile de cartes fluide et interactive propulsée par motion/react (Framer Motion).

const cards = [
  {
    imageUrl: image1,
    title: "Japon",
    description: "Un pays d'Asie de l'Est.",
  },
  {
    imageUrl: image2,
    title: "Chine",
    description: "Un pays d'Asie de l'Est.",
  },
  {
    imageUrl: image3,
    title: "Royaume-Uni",
    description: "Un pays d'Europe.",
  },
];
 
return (
  <SwipeableCardStack>
    {cards.map((card) => (
      <SwipeableCard key={card.title} {...card} />
    ))}
  </SwipeableCardStack>
);

Il suffit ensuite de faire glisser la carte du dessus sur le côté. Elle disparaît avec un mouvement souple, revient en bas de la pile et l'ensemble se réorganise naturellement.

Composant fortement inspiré par Florian.