Wodniack Work Section Scroll

How it works

A black section pins between a red intro and a red outro, and while it stays on screen three layers move together. Behind everything, a fine grid of red dots drifts sideways like a conveyor belt. In the middle, giant red letters spelling W, O, R and K stream along four curved paths, bending around the centre of the screen as if they were wrapped on the inside of a drum. In front of them, a filmstrip of project images glides across the screen on a gently curved surface.

One progress value, three layers

The section is pinned with GSAP ScrollTrigger for a long stretch of scroll, with Lenis smoothing the scroll itself. There are no tweens and no timelines: a single scrubbed progress value, from start to end of the pin, is handed to three drawing functions on every update. Because each layer is a pure function of that value, scrolling backwards is exact and nothing drifts out of sync.

The dot grid is a plain 2D canvas redrawn with an offset taken from the progress. The filmstrip is a large offscreen canvas where the images are painted in a row at a position that also follows the progress; that canvas becomes a texture on a Three.js plane whose vertices are pushed towards the camera at the edges, so the strip looks like it rides the inside of a cylinder wider than the viewport.

Letters that follow 3D curves

The letters are ordinary HTML elements, but their paths live in a Three.js scene. Each row is a smooth curve through 3D space that bows vertically and recedes away from the camera at the middle. On every scroll update, each letter's point on its curve is projected from 3D into screen pixels, and that becomes the letter's target. The rows run at slightly different speeds, so they slide out of phase as you scroll.

A separate animation loop then eases every letter towards its target, frame after frame, even after the scroll has stopped. Combined with Lenis and the scrub, that is three stacked layers of smoothing, and it is what makes a fast scroll smear the letters along their curves instead of jerking them.

Where it gets hard

The letters loop around their curves, and at the moment a letter wraps, its target jumps from one edge of the screen to the other. Eased naively, it would streak across the whole viewport. The component detects that jump and snaps the letter instead of easing it.

Performance and mobile

This is a heavy section: two WebGL renderers, a large canvas texture re-uploaded on every scroll update and dozens of transformed elements. Pixel ratios are capped and the texture uses mipmaps so it stays sharp without shimmering. The layout is built for desktop, with fixed giant type and world-space sizes, so on phones expect to scale the letters and shorten the pin before shipping it.