Repolode
Submit
gl-transitions

gl-transitions/gl-transitions

An open collection of 100+ community-written GLSL transitions between two images, usable on the web, mobile, Apple, Android, Rust and video tools.

View on GitHubWebsite
Stars
2,235
Forks
331
Open issues
2
Last commit
2 hours ago

What is it?

GL Transitions is a collection of transitions that animate between two images. Each transition is a small GLSL function written against a shared specification, so one effect can be reused across different rendering environments without being rewritten.

The collection is translated to SkSL, GLSL ES 3.00, WGSL, Metal and AGSL, which covers WebGL pages, React Native Skia, Remotion, Apple video compositions, Android apps and Rust renderers. Continuous integration compiles every translation and compares the rendered output with the original GLSL, and the npm package includes a compatibility table per transition and target.

Developers can install the sources through npm, Swift Package Manager, Gradle or Cargo, and contributors can write and preview new transitions in an online editor before opening a pull request.

Key features

  • 01Over 100 transitions, each a single GLSL function with adjustable parameters.
  • 02Translations for SkSL, GLSL ES 3.00, WGSL, Metal and AGSL.
  • 03Packages for npm, Swift, Android, Rust and Remotion, plus React Native Skia support.
  • 04Automated tests compare rendered output across targets against the GLSL original.
  • 05Live browsing and editing at gl-transitions.com.

Use cases

  • Adding slide, wipe or zoom transitions to a web slideshow with WebGL.
  • Building transitions between clips in a Remotion video project.
  • Rendering image transitions in a React Native app with Skia.
  • Creating video transitions in an FFmpeg or command-line rendering pipeline.

Quick start

  1. 1

    Install the gl-transitions npm package

    npm install gl-transitions
  2. 2

    Browse and preview the transitions at gl-transitions.com

Things to know

  • Each transition is a GLSL snippet, so your host application must supply the WebGL or other shader runtime.
  • Most transitions are MIT, but each carries its own license and two are under BSD licenses.

Topics

#glsl#webgl#transitions#shaders#animation#video#graphics#transition

FAQ

What is gl-transitions?
An open collection of 100+ community-written GLSL transitions between two images, usable on the web, mobile, Apple, Android, Rust and video tools. GL Transitions is a collection of transitions that animate between two images. Each transition is a small GLSL function written against a shared specification, so one effect can be reused across different rendering environments without being rewritten.
Is gl-transitions free to use? What license does it have?
gl-transitions is open source under the Other license. Check the license terms before using it in commercial products.
Is gl-transitions still maintained?
Actively maintained. The last commit to gl-transitions was on Nov 7, 2026.
What can I use gl-transitions for?
Adding slide, wipe or zoom transitions to a web slideshow with WebGL. Building transitions between clips in a Remotion video project. Rendering image transitions in a React Native app with Skia. Creating video transitions in an FFmpeg or command-line rendering pipeline.
How do I install gl-transitions?
Install the gl-transitions npm package: npm install gl-transitions Browse and preview the transitions at gl-transitions.com
Where can I get gl-transitions?
The source code and installation instructions are on GitHub: https://github.com/gl-transitions/gl-transitions

Summary generated by AI from the project's README. GitHub stats refresh daily.

Related projects