Case studies
/
Naomi-Interactive motion design
Interactive motion
Naomi- Interactive Motion Design(IMD)
An interactive sleep and recovery companion that turns smart-ring data into simple, actionable insights. Instead of presenting users with complex sleep charts, Naomi uses expressive character animation to show how well they recovered and what their body may be ready for today. Users can explore their sleep history, understand daily recovery, and get personalised activity suggestions through playful, Rive-powered interactions.
An interactive sleep and recovery companion that turns smart-ring data into simple, actionable insights. Instead of presenting users with complex sleep charts, Naomi uses expressive character animation to show how well they recovered and what their body may be ready for today. Users can explore their sleep history, understand daily recovery, and get personalised activity suggestions through playful, Rive-powered interactions.
SLEEP SCORE
94
/100
Excellent Sleep Quality
Amazing
Naomi suggests dimming lights at 10:15 PM tonight. Your body clock is primed for early melatonin release based on yesterday's deep sleep recovery high.
WEEKLY HISTORY
Mon
92
Tue
90
Wed
94
Thu
87
Today
80
![](data:image/svg+xml,<svg display="block" id="2579089823" role="presentation" viewBox="0 0 537 244" xmlns="http://www.w3.org/2000/svg"><path d="M 268.5 0 C 416.788 0 537 54.621 537 122 C 537 189.379 416.788 244 268.5 244 C 120.212 244 0 189.379 0 122 C 0 54.621 120.212 0 268.5 0 Z" fill="rgb(0, 0, 0)" height="244px" id="xJ2E6vR2M" width="537px"/><path d="M 268.5 0 C 416.788 0 537 54.621 537 122 C 522 80 416.788 16 268.5 16 C 120.212 16 20 67 0 122 C 0 54.621 120.212 0 268.5 0 Z" fill="rgb(117, 117, 117)" height="122px" id="S7ZTsT14A" width="537px"/></svg>)
SLEEP SCORE
94
/100
Excellent Sleep Quality
Amazing
Naomi suggests dimming lights at 10:15 PM tonight. Your body clock is primed for early melatonin release based on yesterday's deep sleep recovery high.
WEEKLY HISTORY
Mon
92
Tue
90
Wed
94
Thu
87
Today
80
Beyond Animation
What is IMD?
Motion that reacts to the user input in real time. Instead of playing a predefined animation, elements can react dynamically to taps, gestures, cursor movement, scroll, or other interactions. It makes the interface feel interactive and alive.
Motion that reacts to the user input in real time. Instead of playing a predefined animation, elements can react dynamically to taps, gestures, cursor movement, scroll, or other interactions. It makes the interface feel interactive and alive.
Why Runtime animation?
Animations can respond to live inputs, change states dynamically, and reuse a single animation system across multiple interactions without creating separate animation files for every state.
Animations can respond to live inputs, change states dynamically, and reuse a single animation system across multiple interactions without creating separate animation files for every state.
What can it enable?
Interactive characters, gesture-driven UI, physics-based responses, responsive illustrations, and state-based micro-interactions - creating experiences where the user doesn't just watch the motion, they control it.
Interactive characters, gesture-driven UI, physics-based responses, responsive illustrations, and state-based micro-interactions - creating experiences where the user doesn't just watch the motion, they control it.
Story board of a few interactions
Time slider
Overnight sleep stages
Wake up
Waking up after a good sleep
