Text Mesh Mask Reveal

ProNew

A headline cut out of a drifting colour field, revealed one word at a time.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.


pnpm dlx shadcn@latest add @tealmac-pro/text-mesh-mask-reveal

Prop	Type	Default	Description
`children`	`string`	-	The headline.
`colors`	`[string, string, string, string]`	`indigo, pink, amber, teal`	Four colours of the field.
`drift`	`number`	`14`	Seconds for the field to drift once.
`className`	`string`	-	Classes for the heading.

The heading keeps the full sentence as its aria-label; the word spans are hidden.
Colours should keep at least 3:1 contrast against the page background.
Under prefers-reduced-motion the words show at once and the field holds still.