Curves

Comparing and demonstrating the three available function curves in fluidity.

Every fluidity utility comes in linear, exponential, and logarithmic curve variants. Each uses a different easing function that transforms progress between the viewport limits into a target value. They share the same start and end values (min at progress 0, max at progress 1), but return different target values between the extremes.

Linear (no prefix)

ease(t) = t

Progress maps directly to the value range. The value changes at a constant rate across the axis range. Use this when you want a straightforward proportional scale.

Example: f6y-p-2/8 padding scales from 0.5rem to 2rem at a constant rate.

Exponential (exp- prefix)

ease(t) = (base^t - 1) / (base - 1)

Starts slow and accelerates. The value barely moves near the lower bound, then ramps hard as the axis approaches the upper bound. This is useful for properties that should respond subtly on small viewports and aggressively on large ones.

Example: f6y-exp-p-2/8 padding stays near 0.5rem on mobile, then shoots toward 2rem on desktop.

Default base is --f6y-base: 2. Higher bases (for example, 4 or 8) make the curve sharper, compressing more of the range near the lower bound. Lower bases (for example, 1.5) flatten the curve.

Logarithmic (log- prefix)

ease(t) = log(1 + (base - 1) × t, base)

The exact inverse of exponential. Starts fast and decelerates. The value climbs steeply near the lower bound, then levels off as it approaches the upper bound. Use this when a property should move aggressively on small viewports and plateau on large ones.

Example: f6y-log-p-2/8 padding jumps from 0.5rem steeply, then approaches 2rem more gradually on larger viewports.

Like exponential, --f6y-base controls the curve sharpness.

Side-by-side comparison

Resize the container below to see how the three curves diverge. All three use identical min (6rem) and max (100cqi) bounds, but the width value scales differently for each.

Endpoints

All three curves meet at progress 0 (where value = min) and progress 1 (where value = max), regardless of base. Swapping f6y-w-24/[100cqi] for f6y-exp-w-24/[100cqi] changes nothing at the viewport boundaries. Only the path between them changes. This makes curves safe to swap mid-project.