TextReveal

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

이름	타입	기본값	설명
`text*`	`string`	-	Text to display
`revealColor`	`string`	`"currentColor"`	Color of revealed text
`hiddenColor`	`string`	`"rgba(128, 128, 128, 0.3)"`	Color of hidden text
`threshold`	`number`	`0.5`	Reveal threshold (0-1)
`byWord`	`boolean`	`false`	Reveal word by word
`byChar`	`boolean`	`false`	Reveal 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"
/>