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.

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

Software Engineer

Full-Stack Developer

UI/UX Enthusiast

Problem Solver

Creative Thinker

Install the component using the CLI.

npx shadcn@latest add https://siddz.com/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.