WebGL + GSAP + Next.js

Scroll-Revealed WebGL Gallery

Port of the Codrops gsap-threejs-codrops gallery into the blog layout with inline images and shader-based reveals.

Curious about how the Codrops Astro gallery would feel inside this Next.js blog, I built a small inline demo that keeps the article markup intact while a WebGL canvas paints the images on scroll.

How this demo is wired

  • The MDX still renders ordinary <img> tags. They keep layout, captions, and accessibility intact.
  • The shared WebGLImageLayer hooks into article media and mirrors each image into a GPU plane as it scrolls into view.
  • GSAP ScrollTrigger scrubs a uProgress uniform from 0→1 as each figure enters the viewport. The fragment shader adds a wavy displacement and grain that fade out as progress reaches 1.
  • If JavaScript or WebGL fail, the fallback is just the original images.

Demo: three inline figures

Foggy mountain ridgeline shot on panoramic film.
A slow reveal with a panoramic frame.
Research talk on stage.
The noise softens as the image settles.
Urban night scene with neon reflections.
All three figures share one WebGL canvas; ScrollTrigger drives their uniforms.

What changed from the Codrops build

  • Swapped the Astro + Barba router for Next.js App Router and centralized the effect in the shared blog WebGL layer.
  • The camera is orthographic and resizes to the viewport; planes track each figure’s bounding box.
  • The shader is trimmed for readability: sine-wave displacement + grain that eases out with uProgress.
  • The originals stay in the DOM (for SEO and screen readers) but fade out once textures are uploaded.

Next steps

  • Add per-figure parallax offset and color grading uniforms.
  • Move shader strings into GLSL files and reuse them across posts.
  • Extend gating with bandwidth hints and visibility heuristics for even lighter runtime cost.