Health Cloud
A cloud whose tightness and colour report a value, with no number to read.
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 · Health Cloud
*
* A cloud that reports a value — a service's health, a signal quality, a
* battery of checks — without printing a number.
*About this effect
A status readout for a thing that is fine, or nearly fine, or not fine — a service, a connection, a set of checks. The value drives cohesion rather than colour: healthy holds the particles in a tight slow core, and as the reading falls they scatter outward and churn. Loss of cohesion is what the eye catches from across a dashboard, before anyone parses a hue, and it still works in greyscale, at a glance and for a colour-blind reader; the green-to-red ramp rides along as a second, redundant channel. The particle count never changes, so a state change reads as the same cloud loosening rather than as particles appearing and vanishing, and the drawn value eases toward the reported one so a metric that steps still moves continuously.