# Click Spark

> Click ripple. Bursts a ring of short line sparks from the click point across any projected content. The canvas overlay has `pointer-events: none`, so projected DOM stays fully interactive.

Source: https://ngwr.dev/animations/click-spark  
Kind: Animation

## Import

```angular-ts
import { WrClickSpark } from 'ngwr/click-spark';
```

## Playground

```html
<wr-click-spark
  sparkColor="var(--wr-color-dark)"
  [sparkCount]="8"
  [sparkRadius]="15"
  [sparkSize]="10"
  [duration]="400"
  easing="ease-out"
>
  <div>Click me</div>
</wr-click-spark>
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `sparkColor` | Spark stroke colour. Accepts any CSS colour or a var(--wr-…) token, which is resolved against the theme. | `string` | `'var(--wr-color-dark)'` |
| `sparkSize` | Length of each spark line in px at start; tapers to 0 over the duration. | `number` | `10` |
| `sparkRadius` | Distance each spark travels from the origin in px. | `number` | `15` |
| `sparkCount` | Number of sparks per click, evenly distributed around the circle. | `number` | `8` |
| `duration` | Animation duration in ms. | `number` | `400` |
| `easing` | Easing applied to travel distance. | `'linear' \| 'ease-in' \| 'ease-in-out' \| 'ease-out'` | `'ease-out'` |
| `extraScale` | Multiplier on travel distance — bumps the radius without changing sparkRadius. | `number` | `1` |