gl-transitions 1.71.0 → 1.72.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gl-transitions",
-  "version": "1.71.0",
+  "version": "1.72.0",
   "description": "The open collection of GL Transitions",
   "main": "index.js",
   "license": "MIT",
@@ -19,6 +19,9 @@
     "shader",
     "opengl",
     "video",
-    "animation"
-  ]
+    "animation",
+    "sksl",
+    "skia"
+  ],
+  "types": "index.d.ts"
 }

package/sksl/AdvancedMosaic.sksl

@@ -0,0 +1,34 @@
+// AdvancedMosaic — 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
+
+uniform shader _from;
+uniform shader _to;
+uniform float2 _resolution;
+uniform float progress;
+uniform float ratio;
+
+vec4 getFromColor(vec2 uv) { return vec4(unpremul(_from.eval(vec2(uv.x, 1.0 - uv.y) * _resolution))); }
+vec4 getToColor(vec2 uv) { return vec4(unpremul(_to.eval(vec2(uv.x, 1.0 - uv.y) * _resolution))); }
+
+uniform float pixelSize; 
+
+vec4 transition(vec2 uv) {
+  float T = progress;
+  float half_ = 0.5;
+  float size = (T < half_) ? mix(1.0, pixelSize, T / half_) : mix(pixelSize, 1.0, (T - half_) / half_);
+  float D = size * 0.005;
+  
+  vec2 UV = (uv - 0.5) / D;
+  vec2 coord = clamp(D * (ceil(UV - 0.5)) + 0.5, 0.0, 1.0);
+  vec4 C0 = getFromColor(coord);
+  vec4 C1 = getToColor(coord);
+  return mix(C0, C1, T);
+}
+
+half4 main(float2 _coord) {
+  vec2 _uv = _coord / _resolution;
+  vec4 _c = clamp(transition(vec2(_uv.x, 1.0 - _uv.y)), 0.0, 1.0);
+  return half4(_c.rgb * _c.a, _c.a);
+}

package/sksl/BlockDissolve.sksl

@@ -0,0 +1,29 @@
+// BlockDissolve — 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
+
+uniform shader _from;
+uniform shader _to;
+uniform float2 _resolution;
+uniform float progress;
+uniform float ratio;
+
+vec4 getFromColor(vec2 uv) { return vec4(unpremul(_from.eval(vec2(uv.x, 1.0 - uv.y) * _resolution))); }
+vec4 getToColor(vec2 uv) { return vec4(unpremul(_to.eval(vec2(uv.x, 1.0 - uv.y) * _resolution))); }
+
+uniform float blocksize; 
+
+float rand(vec2 co) {
+  return fract(sin(dot(co, vec2(12.9898, 78.233))) * 43758.5453);
+}
+
+vec4 transition(vec2 uv) {
+  return mix(getFromColor(uv), getToColor(uv), step(rand(floor(uv / blocksize)), progress));
+}
+
+half4 main(float2 _coord) {
+  vec2 _uv = _coord / _resolution;
+  vec4 _c = clamp(transition(vec2(_uv.x, 1.0 - _uv.y)), 0.0, 1.0);
+  return half4(_c.rgb * _c.a, _c.a);
+}

package/sksl/BookFlip.sksl

@@ -0,0 +1,50 @@
+// BookFlip — 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
+
+uniform shader _from;
+uniform shader _to;
+uniform float2 _resolution;
+uniform float progress;
+uniform float ratio;
+
+vec4 getFromColor(vec2 uv) { return vec4(unpremul(_from.eval(vec2(uv.x, 1.0 - uv.y) * _resolution))); }
+vec4 getToColor(vec2 uv) { return vec4(unpremul(_to.eval(vec2(uv.x, 1.0 - uv.y) * _resolution))); }
+
+float nonZero(float x) {
+  return abs(x) < 1e-4 ? (x < 0.0 ? -1e-4 : 1e-4) : x;
+}
+
+vec2 skewRight(vec2 p) {
+  float skewX = (p.x - progress)/nonZero(0.5 - progress) * 0.5;
+  float skewY =  (p.y - 0.5)/(0.5 + progress * (p.x - 0.5) / 0.5)* 0.5  + 0.5;
+  return vec2(skewX, skewY);
+}
+
+vec2 skewLeft(vec2 p) {
+  float skewX = (p.x - 0.5)/nonZero(progress - 0.5) * 0.5 + 0.5;
+  float skewY = (p.y - 0.5) / (0.5 + (1.0 - progress ) * (0.5 - p.x) / 0.5) * 0.5  + 0.5;
+  return vec2(skewX, skewY);
+}
+
+vec4 addShade() {
+  float shadeVal  =  max(0.7, abs(progress - 0.5) * 2.0);
+  return vec4(vec3(shadeVal ), 1.0);
+}
+
+vec4 transition (vec2 p) {
+  float pr = step(1.0 - progress, p.x);
+
+  if (p.x < 0.5) {
+    return mix(getFromColor(p), getToColor(skewLeft(p)) * addShade(), pr);
+  } else {
+    return mix(getFromColor(skewRight(p)) * addShade(), getToColor(p),   pr);
+  }
+}
+
+half4 main(float2 _coord) {
+  vec2 _uv = _coord / _resolution;
+  vec4 _c = clamp(transition(vec2(_uv.x, 1.0 - _uv.y)), 0.0, 1.0);
+  return half4(_c.rgb * _c.a, _c.a);
+}

package/sksl/Bounce.sksl

@@ -0,0 +1,48 @@
+// Bounce — generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/Bounce.glsl
+// Author: Adrian Purser
+// License: MIT
+// Description: The outgoing image drops out of the frame with a few bounces, revealing the incoming one
+
+uniform shader _from;
+uniform shader _to;
+uniform float2 _resolution;
+uniform float progress;
+uniform float ratio;
+
+vec4 getFromColor(vec2 uv) { return vec4(unpremul(_from.eval(vec2(uv.x, 1.0 - uv.y) * _resolution))); }
+vec4 getToColor(vec2 uv) { return vec4(unpremul(_to.eval(vec2(uv.x, 1.0 - uv.y) * _resolution))); }
+
+uniform vec4 shadow_colour; 
+
+uniform float shadow_height; 
+
+uniform float bounces; 
+
+const float PI = 3.14159265358;
+
+vec4 transition (vec2 uv) {
+  float time = progress;
+  float stime = sin(time * PI / 2.);
+  float phase = time * PI * bounces;
+  float y = (abs(cos(phase))) * (1.0 - stime);
+  float d = uv.y - y;
+  return mix(
+    mix(
+      getToColor(uv),
+      shadow_colour,
+      step(d, shadow_height) * (1. - mix(
+        ((d / shadow_height) * shadow_colour.a) + (1.0 - shadow_colour.a),
+        1.0,
+        smoothstep(0.95, 1., progress) 
+      ))
+    ),
+    getFromColor(vec2(uv.x, uv.y + (1.0 - y))),
+    step(d, 0.0)
+  );
+}
+
+half4 main(float2 _coord) {
+  vec2 _uv = _coord / _resolution;
+  vec4 _c = clamp(transition(vec2(_uv.x, 1.0 - _uv.y)), 0.0, 1.0);
+  return half4(_c.rgb * _c.a, _c.a);
+}

package/sksl/BowTieHorizontal.sksl

@@ -0,0 +1,136 @@
+// BowTieHorizontal — generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/BowTieHorizontal.glsl
+// Author: huynx
+// License: MIT
+// Description: Two triangles grow from the left and right edges into a bow tie that reveals the incoming image
+
+uniform shader _from;
+uniform shader _to;
+uniform float2 _resolution;
+uniform float progress;
+uniform float ratio;
+
+vec4 getFromColor(vec2 uv) { return vec4(unpremul(_from.eval(vec2(uv.x, 1.0 - uv.y) * _resolution))); }
+vec4 getToColor(vec2 uv) { return vec4(unpremul(_to.eval(vec2(uv.x, 1.0 - uv.y) * _resolution))); }
+
+const vec2 bottom_left = vec2(0.0, 1.0);
+const vec2 bottom_right = vec2(1.0, 1.0);
+const vec2 top_left = vec2(0.0, 0.0);
+const vec2 top_right = vec2(1.0, 0.0);
+const vec2 center = vec2(0.5, 0.5);
+
+float check(vec2 p1, vec2 p2, vec2 p3)
+{
+  return (p1.x - p3.x) * (p2.y - p3.y) - (p2.x - p3.x) * (p1.y - p3.y);
+}
+
+bool PointInTriangle (vec2 pt, vec2 p1, vec2 p2, vec2 p3)
+{
+    bool b1, b2, b3;
+    b1 = check(pt, p1, p2) < 0.0;
+    b2 = check(pt, p2, p3) < 0.0;
+    b3 = check(pt, p3, p1) < 0.0;
+    return ((b1 == b2) && (b2 == b3));
+}
+
+bool in_left_triangle(vec2 p){
+  vec2 vertex1, vertex2, vertex3;
+  vertex1 = vec2(progress, 0.5);
+  vertex2 = vec2(0.0, 0.5-progress);
+  vertex3 = vec2(0.0, 0.5+progress);
+  if (PointInTriangle(p, vertex1, vertex2, vertex3))
+  {
+    return true;
+  }
+  return false;
+}
+
+bool in_right_triangle(vec2 p){
+  vec2 vertex1, vertex2, vertex3;
+  vertex1 = vec2(1.0-progress, 0.5);
+  vertex2 = vec2(1.0, 0.5-progress);
+  vertex3 = vec2(1.0, 0.5+progress);
+  if (PointInTriangle(p, vertex1, vertex2, vertex3))
+  {
+    return true;
+  }
+  return false;
+}
+
+float blur_edge(vec2 bot1, vec2 bot2, vec2 top, vec2 testPt)
+{
+  vec2 lineDir = bot1 - top;
+  vec2 perpDir = vec2(lineDir.y, -lineDir.x);
+  vec2 dirToPt1 = bot1 - testPt;
+  float dist1 = abs(dot(normalize(perpDir), dirToPt1));
+  
+  lineDir = bot2 - top;
+  perpDir = vec2(lineDir.y, -lineDir.x);
+  dirToPt1 = bot2 - testPt;
+  float min_dist = min(abs(dot(normalize(perpDir), dirToPt1)), dist1);
+  
+  if (min_dist < 0.005) {
+    return min_dist / 0.005;
+  }
+  else  {
+    return 1.0;
+  };
+}
+
+vec4 transition (vec2 uv) {
+  if (in_left_triangle(uv))
+  {
+    if (progress < 0.1)
+    {
+      return getFromColor(uv);
+    }
+    if (uv.x < 0.5)
+    {
+      vec2 vertex1 = vec2(progress, 0.5);
+      vec2 vertex2 = vec2(0.0, 0.5-progress);
+      vec2 vertex3 = vec2(0.0, 0.5+progress);
+      return mix(
+        getFromColor(uv),
+        getToColor(uv),
+        blur_edge(vertex2, vertex3, vertex1, uv)
+      );
+    }
+    else
+    {
+      if (progress > 0.0)
+      {
+        return getToColor(uv);
+      }
+      else
+      {
+        return getFromColor(uv);
+      }
+    }    
+  }
+  else if (in_right_triangle(uv))
+  {
+    if (uv.x >= 0.5)
+    {
+      vec2 vertex1 = vec2(1.0-progress, 0.5);
+      vec2 vertex2 = vec2(1.0, 0.5-progress);
+      vec2 vertex3 = vec2(1.0, 0.5+progress);
+      return mix(
+        getFromColor(uv),
+        getToColor(uv),
+        blur_edge(vertex2, vertex3, vertex1, uv)
+      );  
+    }
+    else
+    {
+      return getFromColor(uv);
+    }
+  }
+  else {
+    return getFromColor(uv);
+  }
+}
+
+half4 main(float2 _coord) {
+  vec2 _uv = _coord / _resolution;
+  vec4 _c = clamp(transition(vec2(_uv.x, 1.0 - _uv.y)), 0.0, 1.0);
+  return half4(_c.rgb * _c.a, _c.a);
+}

package/sksl/BowTieVertical.sksl

@@ -0,0 +1,130 @@
+// BowTieVertical — generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/BowTieVertical.glsl
+// Author: huynx
+// License: MIT
+// Description: Two triangles grow from the top and bottom edges into a bow tie that reveals the incoming image
+
+uniform shader _from;
+uniform shader _to;
+uniform float2 _resolution;
+uniform float progress;
+uniform float ratio;
+
+vec4 getFromColor(vec2 uv) { return vec4(unpremul(_from.eval(vec2(uv.x, 1.0 - uv.y) * _resolution))); }
+vec4 getToColor(vec2 uv) { return vec4(unpremul(_to.eval(vec2(uv.x, 1.0 - uv.y) * _resolution))); }
+
+float check(vec2 p1, vec2 p2, vec2 p3)
+{
+  return (p1.x - p3.x) * (p2.y - p3.y) - (p2.x - p3.x) * (p1.y - p3.y);
+}
+
+bool PointInTriangle (vec2 pt, vec2 p1, vec2 p2, vec2 p3)
+{
+    bool b1, b2, b3;
+    b1 = check(pt, p1, p2) < 0.0;
+    b2 = check(pt, p2, p3) < 0.0;
+    b3 = check(pt, p3, p1) < 0.0;
+    return ((b1 == b2) && (b2 == b3));
+}
+
+bool in_top_triangle(vec2 p){
+  vec2 vertex1, vertex2, vertex3;
+  vertex1 = vec2(0.5, progress);
+  vertex2 = vec2(0.5-progress, 0.0);
+  vertex3 = vec2(0.5+progress, 0.0);
+  if (PointInTriangle(p, vertex1, vertex2, vertex3))
+  {
+    return true;
+  }
+  return false;
+}
+
+bool in_bottom_triangle(vec2 p){
+  vec2 vertex1, vertex2, vertex3;
+  vertex1 = vec2(0.5, 1.0 - progress);
+  vertex2 = vec2(0.5-progress, 1.0);
+  vertex3 = vec2(0.5+progress, 1.0);
+  if (PointInTriangle(p, vertex1, vertex2, vertex3))
+  {
+    return true;
+  }
+  return false;
+}
+
+float blur_edge(vec2 bot1, vec2 bot2, vec2 top, vec2 testPt)
+{
+  vec2 lineDir = bot1 - top;
+  vec2 perpDir = vec2(lineDir.y, -lineDir.x);
+  vec2 dirToPt1 = bot1 - testPt;
+  float dist1 = abs(dot(normalize(perpDir), dirToPt1));
+  
+  lineDir = bot2 - top;
+  perpDir = vec2(lineDir.y, -lineDir.x);
+  dirToPt1 = bot2 - testPt;
+  float min_dist = min(abs(dot(normalize(perpDir), dirToPt1)), dist1);
+  
+  if (min_dist < 0.005) {
+    return min_dist / 0.005;
+  }
+  else  {
+    return 1.0;
+  };
+}
+
+vec4 transition (vec2 uv) {
+  if (in_top_triangle(uv))
+  {
+    if (progress < 0.1)
+    {
+      return getFromColor(uv);
+    }
+    if (uv.y < 0.5)
+    {
+      vec2 vertex1 = vec2(0.5, progress);
+      vec2 vertex2 = vec2(0.5-progress, 0.0);
+      vec2 vertex3 = vec2(0.5+progress, 0.0);
+      return mix(
+        getFromColor(uv),
+        getToColor(uv),
+        blur_edge(vertex2, vertex3, vertex1, uv)
+      );
+    }
+    else
+    {
+      if (progress > 0.0)
+      {
+        return getToColor(uv);
+      }
+      else
+      {
+        return getFromColor(uv);
+      }
+    }    
+  }
+  else if (in_bottom_triangle(uv))
+  {
+    if (uv.y >= 0.5)
+    {
+      vec2 vertex1 = vec2(0.5, 1.0-progress);
+      vec2 vertex2 = vec2(0.5-progress, 1.0);
+      vec2 vertex3 = vec2(0.5+progress, 1.0);
+      return mix(
+        getFromColor(uv),
+        getToColor(uv),
+        blur_edge(vertex2, vertex3, vertex1, uv)
+      );  
+    }
+    else
+    {
+      return getFromColor(uv);
+    }
+  }
+  else {
+    return getFromColor(uv);
+  }
+}
+
+half4 main(float2 _coord) {
+  vec2 _uv = _coord / _resolution;
+  vec4 _c = clamp(transition(vec2(_uv.x, 1.0 - _uv.y)), 0.0, 1.0);
+  return half4(_c.rgb * _c.a, _c.a);
+}

package/sksl/BowTieWithParameter.sksl

@@ -0,0 +1,88 @@
+// BowTieWithParameter — generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/BowTieWithParameter.glsl
+// Author: KMojek
+// License: MIT
+// Description: A bow-tie wipe with an adjustable shape that can run in reverse
+
+uniform shader _from;
+uniform shader _to;
+uniform float2 _resolution;
+uniform float progress;
+uniform float ratio;
+
+vec4 getFromColor(vec2 uv) { return vec4(unpremul(_from.eval(vec2(uv.x, 1.0 - uv.y) * _resolution))); }
+vec4 getToColor(vec2 uv) { return vec4(unpremul(_to.eval(vec2(uv.x, 1.0 - uv.y) * _resolution))); }
+
+uniform float adjust; 
+
+uniform int reverse; 
+
+float check(vec2 p1, vec2 p2, vec2 p3)
+{
+  return (p1.x - p3.x) * (p2.y - p3.y) - (p2.x - p3.x) * (p1.y - p3.y);
+}
+
+bool pointInTriangle(vec2 pt, vec2 p1, vec2 p2, vec2 p3)
+{
+
+    bool b1 = check(pt, p1, p2) < 0.0;
+    bool b2 = check(pt, p2, p3) < 0.0;
+    bool b3 = check(pt, p3, p1) < 0.0;
+    return b1 == b2 && b2 == b3;
+}
+
+const float height = 0.5;
+
+vec4 transition_firstHalf( vec2 uv, float prog )
+{
+  if ( uv.y < 0.5 )
+  {
+    vec2 botLeft = vec2( -0., prog-height );
+    vec2 botRight = vec2( 1., prog-height );
+    vec2 tip = vec2( adjust, prog );
+    if ( pointInTriangle( uv, botLeft, botRight, tip ) )
+        return getToColor(uv);
+    }
+  else
+  {
+    vec2 topLeft = vec2( -0., 1.-prog+height );
+    vec2 topRight = vec2( 1., 1.-prog+height );
+    vec2 tip = vec2( adjust, 1.-prog );
+    if ( pointInTriangle( uv, topLeft, topRight, tip ) )
+      return getToColor( uv );
+  }
+  return getFromColor( uv );
+}
+
+vec4 transition_secondHalf( vec2 uv, float prog )
+{
+  if ( uv.x > adjust )
+  {
+    vec2 top = vec2( prog + height,  1. );
+    vec2 bot = vec2( prog + height, -0. );
+    vec2 tip = vec2( mix( adjust, 1.0, 2.0 * (prog - 0.5) ), 0.5 );
+    if ( pointInTriangle( uv, top, bot, tip) )
+      return getFromColor( uv );
+  }
+  else
+  {
+    vec2 top = vec2( 1.0-prog - height,  1. );
+    vec2 bot = vec2( 1.0-prog - height, -0. );
+    vec2 tip = vec2( mix( adjust, 0.0, 2.0 * (prog - 0.5)  ), 0.5 );
+    if ( pointInTriangle( uv, top, bot, tip) )
+      return getFromColor( uv );
+  }
+  return getToColor( uv );
+}
+
+vec4 transition (vec2 uv) {
+  if ( (reverse != 0) )
+    return ( progress < 0.5 ) ? transition_secondHalf( uv, 1.-progress ) : transition_firstHalf( uv, 1.-progress );
+  else
+    return ( progress < 0.5 ) ? transition_firstHalf( uv, progress ) : transition_secondHalf( uv, progress );
+}
+
+half4 main(float2 _coord) {
+  vec2 _uv = _coord / _resolution;
+  vec4 _c = clamp(transition(vec2(_uv.x, 1.0 - _uv.y)), 0.0, 1.0);
+  return half4(_c.rgb * _c.a, _c.a);
+}

package/sksl/Box.sksl

@@ -0,0 +1,47 @@
+// Box — generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/Box.glsl
+// Author: lql
+// License: MIT
+// Description: The outgoing image shrinks into a box, toward the center or a corner, revealing the incoming one
+
+uniform shader _from;
+uniform shader _to;
+uniform float2 _resolution;
+uniform float progress;
+uniform float ratio;
+
+vec4 getFromColor(vec2 uv) { return vec4(unpremul(_from.eval(vec2(uv.x, 1.0 - uv.y) * _resolution))); }
+vec4 getToColor(vec2 uv) { return vec4(unpremul(_to.eval(vec2(uv.x, 1.0 - uv.y) * _resolution))); }
+
+uniform int rectIn; 
+
+uniform int location; 
+
+vec4 transition(vec2 uv) {
+    float p = rectIn == 1 ? 1.0 - progress : progress;
+    float x1, y1, x2, y2;
+
+    
+    if (location == 0) {
+        x1 = y1 = 0.5 * (1.0 - p);
+        x2 = y2 = 1.0 - x1;
+    } else {
+        
+        x1 = (location == 1 || location == 2) ? 0.0 : 1.0 - p;
+        y1 = (location == 1 || location == 3) ? 1.0 - p : 0.0;
+        x2 = (location == 1 || location == 2) ? p : 1.0;
+        y2 = (location == 1 || location == 3) ? 1.0 : p;
+    }
+
+    
+    float in_rect = step(x1, uv.x) * step(uv.x, x2) * step(y1, uv.y) * step(uv.y, y2);
+    in_rect = rectIn == 1 ? 1.0 - in_rect : in_rect;
+
+    
+    return mix(getFromColor(uv), getToColor(uv), in_rect);
+}
+
+half4 main(float2 _coord) {
+  vec2 _uv = _coord / _resolution;
+  vec4 _c = clamp(transition(vec2(_uv.x, 1.0 - _uv.y)), 0.0, 1.0);
+  return half4(_c.rgb * _c.a, _c.a);
+}

package/sksl/ButterflyWaveScrawler.sksl

@@ -0,0 +1,48 @@
+// ButterflyWaveScrawler — generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/ButterflyWaveScrawler.glsl
+// Author: mandubian
+// License: MIT
+// Description: Wavy, color-separated ripples scramble the outgoing image into the incoming one
+
+uniform shader _from;
+uniform shader _to;
+uniform float2 _resolution;
+uniform float progress;
+uniform float ratio;
+
+vec4 getFromColor(vec2 uv) { return vec4(unpremul(_from.eval(vec2(uv.x, 1.0 - uv.y) * _resolution))); }
+vec4 getToColor(vec2 uv) { return vec4(unpremul(_to.eval(vec2(uv.x, 1.0 - uv.y) * _resolution))); }
+
+uniform float amplitude; 
+uniform float waves; 
+uniform float colorSeparation; 
+const float PI = 3.14159265358979323846264;
+float compute(vec2 p, float progress, vec2 center) {
+vec2 o = p*sin(progress * amplitude)-center;
+
+vec2 h = vec2(1., 0.);
+
+float theta = acos(dot(o, h)) * waves;
+float s = sin((2.*theta - PI) / 24.);
+float s2 = s * s;
+return (exp(cos(theta)) - 2.*cos(4.*theta) + s2 * s2 * s) / 10.;
+}
+vec4 transition(vec2 uv) {
+  if (progress <= 0.0) return getFromColor(uv);
+  if (progress >= 1.0) return getToColor(uv);
+  vec2 p = uv;
+  float inv = 1. - progress;
+  float disp = compute(p, progress, vec2(0.5, 0.5));
+  vec4 texTo = getToColor(p + inv*disp);
+  vec4 texFrom = vec4(
+    getFromColor(p + progress*disp*(1.0 - colorSeparation)).r,
+    getFromColor(p + progress*disp).g,
+    getFromColor(p + progress*disp*(1.0 + colorSeparation)).b,
+    1.0);
+  return texTo*progress + texFrom*inv;
+}
+
+half4 main(float2 _coord) {
+  vec2 _uv = _coord / _resolution;
+  vec4 _c = clamp(transition(vec2(_uv.x, 1.0 - _uv.y)), 0.0, 1.0);
+  return half4(_c.rgb * _c.a, _c.a);
+}

package/sksl/CircleCrop.sksl

@@ -0,0 +1,32 @@
+// CircleCrop — generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/CircleCrop.glsl
+// Author: fkuteken
+// License: MIT
+// Description: The outgoing image closes into a circle over a background color, then the incoming one opens from it
+
+uniform shader _from;
+uniform shader _to;
+uniform float2 _resolution;
+uniform float progress;
+uniform float ratio;
+
+vec4 getFromColor(vec2 uv) { return vec4(unpremul(_from.eval(vec2(uv.x, 1.0 - uv.y) * _resolution))); }
+vec4 getToColor(vec2 uv) { return vec4(unpremul(_to.eval(vec2(uv.x, 1.0 - uv.y) * _resolution))); }
+
+uniform vec4 bgcolor; 
+
+vec4 transition(vec2 p) {
+  vec2 ratio2 = vec2(1.0, 1.0 / ratio);
+  float s = pow(2.0 * abs(progress - 0.5), 3.0);
+  float dist = length((vec2(p) - 0.5) * ratio2);
+  return mix(
+    progress < 0.5 ? getFromColor(p) : getToColor(p), 
+    bgcolor,
+    step(s, dist)
+  );
+}
+
+half4 main(float2 _coord) {
+  vec2 _uv = _coord / _resolution;
+  vec4 _c = clamp(transition(vec2(_uv.x, 1.0 - _uv.y)), 0.0, 1.0);
+  return half4(_c.rgb * _c.a, _c.a);
+}

package/sksl/ColourDistance.sksl

@@ -0,0 +1,32 @@
+// ColourDistance — generated from https://github.com/gl-transitions/gl-transitions/blob/master/transitions/ColourDistance.glsl
+// Author: P-Seebauer
+// License: MIT
+// Description: Pixels switch to the incoming image in order of how close their colors are
+
+uniform shader _from;
+uniform shader _to;
+uniform float2 _resolution;
+uniform float progress;
+uniform float ratio;
+
+vec4 getFromColor(vec2 uv) { return vec4(unpremul(_from.eval(vec2(uv.x, 1.0 - uv.y) * _resolution))); }
+vec4 getToColor(vec2 uv) { return vec4(unpremul(_to.eval(vec2(uv.x, 1.0 - uv.y) * _resolution))); }
+
+uniform float power; 
+
+vec4 transition(vec2 p) {
+  vec4 fTex = getFromColor(p);
+  vec4 tTex = getToColor(p);
+  float m = step(distance(fTex, tTex), progress);
+  return mix(
+    mix(fTex, tTex, m),
+    tTex,
+    pow(progress, power)
+  );
+}
+
+half4 main(float2 _coord) {
+  vec2 _uv = _coord / _resolution;
+  vec4 _c = clamp(transition(vec2(_uv.x, 1.0 - _uv.y)), 0.0, 1.0);
+  return half4(_c.rgb * _c.a, _c.a);
+}