fix prefers-reduced-motion detection

components/Footer/Footer.tsx

@@ -67,16 +67,19 @@ const Icon = styled("svg", {
 const Heart = styled("span", {
   display: "inline-block",
   color: "$error", // somewhat ironically color the heart with the themed "error" red... </3
-  animation: `${keyframes({
-    "0%": { transform: "scale(1)" },
-    "2%": { transform: "scale(1.25)" },
-    "4%": { transform: "scale(1)" },
-    "6%": { transform: "scale(1.2)" },
-    "8%": { transform: "scale(1)" },
-    // pause for ~9 out of 10 seconds
-    "100%": { transform: "scale(1)" },
-  })} 10s ease 7.5s infinite`,
-  willChange: "transform",
+
+  "@media (prefers-reduced-motion: no-preference)": {
+    animation: `${keyframes({
+      "0%": { transform: "scale(1)" },
+      "2%": { transform: "scale(1.25)" },
+      "4%": { transform: "scale(1)" },
+      "6%": { transform: "scale(1.2)" },
+      "8%": { transform: "scale(1)" },
+      // pause for ~9 out of 10 seconds
+      "100%": { transform: "scale(1)" },
+    })} 10s ease 7.5s infinite`,
+    willChange: "transform",
+  },
 });
 
 export type FooterProps = ComponentProps<typeof Wrapper>;

components/Link/Link.tsx

@@ -9,33 +9,34 @@ const FancyLink = styled("a", {
   textDecoration: "none",
 
   variants: {
-    // fancy animated link underline effect
     underline: {
+      // fancy animated link underline effect (on by default)
       true: {
-        // sets psuedo linear-gradient() for the underline's color; see stitches config for the weird calculation behind the
-        // local `$$underline` variable.
+        // sets psuedo linear-gradient() for the underline's color; see stitches config for the weird calculation behind
+        // the local `$$underline` variable.
         setUnderlineVar: { color: "$colors$linkUnderline" },
         backgroundImage: `linear-gradient($$underline, $$underline)`,
         backgroundPosition: "0% 100%",
         backgroundRepeat: "no-repeat",
         backgroundSize: "0% $underline",
-        transition: "background-size 0.25s ease-in-out",
         paddingBottom: "0.2rem",
 
+        "@media (prefers-reduced-motion: no-preference)": {
+          transition: "background-size 0.25s ease-in-out",
+        },
+
         "&:hover": {
           backgroundSize: "100% $underline",
         },
       },
+      false: {},
     },
   },
-
-  defaultVariants: {
-    underline: true,
-  },
 });
 
 export type CustomLinkProps = Omit<ComponentProps<typeof FancyLink>, "href"> &
   NextLinkProps & {
+    underline?: boolean;
     forceNewWindow?: boolean;
   };
 
@@ -45,6 +46,7 @@ const CustomLink = ({
   passHref = true,
   target,
   rel,
+  underline = true,
   forceNewWindow,
   ...rest
 }: CustomLinkProps) => {
@@ -58,13 +60,14 @@ const CustomLink = ({
         href={href.toString()}
         target={target ?? "_blank"}
         rel={[rel, "noopener", isExternal ? "noreferrer" : ""].join(" ").trim()}
+        underline={underline}
         {...rest}
       />
     );
   } else {
     return (
       <NextLink href={href} prefetch={prefetch} passHref={passHref}>
-        <FancyLink target={target} rel={rel} {...rest} />
+        <FancyLink target={target} rel={rel} underline={underline} {...rest} />
       </NextLink>
     );
   }

components/ThemeToggle/ThemeToggle.tsx

@@ -1,8 +1,8 @@
 import { useEffect, memo } from "react";
+import { useMedia } from "react-use";
 import { useSpring, animated, Globals } from "@react-spring/web";
 import { useTheme } from "../../hooks/use-theme";
 import { useHasMounted } from "../../hooks/use-has-mounted";
-import { usePrefersReducedMotion } from "../../hooks/use-prefers-reduced-motion";
 import { styled } from "../../lib/styles/stitches.config";
 
 const Button = styled("button", {
@@ -25,7 +25,7 @@ export type ThemeToggleProps = {
 
 const ThemeToggle = ({ id = "nav", className }: ThemeToggleProps) => {
   const hasMounted = useHasMounted();
-  const prefersReducedMotion = usePrefersReducedMotion();
+  const prefersReducedMotion = useMedia("(prefers-reduced-motion: reduce)", false);
   const { resolvedTheme, setTheme } = useTheme();
 
   // default to light since `resolvedTheme` might be undefined
@@ -34,7 +34,7 @@ const ThemeToggle = ({ id = "nav", className }: ThemeToggleProps) => {
   // accessibility: skip animation if user prefers reduced motion
   useEffect(() => {
     Globals.assign({
-      skipAnimation: prefersReducedMotion,
+      skipAnimation: !!prefersReducedMotion,
     });
   }, [prefersReducedMotion]);