Snow

The snow simulation creates a gentle, continuous snowfall effect. Snowflakes drift downward with a subtle wave motion and vary in size, creating a natural look.

Examples

Basic snowfall

A simple snowfall with default settings.

Preview

Code

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

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

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

    onMounted(() => {
        if (canvasRef.value) {
            sim = createSnow({scale: 1});
            sim.mount(canvasRef.value).start();
        }
    });

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

Configuration

All options are passed via a config object:

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

const snow = createSnow({
    particles: 300,
    size: 8,
    speed: 1.5,
    fillStyle: 'rgb(255 255 255 / .8)',
    scale: 1
});
snow.mount(canvas).start();

Particle Count

Control the density of the snowfall:

// Light snowfall
createSnow({ particles: 50 });

// Heavy blizzard
createSnow({ particles: 500 });

Snowflake Size

Set the maximum snowflake radius in pixels:

// Small, fine snow
createSnow({ size: 3 });

// Large, fluffy snowflakes
createSnow({ size: 10 });

Fall Speed

// Gentle, slow drift
createSnow({speed: 1});

// Fast snowstorm
createSnow({speed: 4});

Scale

Scale all snowflake sizes proportionally:

// Half-size snowflakes
createSnow({scale: 0.5});

// Double-size snowflakes
createSnow({scale: 2});