SECT_01 // EASING_CURVES
Easing Curves
7 curvas canônicas. Hover em cada card dispara a curva 1x. Mechanical é o default. Spring é restrito — overshoot é proibido na maioria dos casos.
MECH
Industrial default · mechanical snap
--bb-ease-mech
SNAP
State change · button press
--bb-ease-snap
SMOOTH
Generic UI · CSS default
--bb-ease-smooth
DECEL
Entrance · reveal
--bb-ease-decel
ACCEL
Exit · dismiss
--bb-ease-accel
EXPO
Hero · narrative reveal
--bb-ease-expo
SPRING
Restricted · attention only
--bb-ease-spring
REF: MOTION_EASE_001
SECT_02 // DURATIONS
Durations
4 velocidades canônicas. Hover dispara a duração específica numa barra. 90–240ms cobre 90% das interações. 600ms apenas para hero/narrative.
FAST
90ms
Hover · focus · micro
--bb-dur-fast
BASE
160ms
Default state change
--bb-dur-base
MEDIUM
240ms
Modal · drawer enter/exit
--bb-dur-medium
SLOW
600ms
Hero · narrative · scrub
--bb-dur-slow
REF: MOTION_DUR_001
SECT_03 // MOTION_PROTOCOL
Protocol
Mechanical · snappy · never bouncy. GSAP respeita o protocolo: animações triggadas (não infinitas), prefers-reduced-motion honrado, sem parallax.
ACCEPTABLE
- Triggered fades (on hover, on enter)
- Hard slide-ins
- Color inversion on hover
- 2px translate on press
- Scrubbing readouts
- Stagger entrances (0.03–0.05s)
FORBIDDEN
- Spring overshoot (default)
- Parallax scroll
- Scale-pulse breathing
- Glassmorphism
- Backdrop blur
- Painterly textures
- Looping animations on idle
REF: MOTION_LAW_001