Particle and transition effects compared (including GL Transitions)
Layer: Effects. In the list: tsParticles and GL Transitions. Alternatives: Three.js particle systems and FFmpeg’s xfade transitions. Part of Open-source motion studio: 20 repos. Checked 2026-10-27.
GL Transitions is covered here rather than in its own note (a merge, recorded in the hub): it is a collection of shader functions, and the details worth knowing fit in this section.
GL Transitions in brief
An open collection of 100+ transitions between two images, written by the community as small GLSL functions following one specification, and translated to SkSL, GLSL ES 3.00, WGSL, Metal and AGSL (README). Packages exist for any JavaScript (gl-transitions), WebGL/regl/gl-react and command-line video rendering (gl-transition and related libraries), React Native Skia, Remotion (@gl-transitions/remotion), Apple platforms, Android 13+, and Rust. CI compiles each translation and a compatibility.json in the npm package reports results per transition and target. It ships an llms.txt and an Agent Skill. License: MIT (LICENSE; GitHub shows “Other”). Latest release gl-transitions@2.0.0, 2026-10-25; repo pushed the same day; not archived. Browse at gl-transitions.com.
Comparison
| tsParticles | GL Transitions | Three.js particles | FFmpeg xfade | |
|---|---|---|---|---|
| Does | Canvas particle effects from a config object | Shader transitions between two images | Particles inside a 3D scene | Transitions between two video clips, at encode time |
| Input | Options object | GLSL function + two textures | Code | Filter arguments on the command line |
| Runtime | Browser | WebGL and others (see above) | Browser GPU | Native, headless |
| License | MIT | MIT | MIT ([[three-dot-js | Three.js]]) |
| Fit for video pipelines | Needs a host that steps time | Ready-made Remotion package; HyperFrames lists shader-transition blocks in its catalog | Same as Three.js | Strong: no browser needed |
Which one when
- Decorative particles from a config (confetti, snow, links): tsParticles.
- A wide choice of shader transitions in a browser or Remotion pipeline: GL Transitions.
- A transition during final assembly with no browser: FFmpeg
xfade; see the FFmpeg filter documentation for its transition list. - Particles that must live in 3D with real lighting: Three.js.
- HyperFrames: check its catalog (
npx hyperframes add flash-through-whiteis an example from the README) before hand-building either.