TechnicalCollectible prompt

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.

Claude CodeCursorCodex

Curated by Nvoka

Nvoka wordmark logo
Nvoka wordmark logoTechnical

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.

Nvoka logo

Curated by Nvoka

Claude CodeCursorCodex
Add to my library

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 filled

Your 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.
See all