TechnicalCollectible prompt
Reduced-motion audit and fixes across your site
Act as an accessibility engineer who specializes in motion. Audit {{website_url}}, built with {{tech_stack}}, for people who turn on reduce motion, often because movement causes dizziness, nausea or distraction. Keep the current framework and components, and change only what this needs. Read the styles, components and libraries first.
1. Inventory everything that moves: CSS transitions and keyframes, motion and scroll libraries, Lottie, autoplay video and GIFs, carousels, marquees, smooth scrolling, parallax, page transitions and counters.
2. Classify each as essential (progress, a spinner, a state change you'd otherwise miss) or decorative.
3. Under prefers-reduced-motion: reduce:
- No slides, zooms, parallax, spins or scroll-linked motion
- Entrances become a 150ms opacity fade, or content shows instantly
- Smooth scrolling and autoplay off; video shows a poster with a play button
- Carousels and marquees stop and show all items or a scrollable row
- Lottie and animated SVGs show one meaningful frame
- Essential feedback stays, as color or opacity changes
4. Apply it at the system level: duration tokens that drop to near zero, and the motion library set to follow the user's setting, plus targeted fixes. A blanket rule that kills every transition can break components, so test after.
5. For everyone: anything that moves for over 5 seconds needs a pause control, and nothing flashes more than 3 times a second.
Test with the setting on in macOS, iOS, Windows and Android, and with developer tools emulation. Check every page in both modes for missing content, since elements hidden until animated often never appear. Budget: no layout shift in either mode.
Return a table: element, page, motion today, reduced-motion behavior, WCAG criterion, and fixed or not. Then the files changed.
Technicalnvoka.com/library/nvoka-reduced-motion-audit-across-your-siteScan to open
Technical
Reduced-motion audit and fixes across your site
Find every animation, autoplay and parallax effect, and make your site calm for people who need it.
Curated by Nvoka
Claude CodeCursorCodex
Make it yours
Fill in the blanks and change any word. Only your copy changes, never the card.
Fill in the blanks
0 of 2 filledYour prompt
Act as an accessibility engineer who specializes in motion. Audit {{website_url}}, built with {{tech_stack}}, for people who turn on reduce motion, often because movement causes dizziness, nausea or distraction. Keep the current framework and components, and change only what this needs. Read the styles, components and libraries first.
1. Inventory everything that moves: CSS transitions and keyframes, motion and scroll libraries, Lottie, autoplay video and GIFs, carousels, marquees, smooth scrolling, parallax, page transitions and counters.
2. Classify each as essential (progress, a spinner, a state change you'd otherwise miss) or decorative.
3. Under prefers-reduced-motion: reduce:
- No slides, zooms, parallax, spins or scroll-linked motion
- Entrances become a 150ms opacity fade, or content shows instantly
- Smooth scrolling and autoplay off; video shows a poster with a play button
- Carousels and marquees stop and show all items or a scrollable row
- Lottie and animated SVGs show one meaningful frame
- Essential feedback stays, as color or opacity changes
4. Apply it at the system level: duration tokens that drop to near zero, and the motion library set to follow the user's setting, plus targeted fixes. A blanket rule that kills every transition can break components, so test after.
5. For everyone: anything that moves for over 5 seconds needs a pause control, and nothing flashes more than 3 times a second.
Test with the setting on in macOS, iOS, Windows and Android, and with developer tools emulation. Check every page in both modes for missing content, since elements hidden until animated often never appear. Budget: no layout shift in either mode.
Return a table: element, page, motion today, reduced-motion behavior, WCAG criterion, and fixed or not. Then the files changed.