gl-transitions 1.74.0 → 1.76.0

package/llms.txt

@@ -0,0 +1,153 @@
+# 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.76.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`
+
+## Docs
+
+- [Full catalog](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/llms-full.txt): every transition with its description, tags, parameters and source links
+- [Agent Skill](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/skills/gl-transitions/SKILL.md): how to pick a transition and wire it into WebGL, Skia, FFmpeg or editly
+- [Catalog JSON](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/gl-transitions.json): the same data as an array of objects (name, glsl, params, tags, ...), typed in index.d.ts
+- [Package README](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/README.md): files of the npm package and the SkSL contract
+- [Specification](https://github.com/gl-transitions/gl-transitions#gl-transition-specification-v1): GL Transition Specification v1
+
+## Transitions
+
+- [AdvancedMosaic](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/AdvancedMosaic.glsl): Both images break into large blocks that blend, then sharpen into the incoming image (pixelate, mosaic, blend)
+- [BlockDissolve](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/BlockDissolve.glsl): The incoming image appears in small random blocks (dissolve, blocks, noise)
+- [BookFlip](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/BookFlip.glsl): The outgoing image turns like a book page from right to left, revealing the incoming one (page, flip, 3d)
+- [Bounce](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/Bounce.glsl): The outgoing image drops out of the frame with a few bounces, revealing the incoming one (bounce, slide, vertical, shadow)
+- [BowTieHorizontal](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/BowTieHorizontal.glsl): Two triangles grow from the left and right edges into a bow tie that reveals the incoming image (wipe, shape, horizontal)
+- [BowTieVertical](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/BowTieVertical.glsl): Two triangles grow from the top and bottom edges into a bow tie that reveals the incoming image (wipe, shape, vertical)
+- [BowTieWithParameter](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/BowTieWithParameter.glsl): A bow-tie wipe with an adjustable shape that can run in reverse (wipe, shape)
+- [Box](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/Box.glsl): The outgoing image shrinks into a box, toward the center or a corner, revealing the incoming one (box, zoom, shape)
+- [ButterflyWaveScrawler](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/ButterflyWaveScrawler.glsl): Wavy, color-separated ripples scramble the outgoing image into the incoming one (wave, distort, chromatic)
+- [CircleCrop](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/CircleCrop.glsl): The outgoing image closes into a circle over a background color, then the incoming one opens from it (circle, iris, shape)
+- [ColourDistance](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/ColourDistance.glsl): Pixels switch to the incoming image in order of how close their colors are (blend, color)
+- [CrazyParametricFun](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/CrazyParametricFun.glsl): The outgoing image is pulled along a parametric curve into a psychedelic swirl (distort, psychedelic)
+- [CrossZoom](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/CrossZoom.glsl): A crossfade through a strong zoom blur (zoom, blur, blend)
+- [DefocusBlur](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/DefocusBlur.glsl): A crossfade through an out-of-focus blur (blur, blend)
+- [Directional](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/Directional.glsl): The incoming image pushes the outgoing one out in a given direction (slide, push, directional)
+- [DirectionalScaled](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/DirectionalScaled.glsl): Like Directional, with both images scaled down while they slide (slide, push, zoom, directional)
+- [DoomScreenTransition](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/DoomScreenTransition.glsl): The outgoing image melts down in uneven columns, like the Doom screen wipe (melt, columns, retro)
+- [Dreamy](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/Dreamy.glsl): A crossfade with a gentle wavy distortion (wave, blend)
+- [DreamyZoom](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/DreamyZoom.glsl): Zooms and rotates into a bright flash, then out to the incoming image (zoom, rotate, flash)
+- [Drop_Zone_Flicker](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/Drop_Zone_Flicker.glsl): A flickering glitch with RGB offset, ghosting and scanlines that flashes back to the outgoing image (glitch, flicker, chromatic, scanlines)
+- [EdgeTransition](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/EdgeTransition.glsl): Both images fade through black with their edges glowing (edges, fade)
+- [FilmBurn](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/FilmBurn.glsl): Glowing film-burn light leaks wash over the image and reveal the incoming one (burn, film, light-leak)
+- [Fold](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/Fold.glsl): The incoming image unfolds from the left while the outgoing one folds away to the right (fold, slide, horizontal)
+- [GlitchDisplace](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/GlitchDisplace.glsl): Blocks of the image are displaced in a glitch that flashes into the incoming image (glitch, displace)
+- [GlitchMemories](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/GlitchMemories.glsl): A crossfade with glitchy, color-shifted blocks (glitch, chromatic, blend)
+- [GridFlip](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/GridFlip.glsl): The image splits into a grid of tiles that flip one by one to the incoming image (grid, tiles, flip)
+- [HSVfade](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/HSVfade.glsl): A crossfade through the HSV color space that cycles through hues (fade, color, hue)
+- [HorizontalClose](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/HorizontalClose.glsl): The incoming image closes in from the top and bottom edges toward the middle (wipe, split)
+- [HorizontalOpen](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/HorizontalOpen.glsl): The incoming image opens from a line in the middle toward the top and bottom edges (wipe, split)
+- [InvertedPageCurl](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/InvertedPageCurl.glsl): The outgoing image curls away like a page, revealing the incoming one (page, curl, 3d)
+- [LeftRight](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/LeftRight.glsl): The outgoing image shrinks away to the left while the incoming one slides in from the right (slide, zoom, horizontal)
+- [LinearBlur](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/LinearBlur.glsl): A crossfade through a blur (blur, blend)
+- [Mosaic](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/Mosaic.glsl): The view pans across a mosaic of rotated tiles from both images and settles on the incoming one (mosaic, tiles, zoom)
+- [Overexposure](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/Overexposure.glsl): A crossfade through a washed-out, overexposed white (flash, light, fade)
+- [PolkaDotsCurtain](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/PolkaDotsCurtain.glsl): The incoming image appears through growing polka dots (dots, pattern)
+- [PuzzleRight](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/PuzzleRight.glsl): The image splits into a grid of tiles that flip one by one to the incoming image (grid, tiles, flip)
+- [Radial](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/Radial.glsl): A radial wipe that sweeps around the center like a clock hand (wipe, radial, clock)
+- [Rectangle](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/Rectangle.glsl): A rectangle grows from the center to cover the outgoing image, then shrinks to reveal the incoming one (box, shape, iris)
+- [RectangleCrop](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/RectangleCrop.glsl): The outgoing image shrinks into a small rectangle over a background color, then the incoming one grows from it (box, iris, zoom)
+- [Revolve_Left](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/Revolve_Left.glsl): The outgoing image swirls and zooms with motion blur into the incoming one (swirl, zoom, rotate, blur)
+- [Rolls](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/Rolls.glsl): The outgoing image rolls away around a corner, revealing the incoming one (rotate, roll)
+- [RotateScaleVanish](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/RotateScaleVanish.glsl): The outgoing image spins and shrinks away over the incoming one (rotate, zoom, spin)
+- [SimpleFlip](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/SimpleFlip.glsl): The outgoing image flips around the vertical axis into the incoming one (flip, horizontal)
+- [SimpleZoom](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/SimpleZoom.glsl): Zooms into the outgoing image, then fades to the incoming one (zoom, fade)
+- [SimpleZoomOut](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/SimpleZoomOut.glsl): The incoming image zooms out into place while fading in (zoom, fade)
+- [Slides](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/Slides.glsl): The outgoing image slides out, or the incoming one slides in, toward an edge, a corner or the center (slide, directional)
+- [StarWipe](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/StarWipe.glsl): A growing star reveals the incoming image (wipe, shape, star)
+- [StaticFade](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/StaticFade.glsl): Cuts to the incoming image halfway, hidden behind a burst of TV static (static, noise, retro)
+- [StereoViewer](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/StereoViewer.glsl): Both images shrink into rounded cards that swap, like a stereo viewer toy (cards, zoom, retro)
+- [StripDatamoshGlitch](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/StripDatamoshGlitch.glsl): A datamosh glitch: torn strips, chroma shifts and scan noise drag the outgoing image into the incoming one (glitch, datamosh, chromatic)
+- [Swirl](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/Swirl.glsl): Both images swirl around the center while crossfading (swirl, rotate, blend)
+- [TVStatic](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/TVStatic.glsl): Cuts to full-screen TV static, then to the incoming image (static, noise, retro)
+- [TilesWave](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/TilesWave.glsl): The incoming image is revealed tile by tile in a diagonal wave (tiles, wave, wipe)
+- [TopBottom](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/TopBottom.glsl): The outgoing image shrinks away upward while the incoming one slides in from the bottom (slide, zoom, vertical)
+- [VerticalClose](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/VerticalClose.glsl): The incoming image closes in from the left and right edges toward the middle (wipe, split)
+- [VerticalOpen](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/VerticalOpen.glsl): The incoming image opens from a line in the middle toward the left and right edges (wipe, split)
+- [WaterDrop](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/WaterDrop.glsl): Ripples spread from the center like a drop falling into water, crossfading to the incoming image (ripple, water, blend)
+- [ZoomInCircles](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/ZoomInCircles.glsl): Concentric rings of the outgoing image zoom at different speeds before revealing the incoming one (zoom, circle)
+- [ZoomLeftWipe](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/ZoomLeftWipe.glsl): Zooms into the outgoing image, then the incoming one wipes in from right to left (zoom, wipe, horizontal)
+- [ZoomRigthWipe](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/ZoomRigthWipe.glsl): Zooms into the outgoing image, then the incoming one wipes in from left to right (zoom, wipe, horizontal)
+- [angular](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/angular.glsl): A wipe that sweeps around the center from a starting angle (wipe, radial, clock)
+- [burn](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/burn.glsl): A crossfade that brightens toward a color in the middle (fade, color, flash)
+- [burn0](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/burn0.glsl): The outgoing image burns away in noisy, glowing patches (burn, fire, noise)
+- [cannabisleaf](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/cannabisleaf.glsl): A cannabis-leaf shape grows from the center to reveal the incoming image (shape, wipe)
+- [chessboard](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/chessboard.glsl): A chessboard pattern of squares reveals the incoming image (grid, squares, pattern)
+- [circle](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/circle.glsl): The outgoing image closes into a circle over a background color, then the incoming one opens from it (circle, iris, shape)
+- [circleopen](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/circleopen.glsl): A soft-edged circle opens from the center to reveal the incoming image (circle, iris, wipe)
+- [colorphase](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/colorphase.glsl): A crossfade in which each color channel changes at a different time (fade, color)
+- [coord-from-in](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/coord-from-in.glsl): A crossfade in which the colors of one image displace the other (displace, distort, blend)
+- [crosshatch](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/crosshatch.glsl): The incoming image appears through a crosshatch of lines spreading from the center (pattern, lines, noise)
+- [crosswarp](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/crosswarp.glsl): The outgoing image zooms in while the incoming one zooms out into place, sweeping from right to left (warp, zoom, horizontal)
+- [cube](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/cube.glsl): The two images are faces of a rotating 3D cube, with a floor reflection (3d, cube, rotate, reflection)
+- [directional-easing](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/directional-easing.glsl): Like Directional, with an eased movement (slide, push, directional)
+- [directionalwarp](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/directionalwarp.glsl): A diagonal wipe with a warped, smeared edge (wipe, warp, directional)
+- [directionalwipe](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/directionalwipe.glsl): A soft-edged diagonal wipe (wipe, directional)
+- [displacement](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/displacement.glsl): A crossfade in which a displacement map (an extra grayscale texture) warps both images (displace, distort, blend)
+- [dissolve](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/dissolve.glsl): The incoming image spreads over the outgoing one with a hot, glowing edge (dissolve, burn, glow)
+- [doorway](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/doorway.glsl): The outgoing image opens like double doors as the incoming one comes forward, with a floor reflection (doors, 3d, reflection)
+- [fade](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/fade.glsl): A linear crossfade between the two images (fade, blend)
+- [fadecolor](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/fadecolor.glsl): A fade through a solid color, black by default (fade, color)
+- [fadegrayscale](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/fadegrayscale.glsl): A crossfade through grayscale (fade, grayscale, color)
+- [flyeye](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/flyeye.glsl): The image breaks into a fly's-eye grid of lenses with color separation (lens, distort, chromatic)
+- [fragment](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/fragment.glsl): The outgoing image shatters into fragments that fly away (shatter, fragments)
+- [heart](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/heart.glsl): A heart shape grows from the center to reveal the incoming image (shape, wipe, heart)
+- [hexagonalize](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/hexagonalize.glsl): Both images turn into hexagons, crossfade, then sharpen again (pixelate, hexagon, blend)
+- [kaleidoscope](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/kaleidoscope.glsl): A crossfade through a spinning kaleidoscope (kaleidoscope, distort, blend)
+- [luma](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/luma.glsl): A wipe that follows the brightness of a grayscale mask (the luma texture) (wipe, luma, mask)
+- [luminance_melt](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/luminance_melt.glsl): The outgoing image melts away in noisy vertical streaks, depending on its brightness (melt, noise, luma)
+- [morph](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/morph.glsl): A crossfade in which each image is displaced by the other's colors, like a morph (morph, distort, blend)
+- [mosaic_transition](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/mosaic_transition.glsl): Both images break into mosaic blocks that blend, then sharpen into the incoming image (mosaic, pixelate, blend)
+- [multiply_blend](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/multiply_blend.glsl): A crossfade through the multiplied blend of both images (blend, fade)
+- [old_tv_lost_signal](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/old_tv_lost_signal.glsl): A crossfade with drifting tracking lines and tearing, like a TV losing its signal (retro, glitch, scanlines)
+- [parametric_glitch](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/parametric_glitch.glsl): A crossfade with glitchy horizontal bands and color shifts (glitch, blend)
+- [perlin](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/perlin.glsl): The incoming image appears through blobs of Perlin noise (noise, dissolve)
+- [pinwheel](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/pinwheel.glsl): A spinning pinwheel reveals the incoming image (pinwheel, radial, rotate)
+- [pixelize](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/pixelize.glsl): Both images pixelate, crossfade, then sharpen again (pixelate, blend)
+- [polar_function](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/polar_function.glsl): A flower shape with several petals grows to reveal the incoming image (shape, wipe, polar)
+- [powerKaleido](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/powerKaleido.glsl): The image folds into an animated kaleidoscope before revealing the incoming one (kaleidoscope, distort)
+- [randomNoisex](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/randomNoisex.glsl): The incoming image appears pixel by pixel in random noise (dissolve, noise)
+- [randomsquares](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/randomsquares.glsl): The incoming image appears in random squares (squares, grid, dissolve)
+- [ripple](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/ripple.glsl): Ripples spread from the center while crossfading (ripple, wave, blend)
+- [rotateTransition](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/rotateTransition.glsl): The images spin around the center while crossfading (rotate, spin, blend)
+- [rotate_scale_fade](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/rotate_scale_fade.glsl): The outgoing image spins and zooms while fading to the incoming one, over a background color (rotate, zoom, fade)
+- [scale-in](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/scale-in.glsl): The incoming image scales in from the center while fading in (zoom, fade)
+- [splitSlideInHorizontal](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/splitSlideInHorizontal.glsl): The incoming image slides in as two halves moving horizontally in opposite directions (slide, split, horizontal)
+- [splitSlideInOutHorizontal](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/splitSlideInOutHorizontal.glsl): The halves of both images slide horizontally in opposite directions, out and in at once (slide, split, horizontal)
+- [splitSlideInOutVertical](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/splitSlideInOutVertical.glsl): The halves of both images slide vertically in opposite directions, out and in at once (slide, split, vertical)
+- [splitSlideInVertical](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/splitSlideInVertical.glsl): The incoming image slides in as two halves moving vertically in opposite directions (slide, split, vertical)
+- [splitSlideOutHorizontal](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/splitSlideOutHorizontal.glsl): The outgoing image slides out as two halves moving horizontally in opposite directions (slide, split, horizontal)
+- [splitSlideOutVertical](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/splitSlideOutVertical.glsl): The outgoing image slides out as two halves moving vertically in opposite directions (slide, split, vertical)
+- [squareswire](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/squareswire.glsl): Squares grow along a diagonal sweep to reveal the incoming image (squares, grid, wipe, directional)
+- [squeeze](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/squeeze.glsl): The outgoing image is squeezed into a line with color separation, revealing the incoming one (squeeze, chromatic, vertical)
+- [static_wipe](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/static_wipe.glsl): A wipe from top to bottom with a band of TV static at its edge (wipe, static, noise, vertical)
+- [swap](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/swap.glsl): The two images swap places in 3D, with a floor reflection (3d, swap, reflection)
+- [tangentMotionBlur](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/tangentMotionBlur.glsl): The outgoing image is flung away along a curve with motion blur (motion-blur, rotate, slide)
+- [undulatingBurnOut](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/undulatingBurnOut.glsl): A circle with a wavy edge burns out from the center to reveal the incoming image (circle, burn, wipe)
+- [wind](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/wind.glsl): A ragged left-to-right wipe, as if the image was blown away by the wind (wipe, horizontal, noise)
+- [windowblinds](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/windowblinds.glsl): A crossfade through horizontal window blinds (blinds, stripes, blend)
+- [windowslice](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/windowslice.glsl): The incoming image appears through vertical slices that widen (slices, stripes, wipe)
+- [wipeDown](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/wipeDown.glsl): A hard-edged wipe from top to bottom (wipe, vertical)
+- [wipeLeft](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/wipeLeft.glsl): A hard-edged wipe from right to left (wipe, horizontal)
+- [wipeRight](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/wipeRight.glsl): A hard-edged wipe from left to right (wipe, horizontal)
+- [wipeUp](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/wipeUp.glsl): A hard-edged wipe from bottom to top (wipe, vertical)
+- [x_axis_translation](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/x_axis_translation.glsl): The outgoing image slides to the right, uncovering a crossfade to the incoming one (slide, horizontal, blend)
+- [zoomInOut](https://cdn.jsdelivr.net/npm/gl-transitions@1.76.0/transitions/zoomInOut.glsl): Zooms into the outgoing image until it blurs into a flat color, then out to the incoming one (zoom, blur)
+
+## Optional
+
+- [Gallery](https://gl-transitions.com/gallery): animated previews of every transition
+- [Editor](https://gl-transitions.com/editor): write and test a transition in the browser
+- [Contributing](https://github.com/gl-transitions/gl-transitions/blob/master/CONTRIBUTING.md): how to add a transition

package/msl/AdvancedMosaic.metal

@@ -0,0 +1,136 @@
+// AdvancedMosaic — MSL, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/AdvancedMosaic.glsl
+// Author: Sergey Kosarevsky
+// License: MIT
+// Description: Both images break into large blocks that blend, then sharpen into the incoming image
+// Bindings and uniform layout: see the gl-transitions package README
+
+// language: metal1.0
+#include <metal_stdlib>
+#include <simd/simd.h>
+
+using metal::uint;
+
+struct Uniforms {
+    float progress;
+    float ratio;
+    float pixelSize;
+};
+
+metal::float4 getToColor(
+    thread metal::float2& uv,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to
+) {
+    float _e16 = uv[0u];
+    float _e18 = uv[1u];
+    metal::float4 _e21 = _to.sample(_sampler, metal::float2(_e16, 1.0 - _e18), metal::level(0.0));
+    return _e21;
+}
+
+metal::float4 getFromColor(
+    thread metal::float2& uv_1,
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler
+) {
+    float _e16 = uv_1[0u];
+    float _e18 = uv_1[1u];
+    metal::float4 _e21 = _from.sample(_sampler, metal::float2(_e16, 1.0 - _e18), metal::level(0.0));
+    return _e21;
+}
+
+metal::float4 transition(
+    thread metal::float2& uv_2,
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to,
+    constant Uniforms& uniforms
+) {
+    float T = {};
+    float half_ = {};
+    float size = {};
+    float local = {};
+    float D = {};
+    metal::float2 UV = {};
+    metal::float2 coord = {};
+    metal::float4 C0_ = {};
+    metal::float2 param = {};
+    metal::float4 C1_ = {};
+    metal::float2 param_1 = {};
+    float _e27 = uniforms.progress;
+    T = _e27;
+    half_ = 0.5;
+    float _e28 = T;
+    float _e29 = half_;
+    if (_e28 < _e29) {
+        float _e32 = uniforms.pixelSize;
+        float _e33 = T;
+        float _e34 = half_;
+        local = metal::mix(1.0, _e32, _e33 / _e34);
+    } else {
+        float _e38 = uniforms.pixelSize;
+        float _e39 = T;
+        float _e40 = half_;
+        float _e42 = half_;
+        local = metal::mix(_e38, 1.0, (_e39 - _e40) / _e42);
+    }
+    float _e45 = local;
+    size = _e45;
+    float _e46 = size;
+    D = _e46 * 0.005;
+    metal::float2 _e48 = uv_2;
+    float _e51 = D;
+    UV = (_e48 - metal::float2(0.5)) / metal::float2(_e51);
+    float _e54 = D;
+    metal::float2 _e55 = UV;
+    coord = metal::clamp((metal::ceil(_e55 - metal::float2(0.5)) * _e54) + metal::float2(0.5), metal::float2(0.0), metal::float2(1.0));
+    metal::float2 _e65 = coord;
+    param = _e65;
+    metal::float4 _e66 = getFromColor(param, _from, _sampler);
+    C0_ = _e66;
+    metal::float2 _e67 = coord;
+    param_1 = _e67;
+    metal::float4 _e68 = getToColor(param_1, _sampler, _to);
+    C1_ = _e68;
+    metal::float4 _e69 = C0_;
+    metal::float4 _e70 = C1_;
+    float _e71 = T;
+    return metal::mix(_e69, _e70, metal::float4(_e71));
+}
+
+void main_1(
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to,
+    constant Uniforms& uniforms,
+    thread metal::float4& _fragColor,
+    thread metal::float2& _uv_1
+) {
+    metal::float2 param_2 = {};
+    metal::float2 _e15 = _uv_1;
+    param_2 = _e15;
+    metal::float4 _e16 = transition(param_2, _from, _sampler, _to, uniforms);
+    _fragColor = _e16;
+    return;
+}
+
+struct main_Input {
+    metal::float2 _uv [[user(loc0), center_perspective]];
+};
+struct main_Output {
+    metal::float4 member [[color(0)]];
+};
+fragment main_Output main_(
+  main_Input varyings [[stage_in]]
+, metal::texture2d<float, metal::access::sample> _from [[texture(0)]]
+, metal::sampler _sampler [[sampler(0)]]
+, metal::texture2d<float, metal::access::sample> _to [[texture(1)]]
+, constant Uniforms& uniforms [[buffer(0)]]
+) {
+    metal::float4 _fragColor = {};
+    metal::float2 _uv_1 = {};
+    const auto _uv = varyings._uv;
+    _uv_1 = _uv;
+    main_1(_from, _sampler, _to, uniforms, _fragColor, _uv_1);
+    metal::float4 _e3 = _fragColor;
+    return main_Output { _e3 };
+}

package/msl/BlockDissolve.metal

@@ -0,0 +1,108 @@
+// BlockDissolve — MSL, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/BlockDissolve.glsl
+// Author: nwoeanhinnogaehr
+// License: MIT
+// Description: The incoming image appears in small random blocks
+// Bindings and uniform layout: see the gl-transitions package README
+
+// language: metal1.0
+#include <metal_stdlib>
+#include <simd/simd.h>
+
+using metal::uint;
+
+struct Uniforms {
+    float progress;
+    float ratio;
+    float blocksize;
+};
+
+float rand(
+    thread metal::float2& co
+) {
+    metal::float2 _e17 = co;
+    return metal::fract(metal::sin(metal::dot(_e17, metal::float2(12.9898, 78.233))) * 43758.547);
+}
+
+metal::float4 getToColor(
+    thread metal::float2& uv,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to
+) {
+    float _e18 = uv[0u];
+    float _e20 = uv[1u];
+    metal::float4 _e23 = _to.sample(_sampler, metal::float2(_e18, 1.0 - _e20), metal::level(0.0));
+    return _e23;
+}
+
+metal::float4 getFromColor(
+    thread metal::float2& uv_1,
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler
+) {
+    float _e18 = uv_1[0u];
+    float _e20 = uv_1[1u];
+    metal::float4 _e23 = _from.sample(_sampler, metal::float2(_e18, 1.0 - _e20), metal::level(0.0));
+    return _e23;
+}
+
+metal::float4 transition(
+    thread metal::float2& uv_2,
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to,
+    constant Uniforms& uniforms
+) {
+    metal::float2 param = {};
+    metal::float2 param_1 = {};
+    metal::float2 param_2 = {};
+    metal::float2 _e20 = uv_2;
+    param = _e20;
+    metal::float4 _e21 = getFromColor(param, _from, _sampler);
+    metal::float2 _e22 = uv_2;
+    param_1 = _e22;
+    metal::float4 _e23 = getToColor(param_1, _sampler, _to);
+    metal::float2 _e24 = uv_2;
+    float _e26 = uniforms.blocksize;
+    param_2 = metal::floor(_e24 / metal::float2(_e26));
+    float _e30 = rand(param_2);
+    float _e32 = uniforms.progress;
+    return metal::mix(_e21, _e23, metal::float4(metal::step(_e30, _e32)));
+}
+
+void main_1(
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to,
+    constant Uniforms& uniforms,
+    thread metal::float4& _fragColor,
+    thread metal::float2& _uv_1
+) {
+    metal::float2 param_3 = {};
+    metal::float2 _e17 = _uv_1;
+    param_3 = _e17;
+    metal::float4 _e18 = transition(param_3, _from, _sampler, _to, uniforms);
+    _fragColor = _e18;
+    return;
+}
+
+struct main_Input {
+    metal::float2 _uv [[user(loc0), center_perspective]];
+};
+struct main_Output {
+    metal::float4 member [[color(0)]];
+};
+fragment main_Output main_(
+  main_Input varyings [[stage_in]]
+, metal::texture2d<float, metal::access::sample> _from [[texture(0)]]
+, metal::sampler _sampler [[sampler(0)]]
+, metal::texture2d<float, metal::access::sample> _to [[texture(1)]]
+, constant Uniforms& uniforms [[buffer(0)]]
+) {
+    metal::float4 _fragColor = {};
+    metal::float2 _uv_1 = {};
+    const auto _uv = varyings._uv;
+    _uv_1 = _uv;
+    main_1(_from, _sampler, _to, uniforms, _fragColor, _uv_1);
+    metal::float4 _e3 = _fragColor;
+    return main_Output { _e3 };
+}

package/msl/BookFlip.metal

@@ -0,0 +1,191 @@
+// BookFlip — MSL, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/BookFlip.glsl
+// Author: hong
+// License: MIT
+// Description: The outgoing image turns like a book page from right to left, revealing the incoming one
+// Bindings and uniform layout: see the gl-transitions package README
+
+// language: metal1.0
+#include <metal_stdlib>
+#include <simd/simd.h>
+
+using metal::uint;
+
+struct Uniforms {
+    float progress;
+    float ratio;
+};
+
+float nonZero(
+    thread float& x
+) {
+    float local = {};
+    float _e18 = x;
+    if (metal::abs(_e18) < 0.0001) {
+        float _e21 = x;
+        local = (_e21 < 0.0) ? -0.0001 : 0.0001;
+    } else {
+        float _e24 = x;
+        local = _e24;
+    }
+    float _e25 = local;
+    return _e25;
+}
+
+metal::float2 skewRight(
+    thread metal::float2& p,
+    constant Uniforms& uniforms
+) {
+    float skewX = {};
+    float param = {};
+    float skewY = {};
+    float _e21 = p[0u];
+    float _e23 = uniforms.progress;
+    float _e26 = uniforms.progress;
+    param = 0.5 - _e26;
+    float _e28 = nonZero(param);
+    skewX = ((_e21 - _e23) / _e28) * 0.5;
+    float _e32 = p[1u];
+    float _e35 = uniforms.progress;
+    float _e37 = p[0u];
+    skewY = (((_e32 - 0.5) / (0.5 + ((_e35 * (_e37 - 0.5)) / 0.5))) * 0.5) + 0.5;
+    float _e45 = skewX;
+    float _e46 = skewY;
+    return metal::float2(_e45, _e46);
+}
+
+metal::float4 addShade_u0028_(
+    constant Uniforms& uniforms
+) {
+    float shadeVal = {};
+    float _e18 = uniforms.progress;
+    shadeVal = metal::max(0.7, metal::abs(_e18 - 0.5) * 2.0);
+    float _e23 = shadeVal;
+    metal::float3 _e24 = metal::float3(_e23);
+    return metal::float4(_e24.x, _e24.y, _e24.z, 1.0);
+}
+
+metal::float4 getToColor(
+    thread metal::float2& uv,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to
+) {
+    float _e18 = uv[0u];
+    float _e20 = uv[1u];
+    metal::float4 _e23 = _to.sample(_sampler, metal::float2(_e18, 1.0 - _e20), metal::level(0.0));
+    return _e23;
+}
+
+metal::float2 skewLeft(
+    thread metal::float2& p_1,
+    constant Uniforms& uniforms
+) {
+    float skewX_1 = {};
+    float param_1 = {};
+    float skewY_1 = {};
+    float _e21 = p_1[0u];
+    float _e24 = uniforms.progress;
+    param_1 = _e24 - 0.5;
+    float _e26 = nonZero(param_1);
+    skewX_1 = (((_e21 - 0.5) / _e26) * 0.5) + 0.5;
+    float _e31 = p_1[1u];
+    float _e34 = uniforms.progress;
+    float _e37 = p_1[0u];
+    skewY_1 = (((_e31 - 0.5) / (0.5 + (((1.0 - _e34) * (0.5 - _e37)) / 0.5))) * 0.5) + 0.5;
+    float _e45 = skewX_1;
+    float _e46 = skewY_1;
+    return metal::float2(_e45, _e46);
+}
+
+metal::float4 getFromColor(
+    thread metal::float2& uv_1,
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler
+) {
+    float _e18 = uv_1[0u];
+    float _e20 = uv_1[1u];
+    metal::float4 _e23 = _from.sample(_sampler, metal::float2(_e18, 1.0 - _e20), metal::level(0.0));
+    return _e23;
+}
+
+metal::float4 transition(
+    thread metal::float2& p_2,
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to,
+    constant Uniforms& uniforms
+) {
+    float pr = {};
+    metal::float2 param_2 = {};
+    metal::float2 param_3 = {};
+    metal::float2 param_4 = {};
+    metal::float2 param_5 = {};
+    metal::float2 param_6 = {};
+    metal::float2 param_7 = {};
+    float _e25 = uniforms.progress;
+    float _e28 = p_2[0u];
+    pr = metal::step(1.0 - _e25, _e28);
+    float _e31 = p_2[0u];
+    if (_e31 < 0.5) {
+        metal::float2 _e33 = p_2;
+        param_2 = _e33;
+        metal::float4 _e34 = getFromColor(param_2, _from, _sampler);
+        metal::float2 _e35 = p_2;
+        param_3 = _e35;
+        metal::float2 _e36 = skewLeft(param_3, uniforms);
+        param_4 = _e36;
+        metal::float4 _e37 = getToColor(param_4, _sampler, _to);
+        metal::float4 _e38 = addShade_u0028_(uniforms);
+        float _e40 = pr;
+        return metal::mix(_e34, _e37 * _e38, metal::float4(_e40));
+    } else {
+        metal::float2 _e43 = p_2;
+        param_5 = _e43;
+        metal::float2 _e44 = skewRight(param_5, uniforms);
+        param_6 = _e44;
+        metal::float4 _e45 = getFromColor(param_6, _from, _sampler);
+        metal::float4 _e46 = addShade_u0028_(uniforms);
+        metal::float2 _e48 = p_2;
+        param_7 = _e48;
+        metal::float4 _e49 = getToColor(param_7, _sampler, _to);
+        float _e50 = pr;
+        return metal::mix(_e45 * _e46, _e49, metal::float4(_e50));
+    }
+}
+
+void main_1(
+    metal::texture2d<float, metal::access::sample> _from,
+    metal::sampler _sampler,
+    metal::texture2d<float, metal::access::sample> _to,
+    constant Uniforms& uniforms,
+    thread metal::float4& _fragColor,
+    thread metal::float2& _uv_1
+) {
+    metal::float2 param_8 = {};
+    metal::float2 _e17 = _uv_1;
+    param_8 = _e17;
+    metal::float4 _e18 = transition(param_8, _from, _sampler, _to, uniforms);
+    _fragColor = _e18;
+    return;
+}
+
+struct main_Input {
+    metal::float2 _uv [[user(loc0), center_perspective]];
+};
+struct main_Output {
+    metal::float4 member [[color(0)]];
+};
+fragment main_Output main_(
+  main_Input varyings [[stage_in]]
+, metal::texture2d<float, metal::access::sample> _from [[texture(0)]]
+, metal::sampler _sampler [[sampler(0)]]
+, metal::texture2d<float, metal::access::sample> _to [[texture(1)]]
+, constant Uniforms& uniforms [[buffer(0)]]
+) {
+    metal::float4 _fragColor = {};
+    metal::float2 _uv_1 = {};
+    const auto _uv = varyings._uv;
+    _uv_1 = _uv;
+    main_1(_from, _sampler, _to, uniforms, _fragColor, _uv_1);
+    metal::float4 _e3 = _fragColor;
+    return main_Output { _e3 };
+}