Skip to main content

11b — Immersive Media Patterns

Scope: 360° room tours, drone aerial video, 3D floor plans, AR room preview (Phase 3), video gallery rules.

1. 360° room tour​

Provider: Matterport embed (primary) or Cupix (alternative).

Integration:

<iframe src="https://my.matterport.com/show/?m={model_id}"
        allowfullscreen
        allow="xr-spatial-tracking"
        title="360° tour of [Room Name] at [Property Name]">
</iframe>

Loading: Deferred — IntersectionObserver triggers load only when the iframe enters the viewport. A LQIP thumbnail is shown until the iframe loads.

Performance budget: Matterport JS bundle (~5 MB) is a significant payload. Load only on property detail page when guest explicitly taps "Take a 360° tour" (not auto-embedded on page load).

Accessibility: The iframe has title attribute. Adjacent to the iframe, provide a "Can't view the tour?" fallback link to a static photo gallery. Inform users that 360° tours may not be accessible with all screen readers.

Reduced-motion: Auto-rotate (if enabled in Matterport settings) must be disabled when prefers-reduced-motion: reduce.

2. Drone aerial video​

Format: MP4 (H.264, max 1080p) or HLS (adaptive bitrate for large files).

Playback rules:

  • Autoplay ONLY if muted AND prefers-reduced-motion is not set
  • Controls always visible (SC 2.2.2)
  • Captions: descriptive caption track required ("Aerial view of Hotel Kabul Palace and surrounding mountains")
  • Loop: yes (ambient; not informational)

Implementation: <video> element (not YouTube embed) for performance control. Served via Cloudflare Stream (adaptive bitrate, no unnecessary YouTube tracking).

Poster image: A still frame from the video; 16:9; served as LQIP + full resolution via Cloudflare Images.

3. 3D floor plan​

Rendering: Interactive SVG or Three.js (simple, not Matterport-class). Shows the floor plan of the property / room building.

Interactivity:

  • Hover/tap a room/unit → tooltip with room number, type, floor, status (available / occupied)
  • For booking funnel: click a room to select it (triggers room detail drawer)
  • For operator desktop: click a room to see its current status (housekeeping, folio)

Performance: SVG preferred over Three.js for phase P2 (lower complexity, better accessibility). Three.js (WebGL) considered for Phase 3 if rich 3D is warranted.

Accessibility: SVG elements have <title> and <desc> child elements. Interactive elements have role="button" and aria-label="Room 201 — Standard Double, available".

4. AR room preview (Phase 3)​

Description: Guest points their phone camera at a physical space; a rendered version of the hotel room overlays the camera feed.

Technology: WebXR (progressive web) + ARKit (iOS native) + ARCore (Android native) via React Native Viro or Expo AR.

Scope for spec (Phase 3 placeholder):

  • Trigger: "Preview in your room" button in the room detail
  • Required: permission for camera
  • Room model: glTF 3D model exported from the property's Matterport scan (automated via Matterport API)
  • UX: tap to place, pinch to scale, drag to move

Phase 3 only: No implementation required in P2 — this section is a spec placeholder for future engineering.

Context: Property detail page — gallery section.

RuleRequirement
AutoplayONLY if muted AND not prefers-reduced-motion
ControlsAlways visible (play, pause, mute, fullscreen, captions)
CaptionsRequired: descriptive closed captions for all speech; descriptive text track for ambient videos
Max autoplay duration30 s (then pause; prevent battery drain)
Mixed media galleryInterleave photos and videos in a single gallery; video items indicated with play icon overlay
FormatMP4 (H.264 + AAC) required; WebM optional
Max file size500 MB per video (enforced at upload)

Reduced motion: Video pauses on load; guest must tap play manually.

References​