From c2b6cebeb0907cd8f34238ba888eb473a0bb9da4 Mon Sep 17 00:00:00 2001
From: miguel-l-b <miguellopesbraido@gmail.com>
Date: Mon, 30 Mar 2026 22:41:39 -0300
Subject: [PATCH] feat: add new HTML templates for various visual effects

---
 templates/aurora-waves.html      |  68 ++++++++++++++++
 templates/digital-clock.html     | 105 ++++++++++++++++++++++++
 templates/doom-fire.html         | 134 +++++++++++++++++++++++++++++++
 templates/matrix-rain.html       |  72 +++++++++++++++++
 templates/particles-network.html |  94 ++++++++++++++++++++++
 templates/starfield.html         |  88 ++++++++++++++++++++
 6 files changed, 561 insertions(+)
 create mode 100644 templates/aurora-waves.html
 create mode 100644 templates/digital-clock.html
 create mode 100644 templates/doom-fire.html
 create mode 100644 templates/matrix-rain.html
 create mode 100644 templates/particles-network.html
 create mode 100644 templates/starfield.html
diff --git a/templates/aurora-waves.html b/templates/aurora-waves.html
new file mode 100644
index 0000000..7e533e1
--- /dev/null
+++ b/templates/aurora-waves.html
@@ -0,0 +1,68 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Aurora Waves</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background: radial-gradient(circle at 50% 20%, #101b32, #04060d 72%);
+      }
+
+      canvas {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="aurora"></canvas>
+    <script>
+      const canvas = document.getElementById("aurora");
+      const ctx = canvas.getContext("2d");
+      let t = 0;
+
+      function resize() {
+        canvas.width = innerWidth;
+        canvas.height = innerHeight;
+      }
+
+      function drawWave(offset, color, amp, freq, speed, thick) {
+        ctx.beginPath();
+        for (let x = 0; x <= canvas.width; x += 2) {
+          const y =
+            canvas.height * 0.5 +
+            Math.sin(x * freq + t * speed + offset) * amp +
+            Math.sin(x * (freq * 0.37) - t * speed * 0.8) * (amp * 0.4);
+          if (x === 0) ctx.moveTo(x, y);
+          else ctx.lineTo(x, y);
+        }
+        ctx.lineWidth = thick;
+        ctx.strokeStyle = color;
+        ctx.stroke();
+      }
+
+      function frame() {
+        t += 0.016;
+        ctx.fillStyle = "rgba(4, 6, 13, 0.08)";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        drawWave(0.0, "rgba(84, 255, 214, 0.25)", 100, 0.007, 1.5, 44);
+        drawWave(1.2, "rgba(89, 164, 255, 0.22)", 130, 0.006, 1.1, 58);
+        drawWave(2.4, "rgba(201, 122, 255, 0.20)", 85, 0.009, 1.8, 36);
+
+        requestAnimationFrame(frame);
+      }
+
+      resize();
+      window.addEventListener("resize", resize);
+      requestAnimationFrame(frame);
+    </script>
+  </body>
+</html>
diff --git a/templates/digital-clock.html b/templates/digital-clock.html
new file mode 100644
index 0000000..2ea2c0a
--- /dev/null
+++ b/templates/digital-clock.html
@@ -0,0 +1,105 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Digital Clock</title>
+    <style>
+      :root {
+        --bg-1: #05060a;
+        --bg-2: #10182b;
+        --glow: #37f7ff;
+        --text: #e9fcff;
+      }
+
+      html,
+      body {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+      }
+
+      body {
+        display: grid;
+        place-items: center;
+        background: radial-gradient(
+          circle at 30% 30%,
+          var(--bg-2),
+          var(--bg-1)
+        );
+        color: var(--text);
+        font-family: "Courier New", monospace;
+      }
+
+      .panel {
+        text-align: center;
+        padding: 32px 40px;
+        border: 1px solid rgba(55, 247, 255, 0.25);
+        border-radius: 16px;
+        background: rgba(8, 12, 24, 0.62);
+        backdrop-filter: blur(5px);
+        box-shadow: 0 0 40px rgba(55, 247, 255, 0.12);
+      }
+
+      .time {
+        font-size: clamp(56px, 14vw, 140px);
+        letter-spacing: 0.08em;
+        color: var(--glow);
+        text-shadow:
+          0 0 8px rgba(55, 247, 255, 0.7),
+          0 0 20px rgba(55, 247, 255, 0.35);
+      }
+
+      .date {
+        margin-top: 12px;
+        font-size: clamp(14px, 2.8vw, 26px);
+        letter-spacing: 0.08em;
+        opacity: 0.9;
+      }
+
+      .pulse {
+        animation: pulse 1.4s ease-in-out infinite;
+      }
+
+      @keyframes pulse {
+        0%,
+        100% {
+          opacity: 1;
+        }
+        50% {
+          opacity: 0.3;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div class="panel">
+      <div id="time" class="time">00:00:00</div>
+      <div id="date" class="date">---</div>
+    </div>
+
+    <script>
+      const timeEl = document.getElementById("time");
+      const dateEl = document.getElementById("date");
+
+      function updateClock() {
+        const now = new Date();
+        const hh = String(now.getHours()).padStart(2, "0");
+        const mm = String(now.getMinutes()).padStart(2, "0");
+        const ss = String(now.getSeconds()).padStart(2, "0");
+
+        timeEl.innerHTML = `${hh}<span class="pulse">:</span>${mm}<span class="pulse">:</span>${ss}`;
+        dateEl.textContent = now.toLocaleDateString(undefined, {
+          weekday: "long",
+          year: "numeric",
+          month: "long",
+          day: "2-digit",
+        });
+      }
+
+      updateClock();
+      setInterval(updateClock, 1000);
+    </script>
+  </body>
+</html>
diff --git a/templates/doom-fire.html b/templates/doom-fire.html
new file mode 100644
index 0000000..7d2a764
--- /dev/null
+++ b/templates/doom-fire.html
@@ -0,0 +1,134 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Doom Fire</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background: #000;
+      }
+
+      canvas {
+        width: 100%;
+        height: 100%;
+        image-rendering: pixelated;
+        display: block;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="fire"></canvas>
+    <script>
+      const canvas = document.getElementById("fire");
+      const ctx = canvas.getContext("2d", { alpha: false });
+
+      const palette = [
+        [7, 7, 7],
+        [31, 7, 7],
+        [47, 15, 7],
+        [71, 15, 7],
+        [87, 23, 7],
+        [103, 31, 7],
+        [119, 31, 7],
+        [143, 39, 7],
+        [159, 47, 7],
+        [175, 63, 7],
+        [191, 71, 7],
+        [199, 71, 7],
+        [223, 79, 7],
+        [223, 87, 7],
+        [223, 87, 7],
+        [215, 95, 7],
+        [215, 95, 7],
+        [215, 103, 15],
+        [207, 111, 15],
+        [207, 119, 15],
+        [207, 127, 15],
+        [207, 135, 23],
+        [199, 135, 23],
+        [199, 143, 23],
+        [199, 151, 31],
+        [191, 159, 31],
+        [191, 159, 31],
+        [191, 167, 39],
+        [191, 167, 39],
+        [191, 175, 47],
+        [183, 175, 47],
+        [183, 183, 47],
+        [183, 183, 55],
+        [207, 207, 111],
+        [223, 223, 159],
+        [239, 239, 199],
+        [255, 255, 255],
+      ];
+
+      let cols = 0;
+      let rows = 0;
+      let fire = [];
+
+      function resize() {
+        canvas.width = window.innerWidth;
+        canvas.height = window.innerHeight;
+
+        cols = Math.max(120, Math.floor(canvas.width / 5));
+        rows = Math.max(80, Math.floor(canvas.height / 5));
+        fire = new Uint8Array(cols * rows);
+
+        for (let x = 0; x < cols; x++) {
+          fire[(rows - 1) * cols + x] = palette.length - 1;
+        }
+      }
+
+      function updateFire() {
+        for (let y = 1; y < rows; y++) {
+          for (let x = 0; x < cols; x++) {
+            const src = y * cols + x;
+            const decay = (Math.random() * 3) | 0;
+            const dstX = Math.max(
+              0,
+              Math.min(cols - 1, x + ((Math.random() * 3) | 0) - 1),
+            );
+            const dst = (y - 1) * cols + dstX;
+            fire[dst] = Math.max(0, fire[src] - decay);
+          }
+        }
+      }
+
+      function renderFire() {
+        const img = ctx.createImageData(cols, rows);
+        for (let i = 0; i < fire.length; i++) {
+          const c = palette[fire[i]];
+          const p = i * 4;
+          img.data[p] = c[0];
+          img.data[p + 1] = c[1];
+          img.data[p + 2] = c[2];
+          img.data[p + 3] = 255;
+        }
+
+        const off = document.createElement("canvas");
+        off.width = cols;
+        off.height = rows;
+        off.getContext("2d").putImageData(img, 0, 0);
+
+        ctx.imageSmoothingEnabled = false;
+        ctx.drawImage(off, 0, 0, canvas.width, canvas.height);
+      }
+
+      function loop() {
+        updateFire();
+        renderFire();
+        requestAnimationFrame(loop);
+      }
+
+      resize();
+      window.addEventListener("resize", resize);
+      requestAnimationFrame(loop);
+    </script>
+  </body>
+</html>
diff --git a/templates/matrix-rain.html b/templates/matrix-rain.html
new file mode 100644
index 0000000..75b86c8
--- /dev/null
+++ b/templates/matrix-rain.html
@@ -0,0 +1,72 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Matrix Rain</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background: #030a03;
+      }
+
+      canvas {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="c"></canvas>
+    <script>
+      const canvas = document.getElementById("c");
+      const ctx = canvas.getContext("2d");
+
+      let w = 0;
+      let h = 0;
+      let columns = 0;
+      let drops = [];
+
+      const chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ$#@%&*+-";
+      const fontSize = 16;
+
+      function resize() {
+        w = canvas.width = window.innerWidth;
+        h = canvas.height = window.innerHeight;
+        columns = Math.floor(w / fontSize);
+        drops = Array.from({ length: columns }, () => Math.random() * -100);
+      }
+
+      function draw() {
+        ctx.fillStyle = "rgba(3, 10, 3, 0.14)";
+        ctx.fillRect(0, 0, w, h);
+
+        ctx.font = `${fontSize}px monospace`;
+        for (let i = 0; i < columns; i++) {
+          const text = chars[(Math.random() * chars.length) | 0];
+          const x = i * fontSize;
+          const y = drops[i] * fontSize;
+
+          ctx.fillStyle = "#c8ffc8";
+          ctx.fillText(text, x, y);
+          ctx.fillStyle = "#23ff23";
+          ctx.fillText(text, x, y + fontSize);
+
+          if (y > h && Math.random() > 0.98) {
+            drops[i] = Math.random() * -20;
+          }
+          drops[i] += 0.9;
+        }
+      }
+
+      resize();
+      window.addEventListener("resize", resize);
+      setInterval(draw, 33);
+    </script>
+  </body>
+</html>
diff --git a/templates/particles-network.html b/templates/particles-network.html
new file mode 100644
index 0000000..63fd2f3
--- /dev/null
+++ b/templates/particles-network.html
@@ -0,0 +1,94 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Particles Network</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background: linear-gradient(160deg, #070b1c, #111a39 55%, #0b0920);
+      }
+
+      canvas {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="net"></canvas>
+    <script>
+      const canvas = document.getElementById("net");
+      const ctx = canvas.getContext("2d");
+      let particles = [];
+
+      function resize() {
+        canvas.width = innerWidth;
+        canvas.height = innerHeight;
+        init();
+      }
+
+      function init() {
+        const count = Math.max(
+          60,
+          Math.floor((canvas.width * canvas.height) / 19000),
+        );
+        particles = Array.from({ length: count }, () => ({
+          x: Math.random() * canvas.width,
+          y: Math.random() * canvas.height,
+          vx: (Math.random() - 0.5) * 0.7,
+          vy: (Math.random() - 0.5) * 0.7,
+        }));
+      }
+
+      function step() {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+        for (const p of particles) {
+          p.x += p.vx;
+          p.y += p.vy;
+
+          if (p.x < 0 || p.x > canvas.width) p.vx *= -1;
+          if (p.y < 0 || p.y > canvas.height) p.vy *= -1;
+
+          ctx.beginPath();
+          ctx.fillStyle = "rgba(200, 214, 255, 0.9)";
+          ctx.arc(p.x, p.y, 1.7, 0, Math.PI * 2);
+          ctx.fill();
+        }
+
+        for (let i = 0; i < particles.length; i++) {
+          for (let j = i + 1; j < particles.length; j++) {
+            const a = particles[i];
+            const b = particles[j];
+            const dx = a.x - b.x;
+            const dy = a.y - b.y;
+            const dist = Math.hypot(dx, dy);
+
+            if (dist < 130) {
+              const alpha = (1 - dist / 130) * 0.35;
+              ctx.strokeStyle = `rgba(133, 162, 255, ${alpha})`;
+              ctx.lineWidth = 1;
+              ctx.beginPath();
+              ctx.moveTo(a.x, a.y);
+              ctx.lineTo(b.x, b.y);
+              ctx.stroke();
+            }
+          }
+        }
+
+        requestAnimationFrame(step);
+      }
+
+      resize();
+      window.addEventListener("resize", resize);
+      requestAnimationFrame(step);
+    </script>
+  </body>
+</html>
diff --git a/templates/starfield.html b/templates/starfield.html
new file mode 100644
index 0000000..9d8a270
--- /dev/null
+++ b/templates/starfield.html
@@ -0,0 +1,88 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Starfield</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
+        background: #02030a;
+      }
+
+      canvas {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+    </style>
+  </head>
+  <body>
+    <canvas id="stars"></canvas>
+    <script>
+      const canvas = document.getElementById("stars");
+      const ctx = canvas.getContext("2d");
+      let stars = [];
+
+      function resize() {
+        canvas.width = innerWidth;
+        canvas.height = innerHeight;
+        init();
+      }
+
+      function init() {
+        stars = [];
+        const count = Math.floor((canvas.width * canvas.height) / 3800);
+        for (let i = 0; i < count; i++) {
+          stars.push({
+            x: Math.random() * canvas.width,
+            y: Math.random() * canvas.height,
+            z: Math.random() * canvas.width,
+          });
+        }
+      }
+
+      function frame() {
+        ctx.fillStyle = "rgba(2, 3, 10, 0.35)";
+        ctx.fillRect(0, 0, canvas.width, canvas.height);
+
+        const cx = canvas.width / 2;
+        const cy = canvas.height / 2;
+
+        for (const s of stars) {
+          s.z -= 4;
+          if (s.z <= 1) {
+            s.x = Math.random() * canvas.width;
+            s.y = Math.random() * canvas.height;
+            s.z = canvas.width;
+          }
+
+          const sx = (s.x - cx) * (canvas.width / s.z) + cx;
+          const sy = (s.y - cy) * (canvas.width / s.z) + cy;
+          const r = Math.max(0.5, (1 - s.z / canvas.width) * 3.2);
+          const a = Math.min(1, (1 - s.z / canvas.width) * 1.3);
+
+          if (sx < 0 || sx >= canvas.width || sy < 0 || sy >= canvas.height) {
+            s.z = canvas.width;
+            continue;
+          }
+
+          ctx.beginPath();
+          ctx.fillStyle = `rgba(188, 225, 255, ${a})`;
+          ctx.arc(sx, sy, r, 0, Math.PI * 2);
+          ctx.fill();
+        }
+
+        requestAnimationFrame(frame);
+      }
+
+      resize();
+      window.addEventListener("resize", resize);
+      requestAnimationFrame(frame);
+    </script>
+  </body>
+</html>
