Wipe Particles
A directional wipe with a torn, grainy edge instead of a hard line.
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 } from "react";
/**
* Vibary · Wipe Particles
*
* A directional wipe whose edge is made of grains rather than a hard
* line: the cover recedes and crumbles into its own dust.
*About this effect
A cover crossing a panel and crumbling into its own dust as it goes — for content that arrives all at once and needs a moment of ceremony without a full transition. The front is a threshold on a per-slice field, and the grains are emitted by the crossing itself: a slice spawns dust the instant the front passes its threshold and never again. Because the emission is a consequence of the boundary rather than a second animation aimed at the same place, the dust and the edge cannot drift apart — the failure mode of timing a mask and an emitter separately. Around 160 grains are emitted across a full pass, with fewer than half alive at any moment.