Morphing Text

Blurs one phrase out as the next resolves in.

Installation

pnpm dlx shadcn@latest add https://paulkeys.org/r/morphing-text.json

Adds components/velora/morphing-text.tsx.

Prop	Type	Default
`texts*`	`string[]`	`—`
`hold` Seconds each phrase is held at full clarity	`number`	`2`
`morph` Seconds spent blurring between phrases	`number`	`0.8`
`className`	`string`	`—`

Reduced motion: Only the first phrase is shown, statically, with no blur. With motion allowed, cycling pauses while the pointer is over the text, while focus is inside it, and while the tab is hidden.
Keyboard: Decorative — nothing to operate.
Screen readers: All phrases are exposed once, comma-separated, in an sr-only span; the morphing visual phrase is aria-hidden, so nothing is announced on change.

Blurs one phrase out as the next resolves in.

pnpm dlx shadcn@latest add https://paulkeys.org/r/morphing-text.json

Adds components/velora/morphing-text.tsx.

Prop	Type	Default
`texts*`	`string[]`	`—`
`hold` Seconds each phrase is held at full clarity	`number`	`2`
`morph` Seconds spent blurring between phrases	`number`	`0.8`
`className`	`string`	`—`

Reduced motion: Only the first phrase is shown, statically, with no blur. With motion allowed, cycling pauses while the pointer is over the text, while focus is inside it, and while the tab is hidden.
Keyboard: Decorative — nothing to operate.
Screen readers: All phrases are exposed once, comma-separated, in an sr-only span; the morphing visual phrase is aria-hidden, so nothing is announced on change.