Scroll effect

Wodniack Work Section Scroll

by Vanguardia · motionprompts.dev

A pinned scroll section where the word WORK, built from HTML letter divs, streams along four Three.js CatmullRom curves projected to screen space while a warped WebGL plane slides a filmstrip of project images across a scrolling red dot grid. A single ScrollTrigger (pin, scrub, end +=700%) drives the progress that feeds the letter paths, the CanvasTexture card offset and the grid, with Lenis smoothing the scroll and per-frame lerping easing the letters into place.

Type: Web motion
Framework: Three.js
Trigger: scroll
Duration: 0.25–0.25s

Save with a free account

Live demo ↗

Motion spec · measured by motionprompts.dev

Engine: mixed
Complexity: 5/5
Pinned: yes
Reduced motion: not handled
Libraries: gsap, ScrollTrigger, lenis, three

scrubbed pin: rAF-lerped letters over WebGL filmstrip

The build prompt

From motionprompts.dev

Creator's promptVanguardia · motionprompts.dev27,217 chars

# Work Section Scroll — Curved Letter Streams + WebGL Filmstrip

## Goal
Build a full-viewport, pinned "WORK" section wedged between a red intro and a red outro…

The build prompt

More like this

Showreel with Blender 3D and self-made soundtrack

Interactive 3D Raptor 3 Rocket Engine WebGL Model

Leon’s 15-second motion design reel

1906 San Francisco Market Street in Blender

Mobile game reward animation template

Glass and gold mosaic that comes alive

Fresh recipes, every week.