Efecto

Abrir en el editor Video Publica tu código

Recomendado

11 August 2025

Animación CSS: Carga de blob con pulso

5 October 2024

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Particles</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inconsolata:wght@300;400&display=swap');

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

:root {
    --bg: #030508;
    --accent1: #00f5d4;
    --accent2: #f72585;
    --accent3: #fee440;
    --text: #e8f4f8;
  }

body {
    background: var(--bg);
    overflow: hidden;
    width: 100vw;
    height: 100vh;
    font-family: 'Inconsolata', monospace;
    cursor: none;
  }

canvas {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
  }

.ui {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 10;
  }

.title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    pointer-events: none;
  }

.title h1 {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(4rem, 12vw, 10rem);
    color: transparent;
    -webkit-text-stroke: 1px rgba(0, 245, 212, 0.3);
    letter-spacing: 0.15em;
    line-height: 1;
    text-transform: uppercase;
    mix-blend-mode: screen;
    animation: fadeIn 2s ease forwards;
  }

.title p {
    font-size: clamp(0.65rem, 1.5vw, 0.85rem);
    color: rgba(232, 244, 248, 0.35);
    letter-spacing: 0.4em;
    text-transform: uppercase;
    margin-top: 1rem;
    animation: fadeIn 2.5s ease forwards;
  }

.corner {
    position: absolute;
    font-size: 0.65rem;
    color: rgba(0, 245, 212, 0.4);
    letter-spacing: 0.2em;
    text-transform: uppercase;
  }
  .corner.tl { top: 2rem; left: 2rem; }
  .corner.br { bottom: 2rem; right: 2rem; text-align: right; }

.stats {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    font-size: 0.65rem;
    color: rgba(0, 245, 212, 0.35);
    letter-spacing: 0.15em;
    line-height: 2;
  }

.controls {
    position: absolute;
    top: 2rem;
    right: 2rem;
    display: flex;
    gap: 0.75rem;
    pointer-events: all;
  }

.btn {
    background: rgba(0, 245, 212, 0.05);
    border: 1px solid rgba(0, 245, 212, 0.2);
    color: rgba(0, 245, 212, 0.6);
    padding: 0.4rem 0.9rem;
    font-family: 'Inconsolata', monospace;
    font-size: 0.65rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.2s;
  }
  .btn:hover {
    background: rgba(0, 245, 212, 0.12);
    border-color: rgba(0, 245, 212, 0.6);
    color: var(--accent1);
  }
  .btn.active {
    background: rgba(0, 245, 212, 0.15);
    border-color: var(--accent1);
    color: var(--accent1);
  }

.cursor {
    position: fixed;
    width: 6px; height: 6px;
    background: var(--accent1);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
    transition: transform 0.1s;
  }
  .cursor-ring {
    position: fixed;
    width: 32px; height: 32px;
    border: 1px solid rgba(0, 245, 212, 0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: all 0.12s ease;
  }

@keyframes fadeIn {
    from { opacity: 0; transform: translate(-50%, -48%); }
    to { opacity: 1; transform: translate(-50%, -50%); }
  }
</style>
</head>
<body>

<div class="ui">
  <div class="corner tl">Particle System v1.0</div>
  <div class="corner br">Move mouse to interact</div>
  <div class="stats" id="stats"></div>
  <div class="controls">
    <button class="btn active" id="btnNormal">Normal</button>
    <button class="btn" id="btnExplode">Explode</button>
    <button class="btn" id="btnVortex">Vortex</button>
    <button class="btn" id="btnWeb">Web</button>
  </div>
  <div class="title">
    <h1>Particles</h1>
    <p>Interactive canvas experiment</p>
  </div>
</div>

let W = canvas.width = window.innerWidth;
let H = canvas.height = window.innerHeight;
let mouse = { x: W / 2, y: H / 2 };
let mode = 'normal';
let frame = 0;

// Colors
const colors = ['#00f5d4', '#f72585', '#fee440', '#4cc9f0', '#7209b7'];

// Particle count based on screen size
const COUNT = Math.min(180, Math.floor((W * H) / 6000));

class Particle {
  constructor() { this.reset(true); }

reset(init = false) {
    this.x = init ? Math.random() * W : Math.random() * W;
    this.y = init ? Math.random() * H : Math.random() * H;
    this.baseX = this.x;
    this.baseY = this.y;
    this.size = Math.random() * 2.5 + 0.5;
    this.color = colors[Math.floor(Math.random() * colors.length)];
    this.alpha = Math.random() * 0.7 + 0.2;
    this.speed = Math.random() * 0.8 + 0.2;
    this.angle = Math.random() * Math.PI * 2;
    this.vx = Math.cos(this.angle) * this.speed;
    this.vy = Math.sin(this.angle) * this.speed;
    this.life = 1;
    this.decay = Math.random() * 0.003 + 0.001;
    this.orbitRadius = Math.random() * 120 + 40;
    this.orbitAngle = Math.random() * Math.PI * 2;
    this.orbitSpeed = (Math.random() - 0.5) * 0.02;
    this.twinkle = Math.random() * Math.PI * 2;
  }

update() {
    this.twinkle += 0.05;
    const twinkleAlpha = this.alpha * (0.6 + 0.4 * Math.sin(this.twinkle));

const dx = mouse.x - this.x;
    const dy = mouse.y - this.y;
    const dist = Math.sqrt(dx * dx + dy * dy);
    const influence = 120;

if (mode === 'normal') {
      this.x += this.vx;
      this.y += this.vy;

// Gentle attract to mouse
      if (dist < influence) {
        const force = (influence - dist) / influence;
        this.x += (dx / dist) * force * 1.5;
        this.y += (dy / dist) * force * 1.5;
      }

// Wrap
      if (this.x < -5) this.x = W + 5;
      if (this.x > W + 5) this.x = -5;
      if (this.y < -5) this.y = H + 5;
      if (this.y > H + 5) this.y = -5;

} else if (mode === 'explode') {
      if (dist < 150) {
        const force = (150 - dist) / 150 * 6;
        this.x -= (dx / dist) * force;
        this.y -= (dy / dist) * force;
      }
      this.x += this.vx * 0.5;
      this.y += this.vy * 0.5;
      this.vx *= 0.98;
      this.vy *= 0.98;

if (this.x < 0 || this.x > W) this.vx *= -1;
      if (this.y < 0 || this.y > H) this.vy *= -1;
      this.x = Math.max(0, Math.min(W, this.x));
      this.y = Math.max(0, Math.min(H, this.y));

} else if (mode === 'vortex') {
      this.orbitAngle += this.orbitSpeed;
      const targetX = mouse.x + Math.cos(this.orbitAngle) * this.orbitRadius;
      const targetY = mouse.y + Math.sin(this.orbitAngle) * this.orbitRadius;
      this.x += (targetX - this.x) * 0.08;
      this.y += (targetY - this.y) * 0.08;

} else if (mode === 'web') {
      this.x += this.vx * 0.4;
      this.y += this.vy * 0.4;
      if (this.x < 0 || this.x > W) this.vx *= -1;
      if (this.y < 0 || this.y > H) this.vy *= -1;
      this.x = Math.max(0, Math.min(W, this.x));
      this.y = Math.max(0, Math.min(H, this.y));
    }

this._currentAlpha = twinkleAlpha;
  }

draw() {
    ctx.save();
    ctx.globalAlpha = this._currentAlpha;
    ctx.fillStyle = this.color;
    ctx.shadowBlur = 8;
    ctx.shadowColor = this.color;
    ctx.beginPath();
    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
  }
}

// Init particles
const particles = Array.from({ length: COUNT }, () => new Particle());

// Add burst particles on click
function burst(x, y) {
  const burstCount = 30;
  for (let i = 0; i < burstCount; i++) {
    const p = new Particle();
    p.x = x; p.y = y;
    const angle = (i / burstCount) * Math.PI * 2;
    const speed = Math.random() * 5 + 2;
    p.vx = Math.cos(angle) * speed;
    p.vy = Math.sin(angle) * speed;
    p.size = Math.random() * 3 + 1;
    p.life = 1;
    p.isBurst = true;
    p.decay = 0.02;
    particles.push(p);
  }
}

function animate() {
  frame++;
  ctx.fillStyle = 'rgba(3, 5, 8, 0.18)';
  ctx.fillRect(0, 0, W, H);

// Remove dead burst particles
  for (let i = particles.length - 1; i >= 0; i--) {
    if (particles[i].isBurst) {
      particles[i].life -= particles[i].decay;
      particles[i]._currentAlpha = particles[i].life;
      if (particles[i].life <= 0) {
        particles.splice(i, 1);
        continue;
      }
    }
    particles[i].update();
  }

drawConnections();
  if (mode !== 'vortex') drawMouseConnections();

particles.forEach(p => p.draw());

// Stats
  if (frame % 30 === 0) {
    stats.textContent = `PARTICLES: ${particles.length}\nMODE: ${mode.toUpperCase()}\nFPS: ~60`;
  }

requestAnimationFrame(animate);
}

// Events
document.addEventListener('mousemove', e => {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
  cursor.style.left = e.clientX + 'px';
  cursor.style.top = e.clientY + 'px';
  cursorRing.style.left = e.clientX + 'px';
  cursorRing.style.top = e.clientY + 'px';
});

document.addEventListener('click', e => {
  if (e.target.classList.contains('btn')) return;
  burst(e.clientX, e.clientY);
});

document.addEventListener('touchmove', e => {
  e.preventDefault();
  mouse.x = e.touches[0].clientX;
  mouse.y = e.touches[0].clientY;
}, { passive: false });

document.addEventListener('touchstart', e => {
  burst(e.touches[0].clientX, e.touches[0].clientY);
});

window.addEventListener('resize', () => {
  W = canvas.width = window.innerWidth;
  H = canvas.height = window.innerHeight;
});

// Mode buttons
document.querySelectorAll('.btn').forEach(btn => {
  btn.addEventListener('click', () => {
    document.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
    btn.classList.add('active');
    mode = btn.id.replace('btn', '').toLowerCase();
  });
});

animate();
</script>
</body>
</html>

Efecto

Recomendado

Animación CSS: Carga de blob con pulso

Entrada HTML animada

Pingüino

HTML

CSS

JS

Recomendado

Animación CSS: Carga de blob con pulso

Entrada HTML animada

Pingüino

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS