Short Slide Right

Text 17

About

An animated text component that glides swapping phrases in from the left as one compact unit while words reveal in sequence through an opacity stagger.

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

Code

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

Usage.tsx

import ShortSlideRight from "@/components/ui/short-slide-right";

export default function ShortSlideRightDemo() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center bg-background p-8">
      <h2 className="text-4xl font-bold tracking-tight text-foreground sm:text-5xl">
        <ShortSlideRight
          phrases={[
            "Move with intent.",
            "Design with clarity.",
            "Build with purpose.",
          ]}
          interval={2500}
        />
      </h2>
    </div>
  );
}