FillText

Outlined letters that flood with colour, in view or on hover.

FILL ME UP

Hover to fill

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

React
import FillText from "@/components/fx/fill-text"

<FillText as="h2">FILL ME UP</FillText>

Real, unsplit text.
Outline-only text is hard to read, so it fills as soon as it is visible by default.
Forced-colours mode shows plain text.
prefers-reduced-motion: reduce (or data-rad-fx-motion="reduce" on an ancestor) shows the text already filled.

Prop	Type	Default	Description
children	ReactNode	—	The text.
as	'p' \| 'span' \| 'div' \| 'h1' \| 'h2' \| 'h3' \| 'h4'	'span'	Element to render.
color	string	'#f4f4f5'	Fill and outline colour.
trigger	'inView' \| 'hover'	'inView'	When to fill.