WhoAmILenZ Motion Guide
Soft clay physics,not carnival motion
Duration tokens, stagger recipes, press scale, and reduced-motion rules that match the Butterscotch × Navy clay UI. Interactive demos below — hit Replay to re-trigger enter animations.
Principles
Interruptible first
Interactive states use CSS transitions (not keyframes) so mid-gesture reverse feels natural.
Split + stagger
Never animate one giant shell. Enter hero, filters, then cards with ~55ms stagger.
Enter > exit
Enter ~350–450ms with blur+Y. Exit/dismiss ~150ms — don't fight the next focus.
Reduced motion
prefers-reduced-motion kills one-shot animations and short-circuits transitions.
Duration tokens
| Token | Value |
|---|---|
| --motion-micro | 80ms |
| --motion-quick | 150ms |
| --motion-fast | 250ms |
| --motion-medium | 350ms |
| --motion-slow | 450ms |
| --motion-stagger | 55ms |
| --ease-out | 0.22,1,0.36,1 |
| --ease-soft | 0.2,0,0,1 |
Recipes (live)
Staggered list enter
opacity + translateY(10px) + blur(4px) · 55ms stagger
Hero / safe-preview pop
scale 0.92→1.02→1 · blur dissolve
Press scale
active: scale(0.96) · 150ms soft ease · interruptible
Hover lift (cards)
translateY(-3px) + clay shadow · transition not keyframe
Chip / filter toggle
color + shadow transition · 150–250ms
Intent bar reveal
scaleX from left · gradient brand bar
Card top accent bar
Loading shimmer
linear highlight sweep · thinking states only
Where it ships in product
Do / Don't
- DoPrefer opacity + transform (+ light blur). Keep press at 0.96 only.
- DoStagger list items, not the whole page wrapper.
- Don'tUse transition: all, bounce springs, or multi-second hero loops on every visit.
- Don'tAnimate layout width/height on feed scroll — lift/fade only.