║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Stagger Chars description: An animated text component that creates a smooth, staggered character animation effect when hovered.

<ComponentPreview name="staggerchars-demo" className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]" description="An animated text component that creates a smooth, staggered character animation effect when hovered." />

Installation

<Tabs defaultValue="cli" className="w-full"> <TabsList> <TabsTrigger value="cli">CLI</TabsTrigger> <TabsTrigger value="manual">Manual</TabsTrigger> </TabsList> <TabsContent value="cli"> <PkgOptions name="stagger-chars" /> </TabsContent> <TabsContent value="manual"> <Steps> <Step>Install the following dependencies:</Step> <DepsOptions name="framer-motion" />

  <Step>Copy and paste the following code into your project.</Step>
  <p>
    <code>stagger-chars.tsx</code>
  </p>
  <ComponentSource name="stagger-chars" />

<Step>Add util file</Step>

<p> <code>lib/utils.ts</code> </p>

import { ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

</Steps>

</TabsContent> </Tabs>

Usage

import { StaggerChars } from "@/components/ui/stagger-chars";

<StaggerChars
  text="HELLO"
  className="font-extrabold text-5xl md:text-6xl lg:text-8xl text-green-400"
  hoverText="WORLD"
 hoverClassName="text-orange-400"
    />

Examples

---

<Step>With Different Hover Text</Step>

<ComponentPreview name="staggercharsdifferenttexthover-demo" className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]" description="An animated text component with staggered character effects" />

---

<Step>Up Direction</Step>

<ComponentPreview name="staggercharsup-demo" className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]" description="An animated text component with staggered character effects" />

---

<Step>Down Direction</Step>

<ComponentPreview name="staggercharsdown-demo" className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]" description="An animated text component with staggered character effects" />

---

API Reference

StaggerChars

The StaggerChars component renders an animated text component with staggered character effects.

Props

<PropsTable rows={[ { prop: "text", type: "string", default: "(required)", description: "The base text to display", }, { prop: "hoverText", type: "string", default: "text", description: "Text to show on hover (defaults to text if not provided)", }, { prop: "delay", type: "number", default: "0.05", description: "Delay between each character's animation in seconds", }, { prop: "duration", type: "number", default: "1", description: "Duration of the animation in seconds", }, { prop: "className", type: "string", default: "—", description: "Additional classes for the container", }, { prop: "hoverClassName", type: "string", default: "—", description: "Classes for the hover text", }, { prop: "direction", type: "'up' | 'down' | 'alternate'", default: "'alternate'", description: "Animation direction", }, { prop: "easing", type: "number[]", default: "[0.22, 1, 0.36, 1]", description: "Custom easing function for the animation", }, { prop: "disabled", type: "boolean", default: "false", description: "Disable the hover effect", }, { prop: "onAnimationStart", type: "() => void", default: "—", description: "Callback when animation starts", }, { prop: "onAnimationComplete", type: "() => void", default: "—", description: "Callback when animation completes", }, ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║