Glass Material Sections is a full landing page built on one WebGL canvas. Fourteen wobbling glass bubbles are anchored to the sections of the page; as you scroll, the camera flies past them with depth parallax, so each section seems to sit in its own pocket of glass. The bubbles refract the pastel background behind them, split colour at the rim, reflect a procedural studio and turn mirror-like at grazing angles (a fresnel term), and they drift away from the pointer and spring back.

The page itself is complete and sellable: a floating glass header, a hero, a refraction explainer, three fresnel cards, a live material panel (tint chips plus refraction, wobble and size sliders that drive the scene behind the page), pricing cards, testimonials, an FAQ and a closing call to action. There is a soft light theme and a deep dusk-violet dark theme with a toggle and system preference.

Everything is hand-written raw WebGL (about 30 KB of unminified JavaScript in total), with no Three.js, no libraries, no cube maps and no images. It falls back to CSS glass circles without WebGL, pauses when the tab is hidden, caps the pixel ratio and respects prefers-reduced-motion.