Stride is a self-directed fitness app onboarding concept that explores how much product interaction can live inside one Rive file. The flow includes 5 screens, interactive step-goal selection, transitions, and shared data between components. The state machine handles the experience directly, rather than relying on separate screen-by-screen animation exports.

Interaction and UI motion design

5-screen onboarding flow

Interactive step-goal input

Nested Stateful Components

Rive State Machines and data flow

Lua scripting for interaction logic

The goal was to make a multi-screen onboarding experience feel intentional and responsive while keeping the architecture reusable. A user-set value needed to move from one screen to another without hardwiring the components together.

1) 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.

2) 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.

The solution The goal was to make a multi-screen onboarding experience feel intentional and responsive while keeping the architecture reusable. A user-set value needed to move from one screen to another without hardwiring the components together.

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.

Rive Animator

Interactive Designer

UI Designer

Tools: Rive, Lua scripting