---
title: "GlowText"
description: "An animated highlight band that sweeps across text or content."
category: Effects
status: beta
since: 0.3.4
tags: [glow, text, animation, highlight]
syncStatus: reviewed
verified: true
---

## Usage

### Text
`mode="text-clip"` clips the highlight to the glyphs, gradient text included.
:::TuffDemoWrapper{demo="GlowTextGlowTextDemo" code-lang="vue"}
---
code: |
  <template>
    <TxGlowText mode="text-clip" :band-size="24" :duration-ms="1300" color="rgba(255, 255, 255, 0.98)">
      GlowText
    </TxGlowText>
    <TxGlowText mode="text-clip" :angle="18" :band-size="30" color="rgba(99, 102, 241, 0.9)">
      Sweep highlight over text
    </TxGlowText>
    <TxGlowText mode="text-clip" :band-size="34">
      <span class="gradient-text">Colorful text still shines</span>
    </TxGlowText>
  </template>
---
:::

### Images and Cards
The default `adaptive` mode sweeps the whole container; set `tag="div"` around block content.
:::TuffDemoWrapper{demo="GlowTextGlowTextOnImageDemo" code-lang="vue"}
---
code: |
  <template>
    <TxGlowText tag="div" :radius="14" :band-size="34" color="rgba(255, 255, 255, 0.95)">
      <div class="card card--dark" />
    </TxGlowText>
    <TxGlowText tag="div" :radius="12" :angle="-12" :band-size="40" :opacity="0.55" blend-mode="soft-light">
      <div class="card card--light" />
    </TxGlowText>
  </template>
---
:::

### UI Elements
`:repeat="false"` sweeps once; pair it with `delayMs` for a one-shot feature badge.
:::TuffDemoWrapper{demo="GlowTextGlowTextCasesDemo" code-lang="vue"}
---
code: |
  <template>
    <TxGlowText tag="div" :radius="999" :angle="-20" :band-size="28" :duration-ms="1200" :repeat="false">
      <div class="badge">New Feature</div>
    </TxGlowText>
    <TxGlowText tag="div" :radius="12" :angle="16" :band-size="36" :opacity="0.6">
      <div class="status-card">Realtime Sync</div>
    </TxGlowText>
  </template>
---
:::

### Best Practices

- 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`.

## API Reference

### Props

| 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. |

### Slots

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

## Overview

- `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.

## Technologies

- 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/`.

<TuffDocSourceLink />