style upgrades

src/components/glitch-avatar.tsx

@@ -16,6 +16,7 @@ interface GlitchAvatarProps
   contain?: boolean;
   children?: React.ReactNode;
   px?: string | number;
+  frame?: boolean;
 }
 
 const GlitchAvatar = ({
@@ -28,6 +29,7 @@ const GlitchAvatar = ({
   contain = false,
   children,
   px,
+  frame = false,
   ...props
 }: GlitchAvatarProps) => {
   const [showGlitch, setShowGlitch] = useState(false);
@@ -37,13 +39,16 @@ const GlitchAvatar = ({
   useEffect(() => {
     if (!glitchSrc) return;
 
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return;
+
+    let timeoutId: ReturnType<typeof setTimeout>;
     const scheduleNextGlitch = () => {
       const delay = Math.random() * 10000 + 5000;
-      return setTimeout(() => {
+      timeoutId = setTimeout(() => {
         setShowGlitch(true);
         setIsPlaying(true);
 
-        setTimeout(() => {
+        timeoutId = setTimeout(() => {
           setShowGlitch(false);
           setIsPlaying(false);
           scheduleNextGlitch();
@@ -51,7 +56,7 @@ const GlitchAvatar = ({
       }, delay);
     };
 
-    const timeoutId = scheduleNextGlitch();
+    scheduleNextGlitch();
     return () => clearTimeout(timeoutId);
   }, [glitchSrc]);
 
@@ -94,12 +99,18 @@ const GlitchAvatar = ({
             ? `${radius + 8}px`
             : "calc(var(--mantine-radius-md) + 8px)",
         position: "relative",
+        ...(frame && {
+          boxShadow:
+            "0 0 0 1px color-mix(in srgb, var(--mantine-primary-color-filled) 35%, transparent), 0 8px 32px -8px color-mix(in srgb, var(--mantine-primary-color-filled) 30%, transparent)",
+        }),
       }}
     >
       <Box
         style={{
           opacity: showGlitch ? 0 : 1,
-          transition: "opacity 0.05s ease-in-out",
+          transition: showGlitch
+            ? "opacity 0.05s ease-in"
+            : "opacity 0.25s ease-out",
         }}
       >
         <Paper
@@ -141,7 +152,7 @@ const GlitchAvatar = ({
             left: "8px",
             opacity: showGlitch ? 1 : 0,
             visibility: showGlitch ? "visible" : "hidden",
-            transition: "opacity 0.05s ease-in-out",
+            transition: showGlitch ? "opacity 0.05s ease-in" : "none",
             pointerEvents: "none",
           }}
         >