Springs

1import type { Easing, Transition } from "motion/react";
2 
3/**
4 * Motion tokens. Four tiers, each an enter spring paired with a faster,
5 * bounce-free exit tween. Never hand-write a duration/transition inline —
6 * import the tier that matches how big the thing moving is, and how often
7 * it fires.
8 */
9 
10/** Strong ease-out, matching this repo's `docs/design-system.md` guidance that built-in
11 *  easing keywords are too weak for deliberate UI motion. Used on every
12 *  tier's exit tween. Motion's array form of `cubic-bezier(0.23, 1, 0.32, 1)`.
13 *  Exported so a component with its own bespoke, non-tier tween (e.g. a
14 *  checkmark `pathLength` draw) can reuse the same curve instead of a bare
15 *  easing keyword. */
16export const easeOutStrong: Easing = [0.23, 1, 0.32, 1];
17 
18interface SpringTier {
19  /** Enter transition — spring, responds naturally to interruption. */
20  enter: Transition;
21  /** Exit transition — plain tween, one notch quicker, no bounce. */
22  exit: Transition;
23}
24 
25export const spring = {
26  /** Continuous, pointer-tracked motion only: proximity-hover pills, live
27   *  highlight rects that follow the cursor, drag indicators. Anything
28   *  triggered by a discrete click/open — even something small — belongs on
29   *  `quick` or above. Kept at its current speed; this tier is not part of
30   *  the retune, it already needs to feel instant. */
31  fast: {
32    enter: { type: "spring", duration: 0.08, bounce: 0 },
33    exit: { duration: 0.06, ease: easeOutStrong },
34  },
35  /** One-shot feedback that isn't continuously tracked: tooltips, preview
36   *  cards, icon crossfades, small entrance staggers. Enough spring to read
37   *  as motion rather than a cut, still fast enough to keep up with the
38   *  interaction that triggered it. */
39  quick: {
40    enter: { type: "spring", duration: 0.14, bounce: 0.1 },
41    exit: { duration: 0.1, ease: easeOutStrong },
42  },
43  /**
44   * Short travel / small expansion (dropdown & tab indicators, switch
45   * thumb, accordions) and panels that must land exactly (mobile drawer,
46   * selection merge/split).
47   */
48  moderate: {
49    enter: { type: "spring", duration: 0.2, bounce: 0.12 },
50    exit: { duration: 0.15, ease: easeOutStrong },
51  },
52  /** Large surfaces: dialogs, side panels, stepped flows. */
53  slow: {
54    enter: { type: "spring", duration: 0.32, bounce: 0.18 },
55    exit: { duration: 0.22, ease: easeOutStrong },
56  },
57} satisfies Record<"fast" | "quick" | "moderate" | "slow", SpringTier>;