Motion — reveal effect (cursor highlight)
themes specs/themes/motion/reveal.kmd
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).
Quando esta spec se aplica
Todos os triggers
- Add hover signal to interactive cards / buttons / list items on desktop web + Flutter desktop
- Make a surface read as 'responsive to cursor proximity' without click
Corpo da especificação
Spec — Motion: Reveal effect
Facet Visual 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 focus-visible center-anchored 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).
Referências
specs/themes/motion/transitions.kmdspecs/themes/motion/physics.kmd