Slide Text

Text

About

A text component that plays a looping staggered slide animation on each character, cycling down and back up automatically.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Slide Text to your project and fits it to your theme.

Code

How Slide Text is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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

export default function SlideTextDemo() {
  return (
    <div className="flex items-center justify-center w-full h-screen bg-background text-foreground">
      <SlideText
        text="Innovation"
        staggerDelay={0.03}
        staggerDuration={0.5}
        pauseDuration={2}
        className="text-4xl font-semibold"
      />
    </div>
  );
}