Case study / Rive Mirror
Test Rive files on real devices
A polished standalone app for testing Rive files on target devices
01 / Project description
Why it exists.
I owned Rive Mirror end to end, building on its original skeleton to create a polished standalone cross-platform and web app for testing Rive files on target devices.
Owned from early skeleton through polished production across desktop, mobile, and web.
Background
Rive Mirror needed to feel like a real Rive product, not a thin wrapper around default Material UI. The goal was a testing surface animators could trust on the devices their work would actually run on.
That meant bringing editor-parity tools into a standalone app: live data-bound values, animation previews, canvas and layout controls, and device-size previews that matched how files behaved in context.
Performance mattered as much as polish. Animators needed a clear way to understand the impact of assets, transitions, and state changes before shipping.
02 / Process
How it came together.
Research & Planning
I started from Mirror’s existing skeleton and mapped the gaps between a minimal testing shell and a product that could stand next to the Rive editor.
The brief covered cross-platform desktop and web, touch-first mobile use, and enough editor parity that teams could validate files without bouncing back into the full authoring environment for every check.
Design & Prototyping
I replaced default Material UI patterns with Rive’s design system, then designed desktop navigation and a full sidebar layout so the app had a clear hierarchy for bindings, canvas, and controls.
On mobile, I focused on touch-first interactions so resizing, previews, and control surfaces stayed usable without relying on desktop hover patterns.
I also designed App Store imagery so Mirror presented as a finished product when it shipped to devices.
Development & Implementation
I implemented Mirror end to end, taking the redesign from layout and theming through the testing tools themselves.
That included editor-parity tooling for live data-bound values, animation previews, canvas and layout controls, resizing, and device-size previews.
I also helped build DevTools-inspired profiling tools that let animators understand the performance impact of assets, transitions, and state changes.
- Flutter
- Dart
- Rive
- Figma
03 / Results
What it became.
Rive Mirror shipped as a standalone testing app with Rive’s design system, desktop and mobile layouts that felt intentional, and editor-parity tools for validating files on target devices.
Profiling and preview surfaces gave animators a clearer read on how assets and state changes affected performance before those files left the studio.