Dissolve Out
An element breaking into pieces that scatter and fade as a sweep removes it.
The canvas in this preview is the file shown here. The surrounding demo shell only provides context and is not part of the copied code.
import { useEffect, useRef, type ReactNode } from "react";
/**
* Vibary · Dissolve Out
*
* An element breaking into particles and blowing away. The technique is
* that both halves are driven by one number. A sweep position moves
* across the element; a gradient mask clips the element at exactly thatAbout this effect
For removing something and saying so — an archived row, a dismissed card, a deleted draft. One number drives both halves: a sweep position crosses the element, a gradient mask clips the element at exactly that line, and pieces are released at exactly that line as it passes. The pieces are therefore the material the mask just removed, rather than a particle animation playing over an element fading on its own clock — which the eye catches instantly, because the thing is gone before its pieces leave. It takes real children, so it dissolves whatever markup is already there. Pieces are painted in the element's own computed text color: reading a DOM node's real pixels needs a rasterizer, and this file has no dependencies. The grid comes from a 9px cell, so the count follows the element: about 170 pieces for a list row, about 430 for a full card — raise the cell size on anything large.