xfade transitions & custom shaders

xfade basics

An xfade transition requires the two clips to overlap in time. The overlap region becomes the transition duration.

1. Place two clips on the same track and drag the second one to overlap the first.
2. Click the overlap region; a transition menu appears. Pick a preset or type "fadeblack for 1 s" in the chat.
3. Play to check. Typical durations are 0.1 – 5 seconds.

Preset catalog

Major xfade presets supported by FFmpeg. Use the name verbatim in chat.

• fade · fadeblack · fadewhite — clean dissolves
• wipeleft / wiperight / wipeup / wipedown — directional wipes
• slideleft / slideright / slideup / slidedown — push transitions
• circleopen / circleclose — circular masks
• pixelize — pixelated transition
• radial — radial sweep
• hblur / vblur — blur before swap

Custom GLSL shaders

If presets are not enough, register your own shader in src/Bom.Ag/tools/video-editor/xfade-shaders.js.

// xfade-shaders.js
export const myShaders = {
  brightnessFlash: {
    name: "Brightness Flash",
    fragment: `
      uniform float progress;
      uniform sampler2D from;
      uniform sampler2D to;
      varying vec2 vUv;
      void main() {
        vec4 a = texture2D(from, vUv);
        vec4 b = texture2D(to, vUv);
        float flash = smoothstep(0.4, 0.6, progress);
        gl_FragColor = mix(a, b, progress) + vec4(flash);
      }`
  }
};

• progress — 0.0 (from clip) → 1.0 (to clip) over time
• from / to — the two clip texture samplers
• vUv — normalized screen coords (0–1)
• ratio — aspect ratio (optional)

Export pipeline

Presets translate directly to FFmpeg xfade filters. Custom shaders are off-screen rendered to a PNG sequence and fed back to FFmpeg as an input video.