Motion And Feedback Rules
Status: draft v0.1
Motion should make progress feel alive without slowing down practice.
Principles
- Motion explains hierarchy or celebrates progress.
- Motion must be short and interruptible.
- Practice/scoring flows stay calm.
- Respect reduced-motion settings.
- Avoid constant background motion on dense reading screens.
Motion Scale
Micro
Use for:
- button press
- chip selection
- score toggle
- tab selection
- card hover only in HTML atlas, not iOS
Duration target: 120ms to 220ms.
Standard
Use for:
- sheet presentation
- card reveal
- section transition
- C4-DY prompt appearing
Duration target: 220ms to 420ms.
Celebration
Use for:
- badge unlock
- level up
- challenge win
- milestone
Duration target: 1.5s to 3.5s, with clear dismissal.
Badge Unlock
Current problem:
- User can receive a badge notification but not find the badge afterward.
Design requirement:
- Notification tap must route to a visible badge/progress surface.
- Unlock state should be replayable or at least clearly visible in profile/progress.
- Badge artwork should have one premium reveal motion.
Candidate behavior:
- Notification tap opens Badge detail or Profile > Badges.
- Badge card is highlighted.
- A short unlock animation plays once.
- User sees why it unlocked and what to do next.
C4-DY Feedback
C4-DY should have a different motion language than normal UI:
- subtle pulse only when there is a useful next step
- no constant bouncing
- voice/listening state can use waveform or breathing glow
- prompt cards slide from companion entry, not from random positions
Challenge Completion
When all accepted participants complete:
- final ranking notification routes to challenge detail
- ranking state is visually distinct from active state
- winner/position feedback is visible immediately
HTML Atlas Motion
The design atlas can be richer than the app:
- scroll animations
- before/after sliders
- phone frames
- component galleries
But the atlas must not imply every effect belongs in the native app.