Stride is a fitness onboarding app concept where the entire flow, consisting of five screens, an interactive step-goal input, and transitions between them, runs inside a single Rive artboard. There is no external app logic driving the sequence; the state machine serves as the app.

The Challenge

Two problems stood out as the main challenges, and neither was the part that appears most difficult in the final result.

Setting the step goal. The first approach used a circular ring: users could drag around it like a dial to set their target. However, the visual aspect wasn't the problem; tracking the pointer's circular motion in real time was. Converting the pointer's x/y position into an angle around the ring accurately, in real time, proved to be a much tougher issue than it seemed.

Transmitting data across screens. With five screens inside one main artboard, a value set early in the flow needed to reach and be usable on a later screen. This had to happen without hardcoding a connection between two components that were each designed to be self-contained.

Ring to Slider. After trying several fixes for the ring-tracking math, the better solution wasn't a simple fix; it was a different interaction. A slider only tracks one axis, not an angle around a circle, which makes the calculations much simpler. It's also a more intuitive control for setting a step goal on a fitness app than a circular dial. Instead of solving the harder problem directly, we designed around it. Stateful Components for the five-screen flow. Each screen was created as its own Stateful Component, a self-contained nested artboard with its own state machine. All five were then nested inside one main artboard. Data moves between them through each component's exposed inputs and outputs: a screen outputs a property, the main artboard picks it up, and feeds it back down as an input to whichever other screen needs it. The specific fix: a value set on screen 3 needed to show up correctly on screen 5. This was solved by routing it through the main artboard as an output from screen 3's component and as an input into screen 5's, rather than connecting the two screens directly.

Credits Design & Animation: Omar Jabr Tools: Rive, Lua scripting