WebGL Gallery

The WebGLGallery component is a drop-in replacement for any standard image slider. Instead of boring slide or fade transitions, it uses a custom GLSL Fragment Shader running on the GPU to liquify, tear apart, and RGB-split the current image as it transitions to the next one.

The shader pipeline combines four simultaneous effects:

1. Chromatic Aberration — Each RGB channel is sampled from a slightly different UV offset, creating the iconic "glitch" color splitting.
2. Liquid Noise Distortion — A procedural 2D noise function warps the UV coordinates, making the image appear to melt.
3. Wave Displacement — A sine wave ripples horizontally across the image during the transition.
4. Dissolve Mask — A noise-driven dissolve boundary creates a non-linear crossfade between the two images.

All four effects peak at the midpoint of the transition (progress = 0.5) and smoothly ease in and out.

Live Preview

Installation

[!WARNING] GPU Requirement: This component runs a custom GLSL fragment shader on the GPU. It will not work on devices without WebGL support (extremely rare in 2025+). Performance is hardware-accelerated and typically runs at 60fps even on mobile GPUs.

Props

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { WebGLGallery } from "@/components/creative/webgl-gallery";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { WebGLGallery } from "@/components/creative/webgl-gallery";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <WebGLGallery
        images="example"
        intensity{10}
        showControls{true}
      />
    </div>
  );
}