Si alguna vez has querido darle vida a tu cursor, este tutorial es para ti. Vamos a crear un Blob interactivo que reacciona al movimiento del mouse. ¡Es más fácil de lo que parece y súper divertido! 🌌
Al final, tendrás algo como esto:
🛠 Paso 1: Estructura básica
Primero necesitamos un archivo HTML que contenga un <canvas> (donde dibujaremos los blobs) y un texto que le dé un toque galáctico.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cosmic Blob</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<canvas id="canvas"></canvas>
<div class="cosmic-text">Cosmic</div>
<script src="script.js"></script>
</body>
</html>
El texto "Cosmic" es puramente estético, pero le da ese vibe espacial que buscamos.
Ahora vamos con el CSS para darle estilo:
/* styles.css */
body {
margin: 0;
overflow: hidden;
background: #000; /* Fondo negro */
cursor: none; /* Ocultamos el cursor */
}
canvas {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cosmic-text {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-family: "Space Mono", serif;
font-size: 15vw;
font-weight: 700;
text-shadow: 0 0 40px #444857, -1px 1px 60px rgba(255, 255, 255, 0.2);
pointer-events: none; /* Evitamos que el texto interfiera con el mouse */
z-index: 10; /* Aseguramos que esté por encima del canvas */
}
Esto nos da un canvas que ocupa toda la pantalla y un texto centrado que parece flotar en el espacio.
🎨 Paso 2: Configurar el canvas y detectar el mouse
Ahora pasamos a script.js. Lo primero es configurar el canvas para que cubra la pantalla y ajustar su tamaño automáticamente si la ventana cambia.
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
// Almacenamos la posición del mouse
let mouse = { x: 0, y: 0 };
// Ajustamos el tamaño del canvas al tamaño de la ventana
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
// Eventos para redimensionar el canvas y detectar el movimiento del mouse
window.addEventListener("resize", resizeCanvas);
window.addEventListener("mousemove", (e) => {
mouse.x = e.clientX;
mouse.y = e.clientY;
});
// Inicializamos el canvas
resizeCanvas();
Esto es la base para que podamos dibujar en el canvas y hacer que el blob siga al cursor.
🚀 Paso 3: Movimiento suave con lerp
No queremos que el blob siga al mouse de manera brusca. En su lugar, usaremos interpolación lineal (o lerp) para suavizar el movimiento.
let currentX = 0;
let currentY = 0;
function lerp(start, end, t) {
return start * (1 - t) + end * t;
}
En cada frame, actualizamos las coordenadas del blob de forma gradual:
currentX = lerp(currentX, mouse.x, 0.1);
currentY = lerp(currentY, mouse.y, 0.1);
Esto hace que el blob parezca más vivo, como si tuviera inercia.
🌌 Paso 4: Dibujar el Blob
Ahora, lo interesante. Vamos a dibujar un gradiente radial que seguirá al cursor y formará nuestro Cosmic Blob.
let time = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // Limpiamos el canvas
time += 0.03; // Incrementamos el tiempo para animar
// Gradiente que sigue al cursor
const gradient = ctx.createRadialGradient(
currentX, currentY, 0,
currentX, currentY, 600
);
gradient.addColorStop(0, "#5B21B6");
gradient.addColorStop(0.4, "#EC4899");
gradient.addColorStop(0.8, "#3B82F6");
gradient.addColorStop(1, "#5B21B6");
ctx.save();
ctx.filter = "blur(120px)";
// Dibujamos varios blobs alrededor del cursor
for (let i = 0; i < 6; i++) {
const angle = time * 0.5 + (i * Math.PI * 2) / 6;
const radius = 80 + Math.sin(time * 2 + i) * 40;
const offsetX = Math.cos(angle) * radius;
const offsetY = Math.sin(angle) * radius;
ctx.beginPath();
ctx.arc(currentX + offsetX, currentY + offsetY, 150, 0, Math.PI * 2);
ctx.fillStyle = gradient;
ctx.fill();
}
ctx.restore();
requestAnimationFrame(animate); // Llamamos a la animación en el siguiente frame
}
animate();
🌟 Paso 5: Añadir ruido para un toque orgánico
Queremos que el blob parezca más dinámico, casi como si estuviera vivo. Para eso, añadimos una función de "ruido".
function noise(x, y) {
const noiseScale = 0.05;
const amplitude = 50;
return (
Math.sin(x * noiseScale + time) *
Math.cos(y * noiseScale + time * 0.8) *
amplitude
);
}
Integramos este ruido en las coordenadas de los blobs para que se deformen de forma natural:
ctx.arc(
currentX + offsetX + noise(currentX, currentY),
currentY + offsetY + noise(currentY, currentX),
150,
0,
Math.PI * 2
);
¡Eso es todo! 🎉
Ahora tienes un Blob que sigue al cursor con un movimiento fluido.
Puedes ver el código completo y probarlo en mi CodePen:
Top comments (1)
Wow! muuy genial! Ya quiero intentarlo :)
Oye, solo un detalle. Ahora mismo estoy usando una laptop normalita (sin gpu dedicada) y el efecto no funciona fluido en firefox. Se va quedando atascado el efecto. En chrome funciona súper bien :)