Docs
Circular Text
Displays text arranged in a rotating circular path with customizable speed.
Loading...
Installation
CLI
pnpm dlx shadcn@latest add https://animata.design/r/text/circular-text.jsonManual
Install dependencies
npm install motionRun the following command
It will create a new file circular-text.tsx inside the components/animata/text directory.
mkdir -p components/animata/text && touch components/animata/text/circular-text.tsxPaste the code
Open the newly created file and paste the following code:
import { motion } from "motion/react";
import { useMemo } from "react";
import { cn } from "@/lib/utils";
export default function CircularText({
text,
spinDuration = 30,
radius = 5,
className = "",
}: {
text: string;
spinDuration?: number;
radius?: number;
className?: string;
}) {
const characters = useMemo(() => [...text], [text]);
return (
<motion.div
key={spinDuration}
className={cn(
"relative mx-auto flex h-48 aspect-square origin-center cursor-pointer items-center justify-center rounded-full text-center font-bold text-foreground",
className,
)}
initial={{ rotate: 0 }}
animate={{ rotate: 360 }}
transition={{
ease: "linear",
duration: spinDuration,
repeat: Infinity,
}}
>
{characters.map((char, index) => {
const angle = (360 / characters.length) * index;
const transform = `rotate(${angle}deg) translateY(-${radius}px)`;
return (
<span
key={`${char}-${index}`}
style={{ transform, WebkitTransform: transform }}
className="absolute inset-0 inline-block font-medium"
>
{char}
</span>
);
})}
</motion.div>
);
}Credits
Built by Sanjana Podduturi