[2.0.1] feat(a11y): Add animation toggle and rewire motion system to data attribute

Before: Reduced motion was a one-way street. Users relied on their
OS-level prefers-reduced-motion setting — all-or-nothing, site
can't override, site can't even know they care. Fifteen components
each rolled their own @media block, isolated and untestable.

After: A sparkles toggle in the nav lets users quiet animations on
this site alone, persisted to localStorage. The entire motion system
now flows through a single html[data-motion] attribute, resolved
at page load via blocking script: localStorage first, OS preference
as fallback. One global CSS kill switch forces near-zero durations
on everything (transitions, animations, view transitions) while
each component retains its own reduced-motion overrides for graceful
static states (opacity snaps, transforms reset, cursors hold still).

The toggle practices what it preaches: celebratory bounce when
sparkles come back to life, instant quiet when they go dark.

Architecture mirrors the existing theme system: motion-contract.ts
for shared constants, initAll for lifecycle across view transitions,
astro:before-swap to stamp the new document before paint.

Also while the plumbing was exposed:

- Fix horizontal overflow caused by left/right: -100vw in
  CatalogHero and ArticleLayout; use translateX(-50%) centering
- Add tooltip system for nav icon buttons via data-tooltip attribute
  with CSS arrow and hover delay, replacing native title attributes
- Fix ThemeToggle spin animation clipping tooltip pseudo-elements;
  target inner icons instead of the button, drop overflow: hidden
- Harden mobile nav against view-transition DOM replacement: lazy
  element lookups, re-bind listeners on astro:page-load, guard
  against duplicate event bindings with data attributes
- Shore up E2E tests for mobile: extract helpers for consent flow,
  catalog filter scoping, and stable click-with-scroll patterns;
  skip clipboard tests on non-Chromium; add force-click fallbacks
- Fix webkit E2E failure in theme-toggle navigation test:
  use scroll-into-view + force-click fallback pattern
- Add CHANGELOG entry for 2.0.1

Author: Luzkan

docs/CHANGELOG.md

@@ -6,6 +6,30 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 ---
 
+## [`2.0.1`] - 2026-03-29
+
+**Users can now quiet animations without touching their OS settings.** A sparkles toggle in the nav gives per-site control, persisted across sessions.
+
+### Added
+
+- **Animation toggle** — sparkles button in the nav lets users reduce motion on this site alone. Bounces when sparkles come back to life; goes instantly quiet when they don't.
+- **Tooltip system** for nav icon buttons — CSS-only `data-tooltip` with arrow, hover delay, and keyboard focus support, replacing native `title` attributes
+- **Motion contract** (`motion-contract.ts`) — shared constants and types mirroring the theme system architecture
+- **Motion preference blocking script** — resolves `html[data-motion]` before first paint (localStorage first, OS `prefers-reduced-motion` as fallback), stamps new documents on view transitions
+
+### Changed
+
+- Motion system rewired from fifteen independent `@media (prefers-reduced-motion)` blocks to one `html[data-motion]` attribute driving a global CSS kill switch — near-zero durations on all transitions, animations, and view transitions when reduced
+- Mobile nav hardened against view-transition DOM replacement: lazy element lookups, re-bound listeners on `astro:page-load`, duplicate-event guards via data attributes
+- E2E test helpers extracted for consent flow, catalog filter scoping, and stable click-with-scroll patterns; clipboard tests skip non-Chromium; force-click fallbacks for mobile viewports
+
+### Fixed
+
+- Horizontal overflow from `left: -100vw; right: -100vw` on full-bleed decorative backgrounds in CatalogHero and ArticleLayout — replaced with `translateX(-50%)` centering
+- ThemeToggle spin animation clipping tooltip pseudo-elements — now targets inner icons instead of the button, `overflow: hidden` dropped
+
+---
+
 ## [`2.0.0`] - 2026-03-23
 
 **Complete rewrite — Gatsby → Astro 5.** New architecture, new design, same 56 smells.
@@ -327,5 +351,6 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 [`1.0.20`]: https://github.com/Luzkan/smells/releases/tag/1.0.20
 [`1.0.21`]: https://github.com/Luzkan/smells/releases/tag/1.0.21
 [`1.0.22`]: https://github.com/Luzkan/smells/releases/tag/1.0.22
+[`2.0.1`]: https://github.com/Luzkan/smells/releases/tag/2.0.1
 [`2.0.0`]: https://github.com/Luzkan/smells/releases/tag/2.0.0
 [`1.0.23-alpha.1`]: https://github.com/Luzkan/smells/releases/tag/1.0.23-alpha.1

src/components/about/AboutAnatomy.astro

@@ -1308,41 +1308,39 @@ const smellsJson = JSON.stringify(smells);
 
   /* ─── Reduced motion ─── */
 
-  @media (prefers-reduced-motion: reduce) {
-    .anatomy-card {
-      opacity: 1;
-      transform: none;
-    }
+  :global(html[data-motion='reduced']) .anatomy-card {
+    opacity: 1;
+    transform: none;
+  }
 
-    .anatomy-card-bar {
-      transform: scaleX(1);
-    }
+  :global(html[data-motion='reduced']) .anatomy-card-bar {
+    transform: scaleX(1);
+  }
 
-    .anatomy-annotation {
-      opacity: 1;
-      transform: none;
-    }
+  :global(html[data-motion='reduced']) .anatomy-annotation {
+    opacity: 1;
+    transform: none;
+  }
 
-    .anatomy-annotation::after {
-      transform: scaleX(1);
-    }
+  :global(html[data-motion='reduced']) .anatomy-annotation::after {
+    transform: scaleX(1);
+  }
 
-    .anatomy-annotation::before {
-      transform: translateY(-50%) scale(1);
-    }
+  :global(html[data-motion='reduced']) .anatomy-annotation::before {
+    transform: translateY(-50%) scale(1);
+  }
 
-    :global(.anatomy-tag) {
-      opacity: 1;
-      transform: none;
-    }
+  :global(html[data-motion='reduced']) :global(.anatomy-tag) {
+    opacity: 1;
+    transform: none;
+  }
 
-    .anatomy-depth {
-      opacity: 1;
-      transform: none;
-    }
+  :global(html[data-motion='reduced']) .anatomy-depth {
+    opacity: 1;
+    transform: none;
+  }
 
-    .anatomy-cta {
-      opacity: 1;
-    }
+  :global(html[data-motion='reduced']) .anatomy-cta {
+    opacity: 1;
   }
 </style>

src/components/about/AboutHero.astro

@@ -363,12 +363,10 @@ const dailySmell = sortedSmells[epochDay % sortedSmells.length];
     }
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .about-hero__constellation :global(circle),
-    .about-hero__constellation :global(line) {
-      animation: none;
-      opacity: 1;
-      stroke-dashoffset: 0;
-    }
+  :global(html[data-motion='reduced']) .about-hero__constellation :global(circle),
+  :global(html[data-motion='reduced']) .about-hero__constellation :global(line) {
+    animation: none;
+    opacity: 1;
+    stroke-dashoffset: 0;
   }
 </style>

src/components/about/AboutOrigin.astro

@@ -179,9 +179,7 @@ import { SPRINGER_PAPER_URL, THESIS_URL } from '../../lib/constants';
     line-height: 1.7;
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .origin-struck__text::after {
-      transform: none;
-    }
+  :global(html[data-motion='reduced']) .origin-struck__text::after {
+    transform: none;
   }
 </style>

src/components/about/AboutResearch.astro

@@ -1335,30 +1335,28 @@ const academicCitations =
   }
 
   /* Reduced motion */
-  @media (prefers-reduced-motion: reduce) {
-    .paper-card,
-    .paper-card::before,
-    .paper-visual::before,
-    .research-stats,
-    .curator-bridge,
-    .curator-bridge-line,
-    .curator-bridge-text,
-    .curator-voice,
-    .curator-identity,
-    .curator-photo-wrap,
-    .curator-thesis,
-    .curator-links,
-    .curator-link,
-    .curator-signoff {
-      opacity: 1;
-      transform: none;
-      transition: none;
-    }
+  :global(html[data-motion='reduced']) .paper-card,
+  :global(html[data-motion='reduced']) .paper-card::before,
+  :global(html[data-motion='reduced']) .paper-visual::before,
+  :global(html[data-motion='reduced']) .research-stats,
+  :global(html[data-motion='reduced']) .curator-bridge,
+  :global(html[data-motion='reduced']) .curator-bridge-line,
+  :global(html[data-motion='reduced']) .curator-bridge-text,
+  :global(html[data-motion='reduced']) .curator-voice,
+  :global(html[data-motion='reduced']) .curator-identity,
+  :global(html[data-motion='reduced']) .curator-photo-wrap,
+  :global(html[data-motion='reduced']) .curator-thesis,
+  :global(html[data-motion='reduced']) .curator-links,
+  :global(html[data-motion='reduced']) .curator-link,
+  :global(html[data-motion='reduced']) .curator-signoff {
+    opacity: 1;
+    transform: none;
+    transition: none;
+  }
 
-    .cite-sweep.sweeping,
-    .curator-bridge.revealed .curator-bridge-monogram,
-    .curator-signoff.revealed .curator-signoff-arrow {
-      animation: none;
-    }
+  :global(html[data-motion='reduced']) .cite-sweep.sweeping,
+  :global(html[data-motion='reduced']) .curator-bridge.revealed .curator-bridge-monogram,
+  :global(html[data-motion='reduced']) .curator-signoff.revealed .curator-signoff-arrow {
+    animation: none;
   }
 </style>

src/components/about/AboutSectionDots.astro

@@ -49,7 +49,7 @@ const sections: DotSection[] = [
       .map((id) => document.getElementById(id))
       .filter((el): el is HTMLElement => el !== null);
 
-    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    const prefersReducedMotion = document.documentElement.dataset.motion === 'reduced';
 
     dots.forEach((dot) => {
       dot.addEventListener('click', () => {
@@ -164,10 +164,8 @@ const sections: DotSection[] = [
     }
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .section-dots {
-      opacity: 1;
-      pointer-events: auto;
-    }
+  :global(html[data-motion='reduced']) .section-dots {
+    opacity: 1;
+    pointer-events: auto;
   }
 </style>

src/components/about/AboutTaxonomy.astro

@@ -627,15 +627,13 @@ function chipHref(card: FilterableDimensionCard, chip: ChipItem): string {
     }
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    .dim-card {
-      opacity: 1;
-      transform: none;
-    }
+  :global(html[data-motion='reduced']) .dim-card {
+    opacity: 1;
+    transform: none;
+  }
 
-    .taxonomy-aside {
-      opacity: 1;
-      transform: none;
-    }
+  :global(html[data-motion='reduced']) .taxonomy-aside {
+    opacity: 1;
+    transform: none;
   }
 </style>

src/components/catalog/CatalogHero.astro

@@ -62,9 +62,11 @@ const { totalCount, categoryCount, hierarchyCount } = Astro.props;
   .catalog-hero::before {
     content: '';
     position: absolute;
-    inset: 0;
-    left: -100vw;
-    right: -100vw;
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    width: 100vw;
+    transform: translateX(-50%);
     background: radial-gradient(
       ellipse 60% 80% at 50% 30%,
       rgba(180, 83, 9, 0.04) 0%,

src/components/islands/CodeExample.css

@@ -719,50 +719,48 @@
    Reduced motion
    ============================================ */
 
-@media (prefers-reduced-motion: reduce) {
-  .code-panel--slide-right,
-  .code-panel--slide-left {
-    animation: none;
-    opacity: 1;
-    transform: none;
-  }
+html[data-motion='reduced'] .code-panel--slide-right,
+html[data-motion='reduced'] .code-panel--slide-left {
+  animation: none;
+  opacity: 1;
+  transform: none;
+}
 
-  .code-toggle__indicator {
-    transition: none;
-  }
+html[data-motion='reduced'] .code-toggle__indicator {
+  transition: none;
+}
 
-  .code-example__caption {
-    transition: none;
-  }
+html[data-motion='reduced'] .code-example__caption {
+  transition: none;
+}
 
-  .code-example__caption--fading {
-    opacity: 0;
-    transform: none;
-    filter: none;
-  }
+html[data-motion='reduced'] .code-example__caption--fading {
+  opacity: 0;
+  transform: none;
+  filter: none;
+}
 
-  .code-panel .smell-mark,
-  .code-panel .fix-mark {
-    animation: none !important;
-    opacity: 1;
-  }
+html[data-motion='reduced'] .code-panel .smell-mark,
+html[data-motion='reduced'] .code-panel .fix-mark {
+  animation: none !important;
+  opacity: 1;
+}
 
-  .code-panel .smell-mark {
-    text-decoration-color: var(--red);
-  }
+html[data-motion='reduced'] .code-panel .smell-mark {
+  text-decoration-color: var(--red);
+}
 
-  .code-panel .fix-mark {
-    background: color-mix(in srgb, var(--green) 14%, transparent);
-  }
+html[data-motion='reduced'] .code-panel .fix-mark {
+  background: color-mix(in srgb, var(--green) 14%, transparent);
+}
 
-  .code-example__solution-wrapper {
-    transition: none;
-  }
+html[data-motion='reduced'] .code-example__solution-wrapper {
+  transition: none;
+}
 
-  .code-example__compare-divider {
-    animation: none;
-    opacity: 1;
-  }
+html[data-motion='reduced'] .code-example__compare-divider {
+  animation: none;
+  opacity: 1;
 }
 
 /* ============================================

src/components/islands/CodeExample.tsx

@@ -45,7 +45,7 @@ function useCompareTransition(
       wrapper.classList.add('is-visible');
     });
 
-    const reducedMotion = globalThis.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    const reducedMotion = document.documentElement.dataset.motion === 'reduced';
     if (reducedMotion) {
       isAnimatingRef.current = false;
       return;