Parallax Hero Images

Absolutely positioned images with 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.

npx shadcn@latest add @aceternity/parallax-hero-images

Use the variant="edge-focus" prop to make top and bottom images appear closer while middle images appear further back.

Move your mouse to see the parallax effect. Images at different depths move at different speeds.

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

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