Typography
CreativeReveal Text
The editorial reveal for big headlines: words rise from beneath an invisible line, wrapping normally, nothing shifting.
Install
Included with Creative: needs your API key. Initialize and log in once.
npx @galactrex/ui add reveal-textUsage
import { RevealText } from "@/components/galactrex/reveal-text";
<RevealText as="h1" text="Make something. Keep the file." />Source
Installs to components/galactrex/reveal-text.tsx, with the shared motion primitives beside it.
Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The text. |
as | ElementType | "h2" | Element. |
trigger | "mount" | "inView" | "hover" | "manual" | "inView" | When it plays. |
active | boolean | — | Plays when true, for trigger="manual". |
stagger | number | 0.045 | Seconds between words. |
from | "below" | "above" | "below" | Where words come from. |
className | string | — | Extra classes for the outer element. |
Variants
- Hero. A large heading on arrival.
Accessibility
- Real text read once.
Motion and reduced motion
- Transform inside clipped slots.
- Reduced motion: shown at once.