A SaaS dashboard is where product motion matters most and gets done least. Numbers that should count up just appear. Progress bars that should fill just sit there. It's the part of a product people stare at every day — and it's usually completely static.

So I built the opposite. This is a self-initiated craft study: a set of interactive dashboard cards for a team-performance SaaS, animated end to end in Rive — with the motion driven by real data, not a fixed timeline.

I wanted to see how alive a dashboard could feel if every card actually responded — if the numbers moved, the graphs filled, and the interactions felt native rather than bolted on. Not a video mockup of a dashboard, but interactive components built the way you'd actually ship them in a product.

I used a team-performance/learning product as the subject — progress tracking, study hours, leaderboards, challenges — because that kind of data-dense interface is exactly where good motion earns its keep.

A set of interactive dashboard cards, animated in Rive:

→ An "Explorer" progress card — points earned and hours learned, animating in as a live progress state. → A "Study Hours" card — an animated bar graph tracking study sessions, with topic/lesson/quiz stats. → A "Learn Together" leaderboard — team members with avatars and live rankings. → A "Cycling Basics" challenge card — a tappable card with week-day selectors and a "tap to display more" interaction.

Each one designed to look like a real product surface — then made to move and respond.

The surface animation is the easy part. What makes these dashboard components rather than pretty loops is what's underneath — and that's where the work went.

These cards use state machines with data binding: the values (hours, points, the bar-graph heights) are bound to real inputs, so the motion is driven by data, not by a fixed sequence. The bar graph in the Study Hours card doesn't play a canned animation — it's built to respond to the underlying numbers, so it would render correctly for any real data set, not just the one on screen.

That's the genuine jump in Rive: going from "animator making a nice loop" to "building interactive components that behave like live product UI." The challenge was wiring the state machines and bindings so every card stayed smooth and logically correct across changing values — the difference between motion that decorates a dashboard and motion that actually is the dashboard.

Because that's the whole promise of Rive: these aren't videos of a dashboard, they're lightweight interactive components that could drop straight into a live product and run on real data. Building them as a craft study means the capability is ready the moment a product's dashboard deserves to feel as alive as it looks.