Making AI Tangible
Designing the motion feedback system that turns invisible algorithms into intuitive, real-time responses for 10M+ users.
Project Context
Role
Core Motion Designer / Systematic & Lead Designer / AI Division
The Challenge
Integrating a multimodal AI assistant into the OS UI while maintaining system-level clarity. Response latency was the bottleneck — hiding it through motion was the solution.
Cross-Platform
This motion system needed to scale across multiple touchpoints: from voice to keyboard to visual search, all unified under one cohesive behavior model.
Adapting the Physics for Components
I applied the global light system to different interaction needs
Input (Keyboard)
Used a soft, open gradient. The light blends into the screen, making the keyboard feel like a natural extension of the interface.
Panel (Info)
Used a defined, sharp edge. This creates a clear container, separating the new information layer from the background.
Consistent Feedback Across Inputs
Whether triggered by a physical button or a voice command, the system shares the same motion DNA.
Voice Interaction: The visual ripple responds to audio frequency in real-time, confirming the hardware is active and "listening."
Precision & Functional Feedback
For "Circle to Search," motion isn't just visual polish—it's a tool for precision. My goal was to create a sense of direct manipulation, where the UI tracks the user's finger with zero perceptible lag. This 1:1 response removes any ambiguity, ensuring the user knows exactly what the AI is analyzing at every millisecond.
Visualizing the Process (Latency Management)
AI responses aren't instant. Instead of a static loading spinner, I used Generative Motion. Text blurs in from left to right, mimicking a natural thought process. This masks network latency and keeps the user engaged.
Graceful Interruption & Inertia
Key Detail: What happens when the user stops the generation? Instead of cutting off abruptly, the animation decelerates with Physical Inertia. This ensures the system always feels polite and under the user's control, even when aborting a task.
Multi-line Interruption
Multi-line Generation
Single-line Interruption
Non-intrusive Delivery
Results appear as floating layers rather than full-screen takeovers. Whether opening a mini-window or expanding a card, the motion preserves the user's context.r's current context.
About the Company
vivo is a leading global technology company and a top 5 smartphone manufacturer globally, serving over 500 million users. Renowned for its innovation in 5G, AI, and imaging, the company powers AI features across its product lineup with its self-developed BlueLM (Blue Heart Large Model).
Visit Global WebsiteDisclaimer
All visual assets and features presented reflect the publicly released version of OriginOS 6.0. No proprietary source code or confidential internal documentation is disclosed.