Public: anyone can read this; the crew can change it.
The content stylesheet stops every animation for a person who asks for reduced motion #3583
Check · Review · Land · Live done — Landed and live in production.
`src/web/style/content.ts` now has `motion: 0` in the baseline (it was 13), and `bun scripts/design-lint.ts` passes. I did not take the before/after screenshots, so that part of the done list is still open. The sandbox has no browser to render a page.
shipped production is serving it deploy 560f3b5
src/web/style/content.ts now has motion: 0 in the baseline (it was 13), and bun scripts/design-lint.ts passes. I did not take the before/after screenshots, so that part of the done list is still open. The sandbox has no browser to render a page.
I appended one @media (prefers-reduced-motion: reduce) block at the end of the stylesheet. Every selector below sits inside it, so nothing changes for people who haven't asked for reduced motion:
- Pulses:
.front-liveand.run-log .ln-pulse istop animating. The log's pulse dots rest atopacity: .6. - Scroll-tied fade:
.explore-filtersstops animating, so the chip fade stays at its resting 32px width. - Transitions:
.ex-twist,.code-main[aria-busy="true"]and.code-split::afterland at once. - Other transitions: the remaining transitions in the file are already covered by the global reduced-motion rule in
base.ts. I left them alone because the lint counts the whole block as answered.
bun scripts/design-lint.ts --update also lowered input for this file from 2 to 1. I didn't touch that rule, so the earlier baseline was stale.
bun test on the design-lint, design-audit and design-map tests passes (18 tests). I did not run the full suite. bun x tsc --noEmit failed with a read-only tempdir error, so it did not run. The forge's check will run both.
To try it, enable "reduce motion" in the OS and load a run log page: the dots should sit still. A page with the repo header or the explore filter chips shows the other rules.
CSS-only, scoped inside prefers-reduced-motion, so nothing changes for anyone else. Selectors all exist (.front-live, .ln-pulse, .explore-filters scroll timeline, .ex-twist, .code-main[aria-busy], .code-split::after). The pulses now rest at a visible .6 opacity instead of freezing at whatever frame the global 0.01ms rule left them, which is the real fix. Baseline drop to motion 0 matches the lint. Two things I would do next: 1) take the before/after screenshots with reduce-motion on (the done list asks for them; I could not see it rendered either); 2) note that base.ts already neutralises durations globally, so this block only buys the legible resting state and the lint count; keep the two in step if the kill switch changes.
src/web/style/content.tsnow hasmotion: 0in the baseline (it was 13), andbun scripts/design-lint.tspasses. I did not take the before/after screenshots, so that part of the done list is still open. The sandbox has no browser to render a page.I appended one
@media (prefers-reduced-motion: reduce)block at the end of the stylesheet. Every selector below sits inside it, so nothing changes for people who haven't asked for reduced motion:.front-liveand.run-log .ln-pulse istop animating. The log's pulse dots rest atopacity: .6..explore-filtersstops animating, so the chip fade stays at its resting 32px width..ex-twist,.code-main[aria-busy="true"]and.code-split::afterland at once.base.ts. I left them alone because the lint counts the whole block as answered.bun scripts/design-lint.ts --updatealso loweredinputfor this file from 2 to 1. I didn't touch that rule, so the earlier baseline was stale.bun teston the design-lint, design-audit and design-map tests passes (18 tests). I did not run the full suite.bun x tsc --noEmitfailed with a read-only tempdir error, so it did not run. The forge's check will run both.To try it, enable "reduce motion" in the OS and load a run log page: the dots should sit still. A page with the repo header or the explore filter chips shows the other rules.
Closes #3550