Matrix

The matrix simulation recreates the iconic falling character rain from The Matrix. Columns of Japanese katakana and digits cascade down the screen, each with a bright head character and a trailing fade. Characters randomly mutate as they fall, creating the signature digital rain effect.

Examples

Default

Classic green matrix rain with default settings.

Preview

Code

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

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

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

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

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

Fast

Faster, denser rain with smaller characters.

Preview

Code

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

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

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

    onMounted(() => {
        if (canvasRef.value) {
            sim = createMatrix({
                speed: 2,
                fontSize: 12,
                columns: 60
            });
            sim.mount(canvasRef.value).start();
        }
    });

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

Configuration

All options are passed via a config object:

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

const matrix = createMatrix({
    columns: 50,
    speed: 1.5,
    color: '#00ff41',
    fontSize: 14,
    trailLength: 25,
    scale: 1
});
matrix.mount(canvas).start();

Speed

Control how fast the characters fall:

// Slow, relaxed rain
createMatrix({speed: 0.5});

// Fast, intense rain
createMatrix({speed: 2});

Density

Adjust the number of active columns:

// Sparse
createMatrix({ columns: 20 });

// Dense
createMatrix({ columns: 80 });

Color

Change the primary color of the trailing characters:

// Classic green
createMatrix({ color: '#00ff41' });

// Cyan
createMatrix({ color: '#00e5ff' });

// Red pill
createMatrix({ color: '#ff0040' });

Font size

Adjust the character size, which also determines column spacing:

// Small, dense characters
createMatrix({ fontSize: 10 });

// Large, readable characters
createMatrix({ fontSize: 20 });