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>
    <div class="effect-demo">
        <canvas ref="canvasRef"></canvas>
    </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted, ref } from 'vue';

const canvasRef = ref<HTMLCanvasElement>();
let sim: { start(): void; destroy(): void } | null = null;

onMounted(async () => {
    const { SnowSimulation } = await import('@basmilius/sparkle');

    if (canvasRef.value) {
        sim = new SnowSimulation(canvasRef.value, {scale: 1});
        sim.start();
    }
});

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

Configuration

All options are passed via a config object:

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

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

Particle Count

Control the density of the snowfall:

// Light snowfall
new SnowSimulation(canvas, { particles: 50 });

// Heavy blizzard
new SnowSimulation(canvas, { particles: 500 });

Snowflake Size

Set the maximum snowflake radius in pixels:

// Small, fine snow
new SnowSimulation(canvas, { size: 3 });

// Large, fluffy snowflakes
new SnowSimulation(canvas, { size: 10 });

Fall Speed

// Gentle, slow drift
new SnowSimulation(canvas, { speed: 1 });

// Fast snowstorm
new SnowSimulation(canvas, { speed: 4 });

Scale

Scale all snowflake sizes proportionally:

// Half-size snowflakes
new SnowSimulation(canvas, { scale: 0.5 });

// Double-size snowflakes
new SnowSimulation(canvas, { scale: 2 });