Slide Text

sliding text animation with smooth staggered motion and loop control.

IInnnnoovvaattiioonn

Installation

npx shadcn@latest add https://scrollxui.dev/registry/slide-text.json

Usage

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

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

API Reference

Slide Text

sliding text animation with smooth staggered motion and loop control.

Props

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.