microsparks

$ npm install microsparks

Ultra-lightweight, high-60FPS HTML5 2D Canvas micro-particle engine for modern web UI feedback. Zero layout shifts, auto Retina scaling, and 0 idle CPU overhead.

THEME SWITCHER

PRESETS MATRIX

Click square pads to trigger instant GPU-accelerated particle bursts

PARTICLE LABORATORY

Tweak particle parameters and generate zero-overhead code

PARTICLE SHAPE

PARTICLE COUNT 20

MAX SIZE 10 px

MAX SPEED 7

GRAVITY 0.15

DURATION 0.8s

GENERATED CODE

import { sparks } from 'microsparks';

sparks.trigger({
  count: 20,
  shape: 'circle',
  maxSize: 10,
  maxSpeed: 7,
  gravity: 0.15,
  duration: 0.8
});

INTEGRATION EXAMPLES

Vanilla JS, React 18/19, and Next.js App Router

VANILLA JS / TYPESCRIPT

import { sparks } from 'microsparks';

// Preset bursts on button click
document.querySelector('#btn')
  .addEventListener('click', (e) => {
    sparks.burst({ target: e });
  });

// Presets
sparks.stars();
sparks.confetti();
sparks.heart();

REACT / NEXT.JS APP ROUTER

'use client';

import { useMicroSparks } from 'microsparks/react';

export function ActionButton() {
  const { stars } = useMicroSparks();

  return (
    <button onClick={(e) => stars({ target: e })}>
      Sparkle Action
    </button>
  );
}