Custom Shaders

Write your own GLSL fragment shader to create fully custom WebGL transitions between slides.

How it works

The @andresclua/sliderkit-webgl renderer passes two textures to every fragment shader — uTexture0 (current slide) and uTexture1 (next slide) — plus a uProgress uniform that animates from 0 to 1 during a transition.

Shader uniforms

Uniform	Type	Description
`uTexture0`	`sampler2D`	Current (outgoing) slide texture
`uTexture1`	`sampler2D`	Next (incoming) slide texture
`uProgress`	`float`	Transition progress 0.0 → 1.0
`uResolution`	`vec2`	Canvas size in pixels
`uTime`	`float`	Elapsed time in seconds (permanent effects only)

Minimal example — cross-dissolve

// dissolve.frag
precision mediump float;

uniform sampler2D uTexture0;
uniform sampler2D uTexture1;
uniform float     uProgress;

varying vec2 vUv;

void main() {
  vec4 t0 = texture2D(uTexture0, vUv);
  vec4 t1 = texture2D(uTexture1, vUv);
  gl_FragColor = mix(t0, t1, uProgress);
}

Using a custom shader

import { Slider } from '@andresclua/sliderkit'
import { webglRenderer } from '@andresclua/sliderkit-webgl'
import dissolveShader from './dissolve.frag?raw'

new Slider('#el', {
  plugins: [
    webglRenderer({
      shader: dissolveShader,
      duration: 800,
    }),
  ],
})

Wipe effect example

precision mediump float;

uniform sampler2D uTexture0;
uniform sampler2D uTexture1;
uniform float     uProgress;

varying vec2 vUv;

void main() {
  float edge = smoothstep(uProgress - 0.05, uProgress + 0.05, vUv.x);
  vec4 t0 = texture2D(uTexture0, vUv);
  vec4 t1 = texture2D(uTexture1, vUv);
  gl_FragColor = mix(t0, t1, edge);
}

Importing GLSL in Vite

Use the ?raw suffix to import the shader as a string:

import myShader from './my.frag?raw'

For webpack, use raw-loader:

// webpack.config.js
{ test: /.frag$/, use: 'raw-loader' }