Fit title
One line of display type sized to exactly fill its container, rising out of a mask on first view.
Behaviour
- Fills its container's width exactly; very short titles stop at half the width.
- Sized in CSS with container units, so the first paint is already right; one measurement corrects it, and resizing needs no JS.
- Wraps onto more lines when it would fit smaller than min.
- Rises out of a mask the first time it scrolls into view; with JavaScript off it is simply visible.
- Reduced motion: no rise, a short fade instead.
Props
| Prop | Type | Description |
|---|---|---|
| children | string | The title text. |
| as | "h1" | "h2" | "p"default "h1" | The element to render. |
| min | numberdefault 28 | Smallest font size in px; a title that would fit smaller wraps instead. |
| max | number | Largest font size in px. |
| rise | booleandefault true | Rise out of a mask the first time it scrolls into view. |
| className | string | Font family, weight and colour (the size is computed). |
Installation
npx shadcn@latest add https://purrfectui.com/r/fit-title.jsonHow to use
import { FitTitle } from "@/components/ui/fit-title";
<FitTitle>shop</FitTitle>Source code
Loading…
Credits
Ported from poinu.vercel.app.
License
MIT. Copy it into your project and change it as you like.