Sparkles Text

Installation

pnpm dlx @glinui/cli@latest add sparkles-text

Credits. Adapted from Magic UI (MIT, (c) Magic UI). No motion dependency (Web Animations), sparkles generated after mount for SSR safety, token colors and reduced motion levels. Attribution details.

Prefer the package? npm install @glinui/ui @glinui/motion @glinui/tokens

Usage

Improvements: no motion dependency (Web Animations API), sparkles are created after mount so there is no hydration mismatch from Math.random, a fixed pool re-rolls position in place instead of replacing DOM every 100ms, positions use logical inline-start so RTL mirrors, and the count is capped.

Engines: the `engine` prop is not applicable. Continuous particle twinkle in css keyframes; no entrance to hand to an engine.

import { SparklesText } from "@glinui/ui"
export function Demo() {
  return (

import { SparklesText } from "@glinui/ui"


export function Demo() {
  return (
    <SparklesText
      sparklesCount={16}
      colors={{ first: "var(--color-signal-live)", second: "var(--color-accent)" }}
    >
      Shipped
    </SparklesText>
  )
}

Accessibility

• The text is real DOM text and is read normally.
• Every sparkle is a decorative svg with aria-hidden and is pointer-events none.
• No flashing: sparkles scale and fade over about one second each.

Reduced Motion

With prefers-reduced-motion or motion level none or subtle, the animated pool is replaced by two static stars.

API Reference

Source

Import directly from the package or browse the source on GitHub. Click any file to view it.

import { SparklesText } from "@glinui/ui"