---
title: Curves
description: "Comparing and demonstrating the three available function curves in fluidity."
sidebar:
  order: 2
---

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)

```text
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)

```text
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)

```text
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.

<Demo caption="Drag to resize" resize>
  <div class="@container f6y-demo-track flex flex-col gap-4">
    <div class="f6y-demo-box f6y-exp-w-24/[100cqi] f6y-axis-cqi f6y-lower-[16rem] f6y-upper-[36rem]">
      exponential
    </div>
    <div class="f6y-demo-box f6y-w-24/[100cqi] f6y-axis-cqi f6y-lower-[16rem] f6y-upper-[36rem]">
      linear
    </div>
    <div class="f6y-demo-box f6y-log-w-24/[100cqi] f6y-axis-cqi f6y-lower-[16rem] f6y-upper-[36rem]">
      logarithmic
    </div>
  </div>
</Demo>

## 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.

**[Configuration](/concepts/configuration)**

Control curve base, axis, and scaling bounds.

**[Utility Index](/reference/utility-index)**

Exhaustive list of all generated classes.