Glin UI
Signature / Molecule

Text Reveal

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

Edit on GitHub

Designsystemsshoulddisappearintotheproductandleaveonlytheexperience.

Installation$

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

Prefer the package?

Usage$

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

Examples$

Long Paragraph$

Designsystemsshouldfeelalive.Everysurface,everytransition,everyinteractionshouldrespondwithpurpose.GlinUImakesthiseffortlesswithcomposableglassprimitivesbuiltformodernReact.

import { TextReveal } from "@glinui/ui"



export function TextRevealLongDemo() {
return (
  <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." />
)
}

Engines$

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

Wordsarriveoneafteranother.

Motion

Wordsarriveoneafteranother.

GSAP

Wordsarriveoneafteranother.

// Same component, three engines. motion and gsap are opt-in:
// import "@glinui/motion/register/motion"
// import "@glinui/motion/register/gsap"
<TextReveal engine="css" mode="reveal" immediate text="Words arrive one after another." />



<TextReveal engine="motion" mode="reveal" immediate text="Words arrive one after another." />



<TextReveal engine="gsap" mode="reveal" immediate text="Words arrive one after another." />

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$

PropTypeRequiredDefaultDescription
durationnumberNo-Duration per word in ms (`reveal` mode).
engineEngineNameNo-Engine override: `css` (default), `motion`, `gsap` or a registered custom engine.
immediatebooleanNofalsePlay on mount instead of waiting for the viewport (`reveal` mode).
mode"scroll" | "reveal"No"scroll"`scroll` (default) scrubs word opacity with scroll position and is css only. `reveal` plays a timed word-by-word reveal once in view, driven by the active motion engine.
motionMotionLevelNo-Motion override. `none` renders the static final state, `subtle` is opacity only.
stepnumberNo60Delay between words in ms (`reveal` mode). Default 60.
textstringYes-Auto-generated from TypeScript source.

Source$

import { 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-10-08T01:41:21.546Z · Full index: /docs/api-metadata

Primary Props Type

TextRevealProps

TextRevealProps

PropTypeRequiredDefaultDescription
durationnumberNo-Duration per word in ms (`reveal` mode).
engineEngineNameNo-Engine override: `css` (default), `motion`, `gsap` or a registered custom engine.
immediatebooleanNofalsePlay on mount instead of waiting for the viewport (`reveal` mode).
mode"scroll" | "reveal"No"scroll"`scroll` (default) scrubs word opacity with scroll position and is css only. `reveal` plays a timed word-by-word reveal once in view, driven by the active motion engine.
motionMotionLevelNo-Motion override. `none` renders the static final state, `subtle` is opacity only.
stepnumberNo60Delay between words in ms (`reveal` mode). Default 60.
textstringYes--