fix: make aurora-text a motion component and update the mdx

content/docs/components/aurora-text.mdx

@@ -32,6 +32,50 @@ npx shadcn@latest add "https://magicui.design/r/aurora-text"
 
 <ComponentSource name="aurora-text" />
 
+<Step>Update the import paths to match your project setup.</Step>
+
+<Step>Update `tailwind.config.js`</Step>
+
+Add the following animations to your `tailwind.config.js` file:
+
+```js title="tailwind.config.js" {5-32}
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  theme: {
+    extend: {
+      keyframes: {
+        "aurora-border": {
+          "0%, 100%": { borderRadius: "37% 29% 27% 27% / 28% 25% 41% 37%" },
+          "25%": { borderRadius: "47% 29% 39% 49% / 61% 19% 66% 26%" },
+          "50%": { borderRadius: "57% 23% 47% 72% / 63% 17% 66% 33%" },
+          "75%": { borderRadius: "28% 49% 29% 100% / 93% 20% 64% 25%" },
+        },
+        "aurora-1": {
+          "0%, 100%": { top: "0", right: "0" },
+          "50%": { top: "50%", right: "25%" },
+          "75%": { top: "25%", right: "50%" },
+        },
+        "aurora-2": {
+          "0%, 100%": { top: "0", left: "0" },
+          "60%": { top: "75%", left: "25%" },
+          "85%": { top: "50%", left: "50%" },
+        },
+        "aurora-3": {
+          "0%, 100%": { bottom: "0", left: "0" },
+          "40%": { bottom: "50%", left: "25%" },
+          "65%": { bottom: "25%", left: "50%" },
+        },
+        "aurora-4": {
+          "0%, 100%": { bottom: "0", right: "0" },
+          "50%": { bottom: "25%", right: "40%" },
+          "90%": { bottom: "50%", right: "25%" },
+        },
+      },
+    },
+  },
+};
+```
+
 </Steps>
 
 </TabsContent>
@@ -40,7 +84,8 @@ npx shadcn@latest add "https://magicui.design/r/aurora-text"
 
 ## Props
 
-| Prop        | Type        | Default | Description                                   |
-| ----------- | ----------- | ------- | --------------------------------------------- |
-| `className` | `string`    | `-`     | The class name to be applied to the component |
-| `children`  | `ReactNode` | `-`     | Children elements                             |
+| Prop        | Type                | Default | Description                                   |
+| ----------- | ------------------- | ------- | --------------------------------------------- |
+| `className` | `string`            | `-`     | The class name to be applied to the component |
+| `children`  | `ReactNode`         | `-`     | Children elements                             |
+| `as`        | `React.ElementType` | `"div"` | The element type to render as                 |

public/r/index.json

@@ -46,7 +46,87 @@
         "path": "magicui/aurora-text.tsx",
         "type": "registry:ui"
       }
-    ]
+    ],
+    "tailwind": {
+      "config": {
+        "theme": {
+          "extend": {
+            "keyframes": {
+              "aurora-border": {
+                "0%, 100%": {
+                  "borderRadius": "37% 29% 27% 27% / 28% 25% 41% 37%"
+                },
+                "25%": {
+                  "borderRadius": "47% 29% 39% 49% / 61% 19% 66% 26%"
+                },
+                "50%": {
+                  "borderRadius": "57% 23% 47% 72% / 63% 17% 66% 33%"
+                },
+                "75%": {
+                  "borderRadius": "28% 49% 29% 100% / 93% 20% 64% 25%"
+                }
+              },
+              "aurora-1": {
+                "0%, 100%": {
+                  "top": "0",
+                  "right": "0"
+                },
+                "50%": {
+                  "top": "50%",
+                  "right": "25%"
+                },
+                "75%": {
+                  "top": "25%",
+                  "right": "50%"
+                }
+              },
+              "aurora-2": {
+                "0%, 100%": {
+                  "top": "0",
+                  "left": "0"
+                },
+                "60%": {
+                  "top": "75%",
+                  "left": "25%"
+                },
+                "85%": {
+                  "top": "50%",
+                  "left": "50%"
+                }
+              },
+              "aurora-3": {
+                "0%, 100%": {
+                  "bottom": "0",
+                  "left": "0"
+                },
+                "40%": {
+                  "bottom": "50%",
+                  "left": "25%"
+                },
+                "65%": {
+                  "bottom": "25%",
+                  "left": "50%"
+                }
+              },
+              "aurora-4": {
+                "0%, 100%": {
+                  "bottom": "0",
+                  "right": "0"
+                },
+                "50%": {
+                  "bottom": "25%",
+                  "right": "40%"
+                },
+                "90%": {
+                  "bottom": "50%",
+                  "right": "25%"
+                }
+              }
+            }
+          }
+        }
+      }
+    }
   },
   {
     "name": "morphing-text",

public/r/styles/default/aurora-text.json

@@ -7,9 +7,89 @@
   "files": [
     {
       "path": "magicui/aurora-text.tsx",
-      "content": "import React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface AuroraTextProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport function AuroraText({ className, children }: AuroraTextProps) {\n  return (\n    <span className={cn(\"relative inline-flex overflow-hidden\", className)}>\n      {children}\n      <div className=\"pointer-events-none absolute inset-0 mix-blend-lighten dark:mix-blend-darken\">\n        {[...Array(5)].map((_, i) => (\n          <div\n            key={i}\n            className=\"absolute h-[60vw] w-[60vw]\"\n            style={{\n              backgroundColor: `hsl(var(--color-${i + 1}))`,\n              filter: \"blur(1rem)\",\n              animation: `aurora-border 6s ease-in-out infinite, aurora-${i + 1} 12s ease-in-out infinite alternate`,\n              mixBlendMode: \"overlay\",\n              ...getInitialPosition(i),\n            }}\n          />\n        ))}\n      </div>\n      <style jsx>{`\n        @keyframes aurora-border {\n          0%,\n          100% {\n            border-radius: 37% 29% 27% 27% / 28% 25% 41% 37%;\n          }\n          25% {\n            border-radius: 47% 29% 39% 49% / 61% 19% 66% 26%;\n          }\n          50% {\n            border-radius: 57% 23% 47% 72% / 63% 17% 66% 33%;\n          }\n          75% {\n            border-radius: 28% 49% 29% 100% / 93% 20% 64% 25%;\n          }\n        }\n        @keyframes aurora-1 {\n          0%,\n          100% {\n            top: 0;\n            right: 0;\n          }\n          50% {\n            top: 50%;\n            right: 25%;\n          }\n          75% {\n            top: 25%;\n            right: 50%;\n          }\n        }\n        @keyframes aurora-2 {\n          0%,\n          100% {\n            top: 0;\n            left: 0;\n          }\n          60% {\n            top: 75%;\n            left: 25%;\n          }\n          85% {\n            top: 50%;\n            left: 50%;\n          }\n        }\n        @keyframes aurora-3 {\n          0%,\n          100% {\n            bottom: 0;\n            left: 0;\n          }\n          40% {\n            bottom: 50%;\n            left: 25%;\n          }\n          65% {\n            bottom: 25%;\n            left: 50%;\n          }\n        }\n        @keyframes aurora-4 {\n          0%,\n          100% {\n            bottom: 0;\n            right: 0;\n          }\n          50% {\n            bottom: 25%;\n            right: 40%;\n          }\n          90% {\n            bottom: 50%;\n            right: 25%;\n          }\n        }\n      `}</style>\n    </span>\n  );\n}\n\nfunction getInitialPosition(index: number): React.CSSProperties {\n  const positions = [\n    { top: \"-50%\" },\n    { right: 0, top: 0 },\n    { left: 0, bottom: 0 },\n    { right: 0, bottom: \"-50%\" },\n  ];\n  return positions[index] || {};\n}\n",
+      "content": "import { cn } from \"@/lib/utils\";\nimport { motion, MotionProps } from \"motion/react\";\nimport React from \"react\";\n\ninterface AuroraTextProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps> {\n  className?: string;\n  children: React.ReactNode;\n  as?: React.ElementType;\n}\n\nexport function AuroraText({\n  className,\n  children,\n  as: Component = \"div\",\n  ...props\n}: AuroraTextProps) {\n  const MotionComponent = motion.create(Component);\n\n  return (\n    <MotionComponent\n      className={cn(\"relative inline-flex overflow-hidden\", className)}\n      {...props}\n    >\n      {children}\n      <div className=\"pointer-events-none absolute inset-0 mix-blend-lighten dark:mix-blend-darken\">\n        <div className=\"pointer-events-none absolute -top-1/2 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-1_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-1))] mix-blend-overlay blur-[1rem]\"></div>\n        <div className=\"pointer-events-none absolute right-0 top-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-2_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-2))] mix-blend-overlay blur-[1rem]\"></div>\n        <div className=\"pointer-events-none absolute bottom-0 left-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-3_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-3))] mix-blend-overlay blur-[1rem]\"></div>\n        <div className=\"pointer-events-none absolute -bottom-1/2 right-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-4_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-4))] mix-blend-overlay blur-[1rem]\"></div>\n      </div>\n    </MotionComponent>\n  );\n}\n",
       "type": "registry:ui",
       "target": ""
     }
-  ]
+  ],
+  "tailwind": {
+    "config": {
+      "theme": {
+        "extend": {
+          "keyframes": {
+            "aurora-border": {
+              "0%, 100%": {
+                "borderRadius": "37% 29% 27% 27% / 28% 25% 41% 37%"
+              },
+              "25%": {
+                "borderRadius": "47% 29% 39% 49% / 61% 19% 66% 26%"
+              },
+              "50%": {
+                "borderRadius": "57% 23% 47% 72% / 63% 17% 66% 33%"
+              },
+              "75%": {
+                "borderRadius": "28% 49% 29% 100% / 93% 20% 64% 25%"
+              }
+            },
+            "aurora-1": {
+              "0%, 100%": {
+                "top": "0",
+                "right": "0"
+              },
+              "50%": {
+                "top": "50%",
+                "right": "25%"
+              },
+              "75%": {
+                "top": "25%",
+                "right": "50%"
+              }
+            },
+            "aurora-2": {
+              "0%, 100%": {
+                "top": "0",
+                "left": "0"
+              },
+              "60%": {
+                "top": "75%",
+                "left": "25%"
+              },
+              "85%": {
+                "top": "50%",
+                "left": "50%"
+              }
+            },
+            "aurora-3": {
+              "0%, 100%": {
+                "bottom": "0",
+                "left": "0"
+              },
+              "40%": {
+                "bottom": "50%",
+                "left": "25%"
+              },
+              "65%": {
+                "bottom": "25%",
+                "left": "50%"
+              }
+            },
+            "aurora-4": {
+              "0%, 100%": {
+                "bottom": "0",
+                "right": "0"
+              },
+              "50%": {
+                "bottom": "25%",
+                "right": "40%"
+              },
+              "90%": {
+                "bottom": "50%",
+                "right": "25%"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
 }

registry/default/example/aurora-text-demo.tsx

@@ -2,7 +2,7 @@ import { AuroraText } from "@/registry/default/magicui/aurora-text";
 
 export default function AuroraTextDemo() {
   return (
-    <h1 className="text-4xl font-bold tracking-tighter md:text-6xl lg:text-7xl">
+    <h1 className="text-4xl font-bold tracking-tighter md:text-5xl lg:text-7xl">
       Ship <AuroraText>beautiful</AuroraText>
     </h1>
   );

registry/default/magicui/aurora-text.tsx

@@ -1,14 +1,24 @@
 import { cn } from "@/lib/utils";
+import { motion, MotionProps } from "motion/react";
 import React from "react";
 
-interface AuroraTextProps extends React.HTMLAttributes<HTMLSpanElement> {
+interface AuroraTextProps
+  extends Omit<React.HTMLAttributes<HTMLElement>, keyof MotionProps> {
   className?: string;
   children: React.ReactNode;
+  as?: React.ElementType;
 }
 
-export function AuroraText({ className, children, ...props }: AuroraTextProps) {
+export function AuroraText({
+  className,
+  children,
+  as: Component = "div",
+  ...props
+}: AuroraTextProps) {
+  const MotionComponent = motion.create(Component);
+
   return (
-    <span
+    <MotionComponent
       className={cn("relative inline-flex overflow-hidden", className)}
       {...props}
     >
@@ -19,6 +29,6 @@ export function AuroraText({ className, children, ...props }: AuroraTextProps) {
         <div className="pointer-events-none absolute bottom-0 left-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-3_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-3))] mix-blend-overlay blur-[1rem]"></div>
         <div className="pointer-events-none absolute -bottom-1/2 right-0 h-[30vw] w-[30vw] animate-[aurora-border_6s_ease-in-out_infinite,aurora-4_12s_ease-in-out_infinite_alternate] bg-[hsl(var(--color-4))] mix-blend-overlay blur-[1rem]"></div>
       </div>
-    </span>
+    </MotionComponent>
   );
 }

registry/registry-ui.ts

@@ -23,6 +23,44 @@ export const ui: Registry = [
     type: "registry:ui",
     dependencies: ["motion"],
     files: ["magicui/aurora-text.tsx"],
+    tailwind: {
+      config: {
+        theme: {
+          extend: {
+            keyframes: {
+              "aurora-border": {
+                "0%, 100%": {
+                  borderRadius: "37% 29% 27% 27% / 28% 25% 41% 37%",
+                },
+                "25%": { borderRadius: "47% 29% 39% 49% / 61% 19% 66% 26%" },
+                "50%": { borderRadius: "57% 23% 47% 72% / 63% 17% 66% 33%" },
+                "75%": { borderRadius: "28% 49% 29% 100% / 93% 20% 64% 25%" },
+              },
+              "aurora-1": {
+                "0%, 100%": { top: "0", right: "0" },
+                "50%": { top: "50%", right: "25%" },
+                "75%": { top: "25%", right: "50%" },
+              },
+              "aurora-2": {
+                "0%, 100%": { top: "0", left: "0" },
+                "60%": { top: "75%", left: "25%" },
+                "85%": { top: "50%", left: "50%" },
+              },
+              "aurora-3": {
+                "0%, 100%": { bottom: "0", left: "0" },
+                "40%": { bottom: "50%", left: "25%" },
+                "65%": { bottom: "25%", left: "50%" },
+              },
+              "aurora-4": {
+                "0%, 100%": { bottom: "0", right: "0" },
+                "50%": { bottom: "25%", right: "40%" },
+                "90%": { bottom: "50%", right: "25%" },
+              },
+            },
+          },
+        },
+      },
+    },
   },
   {
     name: "morphing-text",

tailwind.config.cjs

@@ -86,11 +86,6 @@ module.exports = {
         shine: "shine var(--duration) infinite linear",
         pulse: "pulse var(--duration) ease-out infinite",
         rainbow: "rainbow var(--speed, 2s) infinite linear",
-        "aurora-border": "aurora-border 6s ease-in-out infinite",
-        "aurora-1": "aurora-1 12s ease-in-out infinite alternate",
-        "aurora-2": "aurora-2 12s ease-in-out infinite alternate",
-        "aurora-3": "aurora-3 12s ease-in-out infinite alternate",
-        "aurora-4": "aurora-4 12s ease-in-out infinite alternate",
       },
       keyframes: {
         "accordion-down": {