# Draw heading (goodtabs UI)

A heading with a hand-placed underline or circle stroked in as it enters view.

## Install

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

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

## Usage

```tsx
import { DrawHeading, DrawHeadingMark } from "@/components/ui/draw-heading"

<DrawHeading as="h1" mark="circle" className="text-7xl font-medium">
  Keep the <DrawHeadingMark>ten tabs</DrawHeadingMark> that matter
</DrawHeading>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| as | `"h1" | "h2" | "h3" | "h4"` | `"h2"` | The element to render. |
| mark | `"underline" | "circle"` | `"underline"` | The shape drawn on DrawHeadingMark. |
| tone | `"foreground" | "brand"` | `"foreground"` | Stroke colour. Use brand once on a page. |
| delay | `number` | `0` | Seconds to wait after the heading enters view. |

## When to use

- One phrase in a hero or section heading that carries the point
- A landing page that wants a human note next to precise type
- Editorial pages and launch posts

## When not to use

- More than one heading on a screen
- App chrome and dashboards
- Phrases long enough to need a second line: the mark stays on one

## Notes for agents

- GSAP installs from npm under GSAP's own licence. No GSAP code ships in this registry
- The text never moves or hides, so this is safe on a hero. Only the stroke animates
- Wrap one phrase in DrawHeadingMark. It is an inline block that does not wrap, so keep it to two or three short words
- Leave line height at leading-tight or looser, or the underline meets the line below
- The stroke sits in the markup, so reduced motion and no script both show it drawn. It is aria-hidden

## The maths

- Stroke width is 0.055em, 4px on a 72px heading, so it scales with the type.
- The path is scaled by W / 300 and H / 24 into CSS pixels before drawing, because DrawSVG cannot measure a non-uniformly stretched stroke, then restored so the mark follows the word.

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