music: wip music page

templates/partials/music.html

@@ -1,5 +1,25 @@
 <music>
+  <vertical-marquee id="bg-text"></vertical-marquee>
   <cute-container>
     <img src="/static/assets/gifs/music.gif" alt="Animated text 'Music'" />
   </cute-container>
-</music>
+</music>
+<script>
+  const chars = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+  const container = document.getElementById('bg-text');
+  const colWidth = 20;
+  const rowHeight = 24;
+  const cols = Math.ceil(window.innerWidth / colWidth);
+  const rows = Math.ceil(window.innerHeight / rowHeight);
+
+  for (let c = 0; c < cols; c++) {
+    const col = document.createElement('vertical-marquee-inner');
+    col.style.left = (c * colWidth) + 'px';
+    for (let r = 0; r < rows; r++) {
+      const span = document.createElement('text');
+      span.textContent = chars[Math.floor(Math.random() * chars.length)];
+      col.appendChild(span);
+    }
+    container.appendChild(col);
+  }
+</script>