Components
Loading preview...
A minimal animated component that smoothly morphs between different text strings with character-by-character transitions, glitch effects on hover, and a pulsing terminal cursor.
@jatin-yadav05
npx shadcn@latest add https://21st.dev/r/jatin-yadav05/morphing-text-revealimport { MorphingTextReveal } from "@/components/ui/morphing-text-reveal"
export default function Home() {
return (
<div className="min-h-screen bg-background flex items-center justify-center p-8">
<div className="max-w-4xl mx-auto text-center space-y-12">
{/* Main showcase */}
<div className="space-y-8">
<div className="space-y-2">
<p className="text-sm font-mono text-muted-foreground tracking-wider uppercase">{"MORPHING TEXT REVEAL"}</p>
<div className="text-3xl md:text-4xl font-light">
<MorphingTextReveal
texts={["Creation Without Limitation", "Innovation Beyond Boundaries", "Design Through Intention", "Building With Purpose"]}
className="text-foreground"
interval={4000}
/>
</div>
</div>
</div>
{/* Secondary examples */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-16">
<div className="space-y-4">
<h3 className="text-sm font-mono text-muted-foreground tracking-wider uppercase">{"STATUS INDICATOR"}</h3>
<div className="text-2xl font-mono">
<MorphingTextReveal
texts={["ONLINE", "ACTIVE", "READY", "LIVE"]}
className="text-primary"
interval={2000}
glitchOnHover={true}
/>
</div>
</div>
<div className="space-y-4">
<h3 className="text-sm font-mono text-muted-foreground tracking-wider uppercase">{"DYNAMIC COUNTER"}</h3>
<div className="text-2xl font-mono">
<MorphingTextReveal
texts={["001", "042", "127", "256", "512", "999"]}
className="text-foreground"
interval={1500}
glitchOnHover={false}
/>
</div>
</div>
</div>
</div>
</div>
)
}