FreeboardWater lines in Rive
freeboard.money
Water lines
Income flows into the lake, spending flows out. This is one Rive file driven by data: the page only sets numbers on its view model, and every width, every bend and every total is worked out inside Rive.
Move the money
vm.number("in1/amount").value = 2400
Follow a line
Into the lake
Out of the lake
How the file works
- Data in
- A
WaterLinesview model holds four income streams (label, amount, kind) and five spending categories (label, amount, colour). The page writes numbers and an enum; nothing is drawn in JavaScript. - Math inside
- Formula converters turn amounts into widths with the app's square root rule, stack every line into the lake so none cross, size the lake, and add up the month and the safe total. Derived view model properties chain the results.
- Motion
- A state machine runs the arrival, the living water and the theme. Listeners on each line write hover and pin back to the view model, and eased converters let widths, totals and focus glide instead of jump.