Easing
Reshape linear motion into natural curves
Easing transforms a linear 0-to-1 input into a shaped curve, redistributing values so transitions feel organic instead of mechanical. A linear ramp moves at constant speed — easing adds acceleration, deceleration, or both, producing motion that mirrors real-world physics.
There are four fundamental types. Smoothstep (3t² − 2t³) is a symmetric S-curve with zero velocity at both ends — ideal for fade effects and blending. Ease-in (t raised to an exponent) starts slow and accelerates — like an object falling under gravity. Ease-out (the complement of ease-in) decelerates into rest. Ease-in-out combines both halves into a single S-curve whose steepness you control with the exponent.
These curves appear everywhere: CSS transitions, animation engines, shader programming (GLSL's built-in smoothstep), and procedural generation. In the pattern editor the ease node applies any of the four types to a value or array, letting you reshape spacing, thickness progressions, or any parameter that benefits from nonlinear distribution.
function applyEase(t: number, mode: number, exp: number): number {
switch (mode) {
case 0: return 3 * t * t - 2 * t * t * t; // Smoothstep
case 1: return Math.pow(t, exp); // Ease In
case 2: return 1 - Math.pow(1 - t, exp); // Ease Out
case 3: return t < 0.5 // Ease In-Out
? 0.5 * Math.pow(2 * t, exp)
: 1 - 0.5 * Math.pow(2 - 2 * t, exp);
default: return t;
}
}