diff --git a/.gitignore b/.gitignore
index 27a4339..6ca799a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@ node_modules/
 
 # Generated by `npm run build`.
 vr180player/*.js
+vr180player/**/*.js
diff --git a/src/vr180player/dom.ts b/src/vr180player/dom/dom.ts
similarity index 100%
rename from src/vr180player/dom.ts
rename to src/vr180player/dom/dom.ts
diff --git a/src/vr180player/icons.ts b/src/vr180player/dom/icons.ts
similarity index 100%
rename from src/vr180player/icons.ts
rename to src/vr180player/dom/icons.ts
diff --git a/src/vr180player/two-d-control-panel.ts b/src/vr180player/dom/two-d-control-panel.ts
similarity index 99%
rename from src/vr180player/two-d-control-panel.ts
rename to src/vr180player/dom/two-d-control-panel.ts
index 1e75ed4..fdcd424 100644
--- a/src/vr180player/two-d-control-panel.ts
+++ b/src/vr180player/dom/two-d-control-panel.ts
@@ -1,5 +1,5 @@
 import { setLucideIcon } from './icons.js';
-import { formatTime } from './time.js';
+import { formatTime } from '../utils/time.js';
 
 type TwoDControlPanelCallbacks = {
 	onForward: () => void;
diff --git a/src/vr180player/media-controller.ts b/src/vr180player/media/media-controller.ts
similarity index 100%
rename from src/vr180player/media-controller.ts
rename to src/vr180player/media/media-controller.ts
diff --git a/src/vr180player/video-events.ts b/src/vr180player/media/video-events.ts
similarity index 100%
rename from src/vr180player/video-events.ts
rename to src/vr180player/media/video-events.ts
diff --git a/src/vr180player/fallback-camera-controls.ts b/src/vr180player/modes/fallback-camera-controls.ts
similarity index 99%
rename from src/vr180player/fallback-camera-controls.ts
rename to src/vr180player/modes/fallback-camera-controls.ts
index fd3992f..b1f654b 100644
--- a/src/vr180player/fallback-camera-controls.ts
+++ b/src/vr180player/modes/fallback-camera-controls.ts
@@ -1,4 +1,4 @@
-import type { ProjectionMode } from './config.js';
+import type { ProjectionMode } from '../config.js';
 
 type CameraControlsCallbacks = {
 	hideControls: () => void;
diff --git a/src/vr180player/two-d-mode.ts b/src/vr180player/modes/two-d-mode.ts
similarity index 97%
rename from src/vr180player/two-d-mode.ts
rename to src/vr180player/modes/two-d-mode.ts
index 507b565..259586a 100644
--- a/src/vr180player/two-d-mode.ts
+++ b/src/vr180player/modes/two-d-mode.ts
@@ -1,11 +1,11 @@
-import type { ProjectionMode } from './config.js';
+import type { ProjectionMode } from '../config.js';
 import type { FallbackCameraControls } from './fallback-camera-controls.js';
 import {
 	hideRendererCanvas,
 	resizeFallbackRenderer,
 	showFallbackCanvas
-} from './renderer-lifecycle.js';
-import { TwoDControlPanel } from './two-d-control-panel.js';
+} from '../rendering/renderer-lifecycle.js';
+import { TwoDControlPanel } from '../dom/two-d-control-panel.js';
 
 type TwoDModeCallbacks = {
 	createMediaTexture: () => any;
diff --git a/src/vr180player/content-scene.ts b/src/vr180player/rendering/content-scene.ts
similarity index 98%
rename from src/vr180player/content-scene.ts
rename to src/vr180player/rendering/content-scene.ts
index 1e75a02..31f66ea 100644
--- a/src/vr180player/content-scene.ts
+++ b/src/vr180player/rendering/content-scene.ts
@@ -4,7 +4,7 @@ import {
 	PLANE_HEIGHT,
 	PLANE_WIDTH,
 	type ProjectionMode
-} from './config.js';
+} from '../config.js';
 
 type ContentBeforeRender = (
 	renderer: any,
diff --git a/src/vr180player/projection.ts b/src/vr180player/rendering/projection.ts
similarity index 100%
rename from src/vr180player/projection.ts
rename to src/vr180player/rendering/projection.ts
diff --git a/src/vr180player/renderer-lifecycle.ts b/src/vr180player/rendering/renderer-lifecycle.ts
similarity index 100%
rename from src/vr180player/renderer-lifecycle.ts
rename to src/vr180player/rendering/renderer-lifecycle.ts
diff --git a/src/vr180player/three-utils.ts b/src/vr180player/rendering/three-utils.ts
similarity index 97%
rename from src/vr180player/three-utils.ts
rename to src/vr180player/rendering/three-utils.ts
index dc87388..694b3ea 100644
--- a/src/vr180player/three-utils.ts
+++ b/src/vr180player/rendering/three-utils.ts
@@ -1,5 +1,5 @@
 import * as THREE from 'https://unpkg.com/three/build/three.module.js';
-import { drawLucideIcon, type LucideIconName } from './icons.js';
+import { drawLucideIcon, type LucideIconName } from '../dom/icons.js';
 
 type Radius = number | {
 	tl?: number;
diff --git a/src/vr180player/time.ts b/src/vr180player/utils/time.ts
similarity index 100%
rename from src/vr180player/time.ts
rename to src/vr180player/utils/time.ts
diff --git a/src/vr180player/vr180-player.ts b/src/vr180player/vr180-player.ts
index 83718f7..9325a05 100644
--- a/src/vr180player/vr180-player.ts
+++ b/src/vr180player/vr180-player.ts
@@ -6,35 +6,35 @@ import {
 	type ProjectionMode,
 	VALID_PROJECTIONS
 } from './config.js';
-import { createContentScene } from './content-scene.js';
-import { create2DControlPanel, createPlayButton, injectPlayerStyles } from './dom.js';
+import { createContentScene } from './rendering/content-scene.js';
+import { create2DControlPanel, createPlayButton, injectPlayerStyles } from './dom/dom.js';
 import {
 	applySbsTextureWindow as applySbsTextureWindowCore,
 	hideContentMeshes as hideContentMeshesCore,
 	positionPlaneForPresentation as positionPlaneForPresentationCore,
 	showActiveContentMesh as showActiveContentMeshCore
-} from './projection.js';
-import { createVideoTexture as createVideoTextureCore } from './three-utils.js';
-import { FallbackCameraControls } from './fallback-camera-controls.js';
-import { MediaController } from './media-controller.js';
+} from './rendering/projection.js';
+import { createVideoTexture as createVideoTextureCore } from './rendering/three-utils.js';
+import { FallbackCameraControls } from './modes/fallback-camera-controls.js';
+import { MediaController } from './media/media-controller.js';
 import {
 	createVrController,
 	handleVrControllerSelect
-} from './vr-controller-interactions.js';
-import { bindVideoEvents } from './video-events.js';
+} from './xr/vr-controller-interactions.js';
+import { bindVideoEvents } from './media/video-events.js';
 import {
 	createVrControlPanel,
 	type VrControlPanel,
 	updateVrPlayPauseButtonIcon,
 	updateVrSeekBarAppearance,
 	updateVrVolumeButtonIcon
-} from './vr-control-panel.js';
-import { VrPanelVisibility } from './vr-panel-visibility.js';
-import { TwoDMode } from './two-d-mode.js';
+} from './xr/vr-control-panel.js';
+import { VrPanelVisibility } from './xr/vr-panel-visibility.js';
+import { TwoDMode } from './modes/two-d-mode.js';
 import {
 	createPlayerRenderer,
 	resizePlayerRenderer
-} from './renderer-lifecycle.js';
+} from './rendering/renderer-lifecycle.js';
 
 const _playerBase = new URL('.', import.meta.url).href;
 
diff --git a/src/vr180player/vr-control-panel.ts b/src/vr180player/xr/vr-control-panel.ts
similarity index 98%
rename from src/vr180player/vr-control-panel.ts
rename to src/vr180player/xr/vr-control-panel.ts
index c1ce370..c21d088 100644
--- a/src/vr180player/vr-control-panel.ts
+++ b/src/vr180player/xr/vr-control-panel.ts
@@ -1,6 +1,6 @@
 import * as THREE from 'https://unpkg.com/three/build/three.module.js';
-import { drawLucideIcon } from './icons.js';
-import { createLucideButtonTexture, drawRoundedRect } from './three-utils.js';
+import { drawLucideIcon } from '../dom/icons.js';
+import { createLucideButtonTexture, drawRoundedRect } from '../rendering/three-utils.js';
 
 type ButtonLayout = {
 	centerX: number;
diff --git a/src/vr180player/vr-controller-interactions.ts b/src/vr180player/xr/vr-controller-interactions.ts
similarity index 100%
rename from src/vr180player/vr-controller-interactions.ts
rename to src/vr180player/xr/vr-controller-interactions.ts
diff --git a/src/vr180player/vr-panel-visibility.ts b/src/vr180player/xr/vr-panel-visibility.ts
similarity index 100%
rename from src/vr180player/vr-panel-visibility.ts
rename to src/vr180player/xr/vr-panel-visibility.ts