Freeboard in motion: logo, loader and UI in Rive

Freeboard is my personal finance app for people with irregular income. Its logo, the prua, is a ship's bow above a mint waterline. On a ship, freeboard is the height of the hull above the water, so in the app more buffer means more freeboard. This project turns that idea into a small motion system built in Rive: the logo rises out of the water, rocks gently at rest and reacts to hover and press, and one view model number sets how high the hull rides.

The same language moves into the app's UI. A loader where the bow cuts through water: it surges in a loop, then switches to a determinate mode where the boat travels the track and the percentage counts up through an eased converter. A switch fills its track with water as it turns on. A primary button folds into a spinner and lands on a check drawn with a trim path, or shakes and offers a retry.

An empty state, Nothing to sort yet, has a soft idle: the water breathes, the stars twinkle and a click sends a shooting star.

Everything lives in one script-free .riv: six artboards, one of them a reusable Mark component nested into the loader and the empty state, and five state machines. View models and data binding with converter chains (range mappers, interpolators, to-string, boolean negate), listeners that write view model values, state actions that report status back to the page, layered state machines, trim and dash paths, clipping and an even-odd hawse hole.

All timing comes from shared tokens (120, 240, 480 and 1200 ms) and five easing curves; nothing moves at a constant rate. A reducedMotion boolean on every view model swaps the loops for still poses and follows the system setting. The button and the switch expose real semantics to screen readers and work from the keyboard.

I built it with the Rive CLI and an AI coding agent: the scene is authored as RML, generated from a small kit so the approved logo geometry and the motion tokens stay exact, then checked state by state. The demo page drives the view models with the Rive web runtime. Live demo: https://freeboard.money/rive/motion/