From d8b83ccdb8d64e73e9f73785e4d81c5931aa28ec Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Wed, 25 Feb 2026 08:48:48 +0300
Subject: [PATCH] fix: rewrite gradient border with @property CSS angle
 animation

Pure CSS approach: @property --border-angle + conic-gradient on border-box.
No extra elements, no overflow issues, no JS animation.
Smooth rotation via CSS Houdini custom property animation.
---
 src/components/ui/hover-border-gradient.tsx | 20 ++----------
 src/styles/globals.css                      | 36 +++++++++++++++++++++
 tailwind.config.js                          |  5 ---
 3 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/src/components/ui/hover-border-gradient.tsx b/src/components/ui/hover-border-gradient.tsx
index 65f5ff4..16deb68 100644
--- a/src/components/ui/hover-border-gradient.tsx
+++ b/src/components/ui/hover-border-gradient.tsx
@@ -17,28 +17,14 @@ export function HoverBorderGradient({
   return (
     <Tag
       className={cn(
-        'group relative flex items-center justify-center overflow-hidden rounded-xl p-[1.5px]',
+        'hover-border-gradient group flex items-center justify-center rounded-xl text-sm font-medium text-white',
         containerClassName,
       )}
       {...props}
     >
-      {/* Rotating conic gradient — pure CSS transform, always smooth */}
-      <div
-        className="absolute inset-[-50%] z-0 animate-border-spin"
-        style={{
-          background:
-            'conic-gradient(from 0deg, transparent 0%, transparent 40%, rgb(var(--color-accent-400)) 50%, transparent 60%, transparent 100%)',
-        }}
-      />
-      {/* Inner content */}
-      <div
-        className={cn(
-          'relative z-10 w-auto rounded-[inherit] bg-dark-900 px-4 py-2.5 text-sm font-medium text-white transition-colors duration-300 group-hover:bg-dark-850',
-          className,
-        )}
-      >
+      <span className={cn('relative z-10 flex items-center justify-center', className)}>
         {children}
-      </div>
+      </span>
     </Tag>
   );
 }
diff --git a/src/styles/globals.css b/src/styles/globals.css
index 099e2e8..deeb7f3 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2,6 +2,42 @@
 @tailwind components;
 @tailwind utilities;
 
+/* Animated gradient border — @property enables CSS-only angle animation */
+@property --border-angle {
+  syntax: '<angle>';
+  initial-value: 0deg;
+  inherits: false;
+}
+
+.hover-border-gradient {
+  --_bg: rgb(var(--color-dark-900));
+  --_accent: rgb(var(--color-accent-400));
+  border: 1.5px solid transparent;
+  padding: 10px 16px;
+  background:
+    linear-gradient(var(--_bg), var(--_bg)) padding-box,
+    conic-gradient(
+        from var(--border-angle),
+        var(--_accent) 0%,
+        transparent 25%,
+        transparent 75%,
+        var(--_accent) 100%
+      )
+      border-box;
+  animation: border-rotate 3s linear infinite;
+  transition: box-shadow 0.3s ease;
+}
+
+.hover-border-gradient:hover {
+  box-shadow: 0 0 16px rgba(var(--color-accent-400), 0.3);
+}
+
+@keyframes border-rotate {
+  to {
+    --border-angle: 360deg;
+  }
+}
+
 /* Aceternity UI background CSS variables */
 :root {
   --blue-500: #3b82f6;
diff --git a/tailwind.config.js b/tailwind.config.js
index 82a280c..d107268 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -173,13 +173,8 @@ export default {
         'move-horizontal': 'moveHorizontal 40s ease infinite',
         'move-in-circle-fast': 'moveInCircle 20s ease infinite',
         'spotlight-ace': 'spotlightAce 2s ease 0.75s 1 forwards',
-        'border-spin': 'borderSpin 3s linear infinite',
       },
       keyframes: {
-        borderSpin: {
-          '0%': { transform: 'rotate(0deg)' },
-          '100%': { transform: 'rotate(360deg)' },
-        },
         fadeIn: {
           '0%': { opacity: '0' },
           '100%': { opacity: '1' },