Components
Loading preview...
Animated text component that reveals each letter with a spring-in effect, hover-triggered image masking, and a timed overlay sweep for cinematic emphasis. Perfect for hero sections, splash screens, or landing pages where you want bold, interactive branding with visual flair.
npx shadcn@latest add https://21st.dev/r/isaiahbjork/reveal-text"use client";
import { RevealText } from "@/components/ui/reveal-text";
export default function Page() {
return (
<div className="min-h-screen flex flex-col items-center justify-center">
<RevealText
text="STUNNING"
textColor="text-white"
overlayColor="text-red-500"
fontSize="text-[125px]"
letterDelay={0.08}
overlayDelay={0.05}
overlayDuration={0.4}
springDuration={600}
/>
<p className="mt-8">Hover over the text </p>
</div>
);
}