Karan Chandekar | Software Engineer

The Challenge

Creating a gallery of real-time WebGL shader effects that are performant, visually stunning, and smoothly navigable with mouse-reactive interactions.

The Solution

Built custom GLSL fragment and vertex shaders for each effect, used React Three Fiber for rendering, and GSAP ScrollTrigger for gallery navigation with smooth transitions between shader exhibits.

// Liquid distortion shader
uniform float uTime;
uniform vec2 uMouse;

void main() {
  vec2 uv = vUv;
  float dist = distance(uv, uMouse);
  float ripple = sin(dist * 20.0 - uTime * 3.0);
  uv += normalize(uv - uMouse) * ripple * 0.02;
  vec3 color = texture2D(uTexture, uv).rgb;
  gl_FragColor = vec4(color, 1.0);
}