# gl-transitions

> The open collection of GL Transitions: 125 GLSL shaders that turn one image into another as `progress` goes from 0 to 1. Each one is also published as an SkSL runtime effect for Skia. This document describes gl-transitions@1.75.0 (npm).

Every transition is GLSL (WebGL 1 / GLSL ES 1.00) that implements `vec4 transition(vec2 uv)`. The host provides:

- `float progress`: 0.0 shows only the outgoing image, 1.0 only the incoming one
- `float ratio`: output width / height
- `vec4 getFromColor(vec2 uv)` and `vec4 getToColor(vec2 uv)`: sample the outgoing and incoming images (uv in [0, 1], origin at the bottom left)
- one uniform per parameter, set to its default unless the user picks another value
- one `sampler2D` per extra texture, for the few transitions that list `textures`

SkSL versions (`sksl/<name>.sksl`) are standalone Skia runtime effects: children `_from`, `_to` (then one per extra texture), uniforms `float2 _resolution` (output size in pixels), `progress`, `ratio` and each parameter by name (`bool` parameters are `int` 0 or 1), entry point `half4 main(float2 coord)` with a top-left origin. Draw both images at the output size.

Install: `npm install gl-transitions` (`import transitions from "gl-transitions"`), or fetch the files below. Latest version: https://cdn.jsdelivr.net/npm/gl-transitions@1/

## AdvancedMosaic

Both images break into large blocks that blend, then sharpen into the incoming image

- Tags: pixelate, mosaic, blend
- Parameters:
  - `pixelSize` (float = 50)
- Author: Sergey Kosarevsky
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/AdvancedMosaic.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/AdvancedMosaic.sksl
- Preview: https://gl-transitions.com/editor/AdvancedMosaic

## BlockDissolve

The incoming image appears in small random blocks

- Tags: dissolve, blocks, noise
- Parameters:
  - `blocksize` (float = 0.02)
- Author: nwoeanhinnogaehr
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/BlockDissolve.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/BlockDissolve.sksl
- Preview: https://gl-transitions.com/editor/BlockDissolve

## BookFlip

The outgoing image turns like a book page from right to left, revealing the incoming one

- Tags: page, flip, 3d
- Parameters: none
- Author: hong
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/BookFlip.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/BookFlip.sksl
- Preview: https://gl-transitions.com/editor/BookFlip

## Bounce

The outgoing image drops out of the frame with a few bounces, revealing the incoming one

- Tags: bounce, slide, vertical, shadow
- Parameters:
  - `shadow_colour` (vec4 = vec4(0, 0, 0, 0.6)) [color]: Color of the shadow cast on the incoming image
  - `shadow_height` (float = 0.075) [range 0.01 to 0.5]: Height of the shadow, relative to the image height
  - `bounces` (float = 3) [range 1 to 10 step 1]: Number of bounces before settling
- Author: Adrian Purser
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Bounce.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Bounce.sksl
- Preview: https://gl-transitions.com/editor/Bounce

## BowTieHorizontal

Two triangles grow from the left and right edges into a bow tie that reveals the incoming image

- Tags: wipe, shape, horizontal
- Parameters: none
- Author: huynx
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/BowTieHorizontal.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/BowTieHorizontal.sksl
- Preview: https://gl-transitions.com/editor/BowTieHorizontal

## BowTieVertical

Two triangles grow from the top and bottom edges into a bow tie that reveals the incoming image

- Tags: wipe, shape, vertical
- Parameters: none
- Author: huynx
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/BowTieVertical.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/BowTieVertical.sksl
- Preview: https://gl-transitions.com/editor/BowTieVertical

## BowTieWithParameter

A bow-tie wipe with an adjustable shape that can run in reverse

- Tags: wipe, shape
- Parameters:
  - `adjust` (float = 0.5)
  - `reverse` (bool = false): Run the wipe in reverse
- Author: KMojek
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/BowTieWithParameter.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/BowTieWithParameter.sksl
- Preview: https://gl-transitions.com/editor/BowTieWithParameter

## Box

The outgoing image shrinks into a box, toward the center or a corner, revealing the incoming one

- Tags: box, zoom, shape
- Parameters:
  - `rectIn` (int = 1)
  - `location` (int = 0) [range 0 to 4 step 1]: Where the box goes: 0 center, 1 left top, 2 left bottom, 3 right top, 4 right bottom
- Author: lql
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Box.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Box.sksl
- Preview: https://gl-transitions.com/editor/Box

## ButterflyWaveScrawler

Wavy, color-separated ripples scramble the outgoing image into the incoming one

- Tags: wave, distort, chromatic
- Parameters:
  - `amplitude` (float = 1)
  - `waves` (float = 30)
  - `colorSeparation` (float = 0.3)
- Author: mandubian
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/ButterflyWaveScrawler.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/ButterflyWaveScrawler.sksl
- Preview: https://gl-transitions.com/editor/ButterflyWaveScrawler

## CircleCrop

The outgoing image closes into a circle over a background color, then the incoming one opens from it

- Tags: circle, iris, shape
- Parameters:
  - `bgcolor` (vec4 = vec4(0, 0, 0, 1)) [color]: Background color
- Author: fkuteken
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/CircleCrop.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/CircleCrop.sksl
- Preview: https://gl-transitions.com/editor/CircleCrop

## ColourDistance

Pixels switch to the incoming image in order of how close their colors are

- Tags: blend, color
- Parameters:
  - `power` (float = 5)
- Author: P-Seebauer
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/ColourDistance.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/ColourDistance.sksl
- Preview: https://gl-transitions.com/editor/ColourDistance

## CrazyParametricFun

The outgoing image is pulled along a parametric curve into a psychedelic swirl

- Tags: distort, psychedelic
- Parameters:
  - `a` (float = 4)
  - `b` (float = 1)
  - `amplitude` (float = 120)
  - `smoothness` (float = 0.1)
- Author: mandubian
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/CrazyParametricFun.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/CrazyParametricFun.sksl
- Preview: https://gl-transitions.com/editor/CrazyParametricFun

## CrossZoom

A crossfade through a strong zoom blur

- Tags: zoom, blur, blend
- Parameters:
  - `strength` (float = 0.4) [range 0 to 1]: Blur strength
- Author: rectalogic
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/CrossZoom.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/CrossZoom.sksl
- Preview: https://gl-transitions.com/editor/CrossZoom

## DefocusBlur

A crossfade through an out-of-focus blur

- Tags: blur, blend
- Parameters:
  - `blurSize` (float = 0.02): Amount of blur
- Author: Sergey Kosarevsky
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/DefocusBlur.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/DefocusBlur.sksl
- Preview: https://gl-transitions.com/editor/DefocusBlur

## Directional

The incoming image pushes the outgoing one out in a given direction

- Tags: slide, push, directional
- Parameters:
  - `direction` (vec2 = vec2(0, 1)): Direction of the movement
- Author: Gaëtan Renaudeau
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Directional.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Directional.sksl
- Preview: https://gl-transitions.com/editor/Directional

## DirectionalScaled

Like Directional, with both images scaled down while they slide

- Tags: slide, push, zoom, directional
- Parameters:
  - `direction` (vec2 = vec2(0, 1)): Direction of the movement
  - `scale` (float = 0.7)
- Author: Thibaut Foussard
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/DirectionalScaled.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/DirectionalScaled.sksl
- Preview: https://gl-transitions.com/editor/DirectionalScaled

## DoomScreenTransition

The outgoing image melts down in uneven columns, like the Doom screen wipe

- Tags: melt, columns, retro
- Parameters:
  - `bars` (int = 30)
  - `amplitude` (float = 2)
  - `noise` (float = 0.1)
  - `frequency` (float = 0.5)
  - `dripScale` (float = 0.5)
- Author: Zeh Fernando
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/DoomScreenTransition.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/DoomScreenTransition.sksl
- Preview: https://gl-transitions.com/editor/DoomScreenTransition

## Dreamy

A crossfade with a gentle wavy distortion

- Tags: wave, blend
- Parameters: none
- Author: mikolalysenko
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Dreamy.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Dreamy.sksl
- Preview: https://gl-transitions.com/editor/Dreamy

## DreamyZoom

Zooms and rotates into a bright flash, then out to the incoming image

- Tags: zoom, rotate, flash
- Parameters:
  - `rotation` (float = 6)
  - `scale` (float = 1.2)
- Author: Zeh Fernando
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/DreamyZoom.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/DreamyZoom.sksl
- Preview: https://gl-transitions.com/editor/DreamyZoom

## Drop_Zone_Flicker

A flickering glitch with RGB offset, ghosting and scanlines that flashes back to the outgoing image

- Tags: glitch, flicker, chromatic, scanlines
- Parameters:
  - `frameRate` (float = 24)
  - `rgbOffset` (float = 0.014)
  - `blockAmount` (float = 0.72)
  - `ghostAmount` (float = 0.62)
  - `redCyan` (float = 0.58)
  - `scanline` (float = 0.075)
- Author: bread
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Drop_Zone_Flicker.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Drop_Zone_Flicker.sksl
- Preview: https://gl-transitions.com/editor/Drop_Zone_Flicker

## EdgeTransition

Both images fade through black with their edges glowing

- Tags: edges, fade
- Parameters:
  - `edge_thickness` (float = 0.001)
  - `edge_brightness` (float = 8)
- Author: Woohyun Kim
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/EdgeTransition.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/EdgeTransition.sksl
- Preview: https://gl-transitions.com/editor/EdgeTransition

## FilmBurn

Glowing film-burn light leaks wash over the image and reveal the incoming one

- Tags: burn, film, light-leak
- Parameters:
  - `Seed` (float = 2.31): Random seed
- Author: Anastasia Dunbar
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/FilmBurn.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/FilmBurn.sksl
- Preview: https://gl-transitions.com/editor/FilmBurn

## Fold

The incoming image unfolds from the left while the outgoing one folds away to the right

- Tags: fold, slide, horizontal
- Parameters: none
- Author: nwoeanhinnogaehr
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Fold.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Fold.sksl
- Preview: https://gl-transitions.com/editor/Fold

## GlitchDisplace

Blocks of the image are displaced in a glitch that flashes into the incoming image

- Tags: glitch, displace
- Parameters: none
- Author: Matt DesLauriers
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/GlitchDisplace.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/GlitchDisplace.sksl
- Preview: https://gl-transitions.com/editor/GlitchDisplace

## GlitchMemories

A crossfade with glitchy, color-shifted blocks

- Tags: glitch, chromatic, blend
- Parameters: none
- Author: Gunnar Roth
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/GlitchMemories.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/GlitchMemories.sksl
- Preview: https://gl-transitions.com/editor/GlitchMemories

## GridFlip

The image splits into a grid of tiles that flip one by one to the incoming image

- Tags: grid, tiles, flip
- Parameters:
  - `size` (ivec2 = ivec2(4, 4)): Number of tiles (columns, rows)
  - `pause` (float = 0.1)
  - `dividerWidth` (float = 0.05)
  - `bgcolor` (vec4 = vec4(0, 0, 0, 1)) [color]: Color behind the tiles
  - `randomness` (float = 0.1)
- Author: TimDonselaar
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/GridFlip.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/GridFlip.sksl
- Preview: https://gl-transitions.com/editor/GridFlip

## HSVfade

A crossfade through the HSV color space that cycles through hues

- Tags: fade, color, hue
- Parameters: none
- Author: nwoeanhinnogaehr
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/HSVfade.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/HSVfade.sksl
- Preview: https://gl-transitions.com/editor/HSVfade

## HorizontalClose

The incoming image closes in from the top and bottom edges toward the middle

- Tags: wipe, split
- Parameters: none
- Author: martiniti
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/HorizontalClose.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/HorizontalClose.sksl
- Preview: https://gl-transitions.com/editor/HorizontalClose

## HorizontalOpen

The incoming image opens from a line in the middle toward the top and bottom edges

- Tags: wipe, split
- Parameters: none
- Author: martiniti
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/HorizontalOpen.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/HorizontalOpen.sksl
- Preview: https://gl-transitions.com/editor/HorizontalOpen

## InvertedPageCurl

The outgoing image curls away like a page, revealing the incoming one

- Tags: page, curl, 3d
- Parameters: none
- Author: Hewlett-Packard
- License: BSD 3 Clause
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/InvertedPageCurl.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/InvertedPageCurl.sksl
- Preview: https://gl-transitions.com/editor/InvertedPageCurl

## LeftRight

The outgoing image shrinks away to the left while the incoming one slides in from the right

- Tags: slide, zoom, horizontal
- Parameters: none
- Author: zhmy
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/LeftRight.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/LeftRight.sksl
- Preview: https://gl-transitions.com/editor/LeftRight

## LinearBlur

A crossfade through a blur

- Tags: blur, blend
- Parameters:
  - `intensity` (float = 0.1): Amount of blur
- Author: gre
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/LinearBlur.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/LinearBlur.sksl
- Preview: https://gl-transitions.com/editor/LinearBlur

## Mosaic

The view pans across a mosaic of rotated tiles from both images and settles on the incoming one

- Tags: mosaic, tiles, zoom
- Parameters:
  - `endx` (int = 2)
  - `endy` (int = -1)
- Author: Xaychru
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Mosaic.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Mosaic.sksl
- Preview: https://gl-transitions.com/editor/Mosaic

## Overexposure

A crossfade through a washed-out, overexposed white

- Tags: flash, light, fade
- Parameters:
  - `strength` (float = 0.6): Amount of overexposure
- Author: Ben Zhang
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Overexposure.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Overexposure.sksl
- Preview: https://gl-transitions.com/editor/Overexposure

## PolkaDotsCurtain

The incoming image appears through growing polka dots

- Tags: dots, pattern
- Parameters:
  - `dots` (float = 20): Number of dots across the image
  - `center` (vec2 = vec2(0, 0))
- Author: bobylito
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/PolkaDotsCurtain.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/PolkaDotsCurtain.sksl
- Preview: https://gl-transitions.com/editor/PolkaDotsCurtain

## PuzzleRight

The image splits into a grid of tiles that flip one by one to the incoming image

- Tags: grid, tiles, flip
- Parameters:
  - `size` (ivec2 = ivec2(4, 4))
  - `pause` (float = 0.1)
  - `dividerWidth` (float = 0.005)
- Author: JustKirillS
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/PuzzleRight.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/PuzzleRight.sksl
- Preview: https://gl-transitions.com/editor/PuzzleRight

## Radial

A radial wipe that sweeps around the center like a clock hand

- Tags: wipe, radial, clock
- Parameters:
  - `smoothness` (float = 1)
- Author: Xaychru
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Radial.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Radial.sksl
- Preview: https://gl-transitions.com/editor/Radial

## Rectangle

A rectangle grows from the center to cover the outgoing image, then shrinks to reveal the incoming one

- Tags: box, shape, iris
- Parameters:
  - `bgcolor` (vec4 = vec4(0, 0, 0, 1)) [color]: Color of the rectangle
- Author: martiniti
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Rectangle.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Rectangle.sksl
- Preview: https://gl-transitions.com/editor/Rectangle

## RectangleCrop

The outgoing image shrinks into a small rectangle over a background color, then the incoming one grows from it

- Tags: box, iris, zoom
- Parameters:
  - `bgcolor` (vec4 = vec4(0, 0, 0, 1)) [color]: Background color
- Author: martiniti
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/RectangleCrop.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/RectangleCrop.sksl
- Preview: https://gl-transitions.com/editor/RectangleCrop

## Revolve_Left

The outgoing image swirls and zooms with motion blur into the incoming one

- Tags: swirl, zoom, rotate, blur
- Parameters:
  - `center` (vec2 = vec2(0.46, 0.52)): Center of the swirl
  - `direction` (float = -1)
  - `maxRotation` (float = 1.95)
  - `peakZoom` (float = 2.22)
  - `swirl` (float = 2.85)
  - `barrel` (float = 0.38)
  - `motionBlur` (float = 1)
  - `switchStart` (float = 0.3)
  - `switchEnd` (float = 0.5)
  - `shadow` (float = 0.16)
- Author: bread
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Revolve_Left.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Revolve_Left.sksl
- Preview: https://gl-transitions.com/editor/Revolve_Left

## Rolls

The outgoing image rolls away around a corner, revealing the incoming one

- Tags: rotate, roll
- Parameters:
  - `type` (int = 0) [range 0 to 3 step 1]: Corner to roll around
  - `RotDown` (bool = false): Roll the outgoing image down instead of up
- Author: Mark Craig
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Rolls.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Rolls.sksl
- Preview: https://gl-transitions.com/editor/Rolls

## RotateScaleVanish

The outgoing image spins and shrinks away over the incoming one

- Tags: rotate, zoom, spin
- Parameters:
  - `FadeInSecond` (bool = true): Fade in the incoming image
  - `ReverseEffect` (bool = false): Run the effect in reverse
  - `ReverseRotation` (bool = false): Rotate the other way
- Author: Mark Craig
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/RotateScaleVanish.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/RotateScaleVanish.sksl
- Preview: https://gl-transitions.com/editor/RotateScaleVanish

## SimpleFlip

The outgoing image flips around the vertical axis into the incoming one

- Tags: flip, horizontal
- Parameters: none
- Author: nwoeanhinnogaehr
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/SimpleFlip.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/SimpleFlip.sksl
- Preview: https://gl-transitions.com/editor/SimpleFlip

## SimpleZoom

Zooms into the outgoing image, then fades to the incoming one

- Tags: zoom, fade
- Parameters:
  - `zoom_quickness` (float = 0.8) [range 0.2 to 1]: Part of the transition spent zooming
- Author: 0gust1
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/SimpleZoom.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/SimpleZoom.sksl
- Preview: https://gl-transitions.com/editor/SimpleZoom

## SimpleZoomOut

The incoming image zooms out into place while fading in

- Tags: zoom, fade
- Parameters:
  - `zoom_quickness` (float = 0.8) [range 0.2 to 1]: Part of the transition spent zooming
  - `fade` (bool = true): Fade instead of cutting to the incoming image
- Author: Tianshuo
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/SimpleZoomOut.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/SimpleZoomOut.sksl
- Preview: https://gl-transitions.com/editor/SimpleZoomOut

## Slides

The outgoing image slides out, or the incoming one slides in, toward an edge, a corner or the center

- Tags: slide, directional
- Parameters:
  - `type` (int = 0)
  - `In` (bool = false): Slide the incoming image in instead of the outgoing one out
- Author: Mark Craig
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Slides.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Slides.sksl
- Preview: https://gl-transitions.com/editor/Slides

## StarWipe

A growing star reveals the incoming image

- Tags: wipe, shape, star
- Parameters:
  - `border_thickness` (float = 0.01): Thickness of the star's border
  - `star_rotation` (float = 0.75)
  - `border_color` (vec4 = vec4(1, 1, 1, 1)) [color]: Color of the star's border
  - `star_center` (vec2 = vec2(0.5, 0.5)): Center of the star
- Author: Ben Lucas
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/StarWipe.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/StarWipe.sksl
- Preview: https://gl-transitions.com/editor/StarWipe

## StaticFade

Cuts to the incoming image halfway, hidden behind a burst of TV static

- Tags: static, noise, retro
- Parameters:
  - `n_noise_pixels` (float = 200)
  - `static_luminosity` (float = 0.8)
- Author: Ben Lucas
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/StaticFade.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/StaticFade.sksl
- Preview: https://gl-transitions.com/editor/StaticFade

## StereoViewer

Both images shrink into rounded cards that swap, like a stereo viewer toy

- Tags: cards, zoom, retro
- Parameters:
  - `zoom` (float = 0.88) [range 0.5 to 1]: How much the images zoom out
  - `corner_radius` (float = 0.22)
- Author: Ted Schundler
- License: BSD 2 Clause
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/StereoViewer.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/StereoViewer.sksl
- Preview: https://gl-transitions.com/editor/StereoViewer

## StripDatamoshGlitch

A datamosh glitch: torn strips, chroma shifts and scan noise drag the outgoing image into the incoming one

- Tags: glitch, datamosh, chromatic
- Parameters:
  - `strength` (float = 1)
  - `horizontalBars` (float = 42)
  - `verticalSlits` (float = 18)
  - `tear` (float = 0.18)
  - `chroma` (float = 0.032)
  - `residue` (float = 0.62)
  - `noiseAmount` (float = 0.16)
  - `scanAmount` (float = 0.13)
  - `flashAmount` (float = 0.2)
- Author: bread
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/StripDatamoshGlitch.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/StripDatamoshGlitch.sksl
- Preview: https://gl-transitions.com/editor/StripDatamoshGlitch

## Swirl

Both images swirl around the center while crossfading

- Tags: swirl, rotate, blend
- Parameters: none
- Author: Sergey Kosarevsky
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/Swirl.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/Swirl.sksl
- Preview: https://gl-transitions.com/editor/Swirl

## TVStatic

Cuts to full-screen TV static, then to the incoming image

- Tags: static, noise, retro
- Parameters:
  - `offset` (float = 0.05): Part of the transition, at each end, that shows the images instead of static
- Author: Brandon Anzaldi
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/TVStatic.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/TVStatic.sksl
- Preview: https://gl-transitions.com/editor/TVStatic

## TilesWave

The incoming image is revealed tile by tile in a diagonal wave

- Tags: tiles, wave, wipe
- Parameters:
  - `tileCount` (ivec2 = ivec2(8, 8)): Number of tiles (columns, rows)
  - `flipX` (bool = true)
  - `flipY` (bool = false)
- Author: numb3r23
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/TilesWave.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/TilesWave.sksl
- Preview: https://gl-transitions.com/editor/TilesWave

## TopBottom

The outgoing image shrinks away upward while the incoming one slides in from the bottom

- Tags: slide, zoom, vertical
- Parameters: none
- Author: zhmy
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/TopBottom.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/TopBottom.sksl
- Preview: https://gl-transitions.com/editor/TopBottom

## VerticalClose

The incoming image closes in from the left and right edges toward the middle

- Tags: wipe, split
- Parameters: none
- Author: martiniti
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/VerticalClose.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/VerticalClose.sksl
- Preview: https://gl-transitions.com/editor/VerticalClose

## VerticalOpen

The incoming image opens from a line in the middle toward the left and right edges

- Tags: wipe, split
- Parameters: none
- Author: martiniti
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/VerticalOpen.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/VerticalOpen.sksl
- Preview: https://gl-transitions.com/editor/VerticalOpen

## WaterDrop

Ripples spread from the center like a drop falling into water, crossfading to the incoming image

- Tags: ripple, water, blend
- Parameters:
  - `amplitude` (float = 30): Frequency of the ripples
  - `speed` (float = 30): Speed of the ripples
- Author: Paweł Płóciennik
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/WaterDrop.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/WaterDrop.sksl
- Preview: https://gl-transitions.com/editor/WaterDrop

## ZoomInCircles

Concentric rings of the outgoing image zoom at different speeds before revealing the incoming one

- Tags: zoom, circle
- Parameters: none
- Author: dycm8009
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/ZoomInCircles.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/ZoomInCircles.sksl
- Preview: https://gl-transitions.com/editor/ZoomInCircles

## ZoomLeftWipe

Zooms into the outgoing image, then the incoming one wipes in from right to left

- Tags: zoom, wipe, horizontal
- Parameters:
  - `zoom_quickness` (float = 0.8): Part of the first half spent zooming (capped at 0.5)
- Author: Handk
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/ZoomLeftWipe.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/ZoomLeftWipe.sksl
- Preview: https://gl-transitions.com/editor/ZoomLeftWipe

## ZoomRigthWipe

Zooms into the outgoing image, then the incoming one wipes in from left to right

- Tags: zoom, wipe, horizontal
- Parameters:
  - `zoom_quickness` (float = 0.8): Part of the first half spent zooming (capped at 0.5)
- Author: Handk
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/ZoomRigthWipe.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/ZoomRigthWipe.sksl
- Preview: https://gl-transitions.com/editor/ZoomRigthWipe

## angular

A wipe that sweeps around the center from a starting angle

- Tags: wipe, radial, clock
- Parameters:
  - `startingAngle` (float = 90) [range 0 to 360]: Angle where the wipe starts, in degrees
- Author: Fernando Kuteken
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/angular.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/angular.sksl
- Preview: https://gl-transitions.com/editor/angular

## burn

A crossfade that brightens toward a color in the middle

- Tags: fade, color, flash
- Parameters:
  - `color` (vec3 = vec3(0.9, 0.4, 0.2)) [color]: Color the images brighten toward
- Author: gre
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/burn.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/burn.sksl
- Preview: https://gl-transitions.com/editor/burn

## burn0

The outgoing image burns away in noisy, glowing patches

- Tags: burn, fire, noise
- Parameters:
  - `burnColor` (vec3 = vec3(1, 0.5, 0)) [color]: Color of the burning edges
- Author: liubailin2020@gmail.com
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/burn0.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/burn0.sksl
- Preview: https://gl-transitions.com/editor/burn0

## cannabisleaf

A cannabis-leaf shape grows from the center to reveal the incoming image

- Tags: shape, wipe
- Parameters: none
- Author: @Flexi23
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/cannabisleaf.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/cannabisleaf.sksl
- Preview: https://gl-transitions.com/editor/cannabisleaf

## chessboard

A chessboard pattern of squares reveals the incoming image

- Tags: grid, squares, pattern
- Parameters:
  - `grid_num` (float = 10): Number of squares per row
- Author: lql
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/chessboard.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/chessboard.sksl
- Preview: https://gl-transitions.com/editor/chessboard

## circle

The outgoing image closes into a circle over a background color, then the incoming one opens from it

- Tags: circle, iris, shape
- Parameters:
  - `center` (vec2 = vec2(0.5, 0.5)): Center of the circle
  - `backColor` (vec3 = vec3(0.1, 0.1, 0.1)) [color]: Background color
- Author: Fernando Kuteken
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/circle.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/circle.sksl
- Preview: https://gl-transitions.com/editor/circle

## circleopen

A soft-edged circle opens from the center to reveal the incoming image

- Tags: circle, iris, wipe
- Parameters:
  - `smoothness` (float = 0.3): Softness of the circle's edge
  - `opening` (bool = true): Open the circle; false closes it instead
- Author: gre
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/circleopen.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/circleopen.sksl
- Preview: https://gl-transitions.com/editor/circleopen

## colorphase

A crossfade in which each color channel changes at a different time

- Tags: fade, color
- Parameters:
  - `fromStep` (vec4 = vec4(0, 0.2, 0.4, 0)) [range 0 to 1]: When each channel (r, g, b, a) starts changing
  - `toStep` (vec4 = vec4(0.6, 0.8, 1, 1)) [range 0 to 1]: When each channel (r, g, b, a) finishes changing
- Author: gre
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/colorphase.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/colorphase.sksl
- Preview: https://gl-transitions.com/editor/colorphase

## coord-from-in

A crossfade in which the colors of one image displace the other

- Tags: displace, distort, blend
- Parameters: none
- Author: haiyoucuv
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/coord-from-in.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/coord-from-in.sksl
- Preview: https://gl-transitions.com/editor/coord-from-in

## crosshatch

The incoming image appears through a crosshatch of lines spreading from the center

- Tags: pattern, lines, noise
- Parameters:
  - `center` (vec2 = vec2(0.5, 0.5)): Point the lines spread from
  - `threshold` (float = 3)
  - `fadeEdge` (float = 0.1)
- Author: pthrasher
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/crosshatch.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/crosshatch.sksl
- Preview: https://gl-transitions.com/editor/crosshatch

## crosswarp

The outgoing image zooms in while the incoming one zooms out into place, sweeping from right to left

- Tags: warp, zoom, horizontal
- Parameters: none
- Author: Eke Péter <peterekepeter@gmail.com>
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/crosswarp.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/crosswarp.sksl
- Preview: https://gl-transitions.com/editor/crosswarp

## cube

The two images are faces of a rotating 3D cube, with a floor reflection

- Tags: 3d, cube, rotate, reflection
- Parameters:
  - `persp` (float = 0.7) [range 0 to 1]: Amount of perspective
  - `unzoom` (float = 0.3)
  - `reflection` (float = 0.4) [range 0 to 1]: Strength of the reflection
  - `floating` (float = 3)
- Author: gre
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/cube.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/cube.sksl
- Preview: https://gl-transitions.com/editor/cube

## directional-easing

Like Directional, with an eased movement

- Tags: slide, push, directional
- Parameters:
  - `direction` (vec2 = vec2(0, 1)): Direction of the movement
- Author: Max Plotnikov
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/directional-easing.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/directional-easing.sksl
- Preview: https://gl-transitions.com/editor/directional-easing

## directionalwarp

A diagonal wipe with a warped, smeared edge

- Tags: wipe, warp, directional
- Parameters:
  - `smoothness` (float = 0.1): Softness of the edge
  - `direction` (vec2 = vec2(-1, 1)): Direction of the wipe
- Author: pschroen
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/directionalwarp.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/directionalwarp.sksl
- Preview: https://gl-transitions.com/editor/directionalwarp

## directionalwipe

A soft-edged diagonal wipe

- Tags: wipe, directional
- Parameters:
  - `direction` (vec2 = vec2(1, -1)): Direction of the wipe
  - `smoothness` (float = 0.5): Softness of the edge
- Author: gre
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/directionalwipe.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/directionalwipe.sksl
- Preview: https://gl-transitions.com/editor/directionalwipe

## displacement

A crossfade in which a displacement map (an extra grayscale texture) warps both images

- Tags: displace, distort, blend
- Parameters:
  - `strength` (float = 0.5): Strength of the displacement
- Extra textures: `displacementMap` (sampler2D)
- Author: Travis Fischer
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/displacement.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/displacement.sksl
- Preview: https://gl-transitions.com/editor/displacement

## dissolve

The incoming image spreads over the outgoing one with a hot, glowing edge

- Tags: dissolve, burn, glow
- Parameters:
  - `uLineWidth` (float = 0.1)
  - `uSpreadClr` (vec3 = vec3(1, 0, 0)) [color]: Color of the spreading edge
  - `uHotClr` (vec3 = vec3(0.9, 0.9, 0.2)) [color]: Color of the hottest part of the edge
  - `uPow` (float = 5)
  - `uIntensity` (float = 1)
- Author: hjm1fb
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/dissolve.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/dissolve.sksl
- Preview: https://gl-transitions.com/editor/dissolve

## doorway

The outgoing image opens like double doors as the incoming one comes forward, with a floor reflection

- Tags: doors, 3d, reflection
- Parameters:
  - `reflection` (float = 0.4): Strength of the reflection
  - `perspective` (float = 0.4): Amount of perspective
  - `depth` (float = 3)
- Author: gre
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/doorway.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/doorway.sksl
- Preview: https://gl-transitions.com/editor/doorway

## fade

A linear crossfade between the two images

- Tags: fade, blend
- Parameters: none
- Author: gre
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/fade.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/fade.sksl
- Preview: https://gl-transitions.com/editor/fade

## fadecolor

A fade through a solid color, black by default

- Tags: fade, color
- Parameters:
  - `color` (vec3 = vec3(0, 0, 0)) [color]: Color to fade through
  - `colorPhase` (float = 0.4) [range 0 to 1]: How long the color shows in the middle
- Author: gre
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/fadecolor.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/fadecolor.sksl
- Preview: https://gl-transitions.com/editor/fadecolor

## fadegrayscale

A crossfade through grayscale

- Tags: fade, grayscale, color
- Parameters:
  - `intensity` (float = 0.3) [range 0 to 1]: How long the grayscale phase lasts
- Author: gre
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/fadegrayscale.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/fadegrayscale.sksl
- Preview: https://gl-transitions.com/editor/fadegrayscale

## flyeye

The image breaks into a fly's-eye grid of lenses with color separation

- Tags: lens, distort, chromatic
- Parameters:
  - `size` (float = 0.04)
  - `zoom` (float = 50)
  - `colorSeparation` (float = 0.3)
- Author: gre
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/flyeye.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/flyeye.sksl
- Preview: https://gl-transitions.com/editor/flyeye

## fragment

The outgoing image shatters into fragments that fly away

- Tags: shatter, fragments
- Parameters: none
- Author: lbl
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/fragment.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/fragment.sksl
- Preview: https://gl-transitions.com/editor/fragment

## heart

A heart shape grows from the center to reveal the incoming image

- Tags: shape, wipe, heart
- Parameters: none
- Author: gre
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/heart.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/heart.sksl
- Preview: https://gl-transitions.com/editor/heart

## hexagonalize

Both images turn into hexagons, crossfade, then sharpen again

- Tags: pixelate, hexagon, blend
- Parameters:
  - `steps` (int = 50)
  - `horizontalHexagons` (float = 20): Number of hexagons across
- Author: Fernando Kuteken
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/hexagonalize.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/hexagonalize.sksl
- Preview: https://gl-transitions.com/editor/hexagonalize

## kaleidoscope

A crossfade through a spinning kaleidoscope

- Tags: kaleidoscope, distort, blend
- Parameters:
  - `speed` (float = 1)
  - `angle` (float = 1)
  - `power` (float = 1.5)
- Author: nwoeanhinnogaehr
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/kaleidoscope.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/kaleidoscope.sksl
- Preview: https://gl-transitions.com/editor/kaleidoscope

## luma

A wipe that follows the brightness of a grayscale mask (the luma texture)

- Tags: wipe, luma, mask
- Parameters: none
- Extra textures: `luma` (sampler2D)
- Author: gre
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/luma.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/luma.sksl
- Preview: https://gl-transitions.com/editor/luma

## luminance_melt

The outgoing image melts away in noisy vertical streaks, depending on its brightness

- Tags: melt, noise, luma
- Parameters:
  - `direction` (bool = true): Direction of the melt (false: up, true: down)
  - `l_threshold` (float = 0.8) [range 0 to 1]: Luminance threshold
  - `above` (bool = false): Melt the parts above the threshold instead of below
- Author: 0gust1
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/luminance_melt.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/luminance_melt.sksl
- Preview: https://gl-transitions.com/editor/luminance_melt

## morph

A crossfade in which each image is displaced by the other's colors, like a morph

- Tags: morph, distort, blend
- Parameters:
  - `strength` (float = 0.1): Strength of the displacement
- Author: paniq
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/morph.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/morph.sksl
- Preview: https://gl-transitions.com/editor/morph

## mosaic_transition

Both images break into mosaic blocks that blend, then sharpen into the incoming image

- Tags: mosaic, pixelate, blend
- Parameters:
  - `mosaicNum` (float = 10): Number of mosaic blocks
- Author: YueDev
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/mosaic_transition.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/mosaic_transition.sksl
- Preview: https://gl-transitions.com/editor/mosaic_transition

## multiply_blend

A crossfade through the multiplied blend of both images

- Tags: blend, fade
- Parameters: none
- Author: Fernando Kuteken
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/multiply_blend.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/multiply_blend.sksl
- Preview: https://gl-transitions.com/editor/multiply_blend

## old_tv_lost_signal

A crossfade with drifting tracking lines and tearing, like a TV losing its signal

- Tags: retro, glitch, scanlines
- Parameters: none
- Author: mernking (gitlab.com/Godswork)
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/old_tv_lost_signal.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/old_tv_lost_signal.sksl
- Preview: https://gl-transitions.com/editor/old_tv_lost_signal

## parametric_glitch

A crossfade with glitchy horizontal bands and color shifts

- Tags: glitch, blend
- Parameters:
  - `ampx` (float = 1): Horizontal amplitude of the glitch
  - `ampy` (float = 1): Vertical amplitude of the glitch
- Author: Yoni Maltsman @friendlyspinach
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/parametric_glitch.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/parametric_glitch.sksl
- Preview: https://gl-transitions.com/editor/parametric_glitch

## perlin

The incoming image appears through blobs of Perlin noise

- Tags: noise, dissolve
- Parameters:
  - `scale` (float = 4): Scale of the noise; higher values make smaller blobs
  - `smoothness` (float = 0.01): Softness of the blob edges
  - `seed` (float = 12.9898): Random seed
- Author: Rich Harris
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/perlin.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/perlin.sksl
- Preview: https://gl-transitions.com/editor/perlin

## pinwheel

A spinning pinwheel reveals the incoming image

- Tags: pinwheel, radial, rotate
- Parameters:
  - `speed` (float = 2): Rotation speed
- Author: Mr Speaker
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/pinwheel.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/pinwheel.sksl
- Preview: https://gl-transitions.com/editor/pinwheel

## pixelize

Both images pixelate, crossfade, then sharpen again

- Tags: pixelate, blend
- Parameters:
  - `squaresMin` (ivec2 = ivec2(20, 20)): Number of squares at the strongest pixelation
  - `steps` (int = 50): Number of pixelation steps; 0 for a continuous effect
- Author: gre
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/pixelize.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/pixelize.sksl
- Preview: https://gl-transitions.com/editor/pixelize

## polar_function

A flower shape with several petals grows to reveal the incoming image

- Tags: shape, wipe, polar
- Parameters:
  - `segments` (int = 5): Number of petals
- Author: Fernando Kuteken
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/polar_function.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/polar_function.sksl
- Preview: https://gl-transitions.com/editor/polar_function

## powerKaleido

The image folds into an animated kaleidoscope before revealing the incoming one

- Tags: kaleidoscope, distort
- Parameters:
  - `scale` (float = 2)
  - `z` (float = 1.5)
  - `speed` (float = 5)
- Author: Boundless
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/powerKaleido.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/powerKaleido.sksl
- Preview: https://gl-transitions.com/editor/powerKaleido

## randomNoisex

The incoming image appears pixel by pixel in random noise

- Tags: dissolve, noise
- Parameters: none
- Author: towrabbit
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/randomNoisex.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/randomNoisex.sksl
- Preview: https://gl-transitions.com/editor/randomNoisex

## randomsquares

The incoming image appears in random squares

- Tags: squares, grid, dissolve
- Parameters:
  - `size` (ivec2 = ivec2(10, 10)): Number of squares (columns, rows)
  - `smoothness` (float = 0.5): Softness of each square's switch
- Author: gre
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/randomsquares.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/randomsquares.sksl
- Preview: https://gl-transitions.com/editor/randomsquares

## ripple

Ripples spread from the center while crossfading

- Tags: ripple, wave, blend
- Parameters:
  - `amplitude` (float = 100): Frequency of the ripples
  - `speed` (float = 50): Speed of the ripples
- Author: gre
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/ripple.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/ripple.sksl
- Preview: https://gl-transitions.com/editor/ripple

## rotateTransition

The images spin around the center while crossfading

- Tags: rotate, spin, blend
- Parameters: none
- Author: haiyoucuv
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/rotateTransition.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/rotateTransition.sksl
- Preview: https://gl-transitions.com/editor/rotateTransition

## rotate_scale_fade

The outgoing image spins and zooms while fading to the incoming one, over a background color

- Tags: rotate, zoom, fade
- Parameters:
  - `center` (vec2 = vec2(0.5, 0.5)): Center of the rotation
  - `rotations` (float = 1): Number of turns
  - `scale` (float = 8): Maximum zoom
  - `backColor` (vec4 = vec4(0.15, 0.15, 0.15, 1)) [color]: Background color
- Author: Fernando Kuteken
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/rotate_scale_fade.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/rotate_scale_fade.sksl
- Preview: https://gl-transitions.com/editor/rotate_scale_fade

## scale-in

The incoming image scales in from the center while fading in

- Tags: zoom, fade
- Parameters: none
- Author: haiyoucuv
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/scale-in.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/scale-in.sksl
- Preview: https://gl-transitions.com/editor/scale-in

## splitSlideInHorizontal

The incoming image slides in as two halves moving horizontally in opposite directions

- Tags: slide, split, horizontal
- Parameters:
  - `reverse` (bool = false): Swap the directions of the halves
- Author: OllyOllyOlly
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/splitSlideInHorizontal.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/splitSlideInHorizontal.sksl
- Preview: https://gl-transitions.com/editor/splitSlideInHorizontal

## splitSlideInOutHorizontal

The halves of both images slide horizontally in opposite directions, out and in at once

- Tags: slide, split, horizontal
- Parameters:
  - `reverse` (bool = false): Swap the directions of the halves
- Author: OllyOllyOlly
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/splitSlideInOutHorizontal.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/splitSlideInOutHorizontal.sksl
- Preview: https://gl-transitions.com/editor/splitSlideInOutHorizontal

## splitSlideInOutVertical

The halves of both images slide vertically in opposite directions, out and in at once

- Tags: slide, split, vertical
- Parameters:
  - `reverse` (bool = false): Swap the directions of the halves
- Author: OllyOllyOlly
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/splitSlideInOutVertical.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/splitSlideInOutVertical.sksl
- Preview: https://gl-transitions.com/editor/splitSlideInOutVertical

## splitSlideInVertical

The incoming image slides in as two halves moving vertically in opposite directions

- Tags: slide, split, vertical
- Parameters:
  - `reverse` (bool = false): Swap the directions of the halves
- Author: OllyOllyOlly
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/splitSlideInVertical.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/splitSlideInVertical.sksl
- Preview: https://gl-transitions.com/editor/splitSlideInVertical

## splitSlideOutHorizontal

The outgoing image slides out as two halves moving horizontally in opposite directions

- Tags: slide, split, horizontal
- Parameters:
  - `reverse` (bool = false): Swap the directions of the halves
- Author: OllyOllyOlly
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/splitSlideOutHorizontal.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/splitSlideOutHorizontal.sksl
- Preview: https://gl-transitions.com/editor/splitSlideOutHorizontal

## splitSlideOutVertical

The outgoing image slides out as two halves moving vertically in opposite directions

- Tags: slide, split, vertical
- Parameters:
  - `reverse` (bool = false): Swap the directions of the halves
- Author: OllyOllyOlly
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/splitSlideOutVertical.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/splitSlideOutVertical.sksl
- Preview: https://gl-transitions.com/editor/splitSlideOutVertical

## squareswire

Squares grow along a diagonal sweep to reveal the incoming image

- Tags: squares, grid, wipe, directional
- Parameters:
  - `squares` (ivec2 = ivec2(10, 10)): Number of squares (columns, rows)
  - `direction` (vec2 = vec2(1, -0.5)): Direction of the sweep
  - `smoothness` (float = 1.6): Softness of the sweep
- Author: gre
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/squareswire.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/squareswire.sksl
- Preview: https://gl-transitions.com/editor/squareswire

## squeeze

The outgoing image is squeezed into a line with color separation, revealing the incoming one

- Tags: squeeze, chromatic, vertical
- Parameters:
  - `colorSeparation` (float = 0.04): Amount of color separation
- Author: gre
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/squeeze.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/squeeze.sksl
- Preview: https://gl-transitions.com/editor/squeeze

## static_wipe

A wipe from top to bottom with a band of TV static at its edge

- Tags: wipe, static, noise, vertical
- Parameters:
  - `u_transitionUpToDown` (bool = true): Wipe from top to bottom; false wipes from bottom to top
  - `u_max_static_span` (float = 0.5): Maximum height of the static band
- Author: Ben Lucas
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/static_wipe.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/static_wipe.sksl
- Preview: https://gl-transitions.com/editor/static_wipe

## swap

The two images swap places in 3D, with a floor reflection

- Tags: 3d, swap, reflection
- Parameters:
  - `reflection` (float = 0.4): Strength of the reflection
  - `perspective` (float = 0.2): Amount of perspective
  - `depth` (float = 3)
- Author: gre
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/swap.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/swap.sksl
- Preview: https://gl-transitions.com/editor/swap

## tangentMotionBlur

The outgoing image is flung away along a curve with motion blur

- Tags: motion-blur, rotate, slide
- Parameters: none
- Author: chenkai
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/tangentMotionBlur.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/tangentMotionBlur.sksl
- Preview: https://gl-transitions.com/editor/tangentMotionBlur

## undulatingBurnOut

A circle with a wavy edge burns out from the center to reveal the incoming image

- Tags: circle, burn, wipe
- Parameters:
  - `smoothness` (float = 0.03): Softness of the edge
  - `center` (vec2 = vec2(0.5, 0.5)): Center of the circle
  - `color` (vec3 = vec3(0, 0, 0)) [color]: Color of the burning edge
- Author: pthrasher
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/undulatingBurnOut.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/undulatingBurnOut.sksl
- Preview: https://gl-transitions.com/editor/undulatingBurnOut

## wind

A ragged left-to-right wipe, as if the image was blown away by the wind

- Tags: wipe, horizontal, noise
- Parameters:
  - `size` (float = 0.2) [range 0 to 1]: Width of the ragged edge
  - `reversed` (bool = false): Wipe from right to left instead
- Author: gre
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/wind.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/wind.sksl
- Preview: https://gl-transitions.com/editor/wind

## windowblinds

A crossfade through horizontal window blinds

- Tags: blinds, stripes, blend
- Parameters: none
- Author: Fabien Benetou
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/windowblinds.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/windowblinds.sksl
- Preview: https://gl-transitions.com/editor/windowblinds

## windowslice

The incoming image appears through vertical slices that widen

- Tags: slices, stripes, wipe
- Parameters:
  - `count` (float = 10): Number of slices
  - `smoothness` (float = 0.5): Softness of the slices' edges
- Author: gre
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/windowslice.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/windowslice.sksl
- Preview: https://gl-transitions.com/editor/windowslice

## wipeDown

A hard-edged wipe from top to bottom

- Tags: wipe, vertical
- Parameters: none
- Author: Jake Nelson
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/wipeDown.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/wipeDown.sksl
- Preview: https://gl-transitions.com/editor/wipeDown

## wipeLeft

A hard-edged wipe from right to left

- Tags: wipe, horizontal
- Parameters: none
- Author: Jake Nelson
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/wipeLeft.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/wipeLeft.sksl
- Preview: https://gl-transitions.com/editor/wipeLeft

## wipeRight

A hard-edged wipe from left to right

- Tags: wipe, horizontal
- Parameters: none
- Author: Jake Nelson
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/wipeRight.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/wipeRight.sksl
- Preview: https://gl-transitions.com/editor/wipeRight

## wipeUp

A hard-edged wipe from bottom to top

- Tags: wipe, vertical
- Parameters: none
- Author: Jake Nelson
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/wipeUp.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/wipeUp.sksl
- Preview: https://gl-transitions.com/editor/wipeUp

## x_axis_translation

The outgoing image slides to the right, uncovering a crossfade to the incoming one

- Tags: slide, horizontal, blend
- Parameters: none
- Author: lizhongjian
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/x_axis_translation.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/x_axis_translation.sksl
- Preview: https://gl-transitions.com/editor/x_axis_translation

## zoomInOut

Zooms into the outgoing image until it blurs into a flat color, then out to the incoming one

- Tags: zoom, blur
- Parameters: none
- Author: OllyOllyOlly
- License: MIT
- GLSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/transitions/zoomInOut.glsl
- SkSL: https://cdn.jsdelivr.net/npm/gl-transitions@1.75.0/sksl/zoomInOut.sksl
- Preview: https://gl-transitions.com/editor/zoomInOut