Click Spark `<mv-click-spark>`

Wrapper que lanza estelas de chispas desde el punto del clic: cada estela se estira, se curva ligeramente por la gravedad y se encoge hasta un punto alrededor de un destello suave, dibujadas en una sola capa superpuesta compartida de la página para que las chispas nunca se recorten ni bloqueen los clics; teclado incluido, y una función spark() funciona sin el elemento.

Categoría	Microinteracciones
Tipo	Web Component (`<mv-click-spark>`)
Estado	estable
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

Instalación

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

Agente de IA con el servidor MCP de Marvelous UI: install_components({ slugs: ["click-spark"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Archivos copiados (dependencias incluidas): 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.

Uso

Inicio rápido, el marcado mínimo que funciona:

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

Marcado de referencia: parte de él y personalízalo con atributos, data-* y variables 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	Tipo	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.