gl-transitions 1.74.0 → 1.76.0

package/glsl3/TVStatic.glsl

@@ -0,0 +1,29 @@
+// TVStatic — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/TVStatic.glsl
+// Author: Brandon Anzaldi
+// License: MIT
+// Description: Cuts to full-screen TV static, then to the incoming image
+// Tags: static, noise, retro
+// @param Part of the transition, at each end, that shows the images instead of static
+uniform float offset; // = 0.05
+
+// Pseudo-random noise function
+// http://byteblacksmith.com/improvements-to-the-canonical-one-liner-glsl-rand-for-opengl-es-2-0/
+highp float noise(vec2 co)
+{
+    highp float a = 12.9898;
+    highp float b = 78.233;
+    highp float c = 43758.5453;
+    highp float dt= dot(co.xy * progress, vec2(a, b));
+    highp float sn= mod(dt,3.14);
+    return fract(sin(sn) * c);
+}
+
+vec4 transition(vec2 p) {
+  if (progress < offset) {
+    return getFromColor(p);
+  } else if (progress > (1.0 - offset)) {
+    return getToColor(p);
+  } else {
+    return vec4(vec3(noise(p)), 1.0);
+  }
+}

package/glsl3/TilesWave.glsl

@@ -0,0 +1,63 @@
+// TilesWave — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/TilesWave.glsl
+// Author: numb3r23
+// License: MIT
+// Description: The incoming image is revealed tile by tile in a diagonal wave
+// Tags: tiles, wave, wipe
+// Ported from https://gist.github.com/numb3r23/169781bb76f310e2bfde
+
+// @param Number of tiles (columns, rows)
+uniform ivec2 tileCount; // = ivec2(8, 8)
+uniform bool flipX; // = true
+uniform bool flipY; // = false
+
+vec4 transition(vec2 uv) {
+  vec2 tileSize = 1.0 / vec2(tileCount);
+  vec2 posInTile = fract(uv * vec2(tileCount));
+  vec2 tileNum = floor(uv * vec2(tileCount));
+  float countTiles = float(tileCount.x * tileCount.y);
+
+  // Diagonal wave from bottom-left to top-right
+  float offset = (tileNum.y + tileNum.x * float(tileCount.y)) / countTiles;
+  float timeOffset = clamp((progress - offset) * countTiles, 0.0, 0.5);
+  float sinTime = 1.0 - abs(cos(fract(timeOffset) * 3.1415926));
+
+  vec2 texC = posInTile;
+
+  if (sinTime <= 0.5) {
+    if (flipX) {
+      if (texC.x < sinTime || texC.x > 1.0 - sinTime)
+        return getFromColor(uv);
+      texC.x = texC.x < 0.5
+        ? (texC.x - sinTime) * 0.5 / (0.5 - sinTime)
+        : (texC.x - 0.5) * 0.5 / (0.5 - sinTime) + 0.5;
+    }
+    if (flipY) {
+      if (texC.y < sinTime || texC.y > 1.0 - sinTime)
+        return getFromColor(uv);
+      texC.y = texC.y < 0.5
+        ? (texC.y - sinTime) * 0.5 / (0.5 - sinTime)
+        : (texC.y - 0.5) * 0.5 / (0.5 - sinTime) + 0.5;
+    }
+    vec2 globalUV = tileNum * tileSize + texC * tileSize;
+    return getFromColor(globalUV);
+  } else {
+    if (flipX) {
+      if (texC.x > sinTime || texC.x < 1.0 - sinTime)
+        return getToColor(uv);
+      texC.x = texC.x < 0.5
+        ? (texC.x - sinTime) * 0.5 / (0.5 - sinTime)
+        : (texC.x - 0.5) * 0.5 / (0.5 - sinTime) + 0.5;
+      texC.x = 1.0 - texC.x;
+    }
+    if (flipY) {
+      if (texC.y > sinTime || texC.y < 1.0 - sinTime)
+        return getToColor(uv);
+      texC.y = texC.y < 0.5
+        ? (texC.y - sinTime) * 0.5 / (0.5 - sinTime)
+        : (texC.y - 0.5) * 0.5 / (0.5 - sinTime) + 0.5;
+      texC.y = 1.0 - texC.y;
+    }
+    vec2 globalUV = tileNum * tileSize + texC * tileSize;
+    return getToColor(globalUV);
+  }
+}

package/glsl3/TopBottom.glsl

@@ -0,0 +1,27 @@
+// TopBottom — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/TopBottom.glsl
+// Author: zhmy
+// License: MIT
+// Description: The outgoing image shrinks away upward while the incoming one slides in from the bottom
+// Tags: slide, zoom, vertical
+
+const vec4 black = vec4(0.0, 0.0, 0.0, 1.0);
+const vec2 boundMin = vec2(0.0, 0.0);
+const vec2 boundMax = vec2(1.0, 1.0);
+
+bool inBounds (vec2 p) {
+    return all(lessThan(boundMin, p)) && all(lessThan(p, boundMax));
+}
+
+vec4 transition (vec2 uv) {
+    vec2 spfr,spto = vec2(-1.);
+    float size = mix(1.0, 3.0, progress*0.2);
+    spto = (uv + vec2(-0.5,-0.5))*vec2(size,size)+vec2(0.5,0.5);
+    spfr = (uv + vec2(0.0, 1.0 - progress));
+    if(inBounds(spfr)){
+        return getToColor(spfr);
+    } else if(inBounds(spto)){
+        return getFromColor(spto) * (1.0 - progress);
+    } else{
+        return black;
+    }
+}

package/glsl3/VerticalClose.glsl

@@ -0,0 +1,16 @@
+// VerticalClose — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/VerticalClose.glsl
+// Author: martiniti
+// License: MIT
+// Description: The incoming image closes in from the left and right edges toward the middle
+// Tags: wipe, split
+
+vec4 transition (vec2 uv) {
+
+  float s = 2.0 - abs((uv.x - 0.5) / (progress - 1.0)) - 2.0 * progress;
+  
+  return mix(
+    getFromColor(uv),
+    getToColor(uv),
+    smoothstep(0.5, 0.0, s)
+  );
+}

package/glsl3/VerticalOpen.glsl

@@ -0,0 +1,17 @@
+// VerticalOpen — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/VerticalOpen.glsl
+// Author: martiniti
+// License: MIT
+// Description: The incoming image opens from a line in the middle toward the left and right edges
+// Tags: wipe, split
+
+vec4 transition (vec2 uv) {
+
+  float regress = 1.0 - progress;
+  float s = 2.0 - abs((uv.x - 0.5) / (regress - 1.0)) - 2.0 * regress;
+  
+  return mix(
+    getFromColor(uv),
+    getToColor(uv),
+    smoothstep(0.0, 0.5, s)
+  );
+}

package/glsl3/WaterDrop.glsl

@@ -0,0 +1,21 @@
+// WaterDrop — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/WaterDrop.glsl
+// Author: Paweł Płóciennik
+// License: MIT
+// Description: Ripples spread from the center like a drop falling into water, crossfading to the incoming image
+// Tags: ripple, water, blend
+// @param Frequency of the ripples
+uniform float amplitude; // = 30
+// @param Speed of the ripples
+uniform float speed; // = 30
+
+vec4 transition(vec2 p) {
+  vec2 dir = p - vec2(.5);
+  float dist = length(dir);
+
+  if (dist > progress) {
+    return mix(getFromColor( p), getToColor( p), progress);
+  } else {
+    vec2 offset = dir * sin(dist * amplitude - progress * speed);
+    return mix(getFromColor( p + offset), getToColor( p), progress);
+  }
+}

package/glsl3/ZoomInCircles.glsl

@@ -0,0 +1,40 @@
+// ZoomInCircles — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/ZoomInCircles.glsl
+// License: MIT
+// Author: dycm8009
+// Description: Concentric rings of the outgoing image zoom at different speeds before revealing the incoming one
+// Tags: zoom, circle
+// ported by gre from https://gist.github.com/dycm8009/948e99b1800e81ad909a
+
+vec2 zoom(vec2 uv, float amount) {
+  return 0.5 + ((uv - 0.5) * amount);	
+}
+
+vec4 transition(vec2 uv) {
+  vec2 ratio2 = vec2(1.0, 1.0 / ratio);
+  // TODO: some timing are hardcoded but should be one or many parameters
+  // TODO: should also be able to configure how much circles
+  // TODO: if() branching should be avoided when possible, prefer use of step() & other functions
+  vec2 r = 2.0 * ((vec2(uv.xy) - 0.5) * ratio2);
+  float pro = progress / 0.8;
+  float z = pro * 0.2;
+  float t = 0.0;
+  if (pro > 1.0) {
+    z = 0.2 + (pro - 1.0) * 5.;
+    t = clamp((progress - 0.8) / 0.07, 0.0, 1.0);
+  }
+  if (length(r) < 0.5+z) {
+    // uv = zoom(uv, 0.9 - 0.1 * pro);
+  }
+  else if (length(r) < 0.8+z*1.5) {
+    uv = zoom(uv, 1.0 - 0.15 * pro);
+    t = t * 0.5;
+  }
+  else if (length(r) < 1.2+z*2.5) {
+    uv = zoom(uv, 1.0 - 0.2 * pro);
+    t = t * 0.2;
+  }
+  else {
+    uv = zoom(uv, 1.0 - 0.25 * pro);
+  }
+  return mix(getFromColor(uv), getToColor(uv), t);
+}

package/glsl3/ZoomLeftWipe.glsl

@@ -0,0 +1,36 @@
+// ZoomLeftWipe — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/ZoomLeftWipe.glsl
+// Author: Handk
+// License: MIT
+// Description: Zooms into the outgoing image, then the incoming one wipes in from right to left
+// Tags: zoom, wipe, horizontal
+
+// @param Part of the first half spent zooming (capped at 0.5)
+uniform float zoom_quickness; // = 0.8
+vec2 zoom(vec2 uv, float amount) {
+  if(amount<0.5)
+  return 0.5 + ((uv - 0.5) * (1.0-amount));
+  else
+  return 0.5 + ((uv - 0.5) * (amount));
+  
+}
+
+vec4 transition (vec2 uv) {
+  float nQuick = clamp(zoom_quickness,0.0,0.5);
+  if(progress<0.5){
+    vec4 c= mix(
+      getFromColor(zoom(uv, smoothstep(0.0, nQuick, progress))),
+      getToColor(uv),
+     step(0.5, progress)
+    );
+    
+    return c;
+  }
+  else{
+    vec2 p=uv.xy/vec2(1.0).xy;
+    vec4 d=getFromColor(p);
+    vec4 e=getToColor(p);
+    vec4 f= mix(d, e, step(1.0-p.x,(progress-0.5)*2.0));
+    
+    return f;
+  }
+}

package/glsl3/ZoomRigthWipe.glsl

@@ -0,0 +1,36 @@
+// ZoomRigthWipe — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/ZoomRigthWipe.glsl
+// Author: Handk
+// License: MIT
+// Description: Zooms into the outgoing image, then the incoming one wipes in from left to right
+// Tags: zoom, wipe, horizontal
+
+// @param Part of the first half spent zooming (capped at 0.5)
+uniform float zoom_quickness; // = 0.8
+vec2 zoom(vec2 uv, float amount) {
+  if(amount<0.5)
+  return 0.5 + ((uv - 0.5) * (1.0-amount));
+  else
+  return 0.5 + ((uv - 0.5) * (amount));
+  
+}
+
+vec4 transition (vec2 uv) {
+  float nQuick = clamp(zoom_quickness,0.0,0.5);
+  if(progress<0.5){
+    vec4 c= mix(
+      getFromColor(zoom(uv, smoothstep(0.0, nQuick, progress))),
+      getToColor(uv),
+     step(0.5, progress)
+    );
+    
+    return c;
+  }
+  else{
+    vec2 p=uv.xy/vec2(1.0).xy;
+    vec4 d=getFromColor(p);
+    vec4 e=getToColor(p);
+    vec4 f= mix(d, e, step(0.0+p.x,(progress-0.5)*2.0));
+    
+    return f;
+  }
+}

package/glsl3/angular.glsl

@@ -0,0 +1,25 @@
+// angular — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/angular.glsl
+// Author: Fernando Kuteken
+// License: MIT
+// Description: A wipe that sweeps around the center from a starting angle
+// Tags: wipe, radial, clock
+
+#define PI 3.141592653589
+
+// @range(0, 360) Angle where the wipe starts, in degrees
+uniform float startingAngle; // = 90
+
+vec4 transition (vec2 uv) {
+  
+  float offset = startingAngle * PI / 180.0;
+  float angle = atan(uv.y - 0.5, uv.x - 0.5) + offset;
+  float normalizedAngle = (angle + PI) / (2.0 * PI);
+  
+  normalizedAngle = normalizedAngle - floor(normalizedAngle);
+
+  return mix(
+    getFromColor(uv),
+    getToColor(uv),
+    step(normalizedAngle, progress)
+    );
+}

package/glsl3/burn.glsl

@@ -0,0 +1,14 @@
+// burn — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/burn.glsl
+// Author: gre
+// License: MIT
+// Description: A crossfade that brightens toward a color in the middle
+// Tags: fade, color, flash
+// @color Color the images brighten toward
+uniform vec3 color /* = vec3(0.9, 0.4, 0.2) */;
+vec4 transition (vec2 uv) {
+  return mix(
+    getFromColor(uv) + vec4(progress*color, 1.0),
+    getToColor(uv) + vec4((1.0-progress)*color, 1.0),
+    progress
+  );
+}

package/glsl3/burn0.glsl

@@ -0,0 +1,55 @@
+// burn0 — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/burn0.glsl
+// Author: liubailin2020@gmail.com
+// License: MIT
+// Description: The outgoing image burns away in noisy, glowing patches
+// Tags: burn, fire, noise
+
+// @color Color of the burning edges
+uniform vec3 burnColor; // = vec3(1.0, 0.5, 0.0)
+
+float random (in vec2 st) {
+    return fract(sin(dot(st.xy,
+                         vec2(12.9898,78.233)))*
+        43758.5453123);
+}
+
+// Based on Morgan McGuire @morgan3d
+// https://www.shadertoy.com/view/4dS3Wd
+float noise (in vec2 st) {
+    vec2 i = floor(st);
+    vec2 f = fract(st);
+
+    float a = random(i);
+    float b = random(i + vec2(1.0, 0.0));
+    float c = random(i + vec2(0.0, 1.0));
+    float d = random(i + vec2(1.0, 1.0));
+
+    vec2 u = f * f * (3.0 - 2.0 * f);
+
+    return mix(a, b, u.x) +
+            (c - a)* u.y * (1.0 - u.x) +
+            (d - b) * u.x * u.y;
+}
+
+#define OCTAVES 4
+float fbm (in vec2 st) {
+    float value = 0.0;
+    float amplitude = .5;
+    for (int i = 0; i < OCTAVES; i++) {
+        value += amplitude * noise(st);
+        st *= 2.;
+        amplitude *= .5;
+    }
+    return value;
+}
+
+vec4 transition (vec2 uv) {
+    if (progress <= 0.0) return getFromColor(uv);
+    if (progress >= 1.0) return getToColor(uv);
+    vec4 from = getFromColor(uv);
+    vec4 to = getToColor(uv);
+    float n = fbm(uv * 4.);
+    float l = smoothstep(progress, progress + 0.05, n);
+    float edge = (1.0 - l) * l * 5.0;
+    return mix(to, from, l) + vec4(burnColor, 0.0) * edge;
+}

package/glsl3/cannabisleaf.glsl

@@ -0,0 +1,18 @@
+// cannabisleaf — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/cannabisleaf.glsl
+// Author: @Flexi23
+// License: MIT
+// Description: A cannabis-leaf shape grows from the center to reveal the incoming image
+// Tags: shape, wipe
+
+// inspired by http://www.wolframalpha.com/input/?i=cannabis+curve
+
+vec4 transition (vec2 uv) {
+  if(progress == 0.0){
+    return getFromColor(uv);
+  }
+  vec2 leaf_uv = (uv - vec2(0.5))/10./pow(progress,3.5);
+	leaf_uv.y += 0.35;
+	float r = 0.18;
+	float o = atan(leaf_uv.y, leaf_uv.x);
+  return mix(getFromColor(uv), getToColor(uv), 1.-step(1. - length(leaf_uv)+r*(1.+sin(o))*(1.+0.9 * cos(8.*o))*(1.+0.1*cos(24.*o))*(0.9+0.05*cos(200.*o)), 1.));
+}

package/glsl3/chessboard.glsl

@@ -0,0 +1,28 @@
+// chessboard — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/chessboard.glsl
+// Author: lql
+// License: MIT
+// Description: A chessboard pattern of squares reveals the incoming image
+// Tags: grid, squares, pattern
+
+// @param Number of squares per row
+uniform float grid_num; // = 10.0
+
+vec4 transition(vec2 uv) {
+    vec2 st = uv * grid_num;
+    vec2 idx = floor(st);
+    vec2 grid = fract(st);
+
+    vec4 a = getFromColor(uv);
+    vec4 b = getToColor(uv);
+
+    float checker = mod(idx.x + idx.y, 2.0);
+    float mixFactor;
+
+    if (progress <= 0.5) {
+        mixFactor = (checker > 0.5) ? step(grid.x, progress * 2.0) : 0.0;
+    } else {
+        mixFactor = (checker < 0.5) ? step(grid.x, (progress - 0.5) * 2.0) : 1.0;
+    }
+
+    return mix(a, b, mixFactor);
+}

package/glsl3/circle.glsl

@@ -0,0 +1,24 @@
+// circle — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/circle.glsl
+// Author: Fernando Kuteken
+// License: MIT
+// Description: The outgoing image closes into a circle over a background color, then the incoming one opens from it
+// Tags: circle, iris, shape
+
+// @param Center of the circle
+uniform vec2 center; // = vec2(0.5, 0.5)
+// @color Background color
+uniform vec3 backColor; // = vec3(0.1, 0.1, 0.1)
+
+vec4 transition (vec2 uv) {
+  
+  float distance = length(uv - center);
+  float radius = sqrt(8.0) * abs(progress - 0.5);
+  
+  if (distance > radius) {
+    return vec4(backColor, 1.0);
+  }
+  else {
+    if (progress < 0.5) return getFromColor(uv);
+    else return getToColor(uv);
+  }
+}

package/glsl3/circleopen.glsl

@@ -0,0 +1,18 @@
+// circleopen — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/circleopen.glsl
+// Author: gre
+// License: MIT
+// Description: A soft-edged circle opens from the center to reveal the incoming image
+// Tags: circle, iris, wipe
+// @param Softness of the circle's edge
+uniform float smoothness; // = 0.3
+// @param Open the circle; false closes it instead
+uniform bool opening; // = true
+
+const vec2 center = vec2(0.5, 0.5);
+const float SQRT_2 = 1.414213562373;
+
+vec4 transition (vec2 uv) {
+  float x = opening ? progress : 1.-progress;
+  float m = smoothstep(-smoothness, 0.0, SQRT_2*distance(center, uv) - x*(1.+smoothness));
+  return mix(getFromColor(uv), getToColor(uv), opening ? 1.-m : m);
+}

package/glsl3/colorphase.glsl

@@ -0,0 +1,19 @@
+// colorphase — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/colorphase.glsl
+// Author: gre
+// License: MIT
+// Description: A crossfade in which each color channel changes at a different time
+// Tags: fade, color
+
+// Usage: fromStep and toStep must be in [0.0, 1.0] range 
+// and all(fromStep) must be < all(toStep)
+
+// @range(0, 1) When each channel (r, g, b, a) starts changing
+uniform vec4 fromStep; // = vec4(0.0, 0.2, 0.4, 0.0)
+// @range(0, 1) When each channel (r, g, b, a) finishes changing
+uniform vec4 toStep; // = vec4(0.6, 0.8, 1.0, 1.0)
+
+vec4 transition (vec2 uv) {
+  vec4 a = getFromColor(uv);
+  vec4 b = getToColor(uv);
+  return mix(a, b, smoothstep(fromStep, toStep, vec4(progress)));
+}

package/glsl3/coord-from-in.glsl

@@ -0,0 +1,18 @@
+// coord-from-in — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/coord-from-in.glsl
+// Author: haiyoucuv
+// License: MIT
+// Description: A crossfade in which the colors of one image displace the other
+// Tags: displace, distort, blend
+
+vec4 transition (vec2 uv) {
+
+  vec4 coordTo = getToColor(uv);
+  vec4 coordFrom = getFromColor(uv);
+
+  return mix(
+    getFromColor(mix(uv, coordTo.rg, progress)),
+    getToColor(mix(coordFrom.rg, uv, progress)),
+    progress
+  );
+
+}

package/glsl3/crosshatch.glsl

@@ -0,0 +1,20 @@
+// crosshatch — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/crosshatch.glsl
+// License: MIT
+// Author: pthrasher
+// Description: The incoming image appears through a crosshatch of lines spreading from the center
+// Tags: pattern, lines, noise
+// adapted by gre from https://gist.github.com/pthrasher/04fd9a7de4012cbb03f6
+
+// @param Point the lines spread from
+uniform vec2 center; // = vec2(0.5)
+uniform float threshold; // = 3.0
+uniform float fadeEdge; // = 0.1
+
+float rand(vec2 co) {
+  return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
+}
+vec4 transition(vec2 p) {
+  float dist = distance(center, p) / threshold;
+  float r = progress - min(rand(vec2(p.y, 0.0)), rand(vec2(0.0, p.x)));
+  return mix(getFromColor(p), getToColor(p), mix(0.0, mix(step(dist, r), 1.0, smoothstep(1.0-fadeEdge, 1.0, progress)), smoothstep(0.0, fadeEdge, progress)));    
+}

package/glsl3/crosswarp.glsl

@@ -0,0 +1,10 @@
+// crosswarp — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/crosswarp.glsl
+// Author: Eke Péter <peterekepeter@gmail.com>
+// License: MIT
+// Description: The outgoing image zooms in while the incoming one zooms out into place, sweeping from right to left
+// Tags: warp, zoom, horizontal
+vec4 transition(vec2 p) {
+  float x = progress;
+  x=smoothstep(.0,1.0,(x*2.0+p.x-1.0));
+  return mix(getFromColor((p-.5)*(1.-x)+.5), getToColor((p-.5)*x+.5), x);
+}

package/glsl3/cube.glsl

@@ -0,0 +1,71 @@
+// cube — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/cube.glsl
+// Author: gre
+// License: MIT
+// Description: The two images are faces of a rotating 3D cube, with a floor reflection
+// Tags: 3d, cube, rotate, reflection
+// @range(0, 1) Amount of perspective
+uniform float persp; // = 0.7
+uniform float unzoom; // = 0.3
+// @range(0, 1) Strength of the reflection
+uniform float reflection; // = 0.4
+uniform float floating; // = 3.0
+
+vec2 project (vec2 p) {
+  return p * vec2(1.0, -1.2) + vec2(0.0, -floating/100.);
+}
+
+bool inBounds (vec2 p) {
+  return all(lessThan(vec2(0.0), p)) && all(lessThan(p, vec2(1.0)));
+}
+
+vec4 bgColor (vec2 p, vec2 pfr, vec2 pto) {
+  vec4 c = vec4(0.0, 0.0, 0.0, 1.0);
+  pfr = project(pfr);
+  // FIXME avoid branching might help perf!
+  if (inBounds(pfr)) {
+    c += mix(vec4(0.0), getFromColor(pfr), reflection * mix(1.0, 0.0, pfr.y));
+  }
+  pto = project(pto);
+  if (inBounds(pto)) {
+    c += mix(vec4(0.0), getToColor(pto), reflection * mix(1.0, 0.0, pto.y));
+  }
+  return c;
+}
+
+// p : the position
+// persp : the perspective in [ 0, 1 ]
+// center : the xcenter in [0, 1] \ 0.5 excluded
+vec2 xskew (vec2 p, float persp, float center) {
+  float x = mix(p.x, 1.0-p.x, center);
+  return (
+    (
+      vec2( x, (p.y - 0.5*(1.0-persp) * x) / (1.0+(persp-1.0)*x) )
+      - vec2(0.5-distance(center, 0.5), 0.0)
+    )
+    * vec2(0.5 / distance(center, 0.5) * (center<0.5 ? 1.0 : -1.0), 1.0)
+    + vec2(center<0.5 ? 0.0 : 1.0, 0.0)
+  );
+}
+
+vec4 transition(vec2 op) {
+  float uz = unzoom * 2.0*(0.5-distance(0.5, progress));
+  vec2 p = -uz*0.5+(1.0+uz) * op;
+  vec2 fromP = xskew(
+    (p - vec2(progress, 0.0)) / vec2(1.0-progress, 1.0),
+    1.0-mix(progress, 0.0, persp),
+    0.0
+  );
+  vec2 toP = xskew(
+    p / vec2(progress, 1.0),
+    mix(pow(progress, 2.0), 1.0, persp),
+    1.0
+  );
+  // FIXME avoid branching might help perf!
+  if (inBounds(fromP)) {
+    return getFromColor(fromP);
+  }
+  else if (inBounds(toP)) {
+    return getToColor(toP);
+  }
+  return bgColor(op, fromP, toP);
+}

package/glsl3/directional-easing.glsl

@@ -0,0 +1,19 @@
+// directional-easing — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/directional-easing.glsl
+// Author: Max Plotnikov
+// License: MIT
+// Description: Like Directional, with an eased movement
+// Tags: slide, push, directional
+
+// @param Direction of the movement
+uniform vec2 direction; // = vec2(0.0, 1.0)
+
+vec4 transition (vec2 uv) {
+  float easing = sqrt((2.0 - progress) * progress);
+  vec2 p = uv + easing * sign(direction);
+  vec2 f = fract(p);
+  return mix(
+    getToColor(f),
+    getFromColor(f),
+    step(0.0, p.y) * step(p.y, 1.0) * step(0.0, p.x) * step(p.x, 1.0)
+  );
+}

package/glsl3/directionalwarp.glsl

@@ -0,0 +1,20 @@
+// directionalwarp — GLSL ES 3.00, generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/directionalwarp.glsl
+// Author: pschroen
+// License: MIT
+// Description: A diagonal wipe with a warped, smeared edge
+// Tags: wipe, warp, directional
+
+// @param Softness of the edge
+uniform float smoothness; // = 0.1
+// @param Direction of the wipe
+uniform vec2 direction; // = vec2(-1.0, 1.0)
+
+const vec2 center = vec2(0.5, 0.5);
+
+vec4 transition (vec2 uv) {
+  vec2 v = normalize(direction);
+  v /= abs(v.x) + abs(v.y);
+  float d = v.x * center.x + v.y * center.y;
+  float m = 1.0 - smoothstep(-smoothness, 0.0, v.x * uv.x + v.y * uv.y - (d - 0.5 + progress * (1.0 + smoothness)));
+  return mix(getFromColor((uv - 0.5) * (1.0 - m) + 0.5), getToColor((uv - 0.5) * m + 0.5), m);
+}