| 1 | // Shared GSAP animation configuration. |
| 2 | // Mirrors the CSS token system (--dur-fast/--dur-base/--dur-slow/--ease-out) |
| 3 | // so JS-driven animations stay in sync with the CSS transition layer. |
| 4 | |
| 5 | /** 120ms — color/border hovers, tooltips. */ |
| 6 | export const DUR_FAST = 0.12; |
| 7 | |
| 8 | /** 180ms — popovers, menus, small enters. Matches CSS --dur-base. */ |
| 9 | export const DUR_BASE = 0.18; |
| 10 | |
| 11 | /** 340ms — drawers, modals, panel slides. Matches CSS --dur-slow. */ |
| 12 | export const DUR_SLOW = 0.34; |
| 13 | |
| 14 | /** "power2.out" approximates the app-wide CSS cubic-bezier(0.2, 0.72, 0.2, 1). */ |
| 15 | export const EASE_OUT = "power2.out"; |
| 16 | |
| 17 | /** Returns true when the user has requested reduced motion at the OS level. */ |
| 18 | export function prefersReducedMotion(): boolean { |
| 19 | if (typeof window === "undefined" || !window.matchMedia) return false; |
| 20 | return window.matchMedia("(prefers-reduced-motion: reduce)").matches; |
| 21 | } |
| 22 |