Click spark
Each click throws a ring of small sparks from the pointer.
- enhancer
- click
- pointer
- burst
- since 0.1
Background Studio: tune it below, then copy the code
Your system asks for reduced motion: the demo shows its final state and nothing moves.
Live demo
Click spark example
Code
It follows the controls above: change an option and the code changes with it.
<link rel="stylesheet" href="/axi0/motion/motion.css?v=6">
<script src="/axi0/motion/motion.js?v=10" defer></script>
<button type="button" class="demo-btn" data-motion="click-spark">Click me</button>import { ClickSpark } from "./motion/react/ClickSpark";
<ClickSpark>Your content</ClickSpark><script setup lang="ts">
import ClickSpark from "./motion/vue/ClickSpark.vue";
</script>
<template>
<ClickSpark>Your content</ClickSpark>
</template>const el = document.querySelector("#title");
el.dataset.motion = "click-spark";The wrappers: ClickSpark.tsx (React, TypeScript) and ClickSpark.vue (Vue). Both render the same attributes as the HTML; the loader does the rest.
Options
| Attribute | Default | What it does |
|---|---|---|
data-motion-count | 8 | sparks per click |
data-motion-size | 12 | spark length in pixels |
data-motion-radius | 26 | how far they fly, in pixels |
data-motion-duration | 420 | milliseconds |
data-motion-color | auto | spark color; auto is the text color |
Accessibility
One fixed canvas over the viewport, shown only while sparks fly; the loop stops with the last spark. A keyboard press sparks from the middle. Reduced motion: no sparks.
Size
click-spark.js is 1.0 KB gzip. A page loads the loader (2.7 KB) and core.js (1.4 KB) once, whatever it uses.