SparklesText
sparkles-textSurrounds text with animated sparkles generated on the client.
Usage
Basic usage
Randomly generated small star pulses flash around the text, default primary/chart token star color.
<SparklesText className="text-4xl font-bold text-foreground">Hulian</SparklesText>Number of stars
sparklesCount controls the number of stars that exist at the same time (default 8), the more, the more lively it is.
<SparklesText
className="text-4xl font-bold text-foreground"
sparklesCount={20}
>
Sparkle
</SparklesText>Customized star color
colors Pass in the star color array, and each star randomly selects one of the colors.
<SparklesText
className="text-4xl font-bold text-foreground"
colors={["var(--color-chart-2)", "var(--color-chart-4)"]}
>
A moment to shine
</SparklesText>When to use
Use SparklesText to surround a short title or brand word with randomly positioned pulsing stars. Use AuroraText or AnimatedGradientText for color flowing through the glyphs, AnimatedShinyText for a sweeping highlight, or Text for static copy. This is a client component because star positions and animation are generated in the browser.
Import
import { SparklesText } from "@hulianui/ui"Props
| Name | Type | Default | Description |
|---|---|---|---|
| colors | string[] | [primary, chart-1] tokens | Star colors. |
| sparklesCount | number | 8 | Number of stars. |
Inherit ComponentPropsWithoutRef<"span"> (except color), such as className / style.
Slots
| Slot | Type | Description |
|---|---|---|
| children | ReactNode | text to render |
Example
<SparklesText className="text-4xl font-bold text-foreground">Hulian</SparklesText>Usage guidelines
- Star positions are random and generated on the client. Do not expect server output to contain the final hydrated coordinates. The
"use client"component may be embedded under a server component but is not itself a pure RSC. - HulianUI token values in
colorsneed the--color-prefix, such asvar(--color-primary). - Large
sparklesCountvalues add animation nodes and can make a small text area visually cluttered.
Related
Text · Heading · Prose · Markdown · AuroraText · AnimatedShinyText
Playground
<SparklesText sparklesCount={10}>Hulian</SparklesText>