Stagger Chars

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

Installation

npx shadcn@latest add @scrollxui/stagger-chars

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

With Different Hover Text

Up Direction

Down Direction

API Reference

StaggerChars

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

Props

Property	Type	Default	Description
`text`	string	`(required)`	The base text to display
`hoverText`	string	`text`	Text to show on hover (defaults to text if not provided)
`delay`	number	`0.05`	Delay between each character's animation in seconds
`duration`	number	`1`	Duration of the animation in seconds
`className`	string	`—`	Additional classes for the container
`hoverClassName`	string	`—`	Classes for the hover text
`direction`	'up' \| 'down' \| 'alternate'	`'alternate'`	Animation direction
`easing`	number[]	`[0.22, 1, 0.36, 1]`	Custom easing function for the animation
`disabled`	boolean	`false`	Disable the hover effect
`onAnimationStart`	() => void	`—`	Callback when animation starts
`onAnimationComplete`	() => void	`—`	Callback when animation completes