import { Component } from '@angular/core';
import { WrClickSpark } from 'ngwr/bits/click-spark';
@Component({ imports: [WrClickSpark] })
export class MyComponent {}Click Spark
Sparks that burst from wherever you click inside it.
Installation
Import the class, and @use the entry point in your global styles: without it the component renders unstyled.
Angular adaptation of an effect by David Haz / reactbits.dev.
Playground
<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>Customize
Spark Count
Spark Radius (px)
Spark Size (px)
Duration (ms)
Easing
Color
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 |