# Click Spark

> Sparks that burst from wherever you click inside it.

Source: https://ngwr.dev/bits/click-spark  
Updated in v15

## Installation

Import the class, and `@use` the entry point in your global styles: without it the component renders unstyled.

```typescript
import { Component } from '@angular/core';
import { WrClickSpark } from 'ngwr/bits/click-spark';

@Component({ imports: [WrClickSpark] })
export class MyComponent {}
```

```scss
@use 'ngwr/bits/click-spark';
```

## Playground

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

```angular-ts
import { Component } from '@angular/core';

import { WrClickSpark } from 'ngwr/bits/click-spark';

/**
 * Playground
 */
@Component({
  selector: 'ngwr-the-angular-ui-library-for-signal-forms-playground-example',
  templateUrl: './ngwr-the-angular-ui-library-for-signal-forms-playground-example.html',
  imports: [WrClickSpark],
})
export class NgwrTheAngularUiLibraryForSignalFormsPlaygroundExample {}
```

## API

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `sparkColor` | Spark colour: any CSS colour or a `var(--wr-…)` token. | `string` | `'var(--wr-color-on-surface)'` |
| `sparkSize` | Starting length of each spark, in px. | `number` | `10` |
| `sparkRadius` | How far each spark travels, in px. | `number` | `15` |
| `sparkCount` | Sparks per click. | `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 how far sparks travel. | `number` | `1` |

## See also

- [Confetti](https://ngwr.dev/bits/confetti) — A confetti burst you fire from code.
- [Splash Cursor](https://ngwr.dev/bits/splash-cursor) — A fluid simulation that splashes colour where the pointer moves.
- [resolveCssColor](https://ngwr.dev/reference/utils/resolve-css-color) — Resolves a CSS colour, such as a var() or light-dark(), to a value a canvas can paint with.