XR developer preview
Forward-looking spec for Koder Design on XR surfaces (Vision Pro, Quest, Android XR). Material parity (`/develop/extended-reality`). Defines the **preview** stage: scope, target platforms, layout primitives, input model, accessibility — not yet a shipping product surface. Status: `preview`.
Spec — XR developer preview
Facet *evelop*of Koder Design. Material parity: https://m3.material.io/develop/extended-reality.
Status: *preview`*(not yet shipping; evolves with platforms).
URL: https://kds.koder.dev/{locale}/develop/xr/.
Scope of "preview"
This spec *eserves the surface and contract*for XR adaptations without committing to ship in v1. It's a forward declaration so:
- Token taxonomy already considers XR before stabilizing
- Component specs avoid 2D-only assumptions that break XR adaptation
- Implementer can experiment knowing the contract will be respected
R1 — Target platforms
| Platform | API | Status |
|---|---|---|
| *pple Vision Pro* | visionOS SwiftUI + RealityKit | Tier 1 (primary) |
| *eta Quest 23Pro* | Android XR via Quest OS | Tier 2 |
| *ndroid XR* | Generic Android XR API (Pixel XR, etc.) | Tier 2 |
| *rowser-based*WebXR | WebXR API (Chrome, Firefox) | Tier 3 (experimental) |
Tier 1: full spec coverage at v1. Tier 2: feature-parity within 6 months of v1. Tier 3: opt-in, may diverge.
R2 — Layout primitives
| Primitive | 2D equivalent | XR adaptation |
|---|---|---|
| *olume* | Page / window | Bounded 3D space (cube), depth respected |
| *anel* | Card / surface | Flat 2D surface anchored at world position |
| *loating window* | Modal dialog | World-anchored 2D panel, follows user gaze direction loosely |
| *and reach* | Touch | Direct interaction (pinch / grab) within ~50 cm |
| *ye + pinch* | Mouse hover + click | Eye gaze for hover, pinch fingers for click (Vision Pro pattern) |
R3 — Visual tokens — XR additions
XR adds tokens NOT present in 2D specs:
| Token | Purpose |
|---|---|
--kds-xr-glass-blur |
Backdrop blur for floating panels |
--kds-xr-glass-opacity |
Panel translucency vs scene behind |
--kds-xr-shadow-distance |
Cast shadow distance in centimeters |
--kds-xr-typography-scale |
Multiplier for typography (XR is "viewed from arm's length") |
Per themes/elevation.kmd § R5, elevation in XR becomes a literal z-axis offset; tokens map 1 dp ≈ 0.5 cm in XR space.
R4 — Component adaptations
Each canonical component must define its XR rendering OR explicitly mark as notyetsupported:
| Component | XR adaptation |
|---|---|
| Button | Floating affordance with hover-lift on eye gaze; pinch to activate |
| Card | 2D panel anchored in world; clickable region same as 2D |
| Dialog | Floating window centered at user's eye line at ~1 m distance |
| Snackbar | Floats below user's gaze, ~50 cm; follows gentle eye motion |
| Tabs | Horizontal row at top of volume; row can be re-anchored to side via context menu |
| Navigation drawer | Slides from left edge of volume; pinch |
Components NOT yet adapted (Tier 1 missing): carousels (XR equivalent unclear — defer), sliders (need hand-grip implementation), pickers (volumetric date picker — research project).
R5 — Input model
| Input | Mapped action |
|---|---|
| Eye gaze + pinch (Vision Pro) | Hover + click |
| Hand reach + pinch | Direct manipulation (drag, scroll) |
| Voice command | "Open menu", "Submit form" (per voice/wake-word.kmd) |
| Bluetooth keyboard | Same as 2D keyboard semantics |
| Gamepad / controller | Mapped to D-pad + buttons (Tier 2 / Quest) |
Tier 1 (Vision Pro) requires eye + pinch + voice. Tier 2 (Quest) adds controller fallback.
R6 — Accessibility in XR
- VoiceOver / TalkBack analogues work in XR (audio-described
navigation)
- Hand-reach interactions have fallback via gaze + pinch for users
with limited mobility
- Reduce Motion in XR = fewer floating animations + reduced
positional reanchoring
- Color contrast applies in XR (background = scene, not just surface
— UI contrast checker accounts for scene brightness)
R7 — Performance budgets
| Budget | Target |
|---|---|
| First panel paint | < 100 ms (anchored panel) |
| 60 fps interaction | Mandatory (less = nausea) |
| 90 fps preferred | Vision Pro target |
| Cold start | < 2 s from launch to first interaction |
XR is unforgiving of dropped frames — under-budget hardware should gracefully reduce visual complexity (lower elevation, simpler shadows) not the frame rate.
R8 — Forbidden patterns
- ❌ 2D modal that completely blocks XR scene (immersive mode handles
modals via floating windows; full-screen takeover breaks immersion)
- ❌ Animations that move > 30°/s in user's gaze area
(motion sickness)
- ❌ Pinned UI in the center of view (forces user to look away)
- ❌ Tiny hit targets (< 4 cm in world space)
- ❌ Sound effects with no spatial audio anchor in XR contexts
- ❌ XR-specific tokens that don't degrade gracefully in 2D
(must define 2D fallback per token)
R9 — Versioning
XR preview tracks its own minor version inside Koder Design semver:
koder-design v1.5.0may includexr-preview v0.3(still preview)- XR exits preview when at least 1 Tier 1 platform ships a real
Koder app and the contract is owner-ratified
R10 — Status badge
The catalog page MUST show:
┌─────────────────────────────────────────────┐
│ 🚧 PREVIEW │
│ This spec is forward-looking. Components, │
│ tokens, and interactions may change before │
│ the first stable release of Koder Design │
│ XR. Experiment freely; do not depend on │
│ the API as stable yet. │
└─────────────────────────────────────────────┘Cross-link
themes/elevation.kmd— z-axis mappingapp-layout/safe-area.kmd— analogous to XR volume boundariesvoice/wake-word.kmd— voice as primary XR input- `components