diff --git a/app/components/ui/cathode-tv.svelte b/app/components/ui/cathode-tv.svelte
new file mode 100644
index 000000000..59f982dce
--- /dev/null
+++ b/app/components/ui/cathode-tv.svelte
@@ -0,0 +1,456 @@
+<svelte:options tag="cathode-tv" />
+
+<script lang="ts">
+	import { onMount, onDestroy } from "svelte";
+	import {
+		WebGLRenderer,
+		Scene,
+		PerspectiveCamera,
+		Group,
+		LinearToneMapping,
+		TextureLoader,
+		MeshBasicMaterial,
+		Mesh,
+		LinearSRGBColorSpace,
+		PlaneGeometry,
+		NoBlending,
+		DoubleSide,
+		Box3,
+		Color,
+		Vector3,
+		Quaternion,
+		ShaderMaterial,
+		BufferGeometry,
+		Raycaster,
+		Vector2,
+		MathUtils,
+		type Intersection,
+		Object3D,
+		type Object3DEventMap,
+	} from "three";
+	import {
+		CSS3DObject,
+		CSS3DRenderer,
+	} from "three/examples/jsm/renderers/CSS3DRenderer.js";
+	import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
+	import Vimeo from "@vimeo/player";
+
+	let canvasElement: HTMLCanvasElement;
+	let dispose = () => {};
+
+	onMount(() => {
+		let gltfLoader = new GLTFLoader();
+		let textureLoader = new TextureLoader();
+
+		let tvModel: Group | undefined;
+		let tvScreen: Mesh<BufferGeometry, ShaderMaterial> | undefined;
+		let tvChanelControl: Mesh<BufferGeometry, MeshBasicMaterial> | undefined;
+		let tvVolumeControl: Mesh<BufferGeometry, MeshBasicMaterial> | undefined;
+		let tvFireshipProChanel = {
+			degree: -4.24,
+			src: "https://player.vimeo.com/video/599890291",
+		};
+		let tvInitialVolumeDegree = -5.13;
+
+		/**
+		 * Initialize Model & Texture.
+		 * @param cb Callback triggered after all resources are loaded
+		 */
+		const loadResources = (cb: () => void) => {
+			gltfLoader?.load("/3d/tv.glb", (model) => {
+				tvModel = model.scene;
+
+				textureLoader?.load("/img/tv.png", (texture) => {
+					texture.flipY = false;
+					texture.colorSpace = LinearSRGBColorSpace;
+					const mat = new MeshBasicMaterial({
+						map: texture,
+						blending: NoBlending,
+					});
+
+					tvModel?.children.forEach((child) => {
+						if (!(child instanceof Mesh)) return;
+						child.material = mat;
+						if (child.name === "screen") tvScreen = child;
+						if (child.name === "volume_control") tvVolumeControl = child;
+						if (child.name === "chanel_control") tvChanelControl = child;
+					});
+
+					cb();
+				});
+			});
+		};
+
+		/** Initialize the experience.*/
+		const init = () => {
+			canvasElement.style.opacity = "1";
+			const parentElement = canvasElement.parentElement;
+
+			// DATA
+			if (!tvModel || !tvScreen || !parentElement) return;
+
+			let viewportWidth = parentElement.clientWidth;
+			let viewportHeight = parentElement.clientHeight * 1.2;
+			let viewportAspect = viewportWidth / viewportHeight;
+
+			/* Scene camera */
+			const scene = new Scene();
+
+			const camera = new PerspectiveCamera(35, viewportAspect, 1, 100);
+			camera.position.set(0, 1.3, 7);
+			camera.lookAt(0, 1.3, 0);
+
+			/* Experience renderer */
+			const renderer = new WebGLRenderer({
+				canvas: canvasElement,
+				antialias: true,
+				alpha: true,
+			});
+			renderer.outputColorSpace = LinearSRGBColorSpace;
+			renderer.toneMapping = LinearToneMapping;
+			renderer.toneMappingExposure = 0.975;
+			renderer.setClearAlpha(0);
+			renderer.setSize(viewportWidth, viewportHeight);
+			renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+
+			const raycaster = new Raycaster();
+
+			const pointerCoord = new Vector2(0.5);
+
+			const tvScreenBoundingBox = new Box3().setFromObject(tvScreen);
+			const tvScreenHeight =
+				tvScreenBoundingBox.max.y - tvScreenBoundingBox.min.y;
+			const tvScreenWidth =
+				tvScreenBoundingBox.max.x - tvScreenBoundingBox.min.x;
+			const tvTargetRotation = new Vector2();
+
+			const iframeElementWidth = 400;
+			const iframeElement: HTMLIFrameElement = document.createElement("iframe");
+			iframeElement.src = tvFireshipProChanel.src;
+			iframeElement.allowFullscreen = true;
+			iframeElement.allow = "autoplay";
+			iframeElement.setAttribute("webkitallowfullscreen", "true");
+			iframeElement.setAttribute("mozallowfullscreen", "true");
+			iframeElement.setAttribute("frameborder", "0");
+			iframeElement.style.aspectRatio = "16/9";
+			iframeElement.style.border = "none";
+			iframeElement.style.top = "0";
+			iframeElement.style.left = "0";
+			iframeElement.style.zIndex = "9999";
+			const iframePlayer = new Vimeo(iframeElement);
+
+			const cssFactor = 1000;
+			const cssScene = new Scene();
+			const cssCamera = new PerspectiveCamera(
+				camera.fov,
+				camera.aspect,
+				camera.near * cssFactor,
+				camera.far * cssFactor
+			);
+			const rendererCss = new CSS3DRenderer();
+			rendererCss.setSize(viewportWidth, viewportHeight);
+			rendererCss.domElement.style.width = "100%";
+			rendererCss.domElement.style.height = "100%";
+			rendererCss.domElement.style.top = "0";
+			rendererCss.domElement.style.left = "0";
+			rendererCss.domElement.style.position = "absolute";
+			parentElement?.insertBefore(rendererCss.domElement, canvasElement);
+
+			const cssPlaneObject = new CSS3DObject(iframeElement);
+			cssPlaneObject.scale
+				.set(1, 1, 1)
+				.multiplyScalar(cssFactor / (iframeElementWidth / tvScreenHeight));
+
+			const planeMask = new Mesh(
+				new PlaneGeometry(tvScreenWidth, tvScreenHeight),
+				new MeshBasicMaterial({
+					opacity: 0,
+					color: new Color("black"),
+					blending: NoBlending,
+					side: DoubleSide,
+				})
+			);
+			planeMask.position.copy(tvScreen.position).add(new Vector3(0, 0, -0.02));
+
+			let tickStart = Date.now();
+			let tickCurrent = tickStart;
+
+			let shouldStopRendering = false;
+
+			let intersects: Intersection<Object3D<Object3DEventMap>>[] = [];
+			let selectedObject: Mesh | undefined;
+
+			tvScreen.position.add(new Vector3(0, 0, 0.001));
+			tvScreen.material = new ShaderMaterial({
+				transparent: true,
+				vertexShader:
+					"varying vec2 vUv;void main(){gl_Position=projectionMatrix*modelViewMatrix*vec4(position,1.0);vUv=uv;}",
+				fragmentShader: `
+        varying vec2 vUv;uniform float uTime;uniform float uDelta;uniform float uAlpha;
+        float rand(vec2 uv){return fract(sin(dot(uv,vec2(12.9898,78.233)))*43758.5453);}
+        void main(){vec2 uv=vUv;float rand_val=rand(uv+sin(uDelta*(uTime*0.0001)));gl_FragColor=vec4(mix(vec3(.0),vec3(rand_val),uAlpha),uAlpha);}
+        `,
+				uniforms: {
+					uTime: { value: 0 },
+					uDelta: { value: 0 },
+					uAlpha: { value: 1 },
+				},
+			});
+
+			tvModel.add(planeMask);
+			cssScene.add(cssPlaneObject);
+			scene.add(tvModel);
+
+			// METHODS
+			const mapToBoundary = (
+				value: number,
+				minValue: number,
+				maxValue: number
+			) => {
+				let result =
+					((Math.max(minValue, Math.min(maxValue, value)) - minValue) /
+						(maxValue - minValue)) *
+						2 -
+					1;
+				if (Math.abs(result) >= 0.99) return 1;
+				return Math.abs(result);
+			};
+			const calculateTvRotation = () => {
+				tvTargetRotation.x = pointerCoord.y * Math.PI * -0.09;
+				tvTargetRotation.y = pointerCoord.x * Math.PI * 0.09;
+			};
+			const interpolateTvRotation = () => {
+				if (!tvModel) return;
+				tvModel.rotation.x += (tvTargetRotation.x - tvModel?.rotation.x) * 0.08;
+				tvModel.rotation.y += (tvTargetRotation.y - tvModel?.rotation.y) * 0.08;
+			};
+			const correctIframeSizes = (factor = 1) => {
+				iframeElement.style.minHeight = `${
+					iframeElementWidth * (tvScreenHeight / tvScreenWidth) * factor
+				}px`;
+
+				iframeElement.style.width = `${iframeElementWidth * factor}px`;
+			};
+			correctIframeSizes(1.2);
+
+			const onIframeLoad = () => {
+				setTimeout(() => {
+					iframeElement.style.pointerEvents = "auto";
+
+					correctIframeSizes();
+
+					if (
+						tvScreen &&
+						tvChanelControl &&
+						typeof tvScreen.material?.uniforms?.uAlpha?.value === "number"
+					) {
+						tvChanelControl.rotation.z = tvFireshipProChanel.degree;
+						tvScreen.material.uniforms.uAlpha.value = 0;
+					}
+
+					if (tvVolumeControl && iframePlayer) {
+						tvVolumeControl.rotation.z = tvInitialVolumeDegree;
+						iframePlayer.setVolume(
+							MathUtils.clamp(
+								1 - (tvVolumeControl.rotation.z + Math.PI * 2) / (Math.PI * 2),
+								0,
+								1
+							)
+						);
+					}
+					iframeElement.removeEventListener("load", onIframeLoad);
+				}, 200);
+			};
+			const onMouseDown = () => {
+				if (
+					!intersects?.length ||
+					!(intersects[0]?.object instanceof Mesh) ||
+					!["volume_control", "chanel_control"].includes(
+						intersects[0].object.name
+					)
+				)
+					return;
+				selectedObject = intersects[0].object;
+				if (selectedObject.name === "chanel_control") iframePlayer.pause();
+			};
+			const onMouseMove = (e: MouseEvent) => {
+				const boundingClientReact = parentElement.getBoundingClientRect();
+
+				pointerCoord.set(
+					((e.clientX - boundingClientReact.left) / viewportWidth) * 2 - 1,
+					-((e.clientY - boundingClientReact.top) / viewportHeight) * 2 + 1
+				);
+
+				raycaster.setFromCamera(pointerCoord, camera);
+				intersects = raycaster.intersectObject(scene);
+
+				if (!selectedObject) {
+					parentElement.style.cursor = "auto";
+					if (intersects.length) {
+						if (
+							["volume_control", "chanel_control"].includes(
+								intersects[0].object.name
+							)
+						)
+							parentElement.style.cursor = "pointer";
+						tvTargetRotation.set(0, 0);
+					}
+
+					if (!intersects.length) calculateTvRotation();
+				}
+
+				if (selectedObject) {
+					selectedObject.rotation.z -= -e.movementY * 0.01;
+					selectedObject.rotation.z = MathUtils.clamp(
+						selectedObject.rotation.z,
+						-Math.PI * 2,
+						0
+					);
+
+					if (selectedObject.name === "volume_control")
+						iframePlayer.setVolume(
+							MathUtils.clamp(
+								1 - (selectedObject.rotation.z + Math.PI * 2) / (Math.PI * 2),
+								0,
+								1
+							)
+						);
+
+					if (
+						typeof tvScreen?.material.uniforms?.uAlpha?.value === "number" &&
+						selectedObject.name === "chanel_control"
+					) {
+						tvScreen.material.uniforms.uAlpha.value = mapToBoundary(
+							selectedObject.rotation.z,
+							tvFireshipProChanel.degree - 0.5,
+							tvFireshipProChanel.degree + 0.5
+						);
+						iframeElement.style.pointerEvents =
+							tvScreen.material.uniforms.uAlpha.value >= 0.9 ? "none" : "auto";
+					}
+				}
+			};
+			const onMouseUp = () => {
+				selectedObject = undefined;
+				parentElement.style.cursor = "auto";
+			};
+			const onMouseLeave = () => {
+				tvTargetRotation.set(0, 0);
+			};
+			const onResize = () => {
+				viewportWidth = parentElement.clientWidth;
+				viewportHeight = parentElement.clientHeight * 1.2;
+				viewportAspect = viewportWidth / viewportHeight;
+
+				rendererCss.setSize(viewportWidth, viewportHeight);
+				cssCamera.updateProjectionMatrix();
+
+				renderer.setViewport(0, 0, viewportWidth, viewportHeight);
+				renderer.setSize(viewportWidth, viewportHeight);
+				renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
+				camera.aspect = viewportWidth / viewportHeight;
+				camera.updateProjectionMatrix();
+			};
+
+			const render = () => {
+				const tickCurrentTime = Date.now();
+				const tickDelta = tickCurrentTime - tickCurrent;
+				tickCurrent = tickCurrentTime;
+				const tickElapsed = tickCurrent - tickStart;
+
+				if (typeof tvScreen?.material.uniforms?.uTime?.value === "number")
+					tvScreen.material.uniforms.uTime.value = tickElapsed;
+				if (typeof tvScreen?.material.uniforms?.uDelta?.value === "number")
+					tvScreen.material.uniforms.uDelta.value = tickDelta;
+
+				planeMask.updateMatrixWorld();
+				const planeMaskWorldMatrix = planeMask.matrixWorld;
+				const planeMaskPosition = new Vector3();
+				const planeMaskScale = new Vector3();
+				const planeMaskQuaternion = new Quaternion();
+				planeMaskWorldMatrix.decompose(
+					planeMaskPosition,
+					planeMaskQuaternion,
+					planeMaskScale
+				);
+
+				interpolateTvRotation();
+
+				cssPlaneObject.quaternion.copy(planeMaskQuaternion);
+				cssPlaneObject.position
+					.copy(planeMaskPosition)
+					.multiplyScalar(cssFactor);
+				const scaleFactor =
+					iframeElementWidth /
+					(planeMask.geometry.parameters.width * planeMaskScale.x);
+				cssPlaneObject.scale
+					.set(1, 1, 1)
+					.multiplyScalar(cssFactor / scaleFactor);
+
+				cssCamera.quaternion.copy(camera.quaternion);
+				cssCamera.position.copy(camera.position).multiplyScalar(cssFactor);
+
+				rendererCss.render(cssScene, cssCamera);
+				renderer.render(scene, camera);
+
+				const animationFrameId = requestAnimationFrame(render);
+				if (shouldStopRendering) cancelAnimationFrame(animationFrameId);
+			};
+
+			// EVENTS
+			iframeElement.addEventListener("load", onIframeLoad);
+
+			parentElement?.addEventListener("mousedown", onMouseDown);
+			parentElement?.addEventListener("mousemove", onMouseMove);
+			parentElement?.addEventListener("mouseup", onMouseUp);
+			parentElement?.addEventListener("mouseleave", onMouseLeave);
+			window?.addEventListener("resize", onResize);
+
+			dispose = () => {
+				parentElement?.removeEventListener("mousedown", onMouseDown);
+				parentElement?.removeEventListener("mousemove", onMouseMove);
+				parentElement?.removeEventListener("mouseup", onMouseUp);
+				parentElement?.removeEventListener("mouseleave", onMouseLeave);
+				window?.removeEventListener("resize", onResize);
+
+				shouldStopRendering = true;
+			};
+
+			render();
+		};
+
+		loadResources(init);
+	});
+
+	onDestroy(() => dispose?.());
+</script>
+
+<div class="wrapper">
+	<canvas style="opacity: 0;" bind:this={canvasElement} />
+
+	<iframe
+		title=""
+		src="https://player.vimeo.com/video/599890291"
+		frameborder="0"
+		webkitallowfullscreen
+		mozallowfullscreen
+		allowfullscreen
+	/>
+</div>
+
+<style>
+	div.wrapper {
+		@apply w-full relative md:h-[300px] mx-auto md:max-w-[750px] mt-20 md:mt-0 md:mx-0;
+		height: 300px;
+	}
+
+	div.wrapper > canvas {
+		@apply absolute pointer-events-none z-50 w-full hidden md:block;
+		height: 150%;
+	}
+
+	div.wrapper > iframe {
+		@apply relative mx-auto w-full aspect-video md:hidden;
+		height: 150%;
+	}
+</style>
diff --git a/app/main.ts b/app/main.ts
index 40452917d..b20642840 100644
--- a/app/main.ts
+++ b/app/main.ts
@@ -70,6 +70,7 @@ export * from './components/ui/scroll-show.svelte';
 export * from './components/ui/discord-count.svelte';
 export * from './components/ui/scroll-up.svelte';
 export * from './components/ui/hi-mom.svelte';
+export * from './components/ui/cathode-tv.svelte';
 
 // Search
 export * from './components/search/algolia-search.svelte';
diff --git a/layouts/home.html b/layouts/home.html
index 48da49d09..c262172d2 100644
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -22,19 +22,7 @@ <h1 class="text-6xl mb-0">
         <a href="#truth" class="btn btn-green btn-glow">Start Here</a>
       </div>
 
-      <div class="flex w-full relative items-center justify-center">
-        <div class="w-full mx-auto md:bg-[url('/img/tv.png')] bg-no-repeat bg-cover md:w-[500px] md:max-w-[700px] md:min-h-[300px] mt-20 md:mt-0">
-            <iframe
-              class="md:w-[330px] md:h-[185px] relative md:left-[48px] md:top-[54px] mx-auto md:mx-0 w-full aspect-video"
-              src="https://player.vimeo.com/video/599890291"
-              frameborder="0"
-              webkitallowfullscreen
-              mozallowfullscreen
-              allowfullscreen
-            ></iframe>
-        </div>
-
-      </div>
+      <cathode-tv class="w-full" />
     </div>
 
 
@@ -116,7 +104,7 @@ <h2 class="bg-yellow-500 inline-block text-gray7 px-6 py-4 text-6xl shadow-xl">L
 			</scroll-show>
 		</div>
 	</div>
-	
+ 
   </div>
 
 
diff --git a/package-lock.json b/package-lock.json
index 412fdbc59..2974bf699 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -12,6 +12,7 @@
         "@sveltejs/vite-plugin-svelte": "^1.0.1",
         "@tailwindcss/typography": "^0.5.4",
         "@tsconfig/svelte": "^2.0.1",
+        "@types/three": "^0.161.0",
         "@types/vimeo__player": "^2.16.3",
         "@types/youtube-player": "^5.5.6",
         "@typescript-eslint/eslint-plugin": "^5.36.2",
@@ -32,6 +33,7 @@
         "svelte-check": "^2.2.7",
         "svelte-preprocess": "^4.10.7",
         "tailwindcss": "^3.1.8",
+        "three": "^0.161.0",
         "tslib": "^2.3.1",
         "typescript": "^4.5.4",
         "vite": "^3.0.5",
@@ -2978,12 +2980,36 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.3",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
+      "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==",
+      "dev": true
+    },
+    "node_modules/@types/three": {
+      "version": "0.161.2",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.161.2.tgz",
+      "integrity": "sha512-DazpZ+cIfBzbW/p0zm6G8CS03HBMd748A3R1ZOXHpqaXZLv2I5zNgQUrRG//UfJ6zYFp2cUoCQaOLaz8ubH07w==",
+      "dev": true,
+      "dependencies": {
+        "@types/stats.js": "*",
+        "@types/webxr": "*",
+        "fflate": "~0.6.10",
+        "meshoptimizer": "~0.18.1"
+      }
+    },
     "node_modules/@types/vimeo__player": {
       "version": "2.16.3",
       "resolved": "https://registry.npmjs.org/@types/vimeo__player/-/vimeo__player-2.16.3.tgz",
       "integrity": "sha512-hsOe6CZFTNyfjRjQUrNHBF4LDmjvjcU2yQIPWp5AglKeGxt11JYGToQhKUPM876gBXggqR6rMQ0/sNI06ec2Rg==",
       "dev": true
     },
+    "node_modules/@types/webxr": {
+      "version": "0.5.14",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.14.tgz",
+      "integrity": "sha512-UEMMm/Xn3DtEa+gpzUrOcDj+SJS1tk5YodjwOxcqStNhCfPcwgyC5Srg2ToVKyg2Fhq16Ffpb0UWUQHqoT9AMA==",
+      "dev": true
+    },
     "node_modules/@types/youtube-player": {
       "version": "5.5.6",
       "resolved": "https://registry.npmjs.org/@types/youtube-player/-/youtube-player-5.5.6.tgz",
@@ -4769,6 +4795,12 @@
         "node": ">=0.8.0"
       }
     },
+    "node_modules/fflate": {
+      "version": "0.6.10",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
+      "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
+      "dev": true
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -13344,6 +13376,12 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meshoptimizer": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
+      "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
+      "dev": true
+    },
     "node_modules/micromatch": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
@@ -14560,6 +14598,12 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "node_modules/three": {
+      "version": "0.161.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.161.0.tgz",
+      "integrity": "sha512-LC28VFtjbOyEu5b93K0bNRLw1rQlMJ85lilKsYj6dgTu+7i17W+JCCEbvrpmNHF1F3NAUqDSWq50UD7w9H2xQw==",
+      "dev": true
+    },
     "node_modules/through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
@@ -17293,12 +17337,36 @@
         "@types/node": "*"
       }
     },
+    "@types/stats.js": {
+      "version": "0.17.3",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.3.tgz",
+      "integrity": "sha512-pXNfAD3KHOdif9EQXZ9deK82HVNaXP5ZIF5RP2QG6OQFNTaY2YIetfrE9t528vEreGQvEPRDDc8muaoYeK0SxQ==",
+      "dev": true
+    },
+    "@types/three": {
+      "version": "0.161.2",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.161.2.tgz",
+      "integrity": "sha512-DazpZ+cIfBzbW/p0zm6G8CS03HBMd748A3R1ZOXHpqaXZLv2I5zNgQUrRG//UfJ6zYFp2cUoCQaOLaz8ubH07w==",
+      "dev": true,
+      "requires": {
+        "@types/stats.js": "*",
+        "@types/webxr": "*",
+        "fflate": "~0.6.10",
+        "meshoptimizer": "~0.18.1"
+      }
+    },
     "@types/vimeo__player": {
       "version": "2.16.3",
       "resolved": "https://registry.npmjs.org/@types/vimeo__player/-/vimeo__player-2.16.3.tgz",
       "integrity": "sha512-hsOe6CZFTNyfjRjQUrNHBF4LDmjvjcU2yQIPWp5AglKeGxt11JYGToQhKUPM876gBXggqR6rMQ0/sNI06ec2Rg==",
       "dev": true
     },
+    "@types/webxr": {
+      "version": "0.5.14",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.14.tgz",
+      "integrity": "sha512-UEMMm/Xn3DtEa+gpzUrOcDj+SJS1tk5YodjwOxcqStNhCfPcwgyC5Srg2ToVKyg2Fhq16Ffpb0UWUQHqoT9AMA==",
+      "dev": true
+    },
     "@types/youtube-player": {
       "version": "5.5.6",
       "resolved": "https://registry.npmjs.org/@types/youtube-player/-/youtube-player-5.5.6.tgz",
@@ -18498,6 +18566,12 @@
         "websocket-driver": ">=0.5.1"
       }
     },
+    "fflate": {
+      "version": "0.6.10",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.10.tgz",
+      "integrity": "sha512-IQrh3lEPM93wVCEczc9SaAOvkmcoQn/G8Bo1e8ZPlY3X3bnAxWaBdvTdvM1hP62iZp0BXWDy4vTAy4fF0+Dlpg==",
+      "dev": true
+    },
     "file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -25372,6 +25446,12 @@
       "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
       "dev": true
     },
+    "meshoptimizer": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.18.1.tgz",
+      "integrity": "sha512-ZhoIoL7TNV4s5B6+rx5mC//fw8/POGyNxS/DZyCJeiZ12ScLfVwRE/GfsxwiTkMYYD5DmK2/JXnEVXqL4rF+Sw==",
+      "dev": true
+    },
     "micromatch": {
       "version": "4.0.5",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
@@ -26208,6 +26288,12 @@
       "integrity": "sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==",
       "dev": true
     },
+    "three": {
+      "version": "0.161.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.161.0.tgz",
+      "integrity": "sha512-LC28VFtjbOyEu5b93K0bNRLw1rQlMJ85lilKsYj6dgTu+7i17W+JCCEbvrpmNHF1F3NAUqDSWq50UD7w9H2xQw==",
+      "dev": true
+    },
     "through": {
       "version": "2.3.8",
       "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
diff --git a/package.json b/package.json
index af6ec5ffc..b6183591b 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "@sveltejs/vite-plugin-svelte": "^1.0.1",
     "@tailwindcss/typography": "^0.5.4",
     "@tsconfig/svelte": "^2.0.1",
+    "@types/three": "^0.161.0",
     "@types/vimeo__player": "^2.16.3",
     "@types/youtube-player": "^5.5.6",
     "@typescript-eslint/eslint-plugin": "^5.36.2",
@@ -42,6 +43,7 @@
     "svelte-check": "^2.2.7",
     "svelte-preprocess": "^4.10.7",
     "tailwindcss": "^3.1.8",
+    "three": "^0.161.0",
     "tslib": "^2.3.1",
     "typescript": "^4.5.4",
     "vite": "^3.0.5",
diff --git a/static/3d/tv.glb b/static/3d/tv.glb
new file mode 100644
index 000000000..1fa7add6d
Binary files /dev/null and b/static/3d/tv.glb differ