summaryrefslogtreecommitdiffstats
path: root/.assets/matrix-rain.js
diff options
context:
space:
mode:
authorDanilo M. <danix@danix.xyz>2026-05-11 14:16:52 +0200
committerDanilo M. <danix@danix.xyz>2026-05-11 14:16:52 +0200
commit8e7bb77a16cad59928225c59b2e6f43fd00d1cb4 (patch)
tree2a17d920482deb9f15b91a8524ace31228cf0b47 /.assets/matrix-rain.js
parent181538b5204bd5f14d5f4a5fc23c50e7dc3db75d (diff)
downloadpkgs-html-structure-master.tar.gz
pkgs-html-structure-master.zip
feat: restructure assets, add faviconHEADmaster
Move matrix-rain.js to .assets/js/, add favicon.png to .assets/img/. Update all header templates with new JS path and favicon link tag. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Diffstat (limited to '.assets/matrix-rain.js')
-rw-r--r--.assets/matrix-rain.js136
1 files changed, 0 insertions, 136 deletions
diff --git a/.assets/matrix-rain.js b/.assets/matrix-rain.js
deleted file mode 100644
index e22ada2..0000000
--- a/.assets/matrix-rain.js
+++ /dev/null
@@ -1,136 +0,0 @@
-// Matrix rain background effect — header-scoped build for packages.danix.xyz
-// Derived from danix2-hugo-theme/assets/js/matrix-rain.js
-(function() {
- if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
-
- var header = document.querySelector('.site-header');
- if (!header) return;
-
- // Canvas
- var canvas = document.createElement('canvas');
- canvas.id = 'matrix-rain';
- canvas.style.cssText = 'position:absolute;top:0;right:0;height:100%;pointer-events:none;z-index:0;';
- header.appendChild(canvas);
-
- // Gradient fade div — covers left portion of canvas area, left→transparent
- var fade = document.createElement('div');
- fade.style.cssText = 'position:absolute;top:0;right:0;bottom:0;width:65%;background:linear-gradient(to right,var(--bg-card) 0%,transparent 60%);pointer-events:none;z-index:1;';
- header.appendChild(fade);
-
- var ctx = canvas.getContext('2d');
-
- var columns = [];
- var frameCount = 0;
- var colors = { accent: '#5c9cf5', accent2: '#4ec97b', bg: '#161b25', head: '#ffffff' };
-
- var ASCII = Array.from({ length: 94 }, function(_, i) { return String.fromCharCode(33 + i); });
- var KATA = Array.from({ length: 96 }, function(_, i) { return String.fromCodePoint(0x30a0 + i); });
- var CHARS = shuffle([].concat(ASCII, KATA, KATA, KATA));
-
- function shuffle(arr) {
- for (var i = arr.length - 1; i > 0; i--) {
- var j = Math.floor(Math.random() * (i + 1));
- var tmp = arr[i]; arr[i] = arr[j]; arr[j] = tmp;
- }
- return arr;
- }
-
- function hexToRgba(color, alpha) {
- var rgbMatch = color.match(/rgb\((\d+),\s*(\d+),\s*(\d+)\)/);
- if (rgbMatch) return 'rgba(' + rgbMatch[1] + ',' + rgbMatch[2] + ',' + rgbMatch[3] + ',' + alpha + ')';
- var hex = color.replace('#', '');
- var r = parseInt(hex.substring(0, 2), 16);
- var g = parseInt(hex.substring(2, 4), 16);
- var b = parseInt(hex.substring(4, 6), 16);
- return 'rgba(' + r + ',' + g + ',' + b + ',' + alpha + ')';
- }
-
- function sampleColors() {
- var style = getComputedStyle(document.documentElement);
- var isDark = !document.documentElement.classList.contains('theme-light');
- colors.accent = style.getPropertyValue('--accent').trim() || '#5c9cf5';
- colors.accent2 = style.getPropertyValue('--accent2').trim() || '#4ec97b';
- colors.bg = style.getPropertyValue('--bg-card').trim() || '#161b25';
- colors.head = isDark ? '#ffffff' : '#1a0533';
- }
-
- function resizeCanvas() {
- canvas.width = Math.floor(header.offsetWidth * 0.65);
- canvas.height = header.offsetHeight;
- ctx.font = '14px "IBM Plex Mono", monospace';
- ctx.textBaseline = 'top';
- initColumns();
- }
-
- function initColumns() {
- columns = [];
- var columnWidth = 14;
- var columnCount = Math.floor(canvas.width / columnWidth);
- for (var i = 0; i < columnCount; i++) {
- columns.push({
- x: i * columnWidth,
- y: -Math.floor(Math.random() * 40),
- speed: 2 + Math.floor(Math.random() * 3),
- color: Math.random() < 0.6 ? 'accent2' : 'accent',
- charIndex: Math.floor(Math.random() * CHARS.length),
- length: 8 + Math.floor(Math.random() * 13)
- });
- }
- }
-
- function setupThemeObserver() {
- var observer = new MutationObserver(function(mutations) {
- for (var i = 0; i < mutations.length; i++) {
- if (mutations[i].attributeName === 'class') { sampleColors(); break; }
- }
- });
- observer.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
- }
-
- function drawFrame() {
- frameCount++;
- ctx.fillStyle = hexToRgba(colors.bg, 0.085);
- ctx.fillRect(0, 0, canvas.width, canvas.height);
-
- for (var ci = 0; ci < columns.length; ci++) {
- var col = columns[ci];
- if (frameCount % col.speed !== 0) continue;
-
- ctx.fillStyle = colors[col.color];
- for (var i = 1; i <= col.length; i++) {
- var trailY = (col.y - i) * 14;
- if (trailY < 0) continue;
- var trailCharIndex = (col.charIndex - i + CHARS.length) % CHARS.length;
- ctx.fillText(CHARS[trailCharIndex], col.x, trailY);
- }
-
- ctx.fillStyle = colors.head;
- ctx.fillText(CHARS[col.charIndex % CHARS.length], col.x, col.y * 14);
-
- col.y++;
- col.charIndex = (col.charIndex + 1) % CHARS.length;
-
- if (col.y * 14 > canvas.height + col.length * 14) {
- col.y = -Math.floor(Math.random() * 20);
- col.charIndex = Math.floor(Math.random() * CHARS.length);
- col.color = Math.random() < 0.6 ? 'accent2' : 'accent';
- }
- }
-
- requestAnimationFrame(drawFrame);
- }
-
- sampleColors();
- resizeCanvas();
- setupThemeObserver();
-
- var resizeTimer;
- window.addEventListener('resize', function() {
- clearTimeout(resizeTimer);
- resizeTimer = setTimeout(resizeCanvas, 150);
- });
-
- document.fonts.ready.then(function() {
- requestAnimationFrame(drawFrame);
- });
-})();