From e1ae75d27f9cbcf123be971fff8af3118a359098 Mon Sep 17 00:00:00 2001
From: Thomas Camlong <thomas@ajnart.fr>
Date: Thu, 2 Oct 2025 10:52:13 +0200
Subject: [PATCH] feat: add BorderBeam animated component

- Create animated border beam component using Framer Motion
- Support customizable size, duration, delay, and colors
- Add reverse animation and initial offset options
- Implement gradient color transitions
- Provide configurable border width and styling
- Enable smooth circular border animations
---
 web/src/components/ui/border-beam.tsx | 107 ++++++++++++++++++++++++++
 1 file changed, 107 insertions(+)
 create mode 100644 web/src/components/ui/border-beam.tsx

diff --git a/web/src/components/ui/border-beam.tsx b/web/src/components/ui/border-beam.tsx
new file mode 100644
index 00000000..4fbc775e
--- /dev/null
+++ b/web/src/components/ui/border-beam.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import { motion, MotionStyle, Transition } from "motion/react"
+
+import { cn } from "@/lib/utils"
+
+interface BorderBeamProps {
+  /**
+   * The size of the border beam.
+   */
+  size?: number
+  /**
+   * The duration of the border beam.
+   */
+  duration?: number
+  /**
+   * The delay of the border beam.
+   */
+  delay?: number
+  /**
+   * The color of the border beam from.
+   */
+  colorFrom?: string
+  /**
+   * The color of the border beam to.
+   */
+  colorTo?: string
+  /**
+   * The motion transition of the border beam.
+   */
+  transition?: Transition
+  /**
+   * The class name of the border beam.
+   */
+  className?: string
+  /**
+   * The style of the border beam.
+   */
+  style?: React.CSSProperties
+  /**
+   * Whether to reverse the animation direction.
+   */
+  reverse?: boolean
+  /**
+   * The initial offset position (0-100).
+   */
+  initialOffset?: number
+  /**
+   * The border width of the beam.
+   */
+  borderWidth?: number
+}
+
+export const BorderBeam = ({
+  className,
+  size = 50,
+  delay = 0,
+  duration = 6,
+  colorFrom = "#ffaa40",
+  colorTo = "#9c40ff",
+  transition,
+  style,
+  reverse = false,
+  initialOffset = 0,
+  borderWidth = 1,
+}: BorderBeamProps) => {
+  return (
+    <div
+      className="pointer-events-none absolute inset-0 rounded-[inherit] border-(length:--border-beam-width) border-transparent [mask-image:linear-gradient(transparent,transparent),linear-gradient(#000,#000)] [mask-composite:intersect] [mask-clip:padding-box,border-box]"
+      style={
+        {
+          "--border-beam-width": `${borderWidth}px`,
+        } as React.CSSProperties
+      }
+    >
+      <motion.div
+        className={cn(
+          "absolute aspect-square",
+          "bg-gradient-to-l from-[var(--color-from)] via-[var(--color-to)] to-transparent",
+          className
+        )}
+        style={
+          {
+            width: size,
+            offsetPath: `rect(0 auto auto 0 round ${size}px)`,
+            "--color-from": colorFrom,
+            "--color-to": colorTo,
+            ...style,
+          } as MotionStyle
+        }
+        initial={{ offsetDistance: `${initialOffset}%` }}
+        animate={{
+          offsetDistance: reverse
+            ? [`${100 - initialOffset}%`, `${-initialOffset}%`]
+            : [`${initialOffset}%`, `${100 + initialOffset}%`],
+        }}
+        transition={{
+          repeat: Infinity,
+          ease: "linear",
+          duration,
+          delay: -delay,
+          ...transition,
+        }}
+      />
+    </div>
+  )
+}