Rain Streaks
Rain falling at an angle, with each streak as long as the drop is fast.
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 · Rain Streaks
*
* Rain crossing the frame at an angle, with near drops streaking long
* and far ones barely at all.
*About this effect
Weather behind a screen — a forecast header, a travel card, a mood setter for a quiet empty state. A streak is drawn as the drop's displacement over a fixed shutter time, exactly the line a camera would record, so length is derived from speed rather than tuned separately: a fast drop can never be short and a slow one can never smear. Four depth bands give the field parallax, with far drops thin, slow and faint and near ones long and bright, and each band draws in a single stroke so the whole thing costs four draw calls. The wind leans by a couple of degrees over time, which is enough to feel like weather without looking like the field is being swung about.