Account

Typography

Creative

Reveal 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.

Terminal
npx @galactrex/ui add reveal-text

Usage

Example
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.

See plans

Props

PropTypeDefaultDescription
textstring—The text.
asElementType"h2"Element.
trigger"mount" | "inView" | "hover" | "manual""inView"When it plays.
activeboolean—Plays when true, for trigger="manual".
staggernumber0.045Seconds between words.
from"below" | "above""below"Where words come from.
classNamestring—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.