NarraLeaf

VfxConfig

The configuration for a `Vfx` overlay: video source, blend mode, loop and mute behavior, opacity, playback rate, fit, and stacking order.

type VfxConfig = {
    src: string;
    blendMode: VfxBlendMode;
    loop: boolean;
    muted: boolean;
    opacity: number;
    playbackRate: number;
    fit: "cover" | "contain" | "fill";
    zIndex: number;
};

type VfxBlendMode =
    | "normal"
    | "screen"
    | "multiply"
    | "lighten"
    | "color-dodge"
    | "overlay";
  • src — the video URL. Required.
  • blendMode — how the overlay is composited onto the stage. Default "normal". "normal" is for true-alpha material (VP9 yuva420p alpha WebM); "screen" is additive blending for glow material rendered on a black background (dark pixels wash out on bright backdrops); "multiply" is for shadow material rendered on a white background. Values other than "normal" take effect since 0.31.4.
  • loop — loop playback. Default true.
  • muted — default true. Unmuted autoplay may be rejected by the browser.
  • opacity — the overlay's target opacity (the fade-in end value). Default 1.
  • playbackRate — initial playback speed. Default 1.
  • fit — CSS object-fit for the video. Default "cover".
  • zIndex — ordering between multiple Vfx overlays. Default 0.

See Vfx.