Example

Snapshot blend

Two captured snapshots, one Parameter, interpolated mix per frame. The full vanilla source is on GitHub.

Click Unlock & start to load two music layers and begin looping them. Now drag the slider. Every change calls engine.blendSnapshots(calm, combat, t), which snaps the live mix to lerp(calm, combat, t). The music bus fades in and the drums bus comes up, both from the one knob.

How it's wired

snapshot-blend (excerpt) ts
// Capture two mix shapes — calm and combat.
engine.bus('music').level = 0.6;
engine.bus('drums').level = 0.0;
const calm = engine.captureSnapshot('calm');

engine.bus('music').level = 0.25;
engine.bus('drums').level = 0.85;
const combat = engine.captureSnapshot('combat');

// Drive blendSnapshots from a Parameter; the slider feeds 'tension'.
const tension = engine.parameter('tension', 0);
tension.subscribe((t) => engine.blendSnapshots(calm, combat, t));

slider.addEventListener('input', () => tension.set(Number(slider.value)));

The vanilla version of this demo lives at examples/snapshot-blend/. It is a zero-build index.html and main.ts pair you can deploy as it stands.

Related