Text reveal
Reveal a short piece of content with restrained motion.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- Above-the-fold hero headlines that animate on page load.
- Landing page intros where text must appear on first paint even if scripts are slow.
- Use in-view-title for section titles further down the page.
- Use scroll-highlight for a key paragraph that reveals with scroll.
- Use word-rotate when one word in the headline should cycle.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { TextReveal } from 'animui/text-reveal';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { TextReveal } from "animui/text-reveal"; export function Hero() { return <TextReveal as="h1" text={"Ship interfaces\nthat feel precise"} delay={0.1} />;}TextReveal
Reveals a headline once on mount: each word rises out of its own clip while it sharpens from a soft blur. Runs in CSS, so it starts on first paint.
PropTypeDefaultDescription
textRequiredstring–The copy to reveal. Use \n for a deliberate line break.as"h1" | "h2" | "h3" | "p""h2"Rendered element. p uses a softer blur.delaynumber0Seconds before the first word rises.classNamestring–Merged onto the rendered element.idstring–Forwarded to the rendered element, e.g. for aria-labelledby.- The full text sits in a visually hidden span; the animated words are aria-hidden, so screen readers read one clean sentence.
- Line breaks are read as spaces.
- Pick the heading level with as so the page outline stays correct.
- Words rise out of a clip and sharpen from blur on a per-word stagger; total stagger is capped so long text never drags.
- The entrance is pure CSS, so text is never left hidden when scripts load slowly.
- Reduced motion drops the clip and rise and fades the words in quickly.
- The element caps at 24ch with balanced wrapping, so lines stay even on any width.
- Use \n only for breaks that work on every width, since forced breaks apply on mobile too.
- Pure CSS keyframes, no JavaScript animation or observers.
- Total stagger is capped, so long text does not lengthen the entrance; each word still gets its own blur filter.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for above-the-fold headlines that should animate on page load. For titles further down the page use in-view-title; for body copy worth slowing down on use scroll-highlight.
- It plays once per mount. Change the element's key to replay it.
The full library index for assistants is at /llms.txt.