Slide Text

sliding text animation with smooth staggered motion and loop control.

Installation

npx shadcn@latest add @scrollxui/slide-text

import { SlideText } from '@/components/ui/slide-text';

<SlideText
  text='Innovation'
  staggerDelay={0.03}
  staggerDuration={0.5}
  pauseDuration={2}
  className='text-4xl font-semibold'
/>

sliding text animation with smooth staggered motion and loop control.

Property	Type	Default	Description
`text`	string	`required`	Text content animated per character with vertical slide motion.
`staggerDelay`	number	`0.025`	Delay between consecutive character animations.
`staggerDuration`	number	`0.4`	Duration of each character’s slide transition.
`pauseDuration`	number	`1.5`	Pause before switching animation direction or restarting.
`className`	string	`''`	Additional CSS classes applied to the text wrapper.