@hyperframes/shader-transitions

Tools · A cut between two pictures · Apache-2.0

What it does

A small library of 14 WebGL scene-to-scene transitions driven by a GSAP timeline: domain-warp, ridged-burn, whip-pan, sdf-iris, ripple-waves, gravitational-lens, cinematic-zoom, chromatic-split, glitch, swirl-vortex, thermal-distortion, flash-through-white, cross-warp-morph, light-leak. One call, init({scenes, transitions:[{time, shader, duration}]}). README read; not tried through the package (one demo block rendered).

Get it

npm install @hyperframes/shader-transitions, or the script tag from jsDelivr, then init({...}) in the composition. The 14 matching registry blocks are demo cards of the same shaders.

Source on GitHub
Needs

WebGL in the render browser (software GL worked for the demo block)

License

Apache-2.0

License notes are on the pack's page

From

HyperFrames

Everything from HyperFrames in the gallery

Back to the Asset Library