Back to Components
Components
Parallax Section
Layered parallax section with foreground and background motion.
Scroll layers
Parallax storytelling
Guide attention with layered motion and smooth scroll timing.
Depth layers
Foreground content moves with a faster cadence.
Calm motion
Background shapes drift softly to create dimension.
Balanced focus
The message stays centered as the scene shifts.
Dependencies
- clsx
- tailwind-merge
- framer-motion
Files
- components/ui/parallax-section.tsx
Installation
Using shadcn CLI
npx shadcn add parallax-section --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-merge framer-motion