release circular text

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)

package.json

@@ -46,7 +46,7 @@
     "lodash.startcase": "^4.4.0",
     "lucide-react": "^0.390.0",
     "mdast-util-toc": "^7.1.0",
-    "next": "14.2.26",
+    "next": "14.2.35",
     "next-contentlayer": "^0.3.4",
     "next-themes": "^0.3.0",
     "ora": "^8.0.1",
@@ -108,11 +108,11 @@
     "prettier": "^3.3.2",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "react-docgen": "^7.0.3",
-    "storybook": "^8.1.6",
+    "storybook": "^8.6.15",
     "storybook-dark-mode": "^4.0.1",
     "tailwindcss": "^3.4.1",
     "typescript": "^5",
-    "wrangler": "^3.79.0"
+    "wrangler": "^3.114.17"
   },
   "packageManager": "yarn@4.2.2",
   "lint-staged": {