Night-runner
Year
2026
Services
Character Animation, Interactive Development, Rive Data Binding
Client
Personal Project
Intro
Nightrunner started as a simple question: could a Rive State Machine actually drive a playable character, not just loop an animation? This Limbo-like guy (a dark silhouette with a few glowing details) walks left and right, jumps, flips to face the way he's heading, and reacts to your cursor, all live in the browser. No game engine, no build pipeline. Just Rive and a couple hundred lines of JavaScript.
Process
Everything runs on Rive's Data Binding: a small vanilla JS loop pushes a handful of ViewModel values (position, walk speed, hover state, flip triggers) straight into the State Machine, every frame. Getting it to feel right took real back-and-forth: an acceleration curve so footsteps stop skating on start and stop, a four-layer parallax rig (two behind the character, two in front) tuned layer by layer until the depth read right, and a swap from Rive's Canvas renderer to WebGL2 to get proper feathering on the fog and silhouette edges.
The whole thing exports as one self-contained HTML file — artwork included — so it drops straight into this page with nothing extra to host.
Not a finished game... more a proof of concept: that a character built for animation can also carry light interaction, and that a portfolio piece doesn't have to just play on loop. It can respond.
Go ahead, walk him into a wall a few times.