Live Tank Gauge in Rive for Tanker Line

A live gauge for Tanker Line, my water-tanker booking app for a Karachi hydrant. It shows the tanker's load and where the drop is: Booked, Loading, Left hydrant, Nearby, Delivered. The app sends numbers, the Rive file does the rest.

On the tracking page a customer wants one answer: how far along is my water. A status line of text does not say that at a glance. A tank that visibly fills at the hydrant and empties at your gate does, and it has to be driven by real data rather than a canned animation.

A tank bound to data: the water level follows a level number, eased over 1.4 s so changes never jump. The litres line, the big percentage and "room left" all count with it.

Water that moves: a small Luau script draws two wave layers and a crest line, clipped to the tank wall. The surface sloshes and tilts while the level changes, then settles.

A status timeline: past steps get a check, the current one an orange ring, future ones stay muted, all from one status enum.

The delivered moment: the tank drains, a badge scales in with slight overshoot, the check draws on with a stroke trim and one ring pulses out.

One view model, Drop: level, litres (capacity), status, code and eta. The state machine has one state per status, and every status can be set directly by the host, so the app only ever writes data. A second small script formats litres with thousands separators, because the built-in converter cannot. The preview controls at the bottom drive the same view model, so the file can be tested without any app.

A gauge a developer drops into the tracking page and feeds from the booking record: set status when the driver taps a button, set level as the tank fills. It matches the Tanker Line brand (paper, ink, orange, water blue) and the editable file lives in my Rive workspace.

Tools: Rive (view model data binding, enums, state machine, Luau scripting).