Accessibility
Effects that respect the people using them
An effect should never get in the way of the interface underneath it. Every library here stays accessible by default, with no configuration required.
Respects reduced motion
Every library honours @media (prefers-reduced-motion: reduce). When
someone has asked their system to minimise motion, animation is switched off or
collapsed to an instant state change, with no movement, blur or scale, while
the functional result still happens.
Nothing depends on motion alone
The effects are decorative. State always lives in the DOM and in text, never only in movement, so screen-reader users and reduced-motion users get the same information as everyone else.
Your markup keeps its semantics
The libraries wrap your element rather than replacing it. Your buttons stay
buttons, your headings stay headings, and roles, labels and tab order are
untouched. Decorative layers are marked aria-hidden so assistive
technology skips them.
Keyboard and focus
Every interactive control on this site, playgrounds and Studio included, uses
real <button> elements with correct ARIA state, keeps native
focus outlines, and is fully operable from the keyboard.
Smooth by design
Animation sticks to the compositor-friendly properties transform,
opacity and filter, and uses will-change
sparingly. The WebGL libraries pause their render loop when off-screen, so they
do not tax lower-end devices or drain battery in a background tab.
Found something we missed?
Accessibility work is never finished. If an effect causes a problem for you, please tell us or open an issue on GitHub.