Ember Rise
Embers lifting from below, cooling from white through amber to nothing.
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 · Ember Rise
*
* Embers lifting off something that has been burning for a while. The
* whole effect hangs on one number: how much heat an ember has left.
* It sets the color — white, then amber, then a dull red, then nothing —About this effect
A warm ambient field for a screen that should feel like it is running rather than waiting — a focus timer, a long render, a session in progress. One number carries it: the heat an ember has left. Heat sets the color as it walks down a four-stop cooling ramp, and it also sets the size and the rise speed, because the lift comes from the hot air the ember is making. So each ember slows as it dims and dies partway up the frame instead of sailing out of the top. Glow is drawn from twelve cached sprites, one per heat step, so the whole field costs one blit per ember.