WCNMOTION & SOUND MAP04 · SENSORY
Motion & sound
How WCN moves
& sounds.
& sounds.
Six clusters — from the laws of motion to the audio logo. Motion is largely built; sound is the open frontier.
42%
MOTION & SOUND COVERAGE
8 In motion
12 Easing in
13 At rest
AMotion principles
Purposeful, never decorative
Physical & weighted · eased, not linear
Calm by default · honours reduce-motion
Spatial continuity · motion as wayfinding
One focal motion at a time
Motion serves clarity — evidence first
BTiming & easing
Duration scale · 120/200/320/480ms
Standard ease · cubic-bezier(.2,.7,.2,1)
Stagger interval · 60ms token
Enter / exit asymmetry
Spring tokens · stiffness · damping
CTransitions
Reveal-on-scroll · entry choreography
Page / route transitions
Staggered lists & grids
Modal & overlay enter / exit
Shared-element morph
DMicro-interactions
Hover · lift + shadow
Press · active feedback
Toggle & switch states
Loading · skeleton & spinner
Drag & reorder feedback
Success / error feedback
ESonic identity
Sound principles · when to sound
Audio logo · the W³ signature
UI sound set · tap / success / error
Notification & alert tones
Silence & accessibility rules
FVideo & film
Motion logo · animated W³
Captions & subtitle style
Sound-on-video · mix & ducking
Film treatment · grade & pacing
Title & lower-thirds system
Export specs · ratios · codecs
Timing scale
bar = duration to scale · hover to replay →
Tap120ms
Toggles · taps
Quick200ms
Hovers · buttons
Standard320ms
Cards · panels
Gentle480ms
Routes · reveals
Bar length shows each duration to scale; hover a track to replay it at real speed. One easing for everything WCN does — cubic-bezier(.2, .7, .2, 1). Fast out, soft landing. Linear is reserved for progress and spinners only.
The motion principle, in one line
Motion proves. It never decorates.
WCN Motion & Sound Map · 6 clusters · A–F04 · SENSORY · v1.1