Water lines: a data-driven finance map in Rive

Water lines is the month map from Freeboard, my personal finance app for people with irregular income, rebuilt as a single Rive file. Income streams flow from the left into a lake, the money in your accounts at month end, and leave on the right as spending. Each stream shows how sure it is: a full ribbon is certain, a veiled one counts half, drops are uncertain and an empty bed is a one-off.

A view model holds four income streams (label, amount, kind) and five spending categories (label, amount, colour). Formula converters with bound tokens do the app's own maths inside the file: ribbon width from the square root of the amount, where each line lands so the stack in the lake never crosses, the lake's height, the month total, the end-of-month balance and a safe total weighted by each stream's kind. The web page only writes numbers and an enum; nothing is drawn in JavaScript.

Hover or tap a line to follow it: the others fade and a strip shows its amount and its share of the month. Listeners on opaque hit areas write hover and pin back to the view model, and the same properties drive every dim, fade and detail card through eased interpolators.

A three-layer state machine runs the arrival, timed to the app's 1.3 s choreography (lines flow in, the lake fills with a ring, spending fans out), the living water (soft glints drift downstream, drops slide toward the lake) and a light and dark theme blended from a bound boolean. A second artboard handles phones with the same view model.

No scripts or shaders, so the file plays in any web runtime. I built it with the Rive CLI and an AI coding agent: a small generator writes the RML, the CLI verifies and renders headless captures, and Playwright tests hover, pin, sliders and theme in the browser runtime. Live demo with sliders: https://freeboard.money/rive/water-lines/