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.

Contributors

Jenish Sabhadiya