AnimatedShinyText
animated-shiny-textSweeps a restrained highlight across inline text.
Usage
Basic usage
muted A highlight sweep across the background, often used in the "✨ Introducing..." logo.
✨ Introducing Hulian
tsx
<div className="rounded-full border border-border bg-surface px-4 py-1.5">
<AnimatedShinyText className="text-sm">✨ Introducing Hulian</AnimatedShinyText>
</div>Highlight band width
shimmerWidth Controls the swept highlight band width px (default 100), the larger it is, the softer it is.
Wider highlight band
tsx
<AnimatedShinyText className="text-base" shimmerWidth={200}>
Wider highlight band
</AnimatedShinyText>Plain text inline
It is separated from the logo container and directly used as a line of highlight text.
Loading, please wait...
tsx
<AnimatedShinyText className="text-lg font-medium">
Loading, please wait...
</AnimatedShinyText>When to use
Use AnimatedShinyText to add a sweeping highlight to a short label, such as a pill badge or an "Introducing" banner. For a colorful aurora gradient, use AuroraText. For a continuously moving inline gradient, use AnimatedGradientText. For ordinary copy, use Text.
Import
ts
import { AnimatedShinyText } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| shimmerWidth | number | 100 | Width of the moving highlight band in pixels. |
Inherits ComponentPropsWithoutRef<"span"> (children / className / style, etc.).
Example
tsx
<div className="rounded-full border border-border bg-surface px-4 py-1.5">
<AnimatedShinyText className="text-sm">✨ Introducing HulianUI</AnimatedShinyText>
</div>Usage guidelines
- The effect uses a mask that sweeps across the text, so the text must have a visible foreground color. The highlight can disappear against an extremely light or dark background; a badge container with
borderandbg-surfaceusually provides enough contrast. - The component renders a
<span>. Empty content has no visible effect, and the text inherits its font size from the surrounding layout.
Related
Text · Heading · Prose · Markdown · AuroraText · AnimatedGradientText
Playground
✨ Introducing Hulian
<AnimatedShinyText shimmerWidth={100}>✨ Introducing</AnimatedShinyText>