Back

Swipe Card Stack UI with Framer Motion

Built an interactive card-stack component with smooth top-to-bottom swipe animations, layered motion transitions, and responsive layout.

Category
CardReact
CSS
shadcn

Manual

Create a file and paste the following code into it.

src/index-demo.tsx
1
2
3
4
5
6
7
8
9
import AnimatedCardStack from "@/components/ui/animate-card-animation";

export default function ScrollGridDemo() {
  return (
    <div className="flex h-dvh w-full items-center justify-center p-8">
      <AnimatedCardStack />
    </div>
  );
}

Update the import paths to match your project setup.

Similar screens