Text Reveal
A viewport-controlled text fade reveal animation that tracks user scroll progress.
Preview
VibeVibeUIUIbringsbringsyouryourstaticstaticuseruserinterfacesinterfacestotolifelifewithwithpremium,premium,smoothsmoothtexttexttransitions.transitions.
Installation
pnpm dlx vibe-ui-kit@latest add text-reveal
Usage
import { TextReveal } from "@/components/ui/text-reveal"<div className="relative h-[200vh]">
<TextReveal children="Vibe UI brings your static user interfaces to life with premium, smooth text transitions." />
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | string | "" | Text content string to reveal on scroll |
className | string? | "" | Additional classes for the container |
This TextReveal component creates a scrolling reveal text animation sequence.