From 54f8d3a1c0cef6cded91c184910969b64e964562 Mon Sep 17 00:00:00 2001
From: Amy Resnik <aresnik@codecademy.com>
Date: Mon, 24 Feb 2025 11:19:57 -0500
Subject: [PATCH] updates

---
 packages/gamut/src/FeatureShimmer/index.tsx | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/gamut/src/FeatureShimmer/index.tsx b/packages/gamut/src/FeatureShimmer/index.tsx
index 3d36a540f9..085f705f1f 100644
--- a/packages/gamut/src/FeatureShimmer/index.tsx
+++ b/packages/gamut/src/FeatureShimmer/index.tsx
@@ -1,10 +1,10 @@
 import { css } from '@codecademy/gamut-styles';
 import styled from '@emotion/styled';
-import { motion } from 'framer-motion';
+import { motion, useReducedMotion } from 'framer-motion';
 
 import { Box, BoxProps } from '../Box';
 
-const BaseContainer = motion(Box);
+const BaseContainer = motion.create(Box);
 const Shimmer = styled(BaseContainer)(
   css({
     width: '100px',
@@ -13,11 +13,15 @@ const Shimmer = styled(BaseContainer)(
     transform: 'rotate(30deg)',
     filter: 'blur(25px)',
     left: '-100%',
-    bg: 'white-400',
+    bg: 'blue',
   })
 );
 
 export const FeatureShimmer: React.FC<BoxProps> = ({ children, ...rest }) => {
+  const shouldReduceMotion = useReducedMotion();
+  if (shouldReduceMotion) {
+    return <Box {...rest}>{children}</Box>;
+  }
   return (
     <Box {...rest}>
       <BaseContainer
@@ -31,11 +35,11 @@ export const FeatureShimmer: React.FC<BoxProps> = ({ children, ...rest }) => {
         py={16}
         animate={{
           backgroundColor: 'transparent',
-          border: 'none',
+          border: 0,
         }}
         transition={{
           ease: 'fadeOut',
-          duration: '300ms',
+          duration: 0.3,
           delay: 3,
         }}
       >