Click Spark `<mv-click-spark>`

Conteneur qui projette des traînées d’étincelles depuis le point de clic : chaque traînée s’étire, se courbe légèrement sous la gravité et se réduit à un point autour d’un léger flash, le tout dessiné sur une seule surcouche partagée de la page, si bien que les étincelles ne sont jamais rognées et ne bloquent jamais les clics ; clavier compris, et une fonction spark() fonctionne sans l’élément.

Catégorie	Micro-interactions
Type	Web Component (`<mv-click-spark>`)
Statut	stable
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

Installation

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

Agent IA avec le serveur MCP de Marvelous UI : install_components({ slugs: ["click-spark"], target_dir: "<absolute path>/src/marvelous", framework: "react" }).

Fichiers copiés (dépendances comprises) : 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.

Utilisation

Démarrage rapide, le balisage minimal qui fonctionne :

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

Balisage de référence : partez de celui-ci et personnalisez-le avec les attributs, data-* et les 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	Type	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.