GlowText TxGlowText adds a sweep highlight over text, badges, image previews, and compact surfaces. Use mode="text-clip" when the shine should be clipped to glyphs; keep the default adaptive mode for container-level shimmer.
adaptive is enabled by default (container-level shimmer, good for images/cards); for text use mode="text-clip" so shimmer clips to glyphs.
text-clip currently sweeps right → left (aligned with the ShinyText reference).
Demo will load when visible.
<template>
<div style="display: flex; flex-direction: column; gap: 12px;">
<TxGlowText
mode="text-clip"
:band-size="24"
:duration-ms="1300"
:opacity="0.95"
color="rgba(255, 255, 255, 0.98)"
style="font-size: 20px; font-weight: 700; color: var(--tx-text-color-secondary, #a9b1bd);"
>
GlowText
</TxGlowText>
<TxGlowText
mode="text-clip"
:angle="18"
:band-size="26"
:duration-ms="1700"
:opacity="0.92"
color="rgba(125, 211, 252, 0.95)"
style="font-size: 14px; font-weight: 500; color: var(--tx-text-color-secondary, #9ea8b7);"
>
Subtle sweep for captions
</TxGlowText>
<TxGlowText mode="text-clip" :angle="18" :band-size="30" :duration-ms="1400" color="rgba(99, 102, 241, 0.9)" style="font-size: 15px; font-weight: 600;">
Sweep highlight over text
</TxGlowText>
<TxGlowText mode="text-clip" :angle="20" :band-size="34" :duration-ms="1600" style="font-size: 16px; font-weight: 700;">
<span style="background: linear-gradient(90deg, #f59e0b, #ef4444, #8b5cf6); -webkit-background-clip: text; color: transparent;">
Colorful text still shines
</span>
</TxGlowText>
</div>
</template>
Demo will load when visible.
<template>
<div style="display: flex; flex-direction: column; gap: 12px;">
<TxGlowText tag="div" :radius="14" :angle="20" :band-size="34" :duration-ms="1600" color="rgba(255, 255, 255, 0.95)">
<div
style="width: 240px; height: 120px; border-radius: 14px; background: linear-gradient(135deg, #111827, #0f766e); border: 1px solid var(--tx-border-color-light);"
/>
</TxGlowText>
<TxGlowText tag="div" :radius="12" :angle="-12" :band-size="40" :duration-ms="2000" :opacity="0.55" color="rgba(255, 255, 255, 0.85)" blend-mode="soft-light">
<div
style="width: 240px; height: 120px; border-radius: 12px; background: linear-gradient(135deg, #f8fafc, #e2e8f0); border: 1px solid rgba(148, 163, 184, 0.25);"
/>
</TxGlowText>
</div>
</template>
Demo will load when visible.
<template>
<div style="display: flex; flex-direction: column; gap: 12px;">
<TxGlowText tag="div" :radius="999" :angle="-20" :band-size="28" :duration-ms="1200" :repeat="false">
<div
style="padding: 8px 14px; border-radius: 999px; background: linear-gradient(135deg, #4f46e5, #7c3aed); color: #ffffff; font-weight: 600; font-size: 13px; letter-spacing: 0.02em;"
>
New Feature
</div>
</TxGlowText>
<TxGlowText tag="div" :radius="12" :angle="16" :band-size="36" :duration-ms="1800" :opacity="0.6" color="rgba(255, 255, 255, 0.85)">
<div
style="padding: 12px 14px; border-radius: 12px; background: #0b1220; color: #e2e8f0; border: 1px solid rgba(148, 163, 184, 0.2); display: flex; align-items: center; gap: 10px;"
>
<div style="width: 8px; height: 8px; border-radius: 999px; background: #22c55e;"></div>
<div>
<div style="font-size: 12px; opacity: 0.8;">Connected</div>
<div style="font-size: 14px; font-weight: 600;">Realtime Sync</div>
</div>
</div>
</TxGlowText>
</div>
</template>
Prop Type Default Description tagstringspanRoot element used to wrap the default slot. activebooleantrueDisables the shine overlay when set to false. repeatbooleantrueRuns the sweep once when set to false. durationMsnumber1400Sweep animation duration in milliseconds. delayMsnumber0Delay before the sweep animation starts. anglenumber20Gradient angle in degrees. bandSizenumber38Highlight band width as a percentage of the gradient. colorstringrgba(255, 255, 255, 0.9)Highlight color used in the sweep gradient. opacitynumber0.75Overlay opacity during the visible part of the sweep. blendModestring- Optional CSS mix-blend-mode override for the shine overlay. mode'classic' | 'adaptive' | 'text-clip'adaptiveadaptive uses a container overlay; text-clip mirrors slot text and clips the shine to glyphs.backdropstring- Optional CSS backdrop filter override for the shine overlay. radiusnumber10Root border radius in pixels.