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

Scroll-driven image reveals with animated captions for shadcn/ui. Pure CSS, zero JavaScript, accessible.

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.

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

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

Verifies & compiles reduced-motion-safe, on-budget UI animation for AI-generated web apps. Validated specs → deterministic GSAP/WAAPI-CSS; WCAG 2.2.2 + 2.3.3 checks. MIT core + keyless MCP server. Not Motion.dev/Framer Motion, not the Android/iOS MotionSpec classes, not a video generator.

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

Native CSS scroll-driven animations and the View Transitions API — patterns, performance profiling, and accessible motion for frontend developers.

Tiny zero-dependency seasonal theming for the web. Date-aware banners and particles with a pluggable calendar. LATAM-first, framework-agnostic Web Components.

An example of reduced motion and gifs.

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.