Aurora

The aurora simulation creates flowing, colorful light bands that slowly wave across the screen, mimicking the northern lights. Multiple translucent bands overlap with additive blending, and their colors shift over time.

Examples

Basic aurora

Gentle aurora borealis with default settings.

Preview

Code

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

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

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

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

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

High intensity

Brighter, faster aurora with more bands.

Preview

Code

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

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

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

    onMounted(() => {
        if (canvasRef.value) {
            sim = createAurora({
                bands: 6,
                intensity: 1,
                waveAmplitude: 1.5,
                speed: 1.5
            });
            sim.mount(canvasRef.value).start();
        }
    });

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

Configuration

All options are passed via a config object:

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

const aurora = createAurora({
    bands: 4,
    colors: ['#00ff88', '#00aaff', '#8844ff', '#ff44aa'],
    speed: 1,
    intensity: 0.6,
    waveAmplitude: 1,
    verticalPosition: 0.3
});
aurora.mount(canvas).start();

Bands

Control the number of light bands:

// Subtle, minimal
createAurora({bands: 2});

// Rich, layered
createAurora({bands: 6});

Colors

Set custom band colors:

// Warm sunset aurora
createAurora({
    colors: ['#ff6644', '#ffaa00', '#ff44aa']
});

// Cool ocean tones
createAurora({
    colors: ['#0044ff', '#00ccff', '#00ffaa']
});

Intensity

Control the overall brightness:

// Subtle, background effect
createAurora({intensity: 0.3});

// Vivid, dramatic
createAurora({intensity: 1.0});

Vertical Position

Place the aurora higher or lower on the screen:

// Near the top
createAurora({verticalPosition: 0.15});

// Center of the screen
createAurora({verticalPosition: 0.5});