Build a scroll-driven WebGL hero in 30 lines

Hero sections that respond to scroll are one of those features that look complicated and actually aren't, once you have the right pieces. Two images, a shader that morphs between them, scroll position drives the morph. That's it. The rest is plumbing.

This tutorial builds exactly that — a scroll-driven WebGL hero — in about 30 lines of JavaScript. Plain HTML, no framework, no build step. Drop it into a CodePen or a static HTML file and it works.

What we're building

Three behaviors, tied together:

As the user scrolls down into the hero section, image A morphs into image B.