Click Spark
Last week I had made this fun little experiment. When clicking or tapping on the page, sparks (of joy) fly out from the mouse cursor/tap position. It started with me just messing around a bit in CodePen, but after sharing and getting a few friendly nudges on my Mastodon post, this fun little experiment evolved into the <click-spark> Web Component which is now available in a GitHub repo.
Try it out in the CodePen demo below.
The spark color can be modified by setting a color value to the --click-spark-color custom property:
<click-spark style="--click-spark-color: hotpink"></click-spark>Updated on July 26th, 2024 — The update below was a bit silly of me in retrospect. I'm going to leave it for the sake of keeping a rich history. I've pushed a new release that will instead contain the click sparks to the parent element. I believe this is a much cleaner implementation than what I initially attempted. Check out pull request #3 if you'd like to dig into the details.
Updated on January 5th, 2023 — I had been thinking about a case where I'd like to have click sparks, but only when clicking on particular elements. I've updated the code so that an active-on attribute can be set on the custom element to target a comma-separated list of selectors. If any of the selectors match, let the sparks fly. Here's a CodePen demo of the following example.
<click-spark active-on=".send-sparks, #i-love-sparks, [data-sparks]"></click-spark>Have your sparks your way. ✨