Lightning

The lightning simulation renders dramatic lightning bolts that strike from the top of the canvas downward. Each bolt zigzags with random horizontal offsets and can spawn smaller branches at angles. An optional screen flash briefly illuminates the canvas for extra impact.

Examples

Default

Lightning bolts with branches and subtle screen flash.

Preview

Code

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

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

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

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

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

Storm

Frequent lightning strikes with intense flashes.

Preview

Code

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

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

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

    onMounted(() => {
        if (canvasRef.value) {
            sim = createLightning({frequency: 3, flash: true});
            sim.mount(canvasRef.value).start();
        }
    });

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

Configuration

All options are passed via a config object:

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

const lightning = createLightning({
    frequency: 2,
    color: '#b4c8ff',
    branches: true,
    flash: true,
    scale: 1
});
lightning.mount(canvas).start();

Frequency

Control how often bolts spawn. Higher values mean more frequent strikes:

// Rare bolts (roughly every 6 seconds)
createLightning({ frequency: 0.5 });

// Frequent storm
createLightning({ frequency: 3 });

Branches

Enable or disable smaller branch bolts that fork off the main bolt:

// Clean bolts without branches
createLightning({ branches: false });

// With branches (default)
createLightning({ branches: true });

Flash

Toggle the brief white screen flash when a bolt strikes:

// No screen flash
createLightning({ flash: false });

// With flash (default)
createLightning({ flash: true });

Color

Customize the bolt color:

// Default blue-white
createLightning({ color: '#b4c8ff' });

// Purple lightning
createLightning({ color: '#c8a0ff' });

// Warm golden
createLightning({ color: '#ffe080' });