Sparkle

Appearance

Fireflies ​

The fireflies simulation creates floating glowing dots that softly fade in and out while drifting with organic, natural movement. Each firefly pulses independently, creating a magical nighttime atmosphere.

Examples ​

Basic fireflies

A gentle swarm of fireflies with default settings.

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

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

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

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

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

Dense swarm

A larger, brighter swarm with faster pulsing.

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

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

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

    onMounted(() => {
        if (canvasRef.value) {
            sim = createFireflies({
                count: 150,
                size: 8,
                glowSpeed: 1.5
            });
            sim.mount(canvasRef.value).start();
        }
    });

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

Configuration ​

All options are passed via a config object:

typescript
import { createFireflies } from '@basmilius/sparkle';

const fireflies = createFireflies({
    count: 60,
    color: '#b4ff6a',
    size: 6,
    speed: 1,
    glowSpeed: 1,
    scale: 1
});
fireflies.mount(canvas).start();

Count ​

Control the number of fireflies:

typescript
// Sparse, subtle
createFireflies({ count: 20 });

// Dense swarm
createFireflies({ count: 150 });

Color ​

Set the glow color using any CSS color string:

typescript
// Warm yellow
createFireflies({ color: '#ffcc33' });

// Cool blue
createFireflies({ color: '#66ccff' });

Glow Speed ​

Control how fast the fireflies pulse:

typescript
// Slow, gentle pulse
createFireflies({ glowSpeed: 0.5 });

// Fast, energetic pulse
createFireflies({ glowSpeed: 2 });

Movement Speed ​

typescript
// Very slow drift
createFireflies({speed: 0.5});

// Quick, lively movement
createFireflies({speed: 2});