Sparkles Text — `<mv-sparkles-text>`

Tiny twinkling stars that pop up at random around and over the text; adjustable colors, density and speed, triggered on view or on hover.

Category	Animated text
Type	Web Component (`<mv-sparkles-text>`)
Status	stable
Keywords	sparkles, stars, twinkle, magic, promo, cta

When to use

A promo word, CTA label or 'magic' feature name should twinkle with tiny stars
Sparkles should appear only when a parent button or link is hovered

Avoid when

A one-off celebration after an action is wanted rather than continuous twinkling → use Confetti instead
Long text or many instances per screen; the effect is meant for one short highlighted word

Install

node scripts/add.mjs sparkles-text --out ./src/marvelous

AI agent with the Marvelous UI MCP server: install_components({ slugs: ["sparkles-text"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Files copied (dependencies included): tokens/tokens.css, core/base.css, core/dom.js, core/element.js, core/motion.js, core/observe.js, components/sparkles-text/sparkles-text.js, components/sparkles-text/sparkles-text.css.

Usage

Canonical markup — start from it and customize with attributes, data-* and CSS variables:

<div style="display:grid;gap:2rem;justify-items:center;text-align:center">
  <h2 style="margin:0;font:800 clamp(2rem,5vw,3.25rem)/1.1 var(--mv-font-sans);letter-spacing:-.04em">
    Your project deserves to <mv-sparkles-text><span class="mv-gradient-text" data-animate>shine</span></mv-sparkles-text>
  </h2>

  <p style="margin:0;font:600 1.25rem/1.4 var(--mv-font-sans);color:var(--mv-fg-muted)">
    Launch offer:
    <mv-sparkles-text colors="#facc15, #fb7185, #f97316" density="1.6" speed="1.3" style="color:var(--mv-fg)">40% off your first year</mv-sparkles-text>
  </p>

  <button class="mv-button" data-size="lg" data-shape="pill">
    <mv-sparkles-text trigger="hover" density="2" colors="white, #fde68a">Upgrade to Pro</mv-sparkles-text>
  </button>
</div>

API

Attributes

Name	Type	Default	Description
`colors`	list of CSS colors	`var(--mv-accent), var(--mv-warning)`	Star colors, comma-separated (tokens, oklch(), var() accepted).
`density`	number	`1`	Star count multiplier (proportional to text length, 5 minimum, 40 maximum).
`speed`	number	`1`	Twinkle speed.
`trigger`	view \| load \| hover \| manual	`view`	Start: on entering the viewport, on load, on hover (of the parent button/link) or via start().

Methods

Name	Description
`start()`	Starts the twinkling.
`stop()`	Lets the current stars finish, then stops.

CSS variables

Name	Default	Description
`--mv-sparkles-text-size`	`max(0.6em, 12px)`	Maximum size of a star.

Accessibility

The text stays intact; stars live in an aria-hidden layer with no pointer events. The loop pauses when off-screen. Reduced motion: four static stars, no twinkling.