Click Spark `<mv-click-spark>`

클릭 지점에서 불꽃 줄기를 흩뿌리는 래퍼: 각 줄기는 늘어나고, 중력에 살짝 휘며, 부드러운 섬광 주위에서 점으로 줄어듭니다. 페이지 전체가 공유하는 오버레이 하나에 그려지므로 불꽃이 잘리거나 클릭을 막는 일이 없습니다. 키보드도 지원하며, spark() 함수는 요소 없이도 작동합니다.

카테고리	마이크로 인터랙션
유형	Web Component (`<mv-click-spark>`)
상태	안정
Keywords	safe-rewrite, light, click, spark, burst, canvas, feedback

When to use

A button, icon or playful surface should give a small burst of sparks on click or keyboard activation
A small button inside a clipped card or toolbar needs sparks that fly outside its box
A spark effect should fire programmatically at any point on the page, without wrapping an element

Avoid when

A real success or celebration moment deserves a full confetti burst → use Confetti instead
A subtle ink ripple from the click point fits a sober interface better → use Ripple instead
The spark is the only confirmation that an action worked; decorative effects don't convey state

설치

node scripts/add.mjs click-spark --out ./src/marvelous

Marvelous UI MCP 서버를 사용하는 AI 에이전트: install_components({ slugs: ["click-spark"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

복사되는 파일(의존성 포함): tokens/tokens.css, core/base.css, core/canvas.js, core/element.js, core/motion.js, components/click-spark/click-spark.js, components/click-spark/click-spark.css.

사용법

빠른 시작, 동작하는 가장 작은 마크업:

<mv-click-spark data-inline>
  <button class="mv-button">Place order</button>
</mv-click-spark>

기본 마크업입니다. 여기서 시작해 속성, data-*, CSS 변수로 커스터마이즈하세요:

<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1rem;width:100%;max-width:760px">
  <mv-click-spark count="10" radius="26" size="14" style="border-radius:var(--mv-radius-xl);border:1px dashed var(--mv-border-strong);background:var(--mv-bg-subtle)">
    <div style="display:grid;place-items:center;gap:.35rem;min-height:220px;text-align:center;padding:1.5rem;user-select:none">
      <svg viewBox="0 0 24 24" width="28" height="28" fill="none" stroke="var(--mv-accent)" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M9 3.5v2M4.8 5.3l1.4 1.4M3 9.5h2M14.5 9.5l6 2.2-2.6 1.1 3 3-1.5 1.5-3-3-1.1 2.6z"/></svg>
      <strong style="font-size:1rem">Click anywhere</strong>
      <span style="color:var(--mv-fg-muted);font-size:.85rem">Every click sends out sparks.</span>
    </div>
  </mv-click-spark>

  <div style="display:grid;place-items:center;gap:1rem;min-height:220px;border-radius:var(--mv-radius-xl);border:1px solid var(--mv-border);padding:1.5rem">
    <mv-click-spark data-inline color="oklch(0.78 0.16 75)" count="12" jitter="0.6" radius="30">
      <button class="mv-button" data-size="lg" data-shape="pill">Place order</button>
    </mv-click-spark>
    <mv-click-spark data-inline color="var(--mv-success)" count="6" size="10" radius="20" duration="380" easing="ease-in-out">
      <button class="mv-button" data-variant="outline">Add to favorites</button>
    </mv-click-spark>
    <span style="color:var(--mv-fg-muted);font-size:.8rem">Works from the keyboard too: Enter or Space.</span>
  </div>
</div>

API

Attributes

Name	유형	Default	Description
`color`	CSS color	`var(--mv-accent)`	Spark color (tokens accepted; re-read on every click, so it follows the theme). Forced colors mode uses the system Highlight color.
`count`	number	`8`	Number of streaks per burst; from 6 on, long and short streaks alternate (1 to 48).
`size`	number	`12`	Maximum streak length (px).
`radius`	number	`22`	Distance traveled by the longest streaks (px).
`duration`	number	`460`	Burst duration (ms).
`easing`	linear \| ease-in \| ease-out \| ease-in-out	`ease-out`	Progress curve.
`line-width`	number	`2`	Line thickness (px).
`jitter`	0..1	`0`	Randomness of angles and lengths (0 = regular star).
`bleed`	number	`0`	Kept for compatibility, no effect: sparks are drawn on a page overlay and are never clipped by the box.
`data-inline`	boolean		inline-block display (to wrap a button).
`disabled`	boolean		Disables the effect (disabled or aria-disabled children never spark either).

Methods

Name	Description
`burst(clientX?, clientY?)`	Fires a burst (viewport coordinates; the element center by default).
`spark({ x, y, color, count, size, radius, duration, easing, lineWidth, jitter })`	Module export: a burst anywhere on the page, viewport coordinates (center by default), on the same shared overlay.

Events

Name	Description
`mv-spark`	On every burst, including under reduced motion when nothing is drawn; detail = { x, y } relative to the element.

Content structure

Name	Description
`(content)`	Any content; clicks on it keep working.

Accessibility

Purely decorative: one shared aria-hidden overlay with pointer-events: none, so sparks never block or steal clicks. Keyboard and assistive-tech activation (Enter/Space on a child control) fire the burst from that control's center. Disabled and aria-disabled controls do not spark. Reduced motion: no sparks at all. Forced colors: sparks use the system Highlight color. The frame loop runs only while a spark is alive, and the overlay leaves the top layer when idle.