Skip to content
Docs
Back to Components

TextReveal

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

Pro 플랜 컴포넌트

곧 출시됩니다! 웨이팅리스트에 등록하고 소식을 받아보세요.

웨이팅리스트 등록

Text reveal effect based on scroll position. Perfect for hero sections, storytelling pages, and immersive reading experiences.

설치

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

고급/Pro 컴포넌트는 @hua-labs/ui/advanced에서 제공됩니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

라이브 데모

스크롤을 내려 텍스트 공개 효과를 확인하세요.

그라디언트 공개

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

Props

이름타입기본값설명
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"
/>

접근성

  • 모션 감소: prefers-reduced-motion이 설정되면 텍스트가 즉시 전체 표시됩니다.
  • 스크린 리더: 전체 텍스트는 항상 스크린 리더에서 접근 가능합니다.