Shader transitions

A shader transition changes one shot into the next with a WebGL effect instead of a plain cut. The shader runtime comes from Framey. An agent uses it from an HTML scene with vfrey.transition. Shader transitions are for HTML scenes, which run on vfrey-framey or hyperframes. A Remotion scene (index.tsx) does not support them. If a Remotion scene uses one, the render stops with a Fix: line that says to use an HTML scene, or to build the transition in React with Remotion’s own interpolate(). See Scenes.

List the types

npx vfrey scene transitions
npx vfrey scene transitions --json

Type	Look	Needs WebGL
`crossfade`	Plain dissolve, no shader.	No
`cross-warp-morph`	Noise-driven morph that blends both shots. This is the default.	Yes
`domain-warp`	Organic noise warp with a glowing edge.	Yes
`ridged-burn`	Ridged-noise burn with sparks and heat glow.	Yes
`whip-pan`	Horizontal motion blur, a fast camera pan.	Yes
`sdf-iris`	Circular iris wipe with a glowing ring.	Yes
`ripple-waves`	Concentric ripples from the center.	Yes
`gravitational-lens`	Gravity-well warp with chromatic aberration.	Yes
`cinematic-zoom`	Radial zoom blur with colored fringing.	Yes
`chromatic-split`	RGB channels separate from the center.	Yes
`glitch`	Digital glitch: block displacement and scanlines.	Yes
`swirl-vortex`	Spiral rotation with a noisy warp.	Yes
`thermal-distortion`	Heat shimmer rising from the bottom.	Yes
`flash-through-white`	Flash to white, then the next shot.	Yes
`light-leak`	Warm light leak with a lens flare.	Yes

There are 15 types. --json also says which engines support them: vfrey-framey and hyperframes do, remotion does not.

Use one

Make two shots that each fill the frame and sit on top of each other inside #root. Load the transitions file before vfrey.js, then call vfrey.transition.

<script src="vfrey/gsap.min.js"></script>
<script src="vfrey/transitions.js"></script>
<script src="vfrey/vfrey.js"></script>
<script>
  const tl = vfrey.timeline();
  vfrey.transition("#intro", "#demo", { type: "glitch", at: 3.2, duration: 0.6 });
</script>

vfrey writes vfrey/transitions.js into every HTML scene with the other supplied files, so there is nothing to install.

Argument	What it is
`from`, `to`	The two shots, as a selector or an element. At `at` seconds, `from` becomes `to`.
`type`	One of the types above. The default is `cross-warp-morph`. A wrong name throws an error that lists the types and suggests the closest one.
`at`	The start, in seconds.
`duration`	How long it lasts. The default is 0.7 seconds.
`ease`	A GSAP ease. The default is `power2.inOut`.
`accent`, `background`	Optional hex colors for the effect.

Calls chain: each from is the previous call’s to, and the calls can be made in any order. A scene with three shots uses two calls. The result is seekable and the same on every render, so render --frame works.

Do not confuse this with the transition category of scene blocks. Those are overlay pieces, like a tiled word wall. A shader transition is a function call between two shots of your own.

For agents

Run npx vfrey scene transitions for the types. Do not guess a name.
Use one or two transitions in a short. Pick a type that fits the idea.
Look at a frame inside a transition with render --frame, which renders the transition, not the stacked shots.
Never use it in a Remotion scene. Switch the scene to HTML, or write the effect in React.

Getting Started

Commands

Concepts

Paid features

Teams and cloud

Reference

Resources

Shader transitions

List the types

Use one

For agents

​List the types

​Use one

​For agents

List the types

Use one

For agents