WebGL

@andresclua/sliderkit-webgl adds a WebGL transition and hover-effect layer powered by OGL (~10kb gzipped). It detects WebGL support automatically and falls back gracefully.

Installation

pnpm add @andresclua/sliderkit-webgl

Usage

import { Slider } from '@andresclua/sliderkit'
import { WebGLRenderer } from '@andresclua/sliderkit-webgl'
import { displacement } from '@andresclua/sliderkit-webgl/effects'

new Slider('#el', {
  plugins: [
    WebGLRenderer({
      effect: displacement({
        texture: '/textures/displacement-01.png',
        intensity: 1.2,
      }),
    }),
  ],
})

Built-in effects

Effect	Import	Description
Displacement	displacement(opts)	Warp-based transition using a displacement map texture.
RGB Shift	rgbShift(opts)	Chromatic aberration transition.
Pixel Dissolve	pixelDissolve(opts)	Pixel grid dissolve transition.
Parallax Depth	parallaxDepth(opts)	3D depth parallax on mouse hover.

Custom shaders

import { WebGLRenderer } from '@andresclua/sliderkit-webgl'

new Slider('#el', {
  plugins: [
    WebGLRenderer({
      vertexShader: `...`,
      fragmentShader: `
        precision mediump float;
        uniform sampler2D uFrom;
        uniform sampler2D uTo;
        uniform float uProgress;
        varying vec2 vUv;

        void main() {
          vec4 from = texture2D(uFrom, vUv);
          vec4 to   = texture2D(uTo,   vUv);
          gl_FragColor = mix(from, to, uProgress);
        }
      `,
      uniforms: {
        uMyParam: { value: 0.5 },
      },
    }),
  ],
})

Reduced motion

When prefers-reduced-motion: reduce is active, WebGL transitions are skipped and an instant cut is used instead. No configuration needed.

Fallback

If WebGL is not supported (older browsers, some mobile), the renderer logs a warning and falls back to a CSS fade transition automatically.