heatmap animation

resources/views/livewire/book-case/heatmap.blade.php

@@ -1,5 +1,9 @@
-<div class="bg-black h-screen justify-between">
+<div
-    <livewire:frontend.header :country="$country" bgColor="bg-black"/>
+    id="matrix"
+    class="h-screen justify-between relative">
+    <canvas id="canvas" class="absolute top-0 left-0 z-[-1] h-full"></canvas>
+    {{-- HEADER --}}
+    <livewire:frontend.header :country="$country" bgColor="bg-transparent"/>
     {{-- MAIN --}}
     <section class="w-full mb-12">
         <div class="max-w-screen-2xl mx-auto px-2 sm:px-10">
@@ -61,4 +65,42 @@
     </section>
     {{-- FOOTER --}}
     <livewire:frontend.footer/>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.0.0/p5.min.js"></script>
+    <script>
+        document.addEventListener('livewire:load', function () {
+            const canvas = document.getElementById('canvas');
+            const ctx = canvas.getContext('2d');
+
+            const w = canvas.width = document.getElementById('matrix').offsetWidth;
+            const h = canvas.height = document.getElementById('matrix').offsetHeight;
+            const cols = Math.floor(w / 20) + 1;
+            const ypos = Array(cols).fill(0);
+            const characters = 'Markus Turm';
+            const charactersLength = characters.length;
+
+            ctx.fillStyle = '#000';
+            ctx.fillRect(0, 0, w, h);
+
+            function matrix () {
+                ctx.fillStyle = '#0001';
+                ctx.fillRect(0, 0, w, h);
+
+                ctx.fillStyle = '#F7931A';
+                ctx.font = '12pt monospace';
+
+                ypos.forEach((y, ind) => {
+
+                    const text = characters.charAt(Math.floor(Math.random() * charactersLength));
+                    const x = ind * 20;
+                    ctx.fillText(text, x, y);
+                    if (y > 10 + Math.random() * 10000) ypos[ind] = 0;
+                    else ypos[ind] = y + 20;
+                });
+
+                document.getElementById('matrix').style.background = "url(" + canvas.toDataURL() + ")";
+            }
+
+            setInterval(matrix, 50);
+        });
+    </script>
 </div>