WipeReveal

An editorial wipe: a colour bar sweeps across and leaves the text behind it.

Motion with manners.Accessible by default.

bash
npx shadcn@latest add https://www.rad-ui.com/r/wipe-reveal.json

React
import WipeReveal from "@/components/fx/wipe-reveal"

<h1><WipeReveal>Motion with manners.</WipeReveal></h1>

Real, unsplit text that stays in the accessibility tree; only its clip animates.
The bar is aria-hidden.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) shows the text with no wipe.

Prop	Type	Default	Description
children	ReactNode	—	The text.
as	'p' \| 'span' \| 'div' \| 'h1' \| 'h2' \| 'h3' \| 'h4'	'span'	Element to render.
color	string	'#a78bfa'	Bar colour.
duration	number	900	Milliseconds for the wipe.
delay	number	0	Milliseconds before starting.