Back to Components
Cards
Sticky Reveal Cards
Sticky stacked cards that reveal as the user scrolls.
Phase 1
Gather insights
Collect signals and shape the experience roadmap.
Phase 2
Design the flow
Layer content to guide focus with clarity.
Phase 3
Launch with impact
Reveal the stacked narrative as the user scrolls.
Dependencies
- clsx
- tailwind-merge
- framer-motion
Files
- components/ui/sticky-reveal-cards.tsx
Installation
Using shadcn CLI
npx shadcn add sticky-reveal-cards --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-merge framer-motion