Parallax Hero Images
Mouse-driven parallax effect, perfect for hero sections. Images blur fade in and move at different depths.
State of the art, cutting edge images, everywhere.
Move your mouse to see the parallax effect. Images at different depths move at different speeds.
Installation
Run the following command
npx shadcn@latest add @aceternity/parallax-hero-imagesEdge Focus Variant
Use the variant="edge-focus" prop to make top and bottom images appear closer while middle images appear further back.
State of the art, cutting edge images, everywhere.
Move your mouse to see the parallax effect. Images at different depths move at different speeds.
Props
| Prop name | Type | Default | Description |
|---|---|---|---|
images | string[] | Required | Array of image URLs (max 8 images) |
className | string | undefined | CSS classes for the container |
imageClassName | string | undefined | CSS classes for each image (use for sizing, e.g. w-60) |
variant | "default" | "edge-focus" | "default" | Depth variant. default: middle images closest. edge-focus: edges closest |
Build websites faster and 10x better than your competitors with
Aceternity UI Pro
Next.js 15, Tailwind CSS v4 and Motion for react powered templates
200+ templates and blocks combined
Ready to copy paste component blocks, save days of development time
