CtrlK
BlogDocsLog inGet started
Tessl Logo

staggered-word-reveal

Create subtle editorial word-by-word text reveal animations where each word fades and rises into place once it enters the viewport. Use for premium portfolio headlines, hero copy, section intros, and short marketing text that needs a cinematic staggered reveal with IntersectionObserver or in-view detection.

73

Quality

90%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide

SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Staggered Word Reveal

Use When

  • A short headline, intro, or pull quote should reveal word by word.
  • The motion should feel editorial, premium, and restrained.
  • The reveal should trigger only once when the text enters the viewport.
  • The project does not need heavy GSAP SplitText behavior.

Motion Defaults

  • Initial state: opacity: 0, transform: translateY(20px).
  • Final state: opacity: 1, transform: translateY(0).
  • Duration: 0.8s.
  • Ease: cubic-bezier(0.16, 1, 0.3, 1).
  • Stagger: 0.06s to 0.08s per word. Default to 0.07s.
  • Trigger: start around 20% visible, with a slight lower viewport bias.
  • Replay: once only.

HTML

<h1 class="word-reveal" data-word-reveal>
  Build interfaces that feel calm, cinematic, and alive.
</h1>

CSS

Keep no-JS content visible. Hide only after JavaScript is active and before the text has been split.

.word-reveal {
  visibility: visible;
}

html.js .word-reveal[data-word-reveal]:not(.is-ready) {
  opacity: 0;
}

.word-reveal__word {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--word-index) * 0.07s);
  will-change: opacity, transform;
}

.word-reveal.is-visible .word-reveal__word {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (prefers-reduced-motion: reduce) {
  html.js .word-reveal[data-word-reveal]:not(.is-ready),
  .word-reveal__word {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

JavaScript

This splitter preserves spaces, avoids innerHTML, exposes the original sentence to screen readers, and unobserves after the first reveal.

document.documentElement.classList.add("js");

function splitWordReveal(element) {
  if (element.dataset.wordRevealReady === "true") return;

  const text = element.textContent || "";
  const parts = text.split(/(\s+)/);
  let wordIndex = 0;

  element.textContent = "";
  element.setAttribute("aria-label", text.trim());

  parts.forEach((part) => {
    if (!part.trim()) {
      element.appendChild(document.createTextNode(part));
      return;
    }

    const word = document.createElement("span");
    word.className = "word-reveal__word";
    word.setAttribute("aria-hidden", "true");
    word.style.setProperty("--word-index", wordIndex);
    word.textContent = part;

    element.appendChild(word);
    wordIndex += 1;
  });

  element.dataset.wordRevealReady = "true";
  element.classList.add("is-ready");
}

function initWordReveals(selector = "[data-word-reveal]") {
  const elements = Array.from(document.querySelectorAll(selector));
  const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  if (reduceMotion || !("IntersectionObserver" in window)) {
    elements.forEach((element) => {
      element.classList.add("is-ready", "is-visible");
    });
    return;
  }

  const observer = new IntersectionObserver(
    (entries, io) => {
      entries.forEach((entry) => {
        if (!entry.isIntersecting) return;

        entry.target.classList.add("is-visible");
        io.unobserve(entry.target);
      });
    },
    {
      threshold: 0.2,
      rootMargin: "0px 0px -10% 0px",
    }
  );

  elements.forEach((element) => {
    splitWordReveal(element);
    observer.observe(element);
  });
}

document.addEventListener("DOMContentLoaded", () => {
  initWordReveals();
});

Framework Notes

  • React/Vue/Svelte: run the splitter after mount, then clean up observer instances on route changes.
  • Framer Motion: keep the same tokens: y: 20, opacity: 0, duration 0.8, ease [0.16, 1, 0.3, 1], stagger 0.06 to 0.08, once: true.
  • GSAP: use fromTo(words, { y: 20, opacity: 0 }, { y: 0, opacity: 1, duration: 0.8, ease: "expo.out", stagger: 0.07 }).

Taste Rules

  • Use on short text: headlines, subheads, labels, and quotes. Avoid long paragraphs.
  • Stagger words, not letters, for a calmer premium feel.
  • Keep the offset subtle. Do not add bounce, rotation, or large blur.
  • Animate transform and opacity only.
  • Do not split text containing links, buttons, or meaningful inline markup.
  • If wrapping is important, initialize after web fonts are ready.

Quick Checks

  • Text is visible when JavaScript is disabled.
  • Words begin at translateY(20px) and opacity: 0.
  • Each word reveals once with a 0.06s to 0.08s delay.
  • Repeated scrolling does not replay the animation.
  • Reduced-motion users see static readable text.
Repository
MengTo/Skills
Path

agent-skills/web-design/staggered-word-reveal/SKILL.md

Commit

4c716b5

Last updated
First committed

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.

Claim skill