Firepit

The firepit simulation creates a warm campfire effect with flickering flames, rising embers, and a soft ambient glow. Each ember rises with a unique trajectory and fades out naturally.

Examples

Campfire

A cozy campfire with default settings.

Preview

Code

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

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

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

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

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

Intense blaze

A roaring fire with more embers and taller flames.

Preview

Code

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

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

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

    onMounted(() => {
        if (canvasRef.value) {
            sim = createFirepit({
                embers: 120,
                intensity: 1.5,
                flameHeight: 0.45
            });
            sim.mount(canvasRef.value).start();
        }
    });

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

Configuration

All options are passed via a config object:

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

const firepit = createFirepit({
    embers: 60,
    flameWidth: 0.4,
    flameHeight: 0.35,
    intensity: 1,
    scale: 1
});
firepit.mount(canvas).start();

Embers

Control the number of rising ember particles:

// Subtle, few embers
createFirepit({ embers: 20 });

// Lots of sparks
createFirepit({ embers: 150 });

Intensity

Scale the overall brightness and activity:

// Dying fire
createFirepit({ intensity: 0.4 });

// Blazing bonfire
createFirepit({ intensity: 2 });

Flame Size

Control the flame dimensions (as fraction of canvas):

// Narrow, tall flame
createFirepit({ flameWidth: 0.2, flameHeight: 0.5 });

// Wide, short flame
createFirepit({ flameWidth: 0.6, flameHeight: 0.2 });