Skip to content
Docs
Back to Components

TextReveal

@hua-labs/ui/advanced
v1.1.0
Pro

bash
npm install @hua-labs/hua
tsx
import { TextReveal } from "@hua-labs/ui/advanced";

Default gradient mask reveal

Pro
Experience the future of web design with stunning visual effects and smooth animations.

Text reveals word by word

Build amazing products with our modern platform

Text reveals character by character

Typing effect simulation

Custom reveal and hidden colors

Blue accent reveal effect
Emerald accent reveal effect
Rose accent reveal effect

text*string-Text to display
revealColorstring"currentColor"Color of revealed text
hiddenColorstring"rgba(128, 128, 128, 0.3)"Color of hidden text
thresholdnumber0.5Reveal threshold (0-1)
byWordbooleanfalseReveal word by word
byCharbooleanfalseReveal character by character

docs:common.basicUsagetsx
import { TextReveal } from '@hua-labs/ui/advanced';

<TextReveal
  text="Welcome to the future of design"
  className="text-4xl font-bold"
/>
docs:components.textReveal.examples.byWordtsx
<TextReveal
  text="Build amazing products with our platform"
  byWord
  revealColor="#3b82f6"
  className="text-3xl font-semibold"
/>
docs:components.textReveal.examples.byChartsx
<TextReveal
  text="Character by character reveal"
  byChar
  revealColor="#10b981"
  className="text-2xl font-mono"
/>

  • •Reduced Motion: When prefers-reduced-motion is set, text is fully revealed immediately
  • •Screen Reader: Full text is always accessible to screen readers
AnimatedGradientPageTransitionPro