Hologram

Holographic projection effect with scrolling scanlines, flicker, and floating data fragments. Simulates the look of a sci-fi holographic display.

Examples

Basic

Default settings.

Preview

Code

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

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

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

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

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

Configuration

All options are passed via a config object:

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

const hologram = createHologram({
    speed: 1,
    scanlineSpacing: 3,
    flickerIntensity: 0.3,
    dataFragments: 15,
    color: '#00ccff',
    scale: 1
});
hologram.mount(canvas).start();

speed

Speed multiplier for the scanline scroll and fragment animation.

createHologram({ speed: 0.5 });

scanlineSpacing

Pixel spacing between horizontal scanlines. Lower values create denser scanlines.

createHologram({ scanlineSpacing: 2 });

flickerIntensity

Strength of the random brightness flicker (0–1). Set to 0 to disable flickering entirely.

createHologram({ flickerIntensity: 0.5 });

dataFragments

Number of floating data fragments rendered within the holographic field.

createHologram({ dataFragments: 25 });

color

The base color of the holographic projection.

createHologram({ color: '#44ffaa' });

scale

Scales all size-related values proportionally.

createHologram({ scale: 1.5 });