Playground

Write a transition in GLSL, or load a preset or a gl-transition and change it. Press Play to run it on the stage.

<article> · 01

Plain HTML, in a shader

This card is an <article> with text, SVG and CSS animation. Select the text: it is real.

Read the docs →

LIVE

t=0.00

easeduration 1.2ssoftness 0.08

Examples4

Presets16

gl-transitions is an open collection of GLSL transitions, started by Gaëtan Renaudeau and published by its contributors.

The 123 shaders below were written by the community. Each keeps its author's license, shown in the Edit tab. Shaders that need extra textures are left out.

Install gl-transitions, then createGLTransition from @vfx-js/transitions turns any of them into a VFX-JS transition:

main.ts

import { createGLTransition } from "@vfx-js/transitions";
import transitions from "gl-transitions";

const Cube = createGLTransition(transitions.find((t) => t.name === "Cube"));
t.run(cb, { transition: Cube, params: { persp: 0.5 } });

Soft wipe

uniform float softness;

vec4 transition(vec2 uv, float t) {
  float edge = mix(-softness, 1.0 + softness, t);
  float m = smoothstep(edge - softness, edge + softness, uv.x);
  return mix(readTo(uv), readFrom(uv), m);
}

Edit and press Play. Compile errors print to the console with line numbers.