Coyote Labby Coyote Concept

Coyote originalNewSmall JS · custom properties · keyframes

Ember Sparks

Every click throws a burst of embers from the exact point you touched. Our take on the click-spark idea, tuned to feel like a campfire.

Class
.CCSparks
Weight
1.3 KB
Needs
CSS + a few lines of JS
Best for
Add-to-basket, likes, toggles, celebrations

Tune it

Every snippet on this page follows these settings.

How Ember Sparks works

  1. On pointerdown, ten tiny spans are added at the exact point of the click.
  2. Each gets its own angle (--cc-angle) and distance (--cc-distance), with a little randomness.
  3. One keyframe rotates each spark to its angle, then flies it outwards while it shrinks and fades.
  4. Each spark removes itself when its animation ends, so nothing builds up in the page.

Add it to your site

  1. Add the styles. Link https://coyoteconcept.com/lab/cc-lab.css once, or paste the CSS from any snippet below.
  2. Set a colourway. Wrap your content in class="CCTheme CCEmber", or any other colourway.
  3. Add the classes. For example <button class="CCButton CCSparks">.
  4. Add the script. Include https://coyoteconcept.com/lab/cc-lab.js, or the few lines of JavaScript in the snippet.

Core components

Ember Sparks on button, toggle, tabs, card, dropdown.

More ways to use it

The same class on badge, headline, nav bar.

Pairs well with

Avoid on the same element Moonrise (clipping), Glare Sweep (clipping), Ripple (clipping).

Browser support

Chrome & Edge111+
Safari16.2+
Firefox113+

Older browsers show the element without the effect: nothing breaks.

Accessibility

  • Doesn't change what the click does: it's feedback on top.
  • Works with touch as well as a mouse.
  • Skipped entirely under reduced motion.

Performance

  • 1.3 KB of code, no libraries.
  • Animates transforms, opacity and gradients, which browsers handle cheaply.
  • This page pauses every animation that’s scrolled out of view. Worth copying if you use lots of them.

Questions about Ember Sparks

How do I add Ember Sparks to a button?

Add the class CCSparks next to CCButton, inside an element with the CCTheme class, then include the Ember Sparks CSS and its few lines of JavaScript. The Copy button on this page gives you all of it in one snippet.

Does Ember Sparks need JavaScript?

Yes, a few lines. They're included in every snippet and in the hosted cc-lab.js file.

Which browsers support Ember Sparks?

Chrome and Edge 111+, Safari 16.2+ and Firefox 113+. Older browsers show the element without the effect, so nothing breaks.

Is Ember Sparks accessible?

Doesn't change what the click does: it's feedback on top. Works with touch as well as a mouse. Skipped entirely under reduced motion.