Components
Loading preview...
Animated word rotator for hero headings — cycles through an array of words with 5 built-in animation modes: slide, fade, blur, flip, and drop. Inline-friendly — drop it inside any heading. Auto-sizes to the widest word to prevent layout shift. Configurable interval and animation style.
npx shadcn@latest add https://21st.dev/r/dev.yadhakim/rotating-textimport { Component as RotatingText } from "@/components/ui/rotating-text";
const words = ["faster", "better", "smarter", "together"];
export default function Demo() {
return (
<div className="flex min-h-screen flex-col items-center justify-center gap-20 bg-background px-6 py-20">
{/* Hero showcase */}
<div className="text-center space-y-4">
<p className="text-sm font-medium tracking-widest uppercase text-muted-foreground">
5 animation modes
</p>
<h1 className="text-4xl md:text-6xl font-bold tracking-tight text-foreground">
Build{" "}
<RotatingText
words={words}
mode="slide"
className="text-foreground"
/>
</h1>
</div>
{/* All modes grid */}
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 w-full max-w-3xl">
{(["slide", "fade", "blur", "flip", "drop"] as const).map((mode, i) => (
<div
key={mode}
className="flex flex-col items-center gap-3 rounded-2xl border border-border bg-card p-8"
>
<span className="text-[11px] font-semibold tracking-widest uppercase text-muted-foreground">
{mode}
</span>
<p className="text-xl font-bold tracking-tight text-foreground">
Ship{" "}
<RotatingText
words={["today", "now", "fast", "more"]}
mode={mode}
interval={2000 + i * 300}
className="text-foreground"
/>
</p>
</div>
))}
</div>
</div>
);
}