Skip to content
Get packs

Staggered Word Reveal

Gives the agent a recipe for editorial word-by-word text fade-in animations on scroll.

Source Download skill
Repository
MengTo/Skills
Stars
7,187
Licence
MIT
Files
3 files

What it does

Once installed, when asked for a headline or intro reveal animation, the agent writes HTML, CSS and JavaScript that split a short piece of text into words and make each word fade and rise into place as it scrolls into view, one word after another. The skill sets the timing, easing and subtle offset, keeps text readable without JavaScript, and respects users who prefer reduced motion. It also includes notes for adapting the effect to React, Vue, Svelte, Framer Motion and GSAP.

Great for

  • Front-end developers building a portfolio or landing page who want a polished hero headline animation
  • Designers who want a restrained, premium text motion pattern implemented in code
  • Teams using React, Vue or Svelte who need a consistent reveal effect with cleanup guidance

Skip it if

  • Long paragraphs or body copy, since the skill itself advises against splitting long text and it adds motion that slows reading
  • Text containing links or buttons, which the skill says should not be split
  • Projects that need complex, timeline-based animation, where the skill points to GSAP SplitText instead

Try asking

  • “Add a staggered word reveal to my hero headline that triggers once when scrolled into view”
  • “Make the section intro on this page fade in word by word, respecting reduced-motion settings”
  • “Convert this Framer Motion heading into a word reveal using the same timing tokens”
Step-by-step guide: how to use Staggered Word RevealInstall, first run, examples, tips and FAQs

Install in 3 steps

  1. 1

    Download the skill

    The ZIP contains the 3 original files, the MIT licence and an attribution note.

    staggered-word-reveal.zip
  2. 2

    Add it to your agent

    Claude Code (all projects)

    mkdir -p ~/.claude/skills && unzip staggered-word-reveal.zip -d ~/.claude/skills/

    Claude Code / Agent SDK (this project only)

    mkdir -p .claude/skills && unzip staggered-word-reveal.zip -d .claude/skills/

    Claude apps (web/desktop): Settings → Capabilities → Skills → Upload skill, and choose the ZIP.

  3. 3

    Ask for the task

    No special command needed — the agent reads the skill's description and loads it when your request matches. Try one of the prompts above.

Get better results

  • Name the element or section you want animated and say it should be short text, so the agent keeps the effect subtle
  • Ask for the React, Vue, Svelte or Framer Motion version if your project does not use plain HTML and JavaScript
  • Test with JavaScript disabled and with reduced motion enabled, using the quick checks in the skill

What's inside

  • demo/index.html
  • demo/PROMPT.md
  • SKILL.md

Redistributed unmodified from MengTo/Skills under the MIT licence. The assessment was drafted with AI from the skill's files on 2026-10-29. Skills can instruct your agent to run code — read SKILL.md and any scripts before installing.