Particles

The particles simulation creates a network of floating dots connected by lines when near each other, creating the popular "plexus" effect. Particles drift slowly, bounce off edges, and interact with the mouse cursor in multiple ways.

Move your mouse over the canvas

Examples

Network effect

Particles connected by lines, mouse adds connections.

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 { createParticles } from '@basmilius/sparkle';

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

    onMounted(() => {
        if (canvasRef.value) {
            sim = createParticles({
                mouseMode: 'connect'
            });
            sim.mount(canvasRef.value).start();
        }
    });

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

Mouse attract

Particles are pulled toward the cursor.

Preview

Move your mouse to attract particles

Code

<template>
    <EffectDemo>
        <canvas ref="canvasRef"></canvas>
        <span class="effect-demo__hint">Move your mouse to attract particles</span>
    </EffectDemo>
</template>

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

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

    onMounted(() => {
        if (canvasRef.value) {
            sim = createParticles({
                mouseMode: 'attract',
                mouseStrength: 0.05,
                mouseRadius: 200
            });
            sim.mount(canvasRef.value).start();
        }
    });

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

Mouse repel

Particles are pushed away from the cursor with glow.

Preview

Move your mouse to repel particles

Code

<template>
    <EffectDemo>
        <canvas ref="canvasRef"></canvas>
        <span class="effect-demo__hint">Move your mouse to repel particles</span>
    </EffectDemo>
</template>

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

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

    onMounted(() => {
        if (canvasRef.value) {
            sim = createParticles({
                mouseMode: 'repel',
                mouseStrength: 0.06,
                mouseRadius: 180,
                glow: true,
                color: '#22d3ee',
                lineColor: '#22d3ee'
            });
            sim.mount(canvasRef.value).start();
        }
    });

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

Configuration

All options are passed via a config object:

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

const particles = createParticles({
    count: 100,
    color: '#6366f1',
    lineColor: '#6366f1',
    connectionDistance: 120,
    mouseMode: 'connect',
    scale: 1
});
particles.mount(canvas).start();

Mouse Mode

Choose how particles interact with the cursor:

// Lines from cursor to nearby particles
createParticles({ mouseMode: 'connect' });

// Pull particles toward cursor
createParticles({ mouseMode: 'attract' });

// Push particles away from cursor
createParticles({ mouseMode: 'repel' });

// No mouse interaction
createParticles({ mouseMode: 'none' });

Connection Distance

Control how close particles must be to connect:

// Short connections, dense clusters
createParticles({ connectionDistance: 60 });

// Long connections, web-like
createParticles({ connectionDistance: 200 });

Glow

Add a neon glow to particles:

createParticles({
    glow: true,
    color: '#22d3ee',
    lineColor: '#22d3ee'
});

Background

Set a solid background color:

// Dark background
createParticles({ background: '#0a0a1a' });

// Transparent (default)
createParticles({ background: null });

Performance

Keep count under 200 for smooth performance. The spatial grid optimization ensures connection checks scale well, but rendering many lines can become expensive.