Campfire Embers
A fire's convection column: quick up the middle, drawn in at the base, tumbling at the edges.
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 · Campfire Embers
*
* Embers riding a fire's convection column: quick and straight up the
* middle, drawn inward at the base, tumbling slowly out at the top.
*About this effect
A warm, watchable background for a focus session, a night mode, a story or a screen that should feel like somewhere rather than something. There is no per-ember behaviour in it at all — there is one velocity field, and it is defined through a stream function rather than by writing the two velocity components down, so the flow is exactly divergence-free by construction. Checked across the whole frame, the divergence measures 4e-5 against terms of order 4, which is the finite difference's own error rather than a physical residual. That single property produces the shape: a column that speeds up has to pull air in from the sides to feed itself and a column that widens has to slow down, both from the same scalar instead of three rules that have to be kept consistent by hand. Advecting embers through it, the plume necks in from 58px to 18px in the first 20px of rise and opens out to 44px by the top — a candle silhouette nobody drew. The rise is 160px/s on the axis and 8px/s sixty pixels out, so an ember that wanders off-centre stops climbing and is carried around instead, which is the slow tumble at the edges for free. Author 'up, faster in the middle' on its own and the column frays within a second.