Curo x Rive
I came across an EV fleet charging platform and saw a chance to push what a driver app could be.
Most charging apps just display data, charger location, status, availability. Functional, but flat. I wanted to see what happens when you treat the interface as a craft problem: how do you make real-time charging data feel responsive and alive?
I built it with React Native (Expo) and Rive, which let me create interactions that react to live data and user input. Charging status transitions smoothly. Animations respond to actual charger states. The whole interface feels like it's breathing with the data behind it.
It's a charging app, but built like you'd build a premium product.
Mood Board
I started by building a mood board to shape the app flow and interactions.
Home 🏠
The Home screen is built using three Rive artboards:
Battery board
Charge unit
Main Home layout
The driver’s vehicle takes center stage, displaying interactive stats like charge prompts, charging status, and notifications. As a playful touch, tapping the vehicle toggles the headlights on and off, a fun detail made seamless with Rive’s state machine.
Check out the Rive Interaction
The chargeunit and the Battery board artboards are nested in the main Home artboard and these are turned active based on input tied to the state machine; Useful to create conditional interactions/animations based on data received from the backend.
The charger has 2 inputs to trigger - “isCharging” and “showShadow”
isCharging→ activates charging animation.showShadow→ casts a glow when headlights are on.
The charge unit design draws inspiration from Tesla chargers.
Map - Let’s get charge!
The map is built using the react-native-maps package, which runs on the device’s native maps library under the hood. This gives us the flexibility to add custom markers.
I had previously used custom images as markers, but I was curious about pushing it further. I came across a post on Twitter by Roman, where he showcased using Rive components as map markers in Flutter, and that inspired me to try the same in React Native.
Note: At the time of testing, the Expo maps package was not yet compatible with Rive assets as markers. To get it working, you’ll need to use an Expo development build with react-native-maps.
Markpin Interactions 📍
The state machine for markpin consists of 2 inputs - “portal” and “selected”
selected→ this gets active when the user clicks on a specific markpin on the map; it bounces up and down.portal→ when the user proceeds to book a charger at a specific location; we transition to the portal state on the user click event. We get to see the markpin morphing as a mascout going into the portal to get to the Charge station!
Portal Suspense
The Idea is to change the marker to a mascot on portal and suspend while we fetch data from the backend; When a user books a charger, the marker transforms into a mascot; ears flapping, fiery eye glowing, suspended midair until the backend responds. This keeps users entertained during loading, turning a typical “waiting state” into a moment of delight.
Check out the Rive Interaction
The mascot hovers in midair, ears flapping in the rush of wind as it scouts for the charge station. Once the backend responds, the state changes and the mascot swoops down to the selected charge station for booking.
This was an experiment to explore how interactions like these can keep users engaged during loading states. Unlike Lottie animations, which are static, Rive makes it possible to create dynamic, state-driven interactions that feel alive and responsive.
Scan in 3, 2, 1!
The Scanner page was created in Rive and includes a transparent area where we can overlay the camera display, allowing the user to see the QR code in real time. The main exploration here was demonstrating that Rive assets can coexist with native elements, positioned in front of or behind them. This sparked a thought: perhaps in the near future, entire UIs could be generated in Rive, with developers simply plugging in business logic :D a concept that feels both crazy and exciting.
Check out the Rive Interaction
Successful Transaction
After the user scans the QR code, a transaction is initiated to allocate a charge point. Since this process takes some time on the backend, it’s important to let the user know that it is in progress. To address this, I created a loader animation where the vehicle and charger sync to establish a connection, looping until the backend confirms with an “OK”
Check out the Rive Interaction
When the transaction is successful, the state machine updates the AnimationState from “0” to “1” to indicate completion. Seeing this transition play out is truly delightful!
Splash Screen
The splash screen ties the entire theme together. The background transitions through four symbolic elements, each reflecting Curo’s mission and vision:
Rocks → Foundation / Resources
Just like minerals form the foundation for batteries, Curo builds the infrastructure foundation for EV fleets. Rocks = strength, reliability, essential resources.
Ocean → Flow / Connectivity
The ocean symbolizes vast, seamless movement - Curo’s Virtual Depot network enables fluid, borderless EV operations, like an ocean current powering global mobility.
Vegetation / Moss → Sustainability / Renewal
Moss thrives anywhere, quietly regenerating ecosystems - like Curo’s platform, which turns underused assets into living infrastructure that supports a greener fleet ecosystem.
Mars → Innovation / Future Vision
Mars represents bold frontiers - Curo is pioneering the future of EV charging at scale, taking fleets from today’s challenges to tomorrow’s limitless opportunities.
Looking Ahead
As interactive technologies evolve and motion becomes central to every app experience, interfaces are no longer just screens. They respond. They guide. They invite you in.
The way we interact with apps is changing, and there’s so much potential to make every interaction feel alive and meaningful.
I’d love to hear what you think. Feel free to drop me a line at hey.dushyanth@gmail.com
