From 8a11f07b82489d0fd8d8e9726d7c8891c59c20fd Mon Sep 17 00:00:00 2001
From: Li Xin <lixin.henry@bytedance.com>
Date: Tue, 29 Apr 2025 15:47:39 +0800
Subject: [PATCH] chore: add shine-border

---
 web/src/components/magicui/shine-border.tsx | 63 +++++++++++++++++++++
 web/src/styles/globals.css                  | 20 ++++++-
 2 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 web/src/components/magicui/shine-border.tsx

diff --git a/web/src/components/magicui/shine-border.tsx b/web/src/components/magicui/shine-border.tsx
new file mode 100644
index 0000000..5888ea2
--- /dev/null
+++ b/web/src/components/magicui/shine-border.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "~/lib/utils";
+
+interface ShineBorderProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Width of the border in pixels
+   * @default 1
+   */
+  borderWidth?: number;
+  /**
+   * Duration of the animation in seconds
+   * @default 14
+   */
+  duration?: number;
+  /**
+   * Color of the border, can be a single color or an array of colors
+   * @default "#000000"
+   */
+  shineColor?: string | string[];
+}
+
+/**
+ * Shine Border
+ *
+ * An animated background border effect component with configurable properties.
+ */
+export function ShineBorder({
+  borderWidth = 1,
+  duration = 14,
+  shineColor = "#000000",
+  className,
+  style,
+  ...props
+}: ShineBorderProps) {
+  return (
+    <div
+      style={
+        {
+          "--border-width": `${borderWidth}px`,
+          "--duration": `${duration}s`,
+          backgroundImage: `radial-gradient(transparent,transparent, ${
+            Array.isArray(shineColor) ? shineColor.join(",") : shineColor
+          },transparent,transparent)`,
+          backgroundSize: "300% 300%",
+          mask: `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,
+          WebkitMask: `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,
+          WebkitMaskComposite: "xor",
+          maskComposite: "exclude",
+          padding: "var(--border-width)",
+          ...style,
+        } as React.CSSProperties
+      }
+      className={cn(
+        "pointer-events-none absolute inset-0 size-full rounded-[inherit] will-change-[background-position] motion-safe:animate-shine",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index 3bd5b31..009fb27 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -93,7 +93,23 @@
       transform: rotate(-5deg) scale(0.9);
     }
   }
-}
+  --animate-shine:
+    shine var(--duration) infinite linear
+;
+  @keyframes shine {
+  0% {
+    background-position:
+    0% 0%;
+    }
+  50% {
+    background-position:
+    100% 100%;
+    }
+  to {
+    background-position:
+    0% 0%;
+    }
+  }}
 
 :root {
   --radius: 0.625rem;
@@ -205,4 +221,4 @@ textarea {
 [role="button"],
 button {
   cursor: pointer;
-}
+}
\ No newline at end of file