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.