"use client"; import React from "react"; import { cn } from "@/lib/utils"; interface TextRevealProps { children: string; className?: string; } export const TextReveal: React.FC = ({ children, className, }) => { const containerRef = React.useRef(null); const [progress, setProgress] = React.useState(0); React.useEffect(() => { const handleScroll = () => { if (!containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); const windowHeight = window.innerHeight; const elementTop = rect.top; const elementHeight = rect.height; // Calculate progress based on element position const start = windowHeight * 0.8; const end = windowHeight * 0.2; const currentProgress = Math.max( 0, Math.min(1, (start - elementTop) / (start - end)) ); setProgress(currentProgress); }; window.addEventListener("scroll", handleScroll); handleScroll(); // Initial check return () => window.removeEventListener("scroll", handleScroll); }, []); const words = children.split(" "); const revealedWordCount = Math.ceil(progress * words.length); return (

{words.map((word, index) => ( {word} ))}

); }; // Character-by-character reveal interface CharRevealProps { children: string; staggerDelay?: number; className?: string; } export const CharReveal: React.FC = ({ children, staggerDelay = 30, className, }) => { const [isVisible, setIsVisible] = React.useState(false); const ref = React.useRef(null); React.useEffect(() => { const observer = new IntersectionObserver( ([entry]) => { if (entry.isIntersecting) { setIsVisible(true); } }, { threshold: 0.1 } ); if (ref.current) { observer.observe(ref.current); } return () => observer.disconnect(); }, []); const chars = children.split(""); return (

{chars.map((char, index) => ( {char === " " ? "\u00A0" : char} ))}

); };

TextReveal

Preview

Installation

Usage

Scroll Reveal

Props