Sparkles Text `<mv-sparkles-text>`

テキストの周りや上にランダムに現れる小さなきらめく星です。色、密度、速度を調整でき、表示時またはホバー時に発動します。

カテゴリー	アニメーションテキスト
タイプ	Web Component（`<mv-sparkles-text>`）
ステータス	安定版
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

インストール

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

Marvelous UI MCP サーバーを使う AI エージェント：install_components({ slugs: ["sparkles-text"], target_dir: "<absolute path>/src/marvelous", framework: "react" })。

コピーされるファイル（依存関係を含む）：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。

使い方

基本となるマークアップです。ここから属性、data-*、CSS 変数でカスタマイズしてください：

<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	タイプ	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.