Line reveal

Lines lift in, re-measured on resize.

Lines are measured from the real layout, so the reveal follows the wrap at every width.

Installation

$ npx shadcn@latest add @textlab/line-reveal

Needs @textlab in your components.json. Setup takes a minute.

Usage

usage.tsx

import { LineReveal } from "@/components/textlab/line-reveal/line-reveal";

<LineReveal as="p" text="Lines are measured from the real layout, so the reveal follows the wrap at every width." />

Variants

risemasktilt

Props

Prop	Type	Default	Description
text*	string	–	The copy.
variant	"rise" \| "mask" \| "tilt"	"rise"	rise lifts from a clip, mask uncovers top to bottom, tilt swings up on a hinge.
as	ElementType	"span"	Rendered element.
trigger	"mount" \| "inView" \| "hover" \| "manual"	"inView"	What starts the animation. manual follows `active`.
active	boolean	false	Drives trigger="manual".
once	boolean	true	In view: play once instead of on every entry.
delay	number	0	Seconds before the first part moves.
stagger	number	0.1	Seconds between parts.
duration	number	0.8	Seconds each part takes.
ease	EaseName \| [number, number, number, number]	"enter"	Easing token or cubic bezier.
reducedMotion	"user" \| "always" \| "never"	"user"	user follows the OS setting; always shows the still version.
className	string	–	Merged onto the root.
onComplete	() => void	–	Called when a one-shot animation finishes.

When to use it

Reach for it

Two to four line intros and pull quotes.
Copy whose wrap changes across breakpoints.

Skip it

Single words; use word-reveal.
Body text longer than a short paragraph.

Accessibility

The sentence is read once from a visually hidden copy.
Line groups are aria-hidden presentation only.

Motion

Lines start 100 ms apart.
Line breaks are measured after fonts load and again whenever the width changes.

Reduced motion. Shows the paragraph as normal text with no grouping or movement.

Performance

One measure per frame at most, triggered by ResizeObserver.
Transform, opacity and clip-path only.