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
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.