Rise Text

Letters rise into place one beat at a time, out of a clipped line. An entrance with a little character.

pnpm dlx shadcn@latest add @latheui/rise-text

Part of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.

Rise Text is part of Lathe Pro

The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.

Depends on

API reference

Also accepts native span attributes. Size, weight and color come from className.

Prop	Type	Default	Description
text* (required)	string	—	The text to show.
delay	number	0	Seconds before the first letter moves.
stagger	number	0.055	Seconds between one letter and the next.
duration	number	1	Seconds each letter takes to rise.
trigger	"mount" \| "inView"	"inView"	Play as soon as it mounts, or once it scrolls into view.

Screen readers get the text once, as plain text. The letters are hidden from them.
Put it inside a heading or paragraph for the right semantics. It renders a span.

Each letter rises from below its line with a slight tilt over one second, on a long ease out.
It runs on the Web Animations API and plays once.
With reduced motion, the text is shown complete.

Change the key to play the entrance from the start.

<RiseText key={run} text="Make moves." />