Animated Text Slider

A smooth vertical text carousel that cycles through multiple text items with elegant slide and fade transitions, perfect for role titles or taglines.

Preview

Full-Stack Developer

UI/UX Enthusiast

Open Source Contributor

Product Designer

Install the component using the CLI.

$npx shadcn@latest add https://ankurz.me/r/animated-text-slider.json

Import the component:

import { AnimatedTextSlider } from "@/components/animated-text-slider"

Use it in your code:

<AnimatedTextSlider 
  texts={["Developer", "Designer", "Creator"]} 
/>

Property	Type	Default	Description
`texts*`	`string[]`	`["Text 1", "Text 2", "Text 3"]`	Array of text strings to cycle through in the animation.
`interval`	`number`	`3500`	Time in milliseconds between text transitions.
`className`	`string`	`""`	Additional CSS classes to apply to the container.