Angular adaptation of an effect by David Haz / reactbits.dev.
Import
import { WrClickSpark } from 'ngwr/click-spark';Playground
<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>Customize
Spark Count
Spark Radius (px)
Spark Size (px)
Duration (ms)
Easing
Color
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 |