Add A Spark Effect To Clicks With The click-spark Web Component

click-spark is a lightweight web component that adds an animated spark effect to your web page when users click or tap.

It can be used to provide visual feedback when clicking buttons or links, bringing some playful user interaction to any webpage.

How to use it:

1. Include the click-spark.js script.

<script src="click-spark.js"></script>

2. Add the <click-spark /> component to your webpage. That’s it.

<click-spark></click-spark>

3. Override the color of the spark.

<click-spark style="--click-spark-color: red"></click-spark>

Changelog:

v2.1.0 (07/28/2024)

• Fix garbage collection for event listener
• Switch to handleEvent method
• Clean up template and set positioning on custom element

v2.0.3 (07/26/2024)

• Fix position of click on the page

v2.0.0 (07/26/2024)

• Contain click to parent of custom element