# Fluid heading (goodtabs UI)

A heading that scales along a line through two points, with slope and intercept printed.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/fluid-heading.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/fluid-heading`

## Usage

```tsx
import { FluidHeading } from "@/components/ui/fluid-heading"

<FluidHeading minPx={30} maxPx={48} minVw={390} maxVw={1280}>
  Heading
</FluidHeading>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| minPx | `number` | `24` | Size in pixels at the small viewport. |
| maxPx | `number` | `48` | Size in pixels at the large viewport. |
| minVw | `number` | `320` | Small viewport width in pixels. |
| maxVw | `number` | `1280` | Large viewport width in pixels. |
| showFormula | `boolean` | `true` | Shows slope, intercept and the clamp() value under the heading. |

## When to use

- Page headings that should scale smoothly between two viewports
- Docs that teach where a clamp() value comes from

## When not to use

- Body text: keep it fixed so zooming behaves
- Pairs where the vw coefficient passes about 4, which fails zoom at 200 percent

## Notes for agents

- Server component. The size is a clamp() computed at render, so there is no layout shift
- Set showFormula to false in production and keep it for teaching pages
- It renders an h2, pass className to restyle it

## The maths

- Slope = (maxPx - minPx) / (maxVw - minVw), so 14 over 960 is 0.01458.
- Intercept = minPx - slope × minVw, so 18 - 0.01458 × 320 is 13.33px.
- Size = clamp(min, intercept + slope × 100vw, max).

Docs: https://ui.goodtabs.co/components/fluid-heading