Streamers

The streamers simulation creates colorful party ribbons that fall and curl through the air. Each streamer follows a wavy path with organic swaying motion, creating a festive celebration effect.

Examples

Default

Colorful streamers gently falling with curling motion.

Preview

Code

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

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

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

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

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

Party

Dense streamers falling faster for a lively party atmosphere.

Preview

Code

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

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

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

    onMounted(() => {
        if (canvasRef.value) {
            sim = createStreamers({count: 40, speed: 1.5});
            sim.mount(canvasRef.value).start();
        }
    });

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

Configuration

All options are passed via a config object:

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

const streamers = createStreamers({
    count: 30,
    speed: 1.2,
    scale: 1
});
streamers.mount(canvas).start();

Count

Control the number of streamers on screen:

// Sparse streamers
createStreamers({ count: 10 });

// Dense party effect
createStreamers({ count: 40 });

Speed

Adjust how fast the streamers fall:

// Slow, gentle falling
createStreamers({speed: 0.5});

// Fast, energetic falling
createStreamers({speed: 2});

Colors

Provide custom colors for the streamers:

// Gold and silver theme
createStreamers({
    colors: ['#ffd700', '#c0c0c0', '#fffacd', '#e8e8e8']
});

// Monochrome blue
createStreamers({
    colors: ['#1e90ff', '#4169e1', '#6495ed', '#87ceeb']
});