An animated text component that animates through a list of words with per-character motion.

Hola

Examples

Hero Section

We help you ship faster

Pause on Hover

Search "dark mode"

Custom Variants

Use the variants prop to swap in your own enter/exit animation. Any motion/react Variants object works.

Hello

Play Once

Set loop={false} to stop after the last word — useful for loading states or onboarding sequences.

Analyzing...

Installation

$ npx shadcn@latest add https://akshitr.com/r/text-effect.json

Usage

import TextEffect from "@/components/text-effect";
 
export default function TextEffectDemo() {
  return (
    <TextEffect
      words={["Hello", "Hola", "Bonjour", "नमस्ते", "こんにちは"]}
      className="text-4xl"
    />
  );
}

Component API

TextCycle

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.

Use Cases

Dynamic Value Propositions in Hero Headers: Cycle through customer archetypes or skills (e.g. "We build for developers, designers, founders").
Multilingual Greeting Banners: Welcome global users by cycling greetings across multiple languages with staggered per-glyph entrance.
Status & Mode Indicators: Cycle through active workspace modes or AI generation capabilities.
Interactive Badges & Testimonial Quotes: Elevate repetitive marketing phrases with lively spring-physics letter transitions.

Text Effect