Sparklers

The sparklers simulation creates a sparking point that continuously emits flying sparks with glowing trails. Sparks fly in all directions, slow down with friction, and fall with gravity. The emission point can follow the mouse cursor for interactive hover effects.

Examples

Basic sparkler

A sparkler emitting from the center of the canvas.

Preview

Code

<template>
    <EffectDemo>
        <canvas ref="canvasRef"></canvas>
    </EffectDemo>
</template>

<script
    setup
    lang="ts">
    import { onMounted, onUnmounted, ref } from 'vue';
    import { createSparklers } from '@basmilius/sparkle';

    const canvasRef = ref<HTMLCanvasElement>();
    let sim: ReturnType<typeof createSparklers> | null = null;

    onMounted(() => {
        if (canvasRef.value) {
            sim = createSparklers();
            sim.mount(canvasRef.value).start();
        }
    });

    onUnmounted(() => {
        sim?.destroy();
        sim = null;
    });
</script>

Hover mode

The sparkler follows your mouse cursor.

Preview

Move your mouse over the canvas

Code

<template>
    <EffectDemo>
        <canvas ref="canvasRef"></canvas>
        <span class="effect-demo__hint">Move your mouse over the canvas</span>
    </EffectDemo>
</template>

<script
    setup
    lang="ts">
    import { onMounted, onUnmounted, ref } from 'vue';
    import { createSparklers } from '@basmilius/sparkle';

    const canvasRef = ref<HTMLCanvasElement>();
    let sim: ReturnType<typeof createSparklers> | null = null;

    onMounted(() => {
        if (canvasRef.value) {
            sim = createSparklers({
                hoverMode: true
            });
            sim.mount(canvasRef.value).start();
        }
    });

    onUnmounted(() => {
        sim?.destroy();
        sim = null;
    });
</script>

Following a path

The emitter is moved programmatically with moveTo() along a looping path.

Preview

The emitter follows a path set with moveTo()

Code

<template>
    <EffectDemo>
        <canvas ref="canvasRef"></canvas>
        <span class="effect-demo__hint">The emitter follows a path set with moveTo()</span>
    </EffectDemo>
</template>

<script
    setup
    lang="ts">
    import { onMounted, onUnmounted, ref } from 'vue';
    import { createSparklers } from '@basmilius/sparkle';

    const canvasRef = ref<HTMLCanvasElement>();
    let sim: ReturnType<typeof createSparklers> | null = null;
    let frame = 0;
    let raf = 0;

    function animate(): void {
        if (!sim) {
            return;
        }

        // Move the emitter along a Lissajous path using normalized 0-1 coordinates.
        frame += 1;
        const t = frame / 60;
        const x = 0.5 + 0.35 * Math.sin(t * 0.9);
        const y = 0.5 + 0.25 * Math.sin(t * 1.7);
        sim.moveTo(x, y);

        raf = requestAnimationFrame(animate);
    }

    onMounted(() => {
        if (canvasRef.value) {
            sim = createSparklers();
            sim.mount(canvasRef.value).start();
            raf = requestAnimationFrame(animate);
        }
    });

    onUnmounted(() => {
        cancelAnimationFrame(raf);
        sim?.destroy();
        sim = null;
    });
</script>

Configuration

All options are passed via a config object:

import { createSparklers } from '@basmilius/sparkle';

const sparklers = createSparklers({
    emitRate: 8,
    maxSparks: 300,
    gravity: 0.8,
    friction: 0.96,
    hoverMode: false,
    scale: 1
});
sparklers.mount(canvas).start();

Emit Rate

Control how many sparks are emitted per frame:

// Subtle, few sparks
createSparklers({ emitRate: 3 });

// Intense shower
createSparklers({ emitRate: 15 });

Hover Mode

Make the sparkler follow the mouse:

createSparklers({ hoverMode: true });

Colors

Set custom spark colors:

// Cool blue sparks
createSparklers({
    colors: ['#4488ff', '#88ccff', '#ffffff']
});

// Red and gold
createSparklers({
    colors: ['#ff4444', '#ffaa00', '#ffee88']
});

Physics

Fine-tune the spark behavior:

// Slow, floaty sparks
createSparklers({
    friction: 0.99,
    gravity: 0.3,
    speed: [1, 4]
});

// Fast, heavy sparks
createSparklers({
    friction: 0.93,
    gravity: 1.5,
    speed: [4, 12]
});

Position

Manually set the emission point:

const sparklers = createSparklers();
sparklers.mount(canvas).start();

// Move to top-left corner (normalized 0-1)
sparklers.moveTo(0.2, 0.2);