Kora Power: Battery System Graphics in Rive

Kora Power / Battery system graphics / 2026

Rendered video out. Live vectors in.

My role: Rive animation, interaction design and runtime integration

Delivered: Rive files for the Kora app dashboard (dark and light themes), an interactive battery-pack builder, landing-page animations for desktop and mobile, Shopify sections for embedding Rive on the website, HTML demos and developer documentation, and a Flutter demo for the client's developers

Tools: Rive (state machines, ViewModels, Luau scripting), Shopify Liquid, Flutter

The brief

Kora Power makes battery hardware and the software that runs it. Its app and marketing website used heavy, 3D-rendered video of the product. The job was to replace that video with photo-real vector animation in Rive that looks the same and can respond to the product, with separate graphics packages for the product platform and for the website.

The build

The app dashboard card is a Rive file with one state machine: dark and light modes, gradient or solid backgrounds, glows on and off, and pulse sequences. It went through seven versions between January and February 2026.

The battery-pack builder stacks up to seven battery modules under the inverter. A stepper adds or removes modules, each module animates in and out from its own ViewModel boolean, and the inverter lifts and settles on top of the stack. For the website I wrote Shopify Liquid sections and snippets that load the Rive player and Rive text blocks into the theme, and built the landing-page animation in desktop and mobile versions.

The constraint

Moving the inverter cleanly while modules came and went was the hard part. My first plan used two crossfading translation constraints, which brought constraint-ordering and blend-timing problems. I replaced it with a Luau script that reads the stepper count, debounces rapid clicks, and writes the inverter's position every frame along an eased curve, adding or removing modules one at a time in sync.

The delivered experience

The recordings below show the dashboard card cycling through its glow colors, the battery stack building up from the ViewModel, and the exploded-view intro. The HTML demos let you drive each file with the same controls the developers use.