Sparkle

Highlight key messages with a subtle effect

npm run add Sparkle

Use the Sparkle component to add an animated sparkle effect to your text. The visual accent helps emphasize key messages. Use it to:

• Draw attention to key content: Highlight important words such as product names, offers, or value propositions.
• Enhance visual appeal:: Add a polished, modern, and premium feel to headings or promotional text.
• Boosts engagement: The subtle animation captures user interest and makes content more memorable.

<Sparkle text="Text with sparkle" />

To ues the Sparkle component, simply pass a text prop. By default, the component will calculate the amount of sparkles based on the length of the text. The longer the text, the more sparkles will be added.

Sparkle Amount

To override the automatically calculated amount of sparkles, you can set the amount prop:

<Sparkle
    text="Text with sparkle"
    amount={10}
/>

Size and Color

The size and color of the sparkles can also be configured using the size and color props:

<Sparkle
    text="Single color"
    color={['var(--w-color-info)']}
/>

<Sparkle
    text="Multiple colors"
    color={[
        'var(--w-color-info)', // Pass any valid CSS color
        'var(--w-color-success)',
        'var(--w-color-warning)',
        'var(--w-color-alert)'
    ]}
/>

<Sparkle
    text="Custom size"
    size={25}
/>

Animation Speed

The animation speed of the component can also be controlled. By default, the animation speed is set to 1 second. You can override this by setting the animationSpeed prop:

<Sparkle
    text="Text with sparkle"
    animationSpeed={2}
/>

API

type SparkleProps = {
    text: string
    amount?: number
    color?: string | string[]
    animationSpeed?: number
    size?: number
    className?: string
}