Text Particles HTML CSS JS — Canvas Particle Text

<div class="app">
  <canvas id="canvas"></canvas>
  <div class="controls">
    <input type="text" id="textInput" value="HELLO" maxlength="10" placeholder="Enter text..." spellcheck="false">
    <button id="applyBtn">Apply</button>
    <button id="toggleBtn">Explode</button>
    <span class="hint">Click canvas to toggle</span>
  </div>
</div>

* { margin: 0; padding: 0; box-sizing: border-box; }
body { background: #0d0d1a; font-family: system-ui, sans-serif; height: 100vh; overflow: hidden; }
.app { display: flex; flex-direction: column; height: 100vh; }
#canvas { flex: 1; display: block; cursor: pointer; }
.controls {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px;
  background: #16213e; border-top: 1px solid #0f3460; flex-wrap: wrap;
}
#textInput {
  padding: 7px 12px; background: #0d0d1a; border: 1px solid #0f3460;
  border-radius: 6px; color: #e0e0ff; font-size: 15px; letter-spacing: 2px;
  text-transform: uppercase; outline: none; width: 160px; font-family: inherit;
}
#textInput:focus { border-color: #4a90d9; }
button {
  padding: 7px 16px; background: #16213e; border: 1px solid #0f3460;
  border-radius: 6px; color: #a0a0c0; font-size: 13px; cursor: pointer; transition: all 0.15s;
}
button:hover { background: #0f3460; color: #e0e0ff; border-color: #4a90d9; }
#toggleBtn { border-color: #4a90d9; color: #a0c0ff; background: #1a3060; }
#toggleBtn.exploding { border-color: #e05555; color: #ff8080; background: #3a1a1a; }
.hint { font-size: 12px; color: #404060; }

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let W, H;

function resize() {
  W = canvas.width = canvas.offsetWidth;
  H = canvas.height = canvas.offsetHeight;
}
resize();
// The canvas can be 0px wide when the script first runs (iframe still laying out), and
// getImageData throws on a 0-width canvas. Wait for a real size, and rebuild on every resize.
// Setting canvas.width changes its layout, so rebuild one frame later (not inside the
// observer callback) and only when the size really changed, or the browser reports
// "ResizeObserver loop completed with undelivered notifications".
let lastW = 0, lastH = 0;
new ResizeObserver(() => {
  const w = canvas.offsetWidth, h = canvas.offsetHeight;
  if (w === lastW && h === lastH) return;
  lastW = w; lastH = h;
  requestAnimationFrame(() => { resize(); buildParticles(currentText); });
}).observe(canvas);

let particles = [];
let state = 'FORM'; // FORM | EXPLODE
let currentText = 'HELLO';

function buildParticles(text) {
  currentText = text;
  if (!W || !H) return;
  const off = document.createElement('canvas');
  const FONT_SIZE = Math.min(120, W * 0.25);
  off.width = W; off.height = H;
  const oc = off.getContext('2d');
  oc.fillStyle = '#fff';
  oc.font = `bold ${FONT_SIZE}px Arial, sans-serif`;
  oc.textAlign = 'center';
  oc.textBaseline = 'middle';
  oc.fillText(text.toUpperCase(), W/2, H/2);

  const imageData = oc.getImageData(0, 0, W, H);
  const data = imageData.data;
  const stride = 4;
  particles = [];

  for (let y = 0; y < H; y += stride) {
    for (let x = 0; x < W; x += stride) {
      const idx = (y * W + x) * 4;
      if (data[idx + 3] > 128) {
        const hue = (x / W) * 360;
        particles.push({
          tx: x, ty: y,
          x: Math.random() * W,
          y: Math.random() * H,
          vx: 0, vy: 0,
          hue,
          alpha: 1,
        });
      }
    }
  }
}

function explode() {
  state = 'EXPLODE';
  document.getElementById('toggleBtn').textContent = 'Reform';
  document.getElementById('toggleBtn').classList.add('exploding');
  particles.forEach(p => {
    p.vx = (Math.random() - 0.5) * 16;
    p.vy = -5 - Math.random() * 10;
    p.alpha = 1;
  });
}

function reform() {
  state = 'FORM';
  document.getElementById('toggleBtn').textContent = 'Explode';
  document.getElementById('toggleBtn').classList.remove('exploding');
  particles.forEach(p => {
    p.x = Math.random() * W;
    p.y = Math.random() * H;
    p.vx = 0; p.vy = 0;
    p.alpha = 1;
  });
}

function update() {
  if (state === 'FORM') {
    particles.forEach(p => {
      p.vx += (p.tx - p.x) * 0.08;
      p.vy += (p.ty - p.y) * 0.08;
      p.vx *= 0.85;
      p.vy *= 0.85;
      p.x += p.vx;
      p.y += p.vy;
      p.alpha = Math.min(1, p.alpha + 0.05);
    });
  } else {
    particles.forEach(p => {
      p.vy += 0.15;
      p.x += p.vx;
      p.y += p.vy;
      p.alpha -= 0.008;
    });
    particles = particles.filter(p => p.alpha > 0 && p.y < H + 50);
  }
}

function draw() {
  ctx.fillStyle = 'rgba(13,13,26,0.25)';
  ctx.fillRect(0, 0, W, H);

  particles.forEach(p => {
    ctx.globalAlpha = Math.max(0, p.alpha);
    ctx.fillStyle = `hsl(${p.hue}, 80%, 65%)`;
    ctx.fillRect(p.x, p.y, 2, 2);
  });
  ctx.globalAlpha = 1;
}

function loop() {
  update();
  draw();
  requestAnimationFrame(loop);
}

buildParticles(currentText);
loop();

canvas.addEventListener('click', () => {
  if (state === 'FORM') explode(); else reform();
});

document.getElementById('toggleBtn').addEventListener('click', () => {
  if (state === 'FORM') explode(); else reform();
});

document.getElementById('applyBtn').addEventListener('click', () => {
  const val = document.getElementById('textInput').value.trim() || 'HELLO';
  buildParticles(val);
  state = 'FORM';
  document.getElementById('toggleBtn').textContent = 'Explode';
  document.getElementById('toggleBtn').classList.remove('exploding');
});

document.getElementById('textInput').addEventListener('keydown', e => {
  if (e.key === 'Enter') document.getElementById('applyBtn').click();
});