Reveal Text
Text that reveals through a clip-path wipe animation triggered on view.
pnpm dlx @glinui/cli@latest add reveal-textBuild faster.
Ship calmer.
Installation$
pnpm dlx @glinui/cli@latest add reveal-textPrefer the package?
Usage$
RevealText is a "use client" component. It reveals text with a CSS clip-path wipe when scrolled into view via IntersectionObserver.
Examples$
Directions$
From Left
From Right
From Top
From Bottom
"use client"import { RevealText } from "@glinui/ui"
export function RevealTextDirectionsDemo() {return ( <div className="flex flex-col items-center gap-4 p-8"> <h3 className="text-2xl font-bold"><RevealText text="From Left" direction="left" /></h3> <h3 className="text-2xl font-bold"><RevealText text="From Right" direction="right" delay={200} /></h3> <h3 className="text-2xl font-bold"><RevealText text="From Top" direction="top" delay={400} /></h3> <h3 className="text-2xl font-bold"><RevealText text="From Bottom" direction="bottom" delay={600} /></h3> </div>)}Engines$
Reveal Text drives its main animation through the pluggable motion engine. Pass engine="css" | "motion" | "gsap", wrap a subtree in MotionEngineProvider, or set data-glin-engine on <html>. The css engine is built in and dependency free; motion and gsap are opt-in through @glinui/motion/register/*. Motion level none renders the final state and subtle is opacity only.
Engine comparison$
CSS
Wipe revealMotion
Wipe revealGSAP
Wipe reveal// Same component, three engines. motion and gsap are opt-in:// import "@glinui/motion/register/motion"// import "@glinui/motion/register/gsap"<RevealText engine="css" text="Wipe reveal" triggerOnView={false} />
<RevealText engine="motion" text="Wipe reveal" triggerOnView={false} />
<RevealText engine="gsap" text="Wipe reveal" triggerOnView={false} />Accessibility$
- The text content is always present in the DOM for screen readers.
- The animation is purely visual via
clip-path.
Reduced Motion$
When prefers-reduced-motion: reduce is active, the text is shown immediately with no animation.
API Reference$
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
delay | number | No | 0 | Delay before animation starts, in ms |
direction | "left" | "right" | "top" | "bottom" | No | "left" | Reveal direction |
duration | number | No | 0.8 | Animation duration in seconds |
engine | EngineName | No | - | Engine override: `css` (default), `motion`, `gsap` or a registered custom engine. |
motion | MotionLevel | No | - | Motion override. `none` renders the static final state, `subtle` is opacity only. |
text | string | Yes | - | Text to reveal |
threshold | number | No | 0.5 | Intersection threshold |
triggerOnView | boolean | No | true | Trigger on intersection |
Source$
import { RevealText } from "@glinui/ui"Generated API Snapshot
Beta
Generated API Snapshot
BetaAuto-extracted from TypeScript source in packages/ui/src/components/reveal-text.tsx. This section is in beta and may lag behind hand-curated docs. Regenerate with pnpm --filter @glinui/docs api:generate.
Generated: 2026-10-08T01:41:21.546Z · Full index: /docs/api-metadata
Primary Props Type
RevealTextProps
RevealTextProps
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
delay | number | No | 0 | Delay before animation starts, in ms |
direction | "left" | "right" | "top" | "bottom" | No | "left" | Reveal direction |
duration | number | No | 0.8 | Animation duration in seconds |
engine | EngineName | No | - | Engine override: `css` (default), `motion`, `gsap` or a registered custom engine. |
motion | MotionLevel | No | - | Motion override. `none` renders the static final state, `subtle` is opacity only. |
text | string | Yes | - | Text to reveal |
threshold | number | No | 0.5 | Intersection threshold |
triggerOnView | boolean | No | true | Trigger on intersection |