feat: add circular text (#416)

Author: P-Sanjana

animata/text/circular-text.stories.tsx

@@ -0,0 +1,21 @@
+import CircularText from "@/animata/text/circular-text";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Text/Circular Text",
+  component: CircularText,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof CircularText>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    text: "CIRCULAR•TEXT•COMPONENT•",
+  },
+};

animata/text/circular-text.tsx

@@ -0,0 +1,48 @@
+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>
+  );
+}

content/docs/text/circular-text.mdx

@@ -0,0 +1,38 @@
+---
+title: Circular Text
+description: Displays text arranged in a rotating circular path with customizable speed.
+author: Sanj__P
+---
+
+<ComponentPreview name="text-circular-text--docs" />
+
+## Installation
+
+<Steps>
+<Step>Install dependencies</Step>
+
+```bash
+npm install framer-motion
+```
+
+<Step>Run the following command</Step>
+
+It will create a new file `circular-text.tsx` inside the `components/animata/text` directory.
+
+```bash
+mkdir -p components/animata/text && touch components/animata/text/circular-text.tsx
+```
+
+<Step>Paste the code</Step>{" "}
+
+Open the newly created file and paste the following code:
+
+```jsx file=<rootDir>/animata/text/circular-text.tsx
+
+```
+
+</Steps>
+
+## Credits
+
+Built by [Sanjana Podduturi](https://github.com/P-Sanjana)