Hero Parallax
Full-width hero with multiple rows of product images moving at different parallax speeds.
Preview
Hero Parallax
Interactive preview — import this component to see it in action
IO Context
Where IO uses this
Landing page heroes showcasing multiple products or features.
Why this component matters
Shows breadth and variety in a single viewport. The parallax motion creates visual richness.
Usage guidance
Use with 10-15 product screenshots or images. Three rows with different scroll speeds. Include a centered text overlay with the main headline.
Installation
bash
npx shadcn@latest add @aceternity/hero-parallaxUsage
example.tsxtsx
import { HeroParallax } from "@/components/ui/hero-parallax";
export default function Example() {
return (
<HeroParallax>
{/* Your content here */}
</HeroParallax>
);
}Source
hero-parallax.tsx
components/ui/hero-parallax.tsx