Built with Rive
Designing Responsive Voice Visuals for Marlie.ai
Radityo Nugroho
Verified
A Visual Voice for Conversations
See it live at at marlie.ai
Marlie.ai is a smart, AI-powered virtual receptionist that helps small businesses handle calls 24/7 — no voicemails, no missed leads. It answers in seconds, sounds natural, and can book appointments, collect customer info, and even process payments — all without a human agent.
Alex reached out to me to help bring some of that intelligence to life visually. He didn’t want a full character or avatar, but something abstract, modern, and responsive — a visual that subtly reacts when someone is speaking, whether it’s Marlie or the human caller.
We kicked things off with design exploration. I created 9 different styles, from minimalist waveforms to glowy orbs — all trying to strike the balance between expressive and neutral.
Design exploration — tried 9 different styles before we found the one that felt just right.
Eventually, we landed on a soft, gradient-based shape that felt calm, organic, and futuristic. It had just enough presence without being distracting.
Final look — soft gradients and balanced curves that feel both futuristic and grounded.
Once the design was set, I moved on to animation. And this part? It took work — I ended up creating over 10 different animation versions to get the flow, easing, and personality just right.
Over 10 versions later — lots of micro refinements to get the motion just right.
The animation needed to support four states:
Idle, when nothing’s happening.
Active, when the system is waiting.
Human Speaking, when the user talks.
Agent Speaking, when Marlie responds.
To build the system, I used Rive. It allowed me to keep things lightweight and interactive at the same time. I set up number inputs that could be connected to real-time audio data. The volume of a voice — whether it’s the human or Marlie — would directly drive the animation.
Live inputs — audio volume drives real-time motion using Rive’s number inputs.
This made the animation feel truly alive. It pulses and breathes in sync with each word, all while staying subtle enough not to overpower the UI.
The final piece fits smoothly into the interface at marlie.ai. It’s clean, elegant, and ready to start a conversation — without needing a face.
Real-time reactivity — Marlie pulses and flows in sync with actual voice input.
It’s always exciting to bring something to life through interactive motion — especially when it lives in the real world, helping real users. If you’re working on something similar and need help with interactive visuals or real-time animation, feel free to reach out 👋
Like this project
Posted Aug 1, 2025
Designed & animated Marlie.ai’s voice visuals — 4 reactive states built in Rive, synced with real-time audio volume.
Likes
5
Views
191
Timeline
Mar 26, 2025 - Apr 28, 2025
