# Line mask reveal (goodtabs UI)

Lines of a heading slide up from behind a mask as they enter view, once.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/line-mask-reveal.json
```

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

## Usage

```tsx
import { LineMaskReveal } from "@/components/ui/line-mask-reveal"

<LineMaskReveal as="h1" className="text-7xl leading-none font-medium tracking-tight">
  Good interfaces are mostly the parts you never notice
</LineMaskReveal>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| as | `"h1" | "h2" | "h3" | "h4" | "p" | "div"` | `"h2"` | The element to render. |
| duration | `number` | `1.1` | Seconds each line takes to rise. |
| delay | `number` | `0` | Seconds to wait after the heading enters view. |

## When to use

- The one heading a section is built around
- A hero, where the text must exist before any script runs
- Short paragraphs that follow a heading, at a small delay

## When not to use

- Every heading on a page: one entrance per section
- Body copy longer than a few lines
- Text people return to often, such as app chrome
- On a hero above the fold, where the text paints first and the entrance reads as a flash

## Notes for agents

- GSAP installs from npm under GSAP's own licence. No GSAP code ships in this registry
- The text is plain markup first, so it paints before hydration and stays if the script fails. It then hides for the entrance, which waits for document.fonts.ready because lines are measured
- The split only lives while the entrance plays. It re-splits on resize before and during the entrance, then reverts to plain text, so later resizes need nothing
- Inner elements such as a muted span survive the split. Under reduced motion it never splits

## The maths

- Stagger is min(0.12, 0.6 / n) seconds, so two lines step 0.12 and ten lines still start within 0.6.
- Each mask bleeds 0.16em and a line starts 120 percent down, so descenders stay whole at leading-none and nothing peeks before the rise.

Docs: https://ui.goodtabs.co/components/line-mask-reveal