1 / 3
Overview
A brand page for a fictional sustainability company, and the one where I went after WebGL. Images do not simply sit on the page - they ripple and distort under the pointer, driven by shaders rather than CSS. Another no-framework build: one HTML file, one stylesheet, one script.
Stack
Page
- HTML
- CSS
- JavaScript
Motion
- Shery.js
- GSAP
- ScrollTrigger
- WebGL
Deploy
- Netlify
What I built
- 01Every image distorts and ripples under the pointer - real WebGL shaders through Shery.js, tuned parameter by parameter until the motion felt like water rather than a filter.
- 02Headlines write themselves in as you reach them, and the nav settles on load, both timed with GSAP.
- 03Video that plays on hover and stops when the pointer leaves, so the page is quiet until you look at something.
- 04No framework and no build step: three files and a font, deployed straight to Netlify.