Stagger Chars

An animated text component that creates a smooth, staggered character animation effect when hovered.

Installation

npx shadcn@latest add https://scrollxui.dev/registry/stagger-chars.json 

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

API Reference

StaggerChars

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

Props