snap-vanish

Disintegrate any DOM node into drifting dust — inspired by a certain snap. snapVanish(element, options?) is promise-based, uses canvas particles and getComputedStyle for tinting (no html2canvas). Zero dependencies.

Live Demo →

Why

Delete confirmations are boring. A satisfying “turn to dust” moment makes removals feel intentional — without pulling in html2canvas or a physics engine. Dust color comes from getComputedStyle on the element (and visible descendant paints); there is no separate exported color helper. Particles drift on a fixed canvas, and the Promise resolves when the show is over.

Install

npm install snap-vanish

Quick start

import { snapVanish } from 'snap-vanish';

document.querySelector('#delete-me')?.addEventListener('click', async (e) => {
  const el = e.currentTarget as HTMLElement;
  await snapVanish(el, { duration: 1600, particles: 40 });
  console.log('gone');
});

API

snapVanish(element, options?)

| Option | Type | Default | Description | |--------|------|---------|-------------| | duration | number | 1500 | Animation length in ms | | particles | number | 30 | Particle count | | removeElement | boolean | true | Remove node from DOM when done (if false, hides with display: none when not removing) | | onComplete | function | — | Sync callback after finish | | seed | number | — | Optional PRNG seed (tests / deterministic replays) |

Returns Promise<void>.

Notes

• Positioning: Uses a fixed canvas aligned to the element’s bounding box. Original element is hidden for the duration, then removed or hidden.
• Colors: From getComputedStyle (backgroundColor, color, borderColor) on the target and similar reads on descendants — no pixel readback or public sampleColors API, so it stays tiny.
• SSR: Resolves immediately if document / window are unavailable.

Bundle size: ~1.5 kB minified + gzip (see bundlephobia).

License

MIT © Everything Frontend