Guide · Agent skill
How to use the Staggered Word Reveal agent skill
Updated · written with AI from the project's own documentation and checked against our catalogue data
The Staggered Word Reveal skill is an agent skill that teaches an AI coding agent to build a restrained, editorial text animation: each word of a short headline fades and rises into place as it scrolls into view, one word after another. It suits front-end developers and designers working on portfolio sites, landing pages and hero sections. After reading this guide you will know how to install the skill, how to ask for the effect in plain language, and what to check in the result.
Staggered Word RevealMengTo/Skills · MIT Download the skill Quick start
- 1Download the ZIP. Get the staggered-word-reveal ZIP from the directory page for agent-skills/web-design/staggered-word-reveal.
- 2Unzip into a skills folder. Extract the folder into ~/.claude/skills/ for personal use or into your project's .claude/skills/ folder.
- 3Or upload in the Claude apps. In the Claude apps, go to Settings, then Capabilities, then Skills, and upload the skill.
- 4Ask for the effect. Describe the headline, intro or hero text you want animated and mention a staggered word reveal.
- 5Check the output. Confirm the text is visible without JavaScript, words start at 20px below with opacity 0, and each reveals once.
- 6Test reduced motion. Turn on reduced motion in your system and confirm the text shows statically and remains readable.
What an agent skill is and what this one does
An agent skill is a folder of instructions that an AI agent loads when a request matches the skill's purpose. This one is called staggered-word-reveal and is described in its SKILL.md file.
When the skill applies, the agent writes HTML, CSS and JavaScript that split a short piece of text into words and animate each word from opacity 0 and 20px below into its final position. The reveal triggers once, when the text enters the viewport, using IntersectionObserver.
- Starting state: opacity 0 and translateY(20px)
- Final state: opacity 1 and translateY(0)
- Duration 0.8s with cubic-bezier(0.16, 1, 0.3, 1) easing
- Stagger of about 0.07s per word, within a 0.06s to 0.08s range
- Plays once only, not on every scroll
Install the Staggered Word Reveal skill
Download the ZIP for agent-skills/web-design/staggered-word-reveal from the directory page. Unzip it so the skill folder (containing SKILL.md) sits in one of the locations below.
For a personal setup, place it in ~/.claude/skills/. For a single project, place it in that project's .claude/skills/ folder. If you use the Claude apps instead, upload the skill under Settings, then Capabilities, then Skills.
- Personal: ~/.claude/skills/staggered-word-reveal
- Project: .claude/skills/staggered-word-reveal inside your project
- Claude apps: Settings → Capabilities → Skills → upload
Trigger the skill with a natural request
You do not need a special command. Describe the effect you want and mention the kind of text. The skill's description covers headlines, hero copy, section intros and short marketing text, so requests phrased this way are most likely to load it.
The demo prompt in the package uses the skill name directly, which is a reliable way to be sure it is used. Good requests name the text, the style and the trigger.
- Add a staggered word reveal animation to my portfolio hero headline.
- Use the staggered-word-reveal skill to animate this section intro word by word as it scrolls into view.
- Make the pull quote in this page reveal word by word with a subtle premium feel, once only.
Review what the agent produces
The skill sets a clear markup pattern. The text sits in an element marked with data-word-reveal, and the JavaScript splits it into word spans while keeping spaces and exposing the full sentence to screen readers through aria-label.
Check the output against the skill's quick checks: text is visible without JavaScript, words start at translateY(20px) with opacity 0, each word reveals once, and reduced-motion users see static text.
- Text stays visible when JavaScript is disabled
- Each word reveals once with a 0.06s to 0.08s delay
- Scrolling back does not replay the animation
- Users with reduced motion preference see readable static text
<h1 class="word-reveal" data-word-reveal>Build interfaces that feel calm, cinematic, and alive.</h1>Adapt the effect to React, Vue, Svelte, Framer Motion or GSAP
For React, Vue or Svelte, run the splitter after the component mounts and clean up observer instances when routes change. The skill also gives matching Framer Motion values and a GSAP fromTo call so the same tokens carry across libraries.
Use the skill for short text only. For timeline-based animation that needs more control, the skill points to GSAP SplitText instead.
- Framer Motion: y 20, opacity 0, duration 0.8, once true
- GSAP: fromTo with y 20 and opacity 0, duration 0.8, stagger 0.07
Know the limits before you use it
The skill is for short text. It advises against long paragraphs because motion slows reading. Do not use it on text containing links or buttons, since splitting those breaks their meaning.
The skill runs no scripts and makes no network requests. It lists no required dependencies. Its taste rules keep the motion subtle: no bounce, no rotation, no large blur, and only transform and opacity are animated.
- Not for long paragraphs or body copy
- Not for text with links or buttons
- Not for complex timeline animation (use GSAP SplitText)
What people use it for
- Animating the main headline of a portfolio homepage as the visitor scrolls to it
- Adding a restrained word-by-word intro to a section heading on a marketing landing page
- Revealing a short pull quote on an editorial article page
- Implementing the same reveal in a React or Svelte component with cleanup on route changes
Frequently asked questions
How do I install the staggered word reveal skill?
Download the ZIP from the directory page and unzip it into ~/.claude/skills/ for personal use or into a project's .claude/skills/ folder. In the Claude apps, you can instead upload it under Settings, then Capabilities, then Skills.
Does the staggered word reveal skill need anything else installed?
The skill lists no required dependencies. It runs no scripts and uses no network. The output is plain HTML, CSS and JavaScript that you run in your own page.
Is the staggered word reveal skill free to use?
The skill is published under the MIT licence, as listed on its page. Check the licence file in the package for the full terms.
Can the skill animate long paragraphs?
It is not designed for that. The skill advises using it on short text like headlines, subheads and quotes, because motion on long paragraphs slows reading.
Why is my headline not animating?
Check that JavaScript runs on the page and that the element has the data-word-reveal attribute. The skill also says to avoid text containing links or buttons, and to initialize after web fonts are ready if wrapping matters.
How does this compare with GSAP SplitText?
The skill targets simple, once-only reveals with IntersectionObserver and no heavy dependencies. The skill itself recommends GSAP SplitText for projects that need complex, timeline-based animation.
New agent skills, repos and AI tools — every week
The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.
Our verdict
Choose this skill if you want a polished, restrained headline reveal on a portfolio, landing page or hero section, and you want the agent to write the HTML, CSS and JavaScript for it. Pick something else if you need long-form text animation, links or buttons inside animated text, or complex timeline control, where the skill itself points you to GSAP SplitText.
Download the skill