Ease & Spring Tokens

1export const EASE_OUT = [0.16, 1, 0.3, 1] as const;
2export const EASE_IN_OUT = [0.77, 0, 0.175, 1] as const;
3export const EASE_DRAWER = [0.32, 0.72, 0, 1] as const;
4 
5/** CSS string form of EASE_OUT for inline style transitions. */
6export const EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)";
7 
8/** Press feedback on buttons and other tappable surfaces. */
9export const SPRING_PRESS = {
10  type: "spring",
11  stiffness: 500,
12  damping: 30,
13  mass: 0.6,
14} as const;
15 
16/** Content swaps — label/icon slots trading places inside a control. */
17export const SPRING_SWAP = {
18  type: "spring",
19  stiffness: 460,
20  damping: 30,
21  mass: 0.55,
22} as const;
23 
24/** Overlay panel entrances — modals and sheets summoned by pointer. */
25export const SPRING_PANEL = {
26  type: "spring",
27  stiffness: 420,
28  damping: 40,
29  mass: 0.5,
30} as const;
31 
32/** Shared-layout glides — pills, indicators and panels morphing between positions. */
33export const SPRING_LAYOUT = {
34  type: "spring",
35  stiffness: 360,
36  damping: 32,
37  mass: 0.6,
38} as const;
39 
40/** Cursor-follow physics for decorative mouse tracking (magnetic, tilt, dock). */
41export const SPRING_MOUSE = {
42  stiffness: 200,
43  damping: 15,
44  mass: 0.3,
45} as const;