Fade lines
Text whose lines rise and fade in one after another as it scrolls into view.
Behaviour
- Lines rise a quarter of a line and fade in one after another (60ms apart, capped at the ninth line) the first time the text scrolls into view, even at the very bottom of a page that cannot scroll further.
- Lines are found once laid out, by grouping the words by their top edge; no-break spaces keep their words together and a long word wraps inside its own box.
- The text is visible without JavaScript, and only opacity and translate move, so the layout never shifts.
- Reduced motion: lines fade in without the rise.
Props
| Prop | Type | Description |
|---|---|---|
| text | string | The text. The lines are wherever it wraps; you don't break it yourself. |
| className | string | Size, weight, colour and line height. |
Installation
npx shadcn@latest add https://purrfectui.com/r/fade-lines.jsonHow to use
import { FadeLines } from "@/components/ui/fade-lines";
<FadeLines text="Helping brands thrive in the digital world." className="text-2xl" />Source code
Loading…
License
MIT. Copy it into your project and change it as you like.