Smoothstep

平滑阶跃 · smoothstep

Turn an input interval into a 0→1 transition that settles at both ends.

Distance, scroll and shape blends often need a bounded weight. Clipping a linear ramp abruptly changes slope at its edges. Cubic smoothstep has zero slope at both ends; quintic smootherstep also has zero second derivative there. It is useful for spatial weights as well as timed progress.

Formula

t = clamp((x−edge0)/(edge1−edge0), 0, 1)
order 3: t²(3−2t)
order 5: t³(6t²−15t+10)

Parameters

	This page	Mature libraries
edge0 / edge1	0.25 / 0.75	—The edges set where the blend begins and ends.
order	3 or 5	—The quintic form has zero second derivative at the ends.

Doing it well

Normalize and clamp before applying the polynomial, so values outside the interval stay at exactly 0 or 1.www-motion/rewrite/filament/geometry.js:1
Use the quintic form when acceleration at the edges must also settle; filament uses it for shape blending.www-motion/rewrite/filament/geometry.js:1
Leave a real interval between the edges; coincident edges cannot describe a meaningful transition.

In our cases

32 cases use smoothstep. portfolio-photographer uses the cubic form for spatial emphasis across cards, while filament uses the quintic form to blend shapes.

Reference implementation · basics.js

/** Hermite smoothstep (order 3) or Perlin's smootherstep (order 5, zero 2nd derivative at the ends). */
export function smoothstep(edge0, edge1, x, order = 3) {
  const t = clamp(normalize(x, edge0, edge1));
  return order === 5 ? t * t * t * (t * (t * 6 - 15) + 10) : t * t * (3 - 2 * t);
}