Built with Rive

Record Button with Pulse Animation

Hai Do

Turning a Simple Record Button into a Real Experience

Most of us think of a record button as something purely functional: tap to start, tap to stop. That’s it. But inside The Coach , recording is at the core of the learning journey — it’s how learners practice pronunciation, listen back, and improve. We wanted this action to feel less mechanical and more meaningful, so I decided to redesign it from the ground up.
The result is a 29KB Record Button built with Rive and running smoothly on React Native. It may sound small, but it’s crafted to feel almost physical on a flat screen. A soft pulse gives it life, subtle sound feedback signals when recording starts or ends, and a gentle background blur creates depth that makes the button feel touchable. Together, these tiny details transform a simple tap into an interaction that feels real.
Why does that matter? Because when learners hit record, they shouldn’t be worrying about whether the app is working — they should be focused on speaking clearly and confidently. By adding visual and auditory cues, the button reassures them instantly, freeing their attention for what truly matters: their voice.
I designed and animated the button in Rive, integrated it into The Coach, and optimized it so that it stayed incredibly lightweight while still delivering that subtle, polished feel. It’s a small feature, but it changes the way people experience practice inside the app.
In the end, this project reminded me that great UX isn’t only about function, it’s about emotion. Even the tiniest element — like a record button — can create focus, reduce friction, and make learning feel more natural. Follow me on X @haidofg for more little experiments and updates.
#RiveAnimation #ReactNative #UIUX #Animation
Like this project

Posted Aug 11, 2025

A lightweight 29KB record button for The Coach app — smooth pulse, soft blur, and sound feedback built with Rive + React Native.

Day Streak Animation – Built with Rive
Dynamic Pronunciation Scoring Ring – Built with Rive
Interactive Character Animation with Lip Sync
Animated Floating Pet Characters Design
Animated Floating Pet Characters Design

Join 50k+ companies and 1M+ independents

Contra Logo

© 2025 Contra.Work Inc