🪝 React hook for subscribing to user's motion preference.

🎢 Detects user’s preferences for reduced motion using the 'prefers-reduce-motion' CSS3 level 5 media query.

A simple, lighweight package that makes sure your animations do not run when users disable animations on their device.

🙅 Check if a user prefers reduced motion using CSS

Find out how to create inclusive, progressively enhanced, autoplaying HTML5 videos as a replacement for animated GIFs and component backgrounds.

Accessible accordions, multiple, single and nested, built with the 'details' element. The CSS enhances the accordions with a smooth height transition only when it's safe and supported. It uses modern CSS features with progressive enhancement in mind.

Record and save your daily spend and see the average over a number of days.

If your browser supports 'animation-timeline: scroll()' CSS, a horizontal line will appear at the top of the screen as you scroll, indicating how far you have travelled down the page.

Edit, complete or delete to-do tasks. You can also reorder to-dos, if they get out of synch.

CSS and JavaScript page loader which displays a loading animation or message, depending on the user's preferences.

An example of reduced motion and gifs.