feat: Text Underline added

config/docs.ts

@@ -334,6 +334,12 @@ export const docsConfig: DocsConfig = {
           items: [],
           label: "",
         },
+        {
+          title: "Text Underline",
+          href: `/docs/components/text-underline`,
+          items: [],
+          label: "New",
+        },
       ],
     },
     {

content/docs/components/text-underline.mdx

@@ -0,0 +1,53 @@
+---
+title: Text Underline
+date: 2024-05-23
+description: Text underline animation
+author: HydenLiu
+published: true
+---
+
+<ComponentPreview name="text-underline-demo" />
+
+## Installation
+
+<Tabs defaultValue="cli">
+
+<TabsList>
+  <TabsTrigger value="cli">CLI</TabsTrigger>
+  <TabsTrigger value="manual">Manual</TabsTrigger>
+</TabsList>
+<TabsContent value="cli">
+
+```bash
+npx magicui-cli add text-underline
+```
+
+</TabsContent>
+
+<TabsContent value="manual">
+
+<Steps>
+
+<Step>Copy and paste the following code into your project.</Step>
+
+<ComponentSource name="text-underline" />
+
+<Step>Update the import paths to match your project setup.</Step>
+
+</Steps>
+
+</TabsContent>
+
+</Tabs>
+
+## Props
+
+| Prop            | Type               | Description                                   | Default  |
+| --------------- | ------------------ | --------------------------------------------- | -------- |
+| className       | string             | The class name to be applied to the component |          |
+| lineStrokeWidth | number \| string   | Default width of the line                     | "0.1rem" |
+| duration        | number             | The class name to be applied to the shimmer   | 0.5      |
+| word            | string             | An array of words to rotate through           | ""       |
+| startPlacement  | "left" \| "right"  | The position where this animation begin       | "right"  |
+| endPlacement    | "left" \| "right"  | TThe position where this animation end        | "left"   |
+| color           | string \| string[] | Defines the color of the text line            | "#000"   |

registry/components/example/text-underline-demo.tsx

@@ -0,0 +1,28 @@
+import TextUnderline from "@/components/magicui/text-underline";
+
+export default async function TextUnderlineDemo() {
+  return (
+    <div className="relative z-10 max-w-[32rem]">
+      <TextUnderline
+        className="text-xl text-black dark:text-white"
+        word="20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable."
+      />
+      <div className="h-4" />
+      <TextUnderline
+        className="text-xl text-black dark:text-white"
+        color={"#9E7AFF"}
+        lineStrokeWidth={3}
+        duration={1}
+        word="20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable."
+      />
+      <div className="h-4" />
+      <TextUnderline
+        className="text-xl text-black dark:text-white"
+        startPlacement="left"
+        endPlacement="right"
+        color={["#A07CFE", "#FE8FB5", "#FFBE7B"]}
+        word="20+ free and open-source animated components built with React, Typescript, Tailwind CSS, and Framer Motion. 100% open-source, and customizable."
+      />
+    </div>
+  );
+}

registry/components/magicui/text-underline.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import { motion } from "framer-motion";
+
+import { cn } from "@/lib/utils";
+
+interface Props {
+  word: string;
+  duration?: number;
+  className?: string;
+  color?: string | string[];
+  lineStrokeWidth?: number | string;
+  startPlacement?: "left" | "right";
+  endPlacement?: "left" | "right";
+}
+
+export default function TextUnderline({
+  word,
+  duration = 0.5,
+  className,
+  color = "#000000",
+  lineStrokeWidth = "0.1rem",
+  startPlacement = "right",
+  endPlacement = "left",
+}: Props) {
+  const lineStroke =
+    typeof lineStrokeWidth === "number"
+      ? `${lineStrokeWidth}px`
+      : lineStrokeWidth;
+
+  const textVariants = {
+    initial: {
+      backgroundSize: `0% ${lineStroke}`,
+      backgroundPosition: `${startPlacement} bottom`,
+    },
+    hover: {
+      backgroundSize: `100% ${lineStroke}`,
+      backgroundPosition: `${endPlacement} bottom`,
+    },
+  };
+
+  const backgroundStyle = {
+    backgroundImage: `linear-gradient(to right, ${Array.isArray(color) ? color.join(",") : `${color}, ${color}`})`,
+    transitionDuration: `${duration}s`,
+  };
+
+  return (
+    <motion.div
+      whileHover="hover"
+      variants={textVariants}
+      initial="initial"
+      animate="initial"
+    >
+      <motion.span
+        className={cn(
+          "bg-no-repeat !inline bg-right-bottom transition-[background-size] ease-linear hover:bg-left-bottom",
+          className,
+        )}
+        style={backgroundStyle}
+        variants={textVariants}
+      >
+        {word}
+      </motion.span>
+    </motion.div>
+  );
+}

registry/index.tsx

@@ -178,6 +178,11 @@ const ui: Registry = {
     type: "components:magicui",
     files: ["registry/components/magicui/flip-text.tsx"],
   },
+  "text-underline": {
+    name: "text-underline",
+    type: "components:magicui",
+    files: ["registry/components/magicui/text-underline.tsx"],
+  },
   "icon-cloud": {
     name: "icon-cloud",
     type: "components:magicui",
@@ -712,6 +717,15 @@ const example: Registry = {
       () => import("@/registry/components/example/flip-text-demo"),
     ),
   },
+  "text-underline-demo": {
+    name: "text-underline-demo",
+    type: "components:example",
+    registryDependencies: ["text-underline"],
+    files: ["registry/components/example/text-underline-demo.tsx"],
+    component: React.lazy(
+      () => import("@/registry/components/example/text-underline-demo"),
+    ),
+  },
   "sparkles-text-demo": {
     name: "sparkles-text-demo",
     type: "components:example",