← Changelog
AccessibilityApril 22, 2026

Motion respects the operating system across the marketing site

TR
Theo Reichert · Founder, Vallit · 2 min read
AccessibilityApr 22, 2026
Motion respects the operating system across the marketing site
Sourcecommit 9cd41c0 + commit 82ddf8e

Two quiet fixes landed together. A global MotionConfig wrapper now pipes prefers-reduced-motion straight into every framer-motion animation on the marketing site, and the insights-pulse scatter chart seeds its random points so the server and the browser render the same shapes.

Before: every component that wanted to respect the OS setting had to opt in manually, and most didn't. People who had reduced-motion on — vestibular-disorder users, older devices running low-power mode, anyone who toggled it for focus — still saw the same page-scroll fades and entrance animations as everyone else. The global MotionConfig with reducedMotion=user fixes that in one place; per-component overrides aren't allowed.

The insights-pulse fix is narrower but more annoying if you hit it. The scatter chart was generating its dots with Math.random() at render time, which made SSR and the client disagree on every pixel and triggered a hydration warning on load. It now seeds from a fixed integer and uses a deterministic PRNG, so the server output and the first client render match. Same look, no hydration noise.

A known follow-up: framer-motion's whileInView pattern with initial={{ opacity: 0 }} still leaves elements invisible when the motion is skipped under reduced-motion — the keyframe never runs to 1. That's captured as CRITICAL-0 in the marketing rebuild issue register and will land in Phase 1 of that initiative.

Want this for your team?

We scope, build, and deploy Kian into your stack — usually in four to eight weeks.