Text reveal ported
Reveal a short piece of content with restrained motion.
Reveal a short piece of content with restrained motion.
Loading demo…
Guidance
When to use
- 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.
When not to use
- 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.
pnpm dlx shadcn-svelte@latest add @arcui/text-revealUsage
<script lang="ts">
import { TextReveal } from '$lib/components/text-reveal';
</script>
<TextReveal as="h1" text="Ship interfaces
that feel precise" delay={0.1} />Variants & Examples
Default
Standard appearance and configuration.
<TextReveal as="h1" text="Ship interfaces
that feel precise" delay={0.1} />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | – | (Required) The copy to reveal. Use \n for a deliberate line break. |
delay | number | '0' | Seconds before the first word rises. |
className | string | – | Merged onto the rendered element. |
id | string | – | Forwarded to the rendered element, e.g. for aria-labelledby. |
Keyboard Interactions
| Key | Action |
|---|---|
Tab | Moves focus to the interactive element. |
Accessibility
- 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.
Motion
- 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.
Notes for AI
- 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.
Source of truth: registry/components/text-reveal/text-reveal.tsx