Firework Bloom
One shell rises, bursts, and the sparks fall against real air drag.
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 · Firework Bloom
*
* One shell rises, bursts, and the sparks fall. The detail that makes
* it a firework rather than a decal is that the burst inherits the
* shell's velocity: the sparks are a sphere expanding about a *moving*About this effect
A single firework for a milestone worth marking. Two things make it read as one instead of as a sticker on the sky. The burst inherits the shell's velocity, so the sphere expands about a point that is still travelling — the bloom drifts up, stalls and comes down as one body. And drag does the shaping: sparks lose most of their speed in the first fifth of a second, which is what carves the crisp outer edge, and only then does gravity bend the trails downward. Each spark is drawn as a line from its last position to its current one, so streak length is speed for free. A few heavier sparks fall further and burn longer, so the bloom has a tail instead of ending all at once.