Circular text

Text 81

About

a simple circular text animation

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

Code

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

Usage.tsx

import CircularText from "@/components/ui/circular-text";

const CircularTextDemo = () => {
  return (
    <div className="flex w-full min-h-screen justify-center items-center p-8">
      <CircularText
        text="DEMO*SINGLE*EFFECT*"
        spinDuration={20} 
        onHover="speedUp" 
        className="dark:text-white"
      />
    </div>
  );
};

export { CircularTextDemo };