staggered-word-reveal
CommunityPremium word-by-word hero reveals
Design & Creative#typography#animation#intersectionobserver#scroll reveal#hero copy#web motion design
AuthorMengTo
Version1.0.0
Installs0
System Documentation
What problem does it solve?
This Skill solves the problem of making short headline or marketing text feel premium and alive by revealing each word as it scrolls into view without complex effects.
Core Features & Use Cases
- Word-by-word cinematic reveal: Applies a restrained fade + rise transition per word using an index-based stagger.
- Viewport-triggered once-only animation: Uses IntersectionObserver with a biased threshold and rootMargin so the reveal happens only the first time.
- Accessible and resilient behavior: Preserves readable text when JavaScript is disabled and honors reduced-motion by switching to static visible output.
- Responsive tokens for motion design: Uses motion defaults for opacity/translateY, a cubic-bezier ease, and a 0.06–0.08s stagger suitable for editorial UI.
Quick Start
Ask your AI developer to implement the staggered word reveal by adding the word-reveal HTML, the provided CSS, and the IntersectionObserver-based JavaScript to your page.
Dependency Matrix
Required Modules
None requiredComponents
Standard package💻 Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: staggered-word-reveal Download link: https://github.com/MengTo/Skills/archive/main.zip#staggered-word-reveal Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.