useReducedMotion

useReducedMotion allows a user to request that the system minimize the amount of non-essential motion.

Users can experience distraction or nausea from animated content. For example, scrolling a page which causes elements to move (other than the essential movement associated with scrolling) can trigger vestibular disorders.

Change your Accessibility -> Display device settings to "Reduce motion" and notice the animation stops.

References:

also known as prefers-reduced-motion

Accessibility

Partially ready

Examples

To test the example below, change your Accessibility -> Display device settings to "Reduce motion" and notice the animation stops.

import { Box, Flex, Text, useReducedMotion } from 'gestalt';

export default function Example() {
  const shouldReduceMotion = useReducedMotion();

  return (
    <Flex
      alignItems="center"
      gap={4}
      height="100%"
      justifyContent="center"
      width="100%"
    >
      <style
        dangerouslySetInnerHTML={{
          __html: `
        @keyframes vibrate {
          0% {
            transform: translate(0);
          }
          33% {
            transform: translate(-2px, -2px);
          }
          66% {
            transform: translate(2px, -2px);
          }
          100% {
            transform: translate(0);
          }
        }
      `,
        }}
      />
      <div
        style={
          shouldReduceMotion
            ? {}
            : { animation: 'vibrate 0.3s linear infinite both' }
        }
      >
        <Box color="infoBase" display="inlineBlock" padding={4}>
          <Text color="inverse">
            {shouldReduceMotion
              ? 'Reduced motion enabled'
              : 'Reduced motion disabled'}
          </Text>
        </Box>
      </div>
    </Flex>
  );
}

Component quality checklist

Component quality checklist
Quality item	Status	Status description
Figma Library		Component is not currently available in Figma.
Responsive Web	Ready	Component responds to changing viewport sizes in web and mobile web.

Edit page on GitHub

; Opens a new tab