Sticky Cards Stack
Animated cards stack, displaying one card at a time overlaping the previous card.
Installation
Usage
<ContainerScroll className="min-h-[400vh] space-y-8 py-12 place-content-center place-items-center">
<CardSticky
index={1}
className="rounded-2xl border p-8 shadow-md backdrop-blur-md max-w-md"
>
<div className="flex items-center justify-between gap-4">
<h2 className="my-6 text-2xl font-bold tracking-tighter">heading</h2>
<h3 className="text-2xl font-bold text-primary">title</h3>
</div>
<p className="text-foreground">description</p>
</CardSticky>
<CardSticky
index={2}
className="rounded-2xl border p-8 shadow-md backdrop-blur-md max-w-md"
>
<div className="flex items-center justify-between gap-4">
<h2 className="my-6 text-2xl font-bold tracking-tighter">heading 2</h2>
<h3 className="text-2xl font-bold text-primary">title 2</h3>
</div>
<p className="text-foreground">description 2</p>
</CardSticky>
</ContainerScroll>
Examples
Showcasing work projects
latest projects
Get a glimpse of our work
From ecommerce to startup landing pages and singl/multi page websites, building fully responsive and functional website that showcase your product and your unique identity.
Showcasing Achievements
Props
Prop | Type | Default |
---|---|---|
index | number | - |
incrementY? | number | 10 |
incrementZ? | number | 10 |