add glow-conic

Author: claudemyburgh

public/build/assets/app-UslHHovD.css

@@ -188,7 +188,7 @@
     "src": "node_modules/@fontsource/bebas-neue/files/bebas-neue-latin-ext-400-normal.woff2"
   },
   "resources/css/app.css": {
-    "file": "assets/app-ayw7E--E.css",
+    "file": "assets/app-UslHHovD.css",
     "name": "app",
     "names": [
       "app.css"

public/build/assets/app-ayw7E--E.css

@@ -21,7 +21,7 @@
   "cssVars": {
     "theme": {
       "--conic-color": "var(--color-primary)",
-      "--animate-glow-conic": "glow-conic 3s ease-in-out"
+      "--animate-glow-conic": "glow-conic 3s linear infinite"
     }
   },
   "css": {

public/build/manifest.json

@@ -3190,7 +3190,7 @@
             "cssVars": {
                 "theme": {
                     "--conic-color": "var(--color-primary)",
-                    "--animate-glow-conic": "glow-conic 3s ease-in-out"
+                    "--animate-glow-conic": "glow-conic 3s linear infinite"
                 }
             },
             "css": {

public/r/glow-conic.json

@@ -3190,7 +3190,7 @@
             "cssVars": {
                 "theme": {
                     "--conic-color": "var(--color-primary)",
-                    "--animate-glow-conic": "glow-conic 3s ease-in-out"
+                    "--animate-glow-conic": "glow-conic 3s linear infinite"
                 }
             },
             "css": {

public/r/registry.json

@@ -248,20 +248,11 @@
     --animate-tilt: tilt 1.5s ease-in-out infinite alternate;
     --font-bebas-neue: 'Bebas Neue', sans-serif;
     --font-playfair-display: 'Playfair Display Variable', sans-serif;
-    --animate-glow-conic: glow-conic 5s linear infinite;
-}
 
-@layer utilities {
 
+}
 
-    @keyframes glow-conic {
-        0% {
-            --glow-conic-angle: 0deg;
-        }
-        100% {
-            --glow-conic-angle: 360deg;
-        }
-    }
+@layer utilities {
 
     @keyframes bounce {
         0%, 20%, 50%, 80%, 100% {
@@ -1584,4 +1575,6 @@
             transform: perspective(400px) rotateY(15deg);
         }
     }
+
+ 
 }

registry.json

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import { cn } from '@/lib/utils';
+
+export interface GlowConicProps {
+    className?: string;
+    [key: string]: unknown;
+}
+
+export default function GlowConic({ className, ...props }: GlowConicProps) {
+    useEffect(() => {
+        if (typeof CSS !== 'undefined' && CSS.registerProperty) {
+            CSS.registerProperty({
+                name: '--glow-conic-angle',
+                syntax: '<angle>',
+                initialValue: '0deg',
+                inherits: false,
+            });
+        }
+    }, []);
+
+    return (
+        <div
+            {...props}
+            className={cn(
+                'absolute inset-0 animate-glow-conic rounded-[inherit] p-px',
+                className,
+            )}
+            style={{
+                background:
+                    'repeating-conic-gradient(from var(--glow-conic-angle), transparent 10%, var(--conic-color) 20%, transparent 50%)',
+                mask: 'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) border-box',
+                maskComposite: 'exclude' as const,
+                WebkitMask:
+                    'linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0) border-box',
+                WebkitMaskComposite: 'xor' as const,
+            }}
+        ></div>
+    );
+}

resources/css/app.css

@@ -0,0 +1,54 @@
+'use client';
+import { createContext, useContext, useEffect, useRef, useState } from 'react';
+import type { ReactNode } from 'react';
+
+interface MouseGlowContext {
+    position: { x: number; y: number };
+    radius: number;
+}
+export const GlowContext = createContext<MouseGlowContext>({
+    position: { x: -9999, y: -9999 },
+    radius: 100,
+});
+export const useGlowStack = (): MouseGlowContext => {
+    const context = useContext(GlowContext);
+
+    return context ?? { position: { x: -9999, y: -9999 }, radius: 100 };
+};
+
+interface GlowStackProps {
+    children: ReactNode;
+    radius?: number;
+    className?: string;
+}
+
+export function GlowStack({
+    children,
+    radius = 100,
+    className,
+}: GlowStackProps) {
+    const [pos, setPos] = useState({ x: -9999, y: -9999 });
+    const rafRef = useRef<number>(0);
+
+    useEffect(() => {
+        const onMove = (e: MouseEvent) => {
+            cancelAnimationFrame(rafRef.current);
+            rafRef.current = requestAnimationFrame(() =>
+                setPos({ x: e.clientX, y: e.clientY }),
+            );
+        };
+
+        window.addEventListener('mousemove', onMove, { passive: true });
+
+        return () => {
+            window.removeEventListener('mousemove', onMove);
+            cancelAnimationFrame(rafRef.current);
+        };
+    }, []);
+
+    return (
+        <GlowContext.Provider value={{ position: pos, radius }}>
+            <div className={className}>{children}</div>
+        </GlowContext.Provider>
+    );
+}