Signature / Moleculestable

Reveal Text

Text that reveals through a clip-path wipe animation triggered on view.

@glinui/uiComponent: reveal-text

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

pnpm dlx @glinui/cli@latest add reveal-text

Usage$

RevealText is a "use client" component. It reveals text with a CSS clip-path wipe when scrolled into view via IntersectionObserver.

Basic$

Welcome to Glin UI

TSX

1"use client"
2import { RevealText } from "@glinui/ui"
3
4export function RevealTextDemo() {
5return (
6  <div className="flex items-center justify-center p-8">
7    <h2 className="text-4xl font-bold">
8      <RevealText text="Welcome to Glin UI" />
9    </h2>
10  </div>
11)
12}

Examples$

Directions$

From Left

From Right

From Top

From Bottom

TSX

1"use client"
2import { RevealText } from "@glinui/ui"
3
4export function RevealTextDirectionsDemo() {
5return (
6  <div className="flex flex-col items-center gap-4 p-8">
7    <h3 className="text-2xl font-bold"><RevealText text="From Left" direction="left" /></h3>
8    <h3 className="text-2xl font-bold"><RevealText text="From Right" direction="right" delay={200} /></h3>
9    <h3 className="text-2xl font-bold"><RevealText text="From Top" direction="top" delay={400} /></h3>
10    <h3 className="text-2xl font-bold"><RevealText text="From Bottom" direction="bottom" delay={600} /></h3>
11  </div>
12)
13}

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
`text`	`string`	Yes	`-`	Text to reveal
`threshold`	`number`	No	`0.5`	Intersection threshold
`triggerOnView`	`boolean`	No	`true`	Trigger on intersection

Source$

TSX

1import { RevealText } from "@glinui/ui"

packages/ui/src/components/reveal-text.tsx

Generated API Snapshot

Beta

Auto-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-02-19T17:59:28.468Z · 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
`text`	`string`	Yes	`-`	Text to reveal
`threshold`	`number`	No	`0.5`	Intersection threshold
`triggerOnView`	`boolean`	No	`true`	Trigger on intersection