Value · 09
Radial falloff
径向衰减 · radial-falloffInfluence grows near the pointer and reaches zero at the radius.
A hard circular switch makes elements jump at its edge. Radial falloff turns distance into a continuous weight for scale, displacement or brightness. A larger exponent concentrates influence near the center, while radius controls the reach.
Formula
w(d) = d ≥ R ? 0 : (1 − d/R)^p
Parameters
| This page | Mature libraries | |
|---|---|---|
| radius R | 120 px | our motion-kit radialPush: radius × reachWeight is zero outside the reach. |
| exponent p | 2 | our motion-kit: quadraticLinear falloff spreads widely; cubic concentrates at the center. |
Doing it well
- Check distance against radius before exponentiation, so an out-of-range negative base never meets a fractional exponent.www-motion/rewrite/lib/motion-kit.js:178–182
- Calculate strength and direction separately; provide a fallback direction at the exact center.www-motion/rewrite/lib/motion-kit.js:183–187
- Tune reach with radius and edge feel with exponent instead of only scaling the final displacement.
In our cases
19 cases use radial falloff. The site's motion-kit applies quadratic strength (1−d/R)² to push points away and handles the undefined direction when the pointer is exactly at the center.
Used in 19 cases
Reference implementation · basics.js
/** Influence of a point at distance d from a source of radius R: 1 at the centre, 0 at R. */
export const radialFalloff = (d, radius, exponent = 2) => (d >= radius ? 0 : (1 - d / radius) ** exponent);
/** Influence of one pointer on many elements; returns 0..1 per element. */
export const field = (points, px, py, radius, exponent = 2) =>
points.map(p => radialFalloff(Math.hypot(p.x - px, p.y - py), radius, exponent));