Scene transitions for smoove. Blend one scene into the next with cross-fades, slides, wipes, and WebGL shader effects.
A transition overlaps the end of one scene with the start of the next while
a presentation mixes them. You build them with TransitionSeries, which
plays scenes in order and overlaps each pair where they meet; comp.add(series)
expands the whole thing into one Sequence per scene.
pnpm add konva @smoove/core @smoove/transitionskonva and @smoove/core are peer dependencies.
import { Composition } from "@smoove/core";
import { fade, linearTiming, TransitionSeries } from "@smoove/transitions";
const comp = new Composition({ id: "intro", fps: 60, durationInFrames: 200, width: 1280, height: 720 });
const series = new TransitionSeries({ composition: comp });
series.scene({ durationInFrames: 80 }, (seq) => seq.add(sceneA));
series.transition({ presentation: fade(), timing: linearTiming({ durationInFrames: 20 }) });
series.scene({ durationInFrames: 80 }, (seq) => seq.add(sceneB));
comp.add(series);Geometric presentations run on Konva transforms, so they work everywhere
the player does and render headlessly with no extra setup: fade, slide,
wipe, clockWipe, iris, flip, none.
Shader presentations run on WebGL2 fragment shaders in the browser and
fall back to fade() without it: dissolve, crosswarp, crossZoom, and more. To
render them headlessly, import @smoove/renderer/gl before building the
composition.
Two timings drive any presentation: linearTiming and springTiming.
Full documentation, including the complete presentation catalog, lives at smoove.dev.
MIT