Letter Gravity Drop Text Animation — Bounce Physics JS

<div class="scene">
  <h1 class="gravity-heading" id="heading">Letters fall into place</h1>
  <button class="replay" onclick="dropLetters()">Drop again</button>
</div>

* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: system-ui, sans-serif; background: #ecfeff; display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 20px; overflow: hidden; }

.scene { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 30px; max-width: 720px; }

.gravity-heading {
  font-size: clamp(28px, 6.5vw, 52px);
  font-weight: 800;
  color: #0e7490;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.letter {
  display: inline-block;
  position: relative;
  will-change: transform;
}
.letter.space { width: 0.32em; }

.replay {
  padding: 9px 20px; font-size: 13px; font-weight: 600;
  background: #0e7490; color: #fff; border: none; border-radius: 999px;
  cursor: pointer; transition: background 0.15s, transform 0.1s;
}
.replay:hover { background: #155e75; }
.replay:active { transform: scale(0.96); }

const GRAVITY = 2600;
const START_HEIGHT = 260;
const BOUNCE_DAMPING = 0.42;

function buildLetters(el) {
  const text = el.textContent.trim();
  el.textContent = '';
  const frag = document.createDocumentFragment();
  text.split('').forEach((ch) => {
    const span = document.createElement('span');
    span.className = 'letter' + (ch === ' ' ? ' space' : '');
    span.textContent = ch === ' ' ? '\u00a0' : ch;
    frag.appendChild(span);
  });
  el.appendChild(frag);
}

function animateDrop(el, delay) {
  return new Promise((resolve) => {
    setTimeout(() => {
      const startTime = performance.now();
      let restY = 0;
      let velocity = Math.sqrt(2 * GRAVITY * (START_HEIGHT / 1000));
      let y = -START_HEIGHT;
      let bounces = 0;

      el.style.opacity = '1';

      let last = startTime;
      function loop(now) {
        const dt = Math.min((now - last) / 1000, 0.032);
        last = now;
        velocity += GRAVITY * dt;
        y += velocity * dt;
        if (y >= restY) {
          y = restY;
          velocity = -velocity * BOUNCE_DAMPING;
          bounces++;
          if (Math.abs(velocity) < 45 || bounces > 5) {
            el.style.transform = 'translateY(0px)';
            resolve();
            return;
          }
        }
        el.style.transform = 'translateY(' + y + 'px)';
        requestAnimationFrame(loop);
      }
      requestAnimationFrame(loop);
    }, delay);
  });
}

function dropLetters() {
  const letters = document.querySelectorAll('.letter');
  letters.forEach((l) => {
    l.style.opacity = '0';
    l.style.transform = 'translateY(-' + START_HEIGHT + 'px)';
  });
  letters.forEach((l, i) => animateDrop(l, i * 45));
}

buildLetters(document.getElementById('heading'));
dropLetters();