Skip to content

XR developer preview

develop specs/develop/xr-preview.kmd

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`.

When this spec applies

Primary triggers

All triggers

Specification body

Spec — XR developer preview

Facet Develop 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 reserves 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

PlatformAPIStatus
Apple Vision ProvisionOS SwiftUI + RealityKitTier 1 (primary)
Meta Quest 2/3/ProAndroid XR via Quest OSTier 2
Android XRGeneric Android XR API (Pixel XR, etc.)Tier 2
Browser-based WebXRWebXR 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

Primitive2D equivalentXR adaptation
VolumePage / windowBounded 3D space (cube), depth respected
PanelCard / surfaceFlat 2D surface anchored at world position
Floating windowModal dialogWorld-anchored 2D panel, follows user gaze direction loosely
Hand reachTouchDirect interaction (pinch / grab) within ~50 cm
Eye + pinchMouse hover + clickEye gaze for hover, pinch fingers for click (Vision Pro pattern)

R3 — Visual tokens — XR additions

XR adds tokens NOT present in 2D specs:

TokenPurpose
--kds-xr-glass-blurBackdrop blur for floating panels
--kds-xr-glass-opacityPanel translucency vs scene behind
--kds-xr-shadow-distanceCast shadow distance in centimeters
--kds-xr-typography-scaleMultiplier 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 not-yet-supported:

ComponentXR adaptation
ButtonFloating affordance with hover-lift on eye gaze; pinch to activate
Card2D panel anchored in world; clickable region same as 2D
DialogFloating window centered at user's eye line at ~1 m distance
SnackbarFloats below user's gaze, ~50 cm; follows gentle eye motion
TabsHorizontal row at top of volume; row can be re-anchored to side via context menu
Navigation drawerSlides from left edge of volume; pinch-and-drag to open

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

InputMapped action
Eye gaze + pinch (Vision Pro)Hover + click
Hand reach + pinchDirect manipulation (drag, scroll)
Voice command"Open menu", "Submit form" (per voice/wake-word.kmd)
Bluetooth keyboardSame as 2D keyboard semantics
Gamepad / controllerMapped 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

BudgetTarget
First panel paint< 100 ms (anchored panel)
60 fps interactionMandatory (less = nausea)
90 fps preferredVision 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.0 may include xr-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.                     │
└─────────────────────────────────────────────┘
  • themes/elevation.kmd — z-axis mapping
  • app-layout/safe-area.kmd — analogous to XR volume boundaries
  • voice/wake-word.kmd — voice as primary XR input
  • components/*.kmd — per-component XR adaptation notes

Implementation tracking

References