Vanilla Disintegrate · Particle effects for removing and restoring DOM elements

A TypeScript library for animated removal and restoration of DOM elements, with built-in GPU-accelerated WebGL2 particle effects inspired by the famous Thanos snap. Compatible with native JavaScript and any framework.

npm install vanilla-disintegrate @zumer/snapdom

Build an effect in the playground

Interactive playground

Create your effect

Start from a preset, tune removal and restoration separately, preview both directions, and copy ready-to-use TypeScript.

Ready-made effects

Animation

Particle laboratory

Shape the motion

DOM elementWebGL2

import Disintegrator from 'vanilla-disintegrate/snapdom';

export const disintegrator = new Disintegrator({
  preset: 'dust',
});

Preparing snapshot…

CurveChanges how particles accelerate and fade without changing where they travel.

DirectionDetermines which part of the element starts disintegrating first.

DurationBase lifetime of the particle animation. Longer values make the effect feel slower.

StaggerMaximum spread between the first and last particle start times.

Release randomnessBlends the selected release pattern with a fully random order.

Fade startPoint in each particle lifetime at which fading begins.

Layout handoffShare of particles released before the surrounding layout moves.

Documentation

Bring it into your project

Start with installation and a built-in preset, then add restoration, undo, background preparation, or a custom renderer.

01Built-in presetsChoose complete removal, restoration, and matching audio.Open guide →02Restore and undoRetain a removed node and put the same DOM element back.Open guide →03Custom effectsBuild both phases with WAAPI, Canvas, WebGL, or your own renderer.Open guide →04FrameworksConnect the lifecycle safely to React, Vue, Svelte, Solid, or Angular.Open guide →

Click the headingModern, striking,versatile, and CSS-free

Create your effect

Shape the motion

Bring it into your project