GlowText | Tuff Docs

Usage

mode="text-clip" clips the highlight to the glyphs, gradient text included.

Loading demo...

The default adaptive mode sweeps the whole container; set tag="div" around block content.

Loading demo...

:repeat="false" sweeps once; pair it with delayMs for a one-shot feature badge.

Loading demo...

Use text-clip for labels, headings, and gradient text; use adaptive for images, cards, and status chips.
Keep bandSize between 24 and 40 on text; wider bands suit images and cards.
On light cards, lower opacity or use blendMode="soft-light" with a darker color.
Don't wrap focusable controls, so the highlight never hides a focus ring.
Don't use it as a loading skeleton; use TxSkeleton, TxProgressBar, or TxLoadingState.

Prop	Type	Default	Description
`tag`	`string`	`span`	Root element; `span` for text, `div` for cards or images.
`active`	`boolean`	`true`	Shows the sweep; when `false`, the slot still renders.
`repeat`	`boolean`	`true`	Loops the sweep; `false` runs it once.
`durationMs`	`number`	`2000`	Length of one cycle in ms.
`delayMs`	`number`	`0`	Delay before the sweep starts, in ms.
`angle`	`number`	`20`	Band tilt from vertical in degrees; `0` is upright, positive leans like `/`.
`bandSize`	`number`	`38`	Band width as a percentage of the element's width.
`color`	`string`	`rgba(255, 255, 255, 0.9)`	Highlight color.
`opacity`	`number`	`0.75`	Highlight opacity.
`blendMode`	`string`	-	Custom `mix-blend-mode`; `adaptive` defaults to `plus-lighter`, else `screen`.
`mode`	`'classic' \| 'adaptive' \| 'text-clip'`	`adaptive`	`classic` is a plain overlay, `adaptive` adds blend and backdrop defaults, `text-clip` clips to glyphs.
`backdrop`	`string`	-	Custom `backdrop-filter`, such as `brightness(1.2) saturate(1.1)`.
`radius`	`number`	`10`	Root corner radius in px.

Name	Props	Description
`default`	-	Content that receives the sweep; in `text-clip`, plain text is mirrored into an `aria-hidden` layer.

adaptive only lightens, so a light color on a light surface stays invisible, with no error.
text-clip reads the slot text on mount and on text changes; it suits simple text only.
The band travels at a constant speed from half a width before the left edge to half a width past the right, over 65% of the cycle, then waits off-stage; --tx-glow-ease overrides the easing.
In adaptive, the backdrop filter affects only what the band crosses.
Both shine layers are aria-hidden; keep the readable text in the default slot.
Under reduced motion the sweep stops and a static, centered highlight remains.

The band is one linear-gradient at 90deg + angle on a layer three element-widths wide, moved by transform (background-position in text-clip).
Source: packages/tuffex/packages/components/src/glow-text/.

packages/tuffex/packages/components/src/glow-text/index.ts