# Reduced motion

Someone who asked their system for less motion still gets to open every card. What changes is how: the things that move the page are taken out, the things that are only light stay, and nothing takes longer than it has to.

## What changes

| Part | With reduced motion |
| --- | --- |
| The scan's sweep | Skipped. The grid shows at once and the reticle locks on. |
| Flight and flip | Instant. |
| The hum | The glow stays, the hop and the shake go. |
| The legendary show | Off: no flash, shockwaves, foil, shine or sparkles. |
| Landing | A short fade where the card is. |
| Idle twitch and sparks | Off. |
| The found pulse | Off. |
| Burst, rays, the lock, the crack | Stay. They are light, not movement of the page. |
| Shortest hold | One second instead of 1.75. |

## Ask yourself

```tsx
import { prefersReducedMotion, usePrefersReducedMotion, showFor } from "@react-cards-opening/core";

prefersReducedMotion(); // right now, as a boolean. False on a server.

function Reveal() {
  const reduced = usePrefersReducedMotion(); // as state, kept current
  const plan = showFor("legendary", reduced);
}
```

## The keyboard

- The card is a button. Enter or Space turns it, and again sends it home.
- A card being looked at again takes focus. Escape, Enter or Space puts it back, and focus returns to what was pressed.
- Found cells and badges are buttons with the card's name as their label.
- The overlay is a live region, so a screen reader hears the card when it turns.

## Related

- [Show plan](https://bettertyped.github.io/react-cards-opening/docs/core/show-plan/)
- [CardOpening](https://bettertyped.github.io/react-cards-opening/docs/components/card-opening/)
- [Labels and translation](https://bettertyped.github.io/react-cards-opening/docs/guides/labels-and-translation/)
- [Effects](https://bettertyped.github.io/react-cards-opening/docs/effects/)

Source: https://bettertyped.github.io/react-cards-opening/docs/core/reduced-motion/