Horizontal soft wipe

A fragment shader that sweeps a soft edge from left to right across the canvas, revealing the incoming slide beneath. The edge is blended with smoothstep over a 0.1-wide band — widen the band (0.2+) for a blurry transition, narrow it (0.02) for a hard cut. Three uniforms are always available: uFrom (outgoing texture), uTo (incoming texture), uProgress (0 → 1 over the duration).

View code

<div class="wgl-slider" id="my-slider">
  <div class="c--slider-a__wrapper">
    <!-- Slides are empty — WebGL renders the images -->
    <div class="wgl-slide" data-slide></div>
    <div class="wgl-slide" data-slide></div>
    <div class="wgl-slide" data-slide></div>
    <div class="wgl-slide" data-slide></div>
  </div>
</div>

.wgl-slider { position: relative; height: 400px; overflow: hidden; background: #000; }
.wgl-slider .c--slider-a__wrapper { display: flex; }
.wgl-slide { flex-shrink: 0; width: 100%; height: 100%; }
.wgl-slider canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.wgl-slider { position: relative; height: 400px; overflow: hidden; background: #000; }
.wgl-slider .c--slider-a__wrapper { display: flex; }
.wgl-slide { flex-shrink: 0; width: 100%; height: 100%; }
.wgl-slider canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

// wipe.frag — soft horizontal wipe
const FRAG = `
  precision highp float;
  uniform sampler2D uFrom;  // outgoing slide texture
  uniform sampler2D uTo;    // incoming slide texture
  uniform float uProgress;  // 0 → 1
  varying vec2 vUv;

  void main() {
    float edge = smoothstep(uProgress - 0.05, uProgress + 0.05, vUv.x);
    gl_FragColor = mix(
      texture2D(uFrom, vUv),
      texture2D(uTo,   vUv),
      1.0 - edge
    );
  }
`

import { Slider } from '@andresclua/sliderkit'
import { arrows } from '@andresclua/sliderkit-plugins'

// Standard WebGL setup (see displacement demo for boilerplate)
// Compile FRAG, create quad, load textures …

const slider = new Slider('#my-slider', {
  loop: true, speed: 1,
  plugins: [arrows()],
})
slider.on('afterSlideChange', ({ index, previousIndex }) => {
  animateTransition(textures[previousIndex], textures[index], 800)
})

Radial iris wipe

An expanding circle reveals the incoming slide from the centre of the frame outward. The radius is driven by uProgress scaled to the maximum corner distance (√2 / 2 ≈ 0.707), so the circle always covers the full canvas at progress = 1. Adjust the smoothstep band width for a hard or soft edge.

View code

<div class="wgl-slider" id="my-slider">
  <div class="c--slider-a__wrapper">
    <div class="wgl-slide" data-slide></div>
    <div class="wgl-slide" data-slide></div>
    <div class="wgl-slide" data-slide></div>
    <div class="wgl-slide" data-slide></div>
  </div>
</div>

.wgl-slider { position: relative; height: 400px; overflow: hidden; background: #000; }
.wgl-slider .c--slider-a__wrapper { display: flex; }
.wgl-slide { flex-shrink: 0; width: 100%; height: 100%; }
.wgl-slider canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

.wgl-slider { position: relative; height: 400px; overflow: hidden; background: #000; }
.wgl-slider .c--slider-a__wrapper { display: flex; }
.wgl-slide { flex-shrink: 0; width: 100%; height: 100%; }
.wgl-slider canvas { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

// iris.frag — radial wipe from centre
const FRAG = `
  precision highp float;
  uniform sampler2D uFrom;
  uniform sampler2D uTo;
  uniform float uProgress;
  varying vec2 vUv;

  void main() {
    // Distance from centre; max corner distance = sqrt(0.5) ≈ 0.707
    float dist  = length(vUv - vec2(0.5));
    float radius = uProgress * 0.707;
    float edge  = smoothstep(radius - 0.04, radius + 0.04, dist);
    // edge=0 inside circle → show uTo; edge=1 outside → show uFrom
    gl_FragColor = mix(texture2D(uTo, vUv), texture2D(uFrom, vUv), edge);
  }
`

// Same Slider integration as the wipe demo above
const slider = new Slider('#my-slider', {
  loop: true, speed: 1,
  plugins: [arrows()],
})