An animated text component that animates through a list of words with per-character motion.
Hola
Use the variants prop to swap in your own enter/exit animation. Any motion/react Variants object works.
Hello
Set loop={false} to stop after the last word — useful for loading states or onboarding sequences.
$ npx shadcn@latest add https://akshitr.com/r/text-effect.json
import TextEffect from "@/components/text-effect";
export default function TextEffectDemo() {
return (
<TextEffect
words={["Hello", "Hola", "Bonjour", "नमस्ते", "こんにちは"]}
className="text-4xl"
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
| words | string[] | — | List of words to cycle through. |
| as? | MotionTag | "p" | HTML tag to render as (p, span, div, h1, etc.) |
| interval? | number | 2 | Seconds between each word change. |
| transition? | Transition | { type: "spring", bounce: 0.5, stiffness: 60 } | motion/react transition applied to each character. |
| variants? | Variants | blur + slide up/down | Custom enter/exit variants for character animation. |
| pauseOnHover? | boolean | false | Pauses cycling while the cursor is over the element. |
| loop? | boolean | true | Whether to restart after the last word. |
| autoPlay? | boolean | true | Whether to start cycling immediately on mount. |
| onIndexChange? | (index: number) => void | — | Callback fired whenever the active word index changes. |
| className? | string | — | Class applied to the root element. |