DocsComponentsBlog
Star us
Docs

Circular Text

Displays text arranged in a rotating circular path with customizable speed.

Installation

Install dependencies

npm install framer-motion

Run 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.tsx

Paste the code

Open the newly created file and paste the following code:

import { useMemo } from "react";
import { motion } from "framer-motion";
 
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-[200px] w-[200px] 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

Edit this page on GitHub
Bold CopyCounter