Accessibility

Reduced motion

With prefers-reduced-motion: reduce, Kinesis:

• holds pointer effects at rest: parallax, tilt, magnetic, repel, follow, look, point, and spin
• holds the transform outputs of reactions at rest: --k-x, --k-y, --k-rotate, --k-scale
• keeps reactions that don't move anything: --k-opacity, --k-color, --k-background, --k-blur, and --k-progress, so a reveal still fades in and a pressed button still changes color
• keeps drag working, without momentum: a release stops in place, or returns home instantly

If the preference changes while the page is open, motion stops or resumes immediately.

To override the policy, for example in a game where motion is the content:

initKinesis({ reducedMotion: "never" })   // or "always", or "user" (default)

Or write your own reduced version in CSS:

@media (prefers-reduced-motion: reduce) {
  .hero__art { --k-parallax: 4px; }
}

Keyboard

• A hover reaction also turns on with keyboard focus (:focus-visible).
• A press reaction responds to Enter and Space.
• A focused draggable element moves with the arrow keys.

Kinesis never adds tabindex, roles, or event handlers to elements it doesn't animate. If dragging is essential, make the element focusable, label it, and offer another way to do the same thing.

Touch

Pointer effects follow a finger while it is down and settle when it lifts. Touch never turns on hover. Draggable elements get the right touch-action, so the page still scrolls around them.

Screen readers

Kinesis doesn't change the document's structure or text. Text splitting keeps the text readable and hides the animated letters from assistive technology.

Good practice

• Don't put information only in motion.
• Keep amplitudes small on controls. A magnetic button that drifts 40px from where it was is hard to click. --k-magnetic between 0.2 and 0.4, with --k-limit, is enough.
• Avoid continuous motion across large areas. Full-page parallax can cause discomfort for people with vestibular disorders, even without reduced motion turned on. --k-intensity keeps it subtle.