Build a Whispering Leaf Text Reveal (Source Code)

Text spans separated into scattered, falling leaves that organically blow back into readable sentences via CSS transforms.

CC CodesCompiler 📅 April 18, 2026

#javascript#css#text#animation

Typography doesn’t have to be static. Using a tiny bit of JS, we wrap every letter of a sentence in a <span>. We scatter them via random CSS translations, and then snap them into order on hover!

Scattering Letters

JAVASCRIPT CODE

const text = "A gentle breeze arrives.";
container.innerHTML = text.split('').map(letter =&gt; {
  const rot = Math.random() * 90 - 45;
  const x = Math.random() * 100 - 50;
  return `x}px, -20px) rotate(${rot}deg); opacity: 0;">${letter}`;
}).join('');

The Wind CSS Snap

CSS CODE

.reveal-wrapper:hover span {
  transform: translate(0, 0) rotate(0deg) !important;
  opacity: 1 !important;
  transition: all 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}