Remotion's transition system just got a serious upgrade. The @remotion/transitions package now supports HTML-in-canvas presentations, which means you can write WebGL fragment shaders that blend two full React scenes together, pixel by pixel, during a transition. This is a fundamentally different capability from what was possible before.
The old ceiling
Until now, Remotion's built-in transition presentations were all CSS-based: slides, wipes, flips, fades. CSS is great for layout-driven animations, but it hits a hard wall when you want effects that require per-pixel blending, like a ripple distortion, a zoom blur, or a film burn that mixes the outgoing and incoming scenes at the fragment level. Those effects simply cannot be expressed as CSS transforms or opacity changes.
The new HTML-in-canvas presentations remove that ceiling entirely.
How it actually works
Remotion captures both scenes via captureElementImage() and passes them to your shader as two ElementImage handles (prevImage and nextImage) along with the transition time (0 to 1). Your shader uploads them as textures via drawElementImage() and writes the blended result to an offscreen WebGL2 canvas, which Remotion then composites into the frame.
You implement a single function, HtmlInCanvasShader<Props>, and pass it to makeHtmlInCanvasPresentation() to get back a TransitionPresentation constructor.
That constructor slots directly into the existing <TransitionSeries> API, so nothing about how you sequence scenes changes.
Here is the minimal crossfade shader to get a feel for the shape of the API:
Don't miss what's next in AI
Join 300,000+ engineers and researchers who get the signal, not the noise.
- Full access to in-depth AI research breakdowns
- Be the first to know what's trending before it hits mainstream
- Daily curated papers, repos, and industry moves