Rotating Text

Text 22

About

Rotating Text

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

Code

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

Usage.tsx

import * as React from "react"
import { RotatingText } from "@/components/ui/rotating-text"

function RotateText() {
    return(
    <div className="flex items-center justify-center h-screen w-screen bg-black">
      <div className="flex space-x-8">
        <h1 className="text-6xl font-bold text-white">Visit</h1>
        <RotatingText
          texts={["Rabden", "For", "More", "Cool", "components"]}
          mainClassName="px-2 sm:px-2 md:px-3 bg-cyan-300 text-black text-6xl overflow-hidden py-0.5 sm:py-1 md:py-2 justify-center rounded-lg"
          staggerFrom={"last"}
          initial={{ y: "100%" }}
          animate={{ y: 0 }}
          exit={{ y: "-120%" }}
          staggerDuration={0.04}
          splitLevelClassName="overflow-hidden pb-0.5 sm:pb-1 md:pb-1"
          transition={{ type: "spring", damping: 40, stiffness: 800 }}
          rotationInterval={2000}
        />
      </div>
    </div>
    );
}

export { RotateText }