Motion
Build a vibrant light-mimetic dynamic effect system.
Motion language
Luminous Tactility
Luminous Morphology is a visual language that deeply integrates "light energy" with "physical touch".
Definition: The interface is no longer a static layer, but a physical entity highly sensitive to energy (light).
Core principles: Real-time sensing (light moves with people), physical feedback (pressure sensitivity and rebound), light and shadow transitions (light guides the path).
Principles of Animation
Principles of Animation
High Efficiency
Efficient
Stay restrained and respond quickly
Stay restrained, avoid exaggerated and overly decorative animations that interfere with the user; the effects should not increase the waiting cost but should respond to actions as quickly as possible.
Focus
Focused
Highlight the key points and guide the eye
Focus on the core content, attract attention through animations, and emphasize the key points. Only the current interactive object deserves the highest brightness effect.
Smooth
Fluid
The curve is natural and avoids stiffness
Rejects stiff linear motion, with delicate easing curves, 60 frames per second animations, ensuring a coherent transition process without any breaks
True
Real
Simulate gravity, physical texture
Create realistic and believable visual effects, simulating the laws of motion of gravity in space (inertia, mass, damping), giving components a real sense of gravity and environmental lighting
Animation type
Spatial awareness type
Emphasize the changes in the X/Y/Z axes
Physical response type
Emphasizing the moment of change
Animation properties
rate curve
Accelerate
ease-in
0.42, 0, 1, 1
Standard
ease-in-out
0.42, 0, 0.58, 1
Slow down
ease-out
0, 0, 0.58, 1
Animation duration
short
150 ms
Middle
300 ms
long
450 ms
Space attribute
Zoom
Emphasize the change along the Z-axis
Rotate
Emphasizing the change in direction
Transparent
Emphasize physical changes
Blur
Emphasize the changes in depth and shade.
Move
Emphasize changes on the X-axis
Follow
Emphasize the movement of light
Theme Adaptation
Light
Dark
Glass refraction
neon light
Reflection
Self-illumination
Component instance
Button
speed
ease-in-out
Animation duration
150 m/s
Space attribute
Zoom, track
Input
speed
ease-in-out
Animation duration
150 m/s
Space attribute
Transparent, blurry, tracking
Icon
speed
ease-in-out
Animation duration
150 m/s
Space attribute
Zoom
Select
speed
ease-in-out
Animation duration
150 m/s
Space attribute
Transparent, blurry, tracking
Card
speed
ease-out
Animation duration
3D deformation trigger: 150 m/s
Click zoom trigger: 150 m/s
Space attribute
Zoom, Transparency, Blur, Rotate, Track
Tabs
speed
No specific speed
stiffness control speed damping control easing
Animation duration
Different distances traveled result in varying durations.
Space attribute
Zoom, move, track
Tag
speed
ease-in-out
Animation duration
2.5 seconds
Space attribute
Transparent, mobile
Chips
speed
No specific speed
stiffness control speed damping control easing
Animation duration
Different distances traveled result in varying durations.
Space attribute
Move, track
Segmented
speed
No specific speed
stiffness control speed damping control easing
Animation duration
Different distances traveled result in varying durations.
Space attribute
Zoom, move