Motion
| Token | Value | Use |
|---|---|---|
duration.micro | 80ms | Toggle, checkbox check, icon swap |
duration.standard | 200ms | Panel slide, dropdown open, tooltip |
duration.emphasized | 320ms | Sheet/drawer entry, tab transition |
duration.data | 250ms | New data point fade-in, sparkline redraw |
duration.cinematic | 600ms | Command palette open, map focus |
spring.soft | k=120 d=18 | Map pin hover, KPI tile hover lift |
spring.firm | k=300 d=28 | Command palette open, drawer entry |
spring.snappy | k=420 d=32 m=0.8 | Quick UI feedback — drawer snap, reorder settle |
spring.bouncy | k=260 d=14 | Opt-in playful gestures only (e.g. a slide-to-confirm thumb) |
spring.soft is the upper bound of permissible overshoot for general UI; reserve spring.bouncy for deliberate, opt-in gestures.
Variants
Reusable Framer Motion variants for enter/exit. Pair staggerContainer (on the parent) with listItem (on each child) for a cascading list/grid entrance.
| Variant | Hidden → Visible |
|---|---|
variants.fadeIn | opacity 0 → 1 |
variants.fadeUp | opacity 0, y 6 → opacity 1, y 0 |
variants.scaleIn | opacity 0, scale 0.96 → 1 |
variants.listItem | opacity 0, y 8 → opacity 1, y 0 (per-item) |
variants.staggerContainer | staggers listItem children by 0.04s on enter |
Interactions
Ready-to-spread Framer Motion props for tactile feedback. Honor reduced motion at the call site, or globally via <MotionConfig reducedMotion="user">.
| Interaction | Effect |
|---|---|
interactions.press | whileTap scale 0.97, spring.firm |
interactions.hoverLift | whileHover y −2 over duration.standard |
stagger()
stagger(childrenSeconds = 0.04, delaySeconds = 0) returns a parent transition config that cascades its children's entrance — e.g. transition={stagger(0.05)} on a container whose children use variants.listItem.
What never animates
- Alert and toast appearance — instant
- Status pip color change — instant
- Critical metric value updates — instant
- Form validation errors — instant
- Live/recording pulse — opacity only, no transform
Cinematic flourishes (exactly two)
- Command palette open — backdrop dims 200ms, palette scales 96 → 100 with translate +12 → 0 over 280ms using
spring.firm. - Map focus transition — camera eases with
spring.softover 500–600ms. The primary cinematic moment in the product.