Something went wrong. Try again.
Monorepo for Tangled tangled.org
Something went wrong. Try again.
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061// interior.dev's springs, sampled so CSS transitions and svelte transitions// run the identical curve. 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(", ")})`;
/** rail markers and progress connectors */export const RAIL_DURATION = 400;export const railEasing = springEasing(520, 40, 0.5, RAIL_DURATION);export const RAIL_EASING = cssLinear(railEasing);
/** interior's crossfade spring (260/34/0.8) — step panes, the card height that follows them, and anything swapping one face for another. it settles in 659ms, so it is rescaled at a constant zeta to land inside the 300ms budget without changing its shape. */export const CROSSFADE_DURATION = 280;export const crossfadeEasing = springEasing(1438, 80, 0.8, CROSSFADE_DURATION);export const CROSSFADE_EASING = cssLinear(crossfadeEasing);
/** the tick/cross arriving in a step's status cell — interior.dev's POP */export const POP_DURATION = 300;export const popEasing = springEasing(640, 22, 0.7, POP_DURATION);export const POP_EASING = cssLinear(popEasing, 40);
/** leaving is shorter and closer in, matching ui/Modal */export const EXIT_DURATION = 140;export const EXIT_EASING = "cubic-bezier(0.4, 0, 1, 1)";
/** a stroke drawing itself on, interior's DRAW */export const DRAW_DURATION = 260;export const DRAW_EASING = "cubic-bezier(0.23, 1, 0.32, 1)";