WebGL RGB Shift Image Card

This is a WebGL RGB Shift Image Card. It renders a high-resolution raster image onto a 3D geometric plane, applying dynamic visual distortions based on pointer intersection. Its function is to elevate standard portfolio grids or hero sections into highly tactile, immersive experiences, replacing standard CSS transitions with complex mathematical pixel manipulation.

Specs

• Weight: ~650 KB (Dependencies: Three.js + GSAP/TweenMax).
• Performance: GPU-intensive. Relies heavily on custom ShaderMaterial execution and real-time pointer raycasting.
• Theming / Customization: The image source is easily swapped via THREE.TextureLoader. Modifying the glitch intensity requires direct manipulation of the GLSL fragment shader variables.
• Responsiveness: Adapts dynamically. A dedicated resizeHandler recalculates the camera’s aspect ratio and projection matrix to prevent mesh stretching.
• Web APIs: WebGL API, requestAnimationFrame.
• Graceful Degradation: [!] Completely breaks without JavaScript or WebGL support, rendering a blank dark screen. Lacks a standard <img> fallback for screen readers and search engines.

Anatomy

• HTML: A single, empty <canvas> element serving as the WebGL context target.
• CSS: Absolute minimalism. Removes margins and forces the canvas to occupy 100% of the viewport dimensions.
• JS: The engine room. Divided into SceneManager (handling Three.js boilerplate: camera, renderer, clock) and PlaneSubject (handling the geometry, shader material, and GSAP tweens). Raycasting detects physical mouse intersections with the 3D plane.

Logic

The standout mechanism is the synergy between GSAP’s JavaScript tweening and GLSL fragment shaders.

// RGBshift
color.r = texture2D(texture, uv+(hoverLevel)*0.01).r;
color.g = texture2D(texture, uv-(hoverLevel)*0.01).g;

When the Raycaster detects the cursor hovering over the mesh, GSAP does not animate the CSS. Instead, it tweens a custom uniform variable (hover) inside the shader material. The fragment shader intercepts this variable, calculates an exponential easing curve, and mathematically splits the UV coordinates of the red and green color channels. This delegates the heavy lifting of pixel distortion entirely to the GPU, creating a seamless chromatic aberration effect.

Feel

Cinematic and highly responsive. As the cursor moves across the screen, the card physically tilts on its X and Y axes, creating a sense of 3D depth. Crossing its boundary triggers the GLSL shader: the image bulges slightly while the RGB channels separate and vibrate. It feels like interacting with a volatile holographic projection rather than a flat digital canvas.