GSAP Pinned Statement Hero with Expanding Photo

npm install gsap @gsap/react, plus lenis if you keep the optional smooth scroll. ScrollTrigger comes with gsap. It's built for Next.js (it uses next/image) with Tailwind CSS v4.

Pass a lines array, one entry per line: its text, an optional word from it to set in italic in the accent colour, an optional indent in vw (phones, then wider screens) and a shift, how far the line slides while the hero is pinned, in vw. Give neighbouring lines opposite signs so they slide apart. The eyebrow, blurb and scrollLabel props set the small print.

Pass services: a title, a colour and a portrait photo (2:3 suits the cards) for each. Four read best; the fan, the dots, the list down the right and the colour washes behind them all follow the array. The photo prop takes src, width and height (a static import works as it is), because the hero needs the aspect ratio to crop it as the frame opens up. A portrait with the face near the top suits the crop.

The statement is set in Bodoni Moda: load it with next/font as the --font-bodoni-moda variable, with axes: ["opsz"] for the hairline cut at display sizes. It falls back to a system Didone. Everything else uses your page's sans; the demo uses Manrope.

Yes. It pins when its top reaches the top of the screen, stays for two and a half screens of scroll (pin in config.ts) while the photo opens up, then lets the page carry on.

Yes. Render the SmoothScroll that comes with it once on the page. If your page runs its own Lenis, connect it with lenis.on("scroll", ScrollTrigger.update) and drive it from gsap.ticker.

The colours (ink, paper, the canvas behind it and the accent), how long it stays pinned and the smooth scroll's lerp are in config.ts. The intro's timings and the pinned timeline are in statement-hero.tsx.