Sparkle

Appearance

Wormhole ​

The wormhole simulation creates a starfield tunnel effect where particles flow radially toward or away from the center of the canvas. Particles accelerate as they approach their destination, leaving luminous trails that grow longer and brighter. The center features a subtle glow, completing the wormhole illusion.

Examples ​

Inward

Particles streaming toward the center.

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

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

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

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

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

Outward

Particles expanding outward from the center.

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

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

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

    onMounted(() => {
        if (canvasRef.value) {
            sim = createWormhole({
                direction: 'outward',
                speed: 1.5
            });
            sim.mount(canvasRef.value).start();
        }
    });

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

Configuration ​

All options are passed via a config object:

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

const wormhole = createWormhole({
    count: 200,
    speed: 1,
    color: '#6699ff',
    direction: 'inward',
    scale: 1
});
wormhole.mount(canvas).start();

Direction ​

Control whether particles flow inward or outward:

typescript
// Particles converge toward the center
createWormhole({ direction: 'inward' });

// Particles expand outward from the center
createWormhole({ direction: 'outward' });

Speed ​

Adjust the overall particle speed:

typescript
// Slow, drifting particles
createWormhole({speed: 0.5});

// Fast, intense tunnel
createWormhole({speed: 2});

Count ​

Control particle density:

typescript
// Sparse tunnel
createWormhole({ count: 80 });

// Dense starfield
createWormhole({ count: 400 });

Color ​

Change the particle and glow color:

typescript
// Blue (default)
createWormhole({ color: '#6699ff' });

// Warm orange
createWormhole({ color: '#ff9944' });

// Green
createWormhole({ color: '#44ff88' });