Components
Loading preview...
Cinematic scroll-scrubbed hero with an image sequence rendered on canvas. The central card scales from a thumbnail to cover the viewport while scrubbing through your video frames, then shrinks back symmetrically. GSAP ScrollTrigger powered, pin-based choreography, mobile-aware, respects prefers-reduced-motion. Ideal for luxury, automotive, editorial and product landing pages.
@duthiljean
npx shadcn@latest add https://21st.dev/r/jean.duthil13/hero-scrubimport { HeroScrub } from "@/components/ui/hero-scrub";
export default function Demo() {
return (
<HeroScrub
frameCount={300}
frameUrl={(i) =>
`https://raw.githubusercontent.com/duthiljean/ferrari-hero-demo/main/${String(i + 1).padStart(4, "0")}.webp`
}
titleTop="Ferrari"
titleBottom="Amalfi"
accentHex="#3a9b8a"
/>
);
}