Frame-by-frame animation that reacts. Built in Rive.

Standard frame-by-frame is just a looping video. Looks nice, but there's nothing alive in it. This is different — every frame is under control, and the page responds to the person on it.

Controlling any visual comes down to familiar events. At the core: driving the solo-group value through a number input. A simple mechanic, and everything else stands on it.

ViewModel paired with a cyclical data return through property-group gives you a system tied entirely to a defined range of numeric values. From there, that range gets distributed across tasks — different character motion scenarios, reactions to events.

The reactions themselves bind to boolean values. And those you can pick up in the external environment — hover, click, whatever you need. Webflow, Flutter, anywhere JS compiles. Rive hands control outward, and the animation becomes genuinely interactive.

92 frames, each prepared frame starting around 140kb. The numbers going in are intimidating.

Internal webp formatting together with compression dropped the project weight by nearly half. And there was still room left over for vector graphics.

A useful rule: keep the Rive file under 10mb — across different platforms you can run into limits. The comfortable zone sits around 7–8.

You can bind separate timelines to the axes: the cursor moves along them, and a matching animation fires in response. It's all read by a Listener through a plain Hitbox rectangle. Now and then this grows into some interesting mechanics.

On this project we deliberately kept things uncluttered. The functionality is there — just without the showing off.

The page came alive. Not "a video looping in the corner," but something that reacts to everyone who shows up.

Got a project that needs this kind of life? Send the brief and we'll dig in.