~james/core

core/web/src/lib/motion/spring.ts -rw-r--r-- 2.2 KiB
452f17b7 — james chore(import): snapshot james.dad.town/core at f70c71c7696a 15 hours ago
                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
// the closed form below branches on damping ratio: overdamped and critically
// damped settle monotonically, underdamped overshoots and settles into it —
// same sampling, different shape.
const springEasing = (stiffness: number, damping: number, mass: number, duration: number) => {
	const omega = Math.sqrt(stiffness / mass);
	const zeta = damping / (2 * Math.sqrt(stiffness * mass));
	const at =
		Math.abs(zeta - 1) < 1e-6
			? (seconds: number) => 1 - Math.exp(-omega * seconds) * (1 + omega * seconds)
			: zeta < 1
				? (() => {
						const wd = omega * Math.sqrt(1 - zeta * zeta);
						return (seconds: number) =>
							1 -
							Math.exp(-zeta * omega * seconds) *
								(Math.cos(wd * seconds) +
									((zeta * omega) / wd) * Math.sin(wd * seconds));
					})()
				: (() => {
						const spread = omega * Math.sqrt(zeta * zeta - 1);
						const fast = -zeta * omega + spread;
						const slow = -zeta * omega - spread;
						return (seconds: number) =>
							1 -
							(slow * Math.exp(fast * seconds) - fast * Math.exp(slow * seconds)) /
								(slow - fast);
					})();
	const end = at(duration / 1000);
	return (t: number) => at((t * duration) / 1000) / end;
};

const cssLinear = (easing: (t: number) => number, steps = 20) =>
	`linear(${Array.from({ length: steps + 1 }, (_, i) => +easing(i / steps).toFixed(3)).join(", ")})`;

export const RAIL_DURATION = 400;
export const railEasing = springEasing(520, 40, 0.5, RAIL_DURATION);
export const RAIL_EASING = cssLinear(railEasing);

/** natural settle is 659ms; rescaled at a constant zeta to land inside this
    budget without changing its shape — duration and the physics constants
    above are coupled. */
export const CROSSFADE_DURATION = 280;
export const crossfadeEasing = springEasing(1438, 80, 0.8, CROSSFADE_DURATION);
export const CROSSFADE_EASING = cssLinear(crossfadeEasing);

export const POP_DURATION = 300;
export const popEasing = springEasing(640, 22, 0.7, POP_DURATION);
export const POP_EASING = cssLinear(popEasing, 40);

export const EXIT_DURATION = 140;
export const EXIT_EASING = "cubic-bezier(0.4, 0, 1, 1)";

export const DRAW_DURATION = 260;
export const DRAW_EASING = "cubic-bezier(0.23, 1, 0.32, 1)";