Motion — reveal effect (cursor highlight)
Cursor-tracking radial highlight on hoverable surfaces. Pointer-only signature interaction inherited from Fluent. Disabled by reduced-motion + skipped on touch surfaces (Koder mobile uses ripple per Material).
Spec — Motion: Reveal effect
Facet *isual*do Koder Design. Material parity: https://learn.microsoft.com/windows/apps/design/style/reveal-focus.
R1 — Visual contract
A surface with class .kds-reveal emits a soft radial highlight at the cursor position when hovered. Highlight color is color-mix(in srgb, --kdr-accent 28%, transparent) fading to transparent at 60% radius. On focus-visible (keyboard), the highlight parks at the center.
R2 — Tokens
| Token | Default | Override scope |
|---|---|---|
--kds-reveal-radius |
60% |
per-element |
--kds-reveal-color |
color-mix(in srgb, --kdr-accent 28%, transparent) |
per-element |
--kds-reveal-fade |
200ms ease |
per-element |
R3 — Reduced-motion contract
When prefers-reduced-motion: reduce, initReveal() in page-enhance.js returns early — no mousemove listener is attached, no --kds-reveal-x/y are set, and the CSS ::before overlay stays at opacity 0. The focusvisible centeranchored variant also disabled (no movement, but the static glow is harmless — kept for visual cue).
R4 — Touch / mobile contract
Reveal is pointer-only. Touch devices don't fire mousemove events reliably, and the effect doesn't translate to the touch interaction model. Koder mobile (Flutter via koder_kit) uses Material ripple instead, which is the touch-native idiom.
T1-T3 — Tests
T1 — Headless: no JS errors when initReveal() runs on a page without any .kds-reveal element (early return).
T2 — Reduced-motion: with the OS media query set, mousemove over a .kds-reveal element does NOT update --kds-reveal-x/y (verified via computed style after dispatchEvent).
T3 — Focus state: tabbing to a .kds-reveal element shows the center-anchored glow (verified via Playwright screenshot).