Efecto Matrix Love – Explicación y Código

🎥 Video original

📘 Descripción del video

¿Quieres sorprender con una animación romántica única hecha solo con código? En este proyecto creamos el efecto Matrix Love usando HTML, CSS y JavaScript.

Personaliza el mensaje
Cambia el color
Ajusta la velocidad
Explosiones animadas al hacer clic
Sin librerías externas

🧩 Tecnologías utilizadas

HTML5 – estructura y controles
CSS3 – estilos y diseño
JavaScript – animación con Canvas API

🔌 Cómo conectar HTML + CSS + JS

Para que el proyecto funcione, debes tener tres archivos:

index.html
style.css
script.js

Y en tu HTML debes enlazar los otros dos:

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

📄 Código HTML

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Matrix Love</title>
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <div class="controls">
    <label>Velocidad: <input type="range" min="1" max="30" value="10" id="speedControl"></label>
    <label>Color: <input type="color" id="colorPicker" value="#ff69b4"></label>
    <label>Texto: <input type="text" id="textInput" value="Te Amo"></label>
  </div>
  <canvas id="matrixCanvas"></canvas>
  <script src="script.js"></script>
</body>
</html>

🎨 Código CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  margin: 0;
  overflow: hidden;
  background: black;
}

canvas {
  display: block;
}

.controls {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(0,0,0,0.5);
  padding: 10px;
  border-radius: 8px;
  z-index: 10;
}

.controls label {
  display: block;
  margin-bottom: 5px;
  color: white;
}

⚙️ Código JavaScript

const canvas = document.getElementById("matrixCanvas");
const ctx = canvas.getContext("2d");
let speed = 10;
let message = "Te Amo";
let color = "#ff69b4";

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let fontSize = 14;
let columns = canvas.width / fontSize;
let drops = Array.from({ length: columns }).fill(1);

// CONTROLES
document.getElementById("speedControl").addEventListener("input", (e) => {
  speed = parseInt(e.target.value);
});

document.getElementById("colorPicker").addEventListener("input", (e) => {
  color = e.target.value;
});

document.getElementById("textInput").addEventListener("input", (e) => {
  message = e.target.value;
});

// EXPLOSIONES AL CLIC
canvas.addEventListener("click", (e) => {
  const x = e.clientX;
  const y = e.clientY;
  explosion(x, y);
});

function explosion(x, y) {
  const parts = 20;
  for (let i = 0; i < parts; i++) {
    const angle = (Math.PI * 2 * i) / parts;
    const dx = Math.cos(angle) * 5;
    const dy = Math.sin(angle) * 5;
    animateExplosion(x, y, dx, dy);
  }
}

function animateExplosion(x, y, dx, dy) {
  let life = 30;
  function frame() {
    if (life <= 0) return;
    ctx.fillStyle = color;
    ctx.font = "bold 16px Arial";
    ctx.fillText(message, x + dx * (30 - life), y + dy * (30 - life));
    life--;
    requestAnimationFrame(frame);
  }
  frame();
}

function draw() {
  ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
  ctx.fillRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = color;
  ctx.font = `${fontSize}px Arial`;

  for (let i = 0; i < drops.length; i++) {
    const text = message;
    ctx.fillText(text, i * fontSize, drops[i] * fontSize);
    if (drops[i] * fontSize > canvas.height || Math.random() > 0.95) {
      drops[i] = 0;
    }
    drops[i]++;
  }
}

function animate() {
  setTimeout(() => {
    requestAnimationFrame(animate);
    draw();
  }, 1000 / speed);
}

animate();

💡 Tips para usarlo en Visual Studio Code

Instala la extensión Live Server
Haz clic derecho en index.html → Open with Live Server
Así verás los cambios en tiempo real
Usa la paleta de comandos: Ctrl + Shift + P
Divide tu pantalla: HTML / CSS / JS en paneles separados

Volver al inicio