Signature / Moleculestable

Text Reveal

Word-by-word opacity reveal driven by scroll position.

@glinui/uiComponent: text-reveal

Installation$

pnpm add @glinui/ui @glinui/tokens

Registry$

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

Usage$

Pass a text string. As the user scrolls, each word fades from dim to full opacity, creating a reading-pace reveal effect.

Basic$

GlinUIbringsliquidglassaestheticstoeverycomponentinyourReactapplication.

TSX

1import { TextReveal } from "@glinui/ui"
2
3export function TextRevealDemo() {
4return (
5  <TextReveal text="Glin UI brings liquid glass aesthetics to every component in your React application." />
6)
7}

Examples$

Long Paragraph$

Designsystemsshouldfeelalive.Everysurface,everytransition,everyinteractionshouldrespondwithpurpose.GlinUImakesthiseffortlesswithcomposableglassprimitivesbuiltformodernReact.

TSX

1import { TextReveal } from "@glinui/ui"
2
3export function TextRevealLongDemo() {
4return (
5  <TextReveal text="Design systems should feel alive. Every surface, every transition, every interaction should respond with purpose. Glin UI makes this effortless with composable glass primitives built for modern React." />
6)
7}

Accessibility$

All text is in the DOM and readable by screen readers at all times.
Opacity is visual only — content is never hidden from assistive technologies.

Reduced Motion$

When prefers-reduced-motion is active, all words are immediately shown at full opacity.

API Reference$

Prop	Type	Required	Default	Description
`text`	`string`	Yes	`-`	Auto-generated from TypeScript source.

Source$

TSX

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

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

Generated API Snapshot

Beta

Auto-extracted from TypeScript source in packages/ui/src/components/text-reveal.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

TextRevealProps

`TextRevealProps`

Prop	Type	Required	Default	Description
`text`	`string`	Yes	`-`	-