Built-in presets · Vanilla Disintegrate

On this page

Each built-in preset is ready to use: it contains removal and restoration animations plus matching audio for both phases. In built-in presets, restoration plays the same sound backwards. A custom configuration can use different sounds for removal and restoration.

The four presets

Name	Remove	Restore	Duration
`dust`	The element breaks into rising dust.	Dust collects into the element’s final geometry.	850 ms
`scatter`	Fine fragments dissolve left to right and drift with an upward bias.	Fragments gather from the same scattered field.	1100 ms
`vapor`	The surface lifts from the top into a fast, shrinking plume.	A narrowing vapor stream condenses into the visible element.	750 ms
`wind`	A long stream carries particles sideways.	The same stream returns them from its direction.	2075 ms

remove() selects the removal phase and restore() selects the restoration phase. The preset’s audio is enabled automatically and is aligned with the chosen visual.

effects.remove(card, { preset: 'dust' });
effects.restore(card, { preset: 'dust' });

effects.remove(card, { preset: 'scatter' });
effects.restore(card, { preset: 'scatter' });

effects.remove(card, { preset: 'vapor' });
effects.restore(card, { preset: 'vapor' });

effects.remove(card, { preset: 'wind' });
effects.restore(card, { preset: 'wind' });

Select an instance preset

The constructor requires one preset or one custom effect. A single operation can select another complete preset:

const effects = new Disintegrator({
  preset: 'vapor',
});

effects.remove(firstElement); // vapor
effects.remove(secondElement, { preset: 'scatter' });
effects.restore(insertedElement, { preset: 'wind' });

Restore with the remembered preset

When a retained node is taken and inserted again, restore() recovers the complete preset chosen during removal, including its restoration sound.

const removal = effects.remove(card, {
  preset: 'wind',
  retain: true,
});

await removal.finished;

const retained = effects.take(removal.removalId!);
if (retained) {
  list.prepend(retained);
  await effects.restore(retained).finished; // wind restoration
}

Pass preset to restore() when a different complete preset is intentional. Passing an inline effect instead selects custom visuals and is silent unless that operation also provides its own sound.

Mute a preset

Built-in audio requires no flag. To keep the preset animation but silence an instance or one operation, pass sound: false:

const silent = new Disintegrator({ preset: 'dust', sound: false });

effects.remove(card, { preset: 'vapor', sound: false });

A preset is intentionally atomic: its animation and audio are synchronized in advance. Replacing only one half would likely break that timing, so a preset cannot be combined with another visual effect or different audio. For built-in particle motion with custom sound, use the preset’s effect as a custom effect and provide an explicit sound pair.

Edit this page on GitHub