Dictionary
of motion.

Take one home

Every entry on this page is a tiny self-contained recipe. The pattern: split the word into per-character spans, set an index variable on each, then run a keyframe animation with a staggered delay. Here's the smallest possible version, ready to paste into a project.

1 — Markup & tiny JS

<span class="word">bloom</span>

<script>
document.querySelectorAll('.word').forEach(word => {
  const text = word.textContent;
  word.textContent = '';
  [...text].forEach((ch, i) => {
    const span = document.createElement('span');
    span.className = 'char';
    span.textContent = ch;
    span.style.setProperty('--i', i);
    word.appendChild(span);
  });
});
</script>

2 — The CSS, one animation per word

.word         { display: inline-flex; font: 700 3rem/1 serif; }
.word .char   { display: inline-block; }

.word:hover .char {
  animation: bloom 1.2s cubic-bezier(.16, .87, .34, 1)
             calc(var(--i) * 60ms) both;
  transform-origin: center;
}

@keyframes bloom {
  0%   { transform: scale(0);    opacity: 0; filter: blur(8px); }
  60%  { transform: scale(1.15); opacity: 1; filter: blur(0); }
  100% { transform: scale(1); }
}

3 — Auto-play on scroll (optional)

const io = new IntersectionObserver(entries => {
  for (const e of entries) {
    if (!e.isIntersecting) continue;
    e.target.classList.add('playing');
    setTimeout(() => e.target.classList.remove('playing'), 2000);
    io.unobserve(e.target);
  }
}, { threshold: 0.45 });
document.querySelectorAll('.word').forEach(w => io.observe(w));

All 98 animations on this page follow the same three pieces. Open DevTools and inspect any entry to grab its specific keyframes — the stylesheet is at /assets/css/lab/dictionary-of-motion.css and it's plain CSS, no preprocessor.