Slideshows & hero rotators
Pair with @vysmo/slideshow for declarative timing
and gesture support. Or roll your own — the runner is thin enough
to drop into any state machine.
@vysmo/transitions Library Canvas
Transitions for the modern web.
60 WebGL2 shaders, defined as plain data. Tree-shakable to the byte. Endpoint-correct by construction. Zero runtime dependencies.
- 60 transitions
- ~5 KB gzipped
- 0 runtime deps
- SSR-safe at import
$ pnpm add @vysmo/transitions View on GitHub Don’t see what you need?
Request a transition
Tell us what you have in mind — a look, a reference, a vibe — and we’ll consider it for the next batch.
Install & render in 30 seconds
Every transition is plain data. Pass it to Runner.render()
on each frame.
1. Install
pnpm add @vysmo/transitions @vysmo/animations npm install @vysmo/transitions @vysmo/animations yarn add @vysmo/transitions @vysmo/animations 2. Run a single transition
import { Runner, paintBleed } from "@vysmo/transitions";
import { animate } from "@vysmo/animations";
const canvas = document.querySelector("canvas")!;
const runner = new Runner({ canvas });
animate({
from: 0,
to: 1,
duration: 1300,
onUpdate: (p) => runner.render(
paintBleed,
{ from, to, progress: p },
),
});3. Override params
runner.render(paintBleed, {
from, to, progress: p,
params: {
softness: 0.04,
noiseStrength: 0.6,
},
});Built for
Page & route transitions
Snapshot your page to a canvas, swap, run a transition. Works alongside the View Transitions API as a fallback or a richer replacement.
Image galleries & lightboxes
Crossfades that don’t feel like 2008. Tree-shaking means you only ship the shaders you actually use.
Video editors & timelines
Scrubbable transitions in browser-based editors. Pass any
progress value — the same shader serves preview,
render, and export.
Scroll-driven storytelling
Drive progress off scroll position with
@vysmo/scroll for cinematic section changes.
Custom shader research
Use defineTransition as the GLSL shell. Skip the
plumbing and focus on the math.