react-vanish-box

A React / Next.js component that dissolves any element — a box, a card, your own custom design — into animated particles, "Thanos snap" style.

• Works with any JSX children (not just a fixed box). Whatever you render inside <VanishBox> is what vanishes — text, images, icons, buttons, all of it.
• Two vanish modes: sweep (left → right wipe) or instant (the whole element fragments and fades all at once).
• Adjustable speed.
• Ships as a functional component with hooks — no classes, fully typed (TypeScript .d.ts included).
• Zero runtime dependencies (only react / react-dom as peer deps).
• Next.js App Router ready ("use client" is baked into the build).

Install

npm install react-vanish-box
# or
yarn add react-vanish-box
# or
pnpm add react-vanish-box

Basic usage

Plain children — click anywhere on the box to vanish it:

import { VanishBox } from "react-vanish-box";

export default function Example() {
  return (
    <VanishBox onDeleted={() => console.log("gone!")}>
      <div style={{ padding: 24, background: "#1e293b", color: "#fff", borderRadius: 12 }}>
        Click to vanish
      </div>
    </VanishBox>
  );
}

Using your own design + your own delete button

Use the render-prop form so a button inside your own markup becomes the trigger, and you get live status to update its label:

import { VanishBox } from "react-vanish-box";

export default function Card({ onRemove }: { onRemove: () => void }) {
  return (
    <VanishBox onDeleted={onRemove}>
      {(vanish, status) => (
        <div className="card">
          <h3>Noteworthy technology acquisitions</h3>
          <p>Here are the biggest acquisitions of 2025 so far.</p>
          <button onClick={vanish} disabled={status !== "idle"}>
            {status === "idle" && "Delete"}
            {status === "deleting" && "Deleting..."}
            {status === "deleted" && "Deleted"}
          </button>
        </div>
      )}
    </VanishBox>
  );
}

Triggering it from outside (imperative ref)

import { useRef } from "react";
import { VanishBox, type VanishBoxHandle } from "react-vanish-box";

export default function Example() {
  const ref = useRef<VanishBoxHandle>(null);

  return (
    <>
      <VanishBox ref={ref}>
        <div className="card">Some content</div>
      </VanishBox>
      <button onClick={() => ref.current?.vanish()}>Delete from outside</button>
      <button onClick={() => ref.current?.reset()}>Bring it back</button>
    </>
  );
}

Vanish modes & speed

// Left-to-right wipe (default)
<VanishBox mode="sweep" speed={1}>...</VanishBox>

// Whole element fragments and fades all at once
<VanishBox mode="instant" speed={1}>...</VanishBox>

// Faster / slower
<VanishBox mode="sweep" speed={2}>...</VanishBox>   {/* 2x speed */}
<VanishBox mode="sweep" speed={0.5}>...</VanishBox> {/* half speed */}

Props

| Prop | Type | Default | Description | |-------------------|--------------------------------------------------------------------|------------|-------------------------------------------------------------------------------| | children | ReactNode \| ((vanish, status) => ReactNode) | — | Content to render and vanish. Function form gives you a vanish() trigger. | | mode | "sweep" \| "instant" | "sweep" | "sweep" dissolves left→right. "instant" fragments the whole thing at once. | | speed | number | 1 | Speed multiplier. 2 = twice as fast, 0.5 = half speed. | | onDeleteStart | () => void | — | Called the instant the vanish starts. |

| className | string | — | Applied to the outer wrapper. | | style | React.CSSProperties | — | Applied to the outer wrapper. |

Imperative handle (via ref)

| Method | Description | |-------------|-----------------------------------------------| | vanish() | Trigger the vanish animation. | | reset() | Restore the content back to idle state. This is not applicable for real database . |

How it works

VanishBox renders your children in a normal (visible, interactive) DOM node. When triggered, it rasterizes that live node — including all nested styles and children — onto a <canvas>, reads the pixel data, converts non-transparent pixels into particles, then animates those particles (jittering, shrinking, and either sweeping across or fading out together) until nothing is left.

License

MIT