# Click Spark

> Bursts of sparks at every click, as dashes, comets, dots or stars, that can spill around buttons.

Wrap any content and every click or tap inside it sends out a burst of sparks: dashes, comets, dots or twinkling stars, with optional gravity, glow and a ring. Bursts draw on their own small canvas, so they can spill past small buttons and sit behind your content. You can also fire them from code.

<demo-click-spark>



</demo-click-spark>

## Installation

```bash
npx shadcn-vue@latest add "https://nxui.geoql.in/r/click-spark.json"
```

## Usage

```vue
<script setup lang="ts">
  import { useTemplateRef } from 'vue';
  import ClickSpark from '~/components/ui/click-spark/ClickSpark.vue';
  import type { ClickSparkExposed } from '~/components/ui/click-spark/types';

  const sparks = useTemplateRef<ClickSparkExposed>('sparks');

  function celebrate() {
    // Fire from the center (or pass x, y in px from the top-left)
    sparks.value?.spark();
  }
</script>

<template>
  <ClickSpark
    ref="sparks"
    :spark-color="['#fde68a', '#fbbf24', '#ffffff']"
    shape="star"
    :spark-count="6"
    :spark-size="16"
    :spark-radius="36"
    :duration="800"
    :randomness="0.6"
    layer="back"
  >
    <button type="button" @click="celebrate">Celebrate</button>
  </ClickSpark>
</template>
```

## Props

<table>
<thead>
  <tr>
    <th>
      Prop
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Default
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        spark-color
      </code>
    </td>
    
    <td>
      <code>
        string | string[]
      </code>
    </td>
    
    <td>
      <code>
        '#fff'
      </code>
    </td>
    
    <td>
      Spark color. Pass a list to mix colors through each burst.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        shape
      </code>
    </td>
    
    <td>
      <code>
        'line' | 'streak' | 'dot' | 'star'
      </code>
    </td>
    
    <td>
      <code>
        'line'
      </code>
    </td>
    
    <td>
      A short dash, a comet with a fading tail, a round dot, or a twinkling star.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        spark-count
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        8
      </code>
    </td>
    
    <td>
      Number of sparks in each burst (1–64).
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        spark-size
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        14
      </code>
    </td>
    
    <td>
      Length of each spark in px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        spark-width
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        2
      </code>
    </td>
    
    <td>
      Thickness of each spark in px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        spark-radius
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        30
      </code>
    </td>
    
    <td>
      How far the sparks travel from the click in px.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        duration
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        500
      </code>
    </td>
    
    <td>
      Length of a burst in ms.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        easing
      </code>
    </td>
    
    <td>
      <code>
        'ease-out' | 'ease-in-out' | 'ease-in' | 'linear' | 'spring'
      </code>
    </td>
    
    <td>
      <code>
        'ease-out'
      </code>
    </td>
    
    <td>
      How the sparks slow down. Spring overshoots a little and settles back.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        randomness
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0.2
      </code>
    </td>
    
    <td>
      Varies angle, length and speed of each spark, from 0 to 1. 0 gives a perfect star.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        gravity
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Pulls the sparks down as they fly, from 0 to 2.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        spread
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        360
      </code>
    </td>
    
    <td>
      Angle the sparks fan across in degrees. 360 is a full circle.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        direction
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Where a partial spread points in degrees. 0 is up and 90 is right.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        glow
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        0
      </code>
    </td>
    
    <td>
      Soft light around each spark, from 0 to 1.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        ring
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Adds a thin ring that expands from the click.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        layer
      </code>
    </td>
    
    <td>
      <code>
        'front' | 'back'
      </code>
    </td>
    
    <td>
      <code>
        'front'
      </code>
    </td>
    
    <td>
      Draw over your content, or behind it so bursts spill out around buttons and cards.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        extra-scale
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
    </td>
    
    <td>
      <code>
        1
      </code>
    </td>
    
    <td>
      Multiplies how far the sparks travel.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        disabled
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      <code>
        false
      </code>
    </td>
    
    <td>
      Stops new bursts.
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        class
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      <code>
        ''
      </code>
    </td>
    
    <td>
      Extra classes for the wrapper.
    </td>
  </tr>
</tbody>
</table>

## Exposed

<table>
<thead>
  <tr>
    <th>
      Method
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        spark
      </code>
    </td>
    
    <td>
      <code>
        (x?: number, y?: number) => void
      </code>
    </td>
    
    <td>
      Fires a burst from code. <code>
        x
      </code>
      
       and <code>
        y
      </code>
      
       are px from the top-left; centers without them.
    </td>
  </tr>
</tbody>
</table>

## Slots

<table>
<thead>
  <tr>
    <th>
      Slot
    </th>
    
    <th>
      Description
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        default
      </code>
    </td>
    
    <td>
      Content to wrap. Clicks anywhere inside it send sparks past its edges.
    </td>
  </tr>
</tbody>
</table>

## Accessibility

- Spark canvases are decorative (`aria-hidden="true"`, `pointer-events: none`) and never block clicks or focus.
- Keyboard activation (Enter or Space on a button inside) fires a burst from the center of that element.
- With `prefers-reduced-motion: reduce` sparks hold still at a short distance and fade out in about 300 ms instead of flying.
- Canvases are removed as soon as their burst ends, and the render loop stops when nothing is left.
- Ported from [React Bits](https://reactbits.dev/animations/click-spark) by David Haz.