Text Cascade · paneui

production ·

Installation

pnpm dlx shadcn@latest add @paneui/text-cascade

Usage

import { TextCascade } from "@/components/ui/text-cascade"

<TextCascade text={status} />

Examples

Stagger

Width

Headline

Use as the rotating word in a heading; it inherits the surrounding type.

Motion

Each letter moves on a spring (460 / 32 / 0.55) and exits take half the stagger. With reduced motion the word cross-fades and the width snaps. Screen readers read the current text once from a hidden copy.

Text Shimmer, Text Scramble, Text Reveal. Reasoning Text uses it for streamed labels.

API Reference

TextCascade

Letter-by-letter slot roll between the previous and current text. Also accepts every prop of motion.span.

text*: string; Current text. Changing it rolls the letters, left to right, to the new value.
stagger= 0.025: number; Seconds between neighbouring letters.
animateWidth= true: boolean; Glide the wrapper between the old and new widths (otherwise it snaps).

Prop	Type	Default	Description
text*	string	—	Current text. Changing it rolls the letters, left to right, to the new value.
stagger	number	0.025	Seconds between neighbouring letters.
animateWidth	boolean	true	Glide the wrapper between the old and new widths (otherwise it snaps).

data-slot: "text-cascade"

Data attribute	Description
data-slot	"text-cascade"

useContentWidth

const [ref, width] = useContentWidth<HTMLSpanElement>() tracks an in-flow sizer's rendered width with a ResizeObserver so a wrapper can animate to it. SWAP_SPRING, WIDTH_SPRING and EASE_OUT are exported too.