Text Reveal
文字显现
Aliases:文字一段一段出现文字逐行出现标题文字渐显一行一行浮现打字机出现
What is it
Reveals a headline line by line or word by word instead of fading the whole block in. The spoken-rhythm staggering gives copy order and weight — a staple of landing-page hero titles, section intros and scrollytelling, usually triggered once on entering the viewport.
Interactive playground
Try it. Make an informed choice.Loading demo…
✓ When to use
- Hero headlines and taglines that need an entrance
- Scroll-triggered sections that guide reading order
- Editorial layouts where type is the protagonist
✕ When not to use
- Animating body copy word by word — it delays reading
- Interfaces built for scanning — dashboards, tables, docs
- Multiple competing text entrances in one viewport
Variants
Line mask
行遮罩上滑
Lines slide up from behind a mask — cinematic captions
Word stagger
按词浮现
Words fade in one by one — quicker tempo
Typewriter
打字机
Types characters with a blinking caret — terminal feel
Implementation
overflow: hidden@keyframes translateY 100% → 0animation-delay staggerclip-pathLine-mask recipe — wrap each line in overflow:hidden and animate the inner span from translateY(100%) to 0, stepping animation-delay 80–120ms per line. Faster to read than a typewriter. Text must be visible without animation — keep the initial opacity:0 inside the keyframes; with prefers-reduced-motion show everything at once.
Agent prompts
Four prompt layers run from “what it is” all the way to a ready-to-run task. On the Agent task layer you can stack a visual style and extra requirements, then copy it to your coding agent in one click.
Add a line-by-line text reveal to the project's hero headline. Check existing entrance animations and tokens first; keep the rhythm consistent. Requirements: - Line mask slide-up, 80–120ms stagger, under 600ms total - Triggered once when entering the viewport - Text visible without JS (progressive enhancement) - Respect prefers-reduced-motion - No new dependencies Run existing checks when done and list modified files. Additional requirements: - Dark mode support - Respect prefers-reduced-motion - No new dependencies - Run existing checks and list modified files
Hand to your coding agent — stack a style and extra requirements on top
Related concepts
Elements stay hidden until they enter the viewport, then play a fade, rise or slide-in — once. It replaces "dump everything at once" with content revealed at the pace of reading, giving long pages a sense of order. Usually triggered by IntersectionObserver.
MotionSimilarInstead of appearing at once, a group of items enters one after another at a fixed interval — like roll call. A 40–120ms gap lets a list wake up in order: livelier than a single fade, less impatient than true sequential loading.
MotionSimilarAnimates a number from zero (or a previous value) up to its target, so the counting itself tells the story of growth. Common on dashboard KPIs, stats sections and milestones ("100k users") — the digit becomes the animation, far more persuasive than a static figure.
MotionSimilarA visual language that lays out the page like a magazine spread: serif display headings, drop caps, hairline column rules, issue numbering and generous margins, with imagery woven into a page-turning rhythm. Black, white and grey grounds, serif-and-sans pairing — the layout tells the story, not ornament.
StylesUsed withA marketing page organized vertically around one conversion goal: nav and hero explain "what is this and why it's good", mid-sections use features and social proof (logos, testimonials, numbers) to dissolve objections, and a strong call-to-action closes. Sections follow the persuasion order — each screen answers the visitor's next question.
PagesUsed with