Created matrix rain file and logic

Author: owenbcoding

resources/js/components/landing/MatrixRain.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+
+const CHARS = '01アイウエオカキクケコサシスセソタチツテトナニヌネノハヒフヘホマミムメモヤユヨラリルレロワヲン';
+const FONT_SIZE = 14;
+const COLUMN_SPACING = 3; // use every Nth column for fewer streams
+const DROP_SPEED = 1.2; // pixels per frame (lower = slower)
+const TRAIL_LENGTH = 12; // characters per column (longer lines)
+let animationId = 0;
+let columns: number[] = [];
+let resizeObserver: ResizeObserver | null = null;
+
+function initMatrix(canvas: HTMLCanvasElement) {
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const dpr = Math.min(window.devicePixelRatio ?? 1, 2);
+    const w = canvas.clientWidth;
+    const h = canvas.clientHeight;
+
+    canvas.width = w * dpr;
+    canvas.height = h * dpr;
+    ctx.scale(dpr, dpr);
+
+    const colCount = Math.floor(w / FONT_SIZE / COLUMN_SPACING);
+    columns = Array.from({ length: colCount }, () => Math.random() * h);
+}
+
+function draw(canvas: HTMLCanvasElement) {
+    const ctx = canvas.getContext('2d');
+    if (!ctx) return;
+
+    const w = canvas.clientWidth;
+    const h = canvas.clientHeight;
+
+    ctx.fillStyle = 'rgba(0, 0, 0, 0.06)';
+    ctx.fillRect(0, 0, w, h);
+
+    ctx.font = `${FONT_SIZE}px "Geist Mono", monospace`;
+
+    for (let i = 0; i < columns.length; i++) {
+        const y = columns[i];
+        const x = i * FONT_SIZE * COLUMN_SPACING;
+
+        // Draw longer line: head bright, then fading trail upward
+        for (let j = 0; j < TRAIL_LENGTH; j++) {
+            const trailY = y - j * FONT_SIZE;
+            if (trailY < -FONT_SIZE) break;
+            const opacity = j === 0 ? 1 : Math.max(0.02, 0.5 - j * 0.04);
+            ctx.fillStyle = `rgba(34, 197, 94, ${opacity})`;
+            ctx.fillText(
+                CHARS[Math.floor(Math.random() * CHARS.length)],
+                x,
+                trailY,
+            );
+        }
+
+        columns[i] =
+            y > h + Math.random() * 50 ? 0 : y + DROP_SPEED;
+    }
+
+    animationId = requestAnimationFrame(() => draw(canvas));
+}
+
+function start(canvas: HTMLCanvasElement) {
+    initMatrix(canvas);
+    draw(canvas);
+}
+
+function stop() {
+    if (animationId) cancelAnimationFrame(animationId);
+}
+
+onMounted(() => {
+    const canvas = canvasRef.value;
+    const container = canvas?.parentElement;
+    if (!canvas || !container) return;
+
+    start(canvas);
+
+    resizeObserver = new ResizeObserver(() => {
+        if (!canvasRef.value) return;
+        stop();
+        start(canvasRef.value);
+    });
+    resizeObserver.observe(container);
+});
+
+onUnmounted(() => {
+    stop();
+    resizeObserver?.disconnect();
+});
+</script>
+
+<template>
+    <canvas
+        ref="canvasRef"
+        class="absolute inset-0 h-full w-full"
+        aria-hidden="true"
+    />
+</template>