Neon

The neon effect renders animated glowing tubes — circles, waves, zig-zags, and curves — that flicker like real neon signs. Each tube is drawn with multiple glow passes and a bright white core for a vivid, electric look.

Examples

Basic

Default neon tubes with flicker.

Preview

Code

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

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

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

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

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

Configuration

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

const neon = createNeon({
    count: 8,
    speed: 1,
    colors: ['#ff0080', '#00ffff', '#ffff00', '#ff6600', '#aa00ff'],
    flicker: true,
    scale: 1
});
neon.mount(canvas).start();

Tube Count

Control the number of neon tubes on screen:

// Sparse
createNeon({ count: 4 });

// Dense
createNeon({ count: 16 });

Colors

Customize the neon palette:

createNeon({ colors: ['#ff0080', '#00ffff'] });

Flicker

Disable flicker for a steady glow:

createNeon({ flicker: false });

Speed

Control how fast the tubes animate:

createNeon({ speed: 0.5 }); // slow
createNeon({ speed: 2 });   // fast