GSAP Parting Mosaic Wall Portfolio

npm install gsap @gsap/react, plus lenis if you keep the optional smooth scroll. There's no WebGL: the wall is plain HTML. It's built for Next.js with Tailwind CSS v4.

Pass a projects array: title, category, year, video, poster, summary, client and role. Posters and videos are 16:10; use videos as muted H.264 loops of 6 to 12 seconds and a few MB at most. Add crops to choose which squares the tiles are cut from (a type crop adds the headline), and glow colours for the occasional glow tile.

Yes, that's how it's meant to be used. It's a section of a normal scrolling page: it pins once its top reaches the top of the screen, stays for 1.2 screens of scroll (pin.length in config.ts) and 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, call setSmoothScroll(lenis) from scroll.ts so an open project can stop it, and pass virtualScroll: ({ event }) => !event.defaultPrevented so a sideways swipe over the wall pans the wall.

The name and titles are set in Instrument Serif: load it with next/font as the --font-instrument-serif variable. Labels use your mono font, the rest your page's sans.

Every value is in config.ts: the rows, tile proportions and gaps, the drift and the pan, how far the gap pushes tiles and how quickly it follows, the card's size and when its film plays, the opened project, the pin's length and pan, the intro and the colours.