Capacity Fill
A vessel filling with grains that roll into a heap and level off as it nears full.
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 · Capacity Fill
*
* A vessel filling with grains that fall, roll down the heap and stop.
* The pile stands as a mound while the vessel is nearly empty and is
* almost level by the time it is nearly full.About this effect
A gauge for anything with a ceiling — storage used, seats taken, a quota burning down. The levelling is a consequence rather than an animation: a grain rolls on while any neighbouring column stands more than the repose slope below it, so the surface can never exceed about thirty degrees. That rule caps the height difference across the vessel, peak to wall, and the cap is a constant — measured at 26px whatever the fill, against a depth that grows from 14px to 167px — so unevenness runs from nearly twice the depth at a tenth full to a sixth of it at the brim, with nothing smoothing the top as the level rises. The same arithmetic chooses the shape: the cap is a fraction of the width, so a tall narrow gauge levels and a wide tray never does, which is why this one is a column. A grain raises its column by less than a third of the column's width, which is what makes the repose slope a real angle rather than a staircase, and the settled pile is blitted from a buffer so a full vessel costs no more per frame than an empty one.