updates

Codecademy · Feb 24, 2025 · 54f8d3a · 54f8d3a
1 parent c4c9522
commit 54f8d3a
Showing 1 changed file with 9 additions and 5 deletions.
diff --git 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,
         }}
       >