diff --git a/app/device-lab/DeviceLabLoader.tsx b/app/device-lab/DeviceLabLoader.tsx
new file mode 100644
index 0000000..2b53166
--- /dev/null
+++ b/app/device-lab/DeviceLabLoader.tsx
@@ -0,0 +1,117 @@
+"use client";
+
+import dynamic from "next/dynamic";
+import { useEffect, useState } from "react";
+import type { DeviceLabProps } from "@/components/device-lab/DeviceLab";
+import styles from "@/components/device-lab/device-lab.module.css";
+
+const DeviceLab = dynamic<DeviceLabProps>(
+  () => import("@/components/device-lab/DeviceLab"),
+  { ssr: false, loading: () => null },
+);
+
+const PENDANT_SLOTS = Array.from({ length: 8 }, (_, index) => index);
+
+function PendantOutline() {
+  return (
+    <svg viewBox="0 0 120 148" aria-hidden="true">
+      <path d="M52 27V17c0-7 3-11 8-11s8 4 8 11v10" />
+      <path d="M48 31c2-5 6-8 12-8s10 3 12 8" />
+      <circle cx="60" cy="81" r="43" />
+      <circle cx="60" cy="81" r="34" />
+      <circle className={styles.fabricationLed} cx="60" cy="81" r="2.5" />
+    </svg>
+  );
+}
+
+function FabricationLoader({ progress, exiting }: {
+  progress: number;
+  exiting: boolean;
+}) {
+  return (
+    <div
+      className={`${styles.fabricationLoader} ${exiting ? styles.fabricationLoaderExit : ""}`}
+      role="status"
+      aria-label="Fabricating your Omi"
+    >
+      <div className={styles.fabricationGlow} aria-hidden="true" />
+
+      <div className={styles.fabricationCenter}>
+        <h1>Fabricating your Omi</h1>
+
+        <div className={styles.fabricationConveyor} aria-hidden="true">
+          <span className={styles.fabricationRailTop} />
+          <div className={styles.fabricationTrack}>
+            {PENDANT_SLOTS.map((slot) => (
+              <div className={styles.fabricationPendant} key={slot}>
+                <PendantOutline />
+              </div>
+            ))}
+          </div>
+          <span className={styles.fabricationRailBottom} />
+        </div>
+      </div>
+
+      <div className={styles.fabricationProgress} aria-hidden="true">
+        <span>{String(progress).padStart(3, "0")}</span>
+        <i style={{ transform: `scaleY(${progress / 100})` }} />
+      </div>
+    </div>
+  );
+}
+
+export default function DeviceLabLoader() {
+  const [progress, setProgress] = useState(0);
+  const [sceneReady, setSceneReady] = useState(false);
+  const [minimumElapsed, setMinimumElapsed] = useState(false);
+  const [exiting, setExiting] = useState(false);
+  const [loaderRemoved, setLoaderRemoved] = useState(false);
+
+  useEffect(() => {
+    const minimumTimer = window.setTimeout(() => setMinimumElapsed(true), 1350);
+    return () => window.clearTimeout(minimumTimer);
+  }, []);
+
+  useEffect(() => {
+    const startedAt = window.performance.now();
+    const progressTimer = window.setInterval(() => {
+      setProgress((current) => {
+        if (sceneReady && minimumElapsed) {
+          return Math.min(100, current + Math.max(1, Math.ceil((100 - current) * 0.22)));
+        }
+
+        const elapsed = window.performance.now() - startedAt;
+        const staged = Math.floor(92 * (1 - Math.exp(-elapsed / 720)));
+        return Math.max(current, Math.min(92, staged));
+      });
+    }, 45);
+
+    return () => window.clearInterval(progressTimer);
+  }, [minimumElapsed, sceneReady]);
+
+  useEffect(() => {
+    if (!sceneReady || progress < 100) return;
+    const exitTimer = window.setTimeout(() => setExiting(true), 180);
+    const removeTimer = window.setTimeout(() => setLoaderRemoved(true), 900);
+    return () => {
+      window.clearTimeout(exitTimer);
+      window.clearTimeout(removeTimer);
+    };
+  }, [progress, sceneReady]);
+
+  useEffect(() => {
+    if (loaderRemoved) return;
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = previousOverflow;
+    };
+  }, [loaderRemoved]);
+
+  return (
+    <>
+      <DeviceLab onReady={() => setSceneReady(true)} />
+      {!loaderRemoved && <FabricationLoader progress={progress} exiting={exiting} />}
+    </>
+  );
+}
diff --git a/app/device-lab/page.tsx b/app/device-lab/page.tsx
new file mode 100644
index 0000000..1501d06
--- /dev/null
+++ b/app/device-lab/page.tsx
@@ -0,0 +1,15 @@
+import type { Metadata } from "next";
+import DeviceLabLoader from "./DeviceLabLoader";
+
+export const metadata: Metadata = {
+  title: "Omi Wearable — Unofficial Interactive Concept",
+  description: "An unofficial interactive Three.js product-story concept for the Omi wearable.",
+  robots: {
+    index: false,
+    follow: false,
+  },
+};
+
+export default function DeviceLabPage() {
+  return <DeviceLabLoader />;
+}
diff --git a/components/device-lab/DeviceLab.tsx b/components/device-lab/DeviceLab.tsx
new file mode 100644
index 0000000..7356d8f
--- /dev/null
+++ b/components/device-lab/DeviceLab.tsx
@@ -0,0 +1,811 @@
+"use client";
+
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import { Canvas } from "@react-three/fiber";
+import {
+  AnimatePresence,
+  LayoutGroup,
+  motion,
+  useMotionValueEvent,
+  useReducedMotion,
+  useScroll,
+  useSpring,
+  useTransform,
+} from "framer-motion";
+import * as THREE from "three";
+import DeviceStage from "./DeviceStage";
+import { createDefaultLabSettings } from "./device-settings";
+import styles from "./device-lab.module.css";
+
+export interface DeviceLabProps {
+  onReady?: () => void;
+}
+
+export default function DeviceLab({ onReady }: DeviceLabProps) {
+  const reduceMotion = useReducedMotion() ?? false;
+  const [mobileOptimized, setMobileOptimized] = useState(false);
+  const readySignaled = useRef(false);
+  const settings = useMemo(createDefaultLabSettings, []);
+  const scrollTrack = useRef<HTMLElement>(null);
+  const { scrollYProgress } = useScroll({
+    target: scrollTrack,
+    offset: ["start start", "end end"],
+  });
+  // Keep the existing 100svh transitions, but absorb roughly one wheel notch
+  // at each composition before the next camera move begins.
+  const heldScrollProgress = useTransform(
+    scrollYProgress,
+    [0, 1 / 28, 1 / 3, 31 / 84, 2 / 3, 59 / 84, 1],
+    [0, 0, 1 / 3, 1 / 3, 2 / 3, 2 / 3, 1],
+  );
+  const cameraProgress = useSpring(heldScrollProgress, {
+    stiffness: 86,
+    damping: 24,
+    mass: 0.42,
+    restDelta: 0.0001,
+  });
+  const frameOneOpacity = useTransform(cameraProgress, [0, 0.25, 0.31], [1, 1, 0]);
+  const frameTwoOpacity = useTransform(
+    cameraProgress,
+    [0.18, 0.27, 0.47, 0.58],
+    [0, 1, 1, 0],
+  );
+  const frameTwoY = useTransform(cameraProgress, [0.18, 0.3, 0.56], [52, 0, -42]);
+  const frameTwoScale = useTransform(cameraProgress, [0.18, 0.3, 0.56], [0.97, 1, 0.985]);
+  const frameThreeOpacity = useTransform(
+    cameraProgress,
+    [0.47, 0.58, 0.74, 0.87],
+    [0, 1, 1, 0],
+  );
+  const frameThreeY = useTransform(cameraProgress, [0.47, 0.61, 0.86], [48, 0, -38]);
+  const frameThreeScale = useTransform(cameraProgress, [0.47, 0.61, 0.86], [0.975, 1, 0.99]);
+  const frameFourOpacity = useTransform(cameraProgress, [0.76, 0.88, 1], [0, 1, 1]);
+  const frameFourY = useTransform(cameraProgress, [0.76, 0.9, 1], [48, 0, 0]);
+  const letterOExit = useTransform(cameraProgress, [0.13, 0.255], [0, 520]);
+  const letterMExit = useTransform(cameraProgress, [0.145, 0.27], [0, 520]);
+  const letterIExit = useTransform(cameraProgress, [0.16, 0.285], [0, 520]);
+  const physicsRelease = useTransform(cameraProgress, [0.105, 0.205], [0, 1]);
+  const navProgressScale = useTransform(cameraProgress, [0, 1], [0.08, 1]);
+  const [isAwake, setIsAwake] = useState(false);
+  const [activeFrame, setActiveFrame] = useState(0);
+  const [filmOpen, setFilmOpen] = useState(false);
+  const [thoughtHintVisible, setThoughtHintVisible] = useState(false);
+  const [messageOpen, setMessageOpen] = useState(false);
+  const [messageConnected, setMessageConnected] = useState(false);
+  const [purchaseDetailsOpen, setPurchaseDetailsOpen] = useState(false);
+  const thoughtHideTimer = useRef<number | null>(null);
+
+  const signalReady = useCallback(() => {
+    if (readySignaled.current) return;
+    readySignaled.current = true;
+    window.requestAnimationFrame(() => {
+      window.requestAnimationFrame(() => onReady?.());
+    });
+  }, [onReady]);
+
+  useEffect(() => {
+    const query = window.matchMedia("(max-width: 820px), (pointer: coarse)");
+    const updateMobileMode = () => setMobileOptimized(query.matches);
+    updateMobileMode();
+    query.addEventListener("change", updateMobileMode);
+    return () => query.removeEventListener("change", updateMobileMode);
+  }, []);
+
+  useMotionValueEvent(cameraProgress, "change", (progress) => {
+    const nextFrame = Math.min(3, Math.max(0, Math.round(progress * 3)));
+    setActiveFrame((currentFrame) => currentFrame === nextFrame ? currentFrame : nextFrame);
+  });
+  const goToFrame = useCallback((frameIndex: number) => {
+    const track = scrollTrack.current;
+    if (!track) return;
+
+    const trackTop = track.getBoundingClientRect().top + window.scrollY;
+    const scrollableDistance = Math.max(0, track.offsetHeight - window.innerHeight);
+    window.scrollTo({
+      top: trackTop + scrollableDistance * (frameIndex / 3),
+      behavior: reduceMotion ? "auto" : "smooth",
+    });
+  }, [reduceMotion]);
+  const clearThoughtHide = useCallback(() => {
+    if (thoughtHideTimer.current === null) return;
+    window.clearTimeout(thoughtHideTimer.current);
+    thoughtHideTimer.current = null;
+  }, []);
+  const scheduleThoughtHide = useCallback((delay = 900) => {
+    clearThoughtHide();
+    thoughtHideTimer.current = window.setTimeout(() => {
+      setThoughtHintVisible(false);
+      thoughtHideTimer.current = null;
+    }, delay);
+  }, [clearThoughtHide]);
+  const openOmiMessage = useCallback(() => {
+    if (activeFrame !== 1) return;
+    clearThoughtHide();
+    setThoughtHintVisible(false);
+    setMessageConnected(false);
+    setMessageOpen(true);
+  }, [activeFrame, clearThoughtHide]);
+
+  useEffect(() => {
+    if (activeFrame !== 1) {
+      clearThoughtHide();
+      setThoughtHintVisible(false);
+      setMessageOpen(false);
+      setMessageConnected(false);
+      setFilmOpen(false);
+      return;
+    }
+
+    if (isAwake) {
+      clearThoughtHide();
+      setThoughtHintVisible(true);
+    } else if (!messageOpen) {
+      scheduleThoughtHide();
+    }
+  }, [activeFrame, clearThoughtHide, isAwake, messageOpen, scheduleThoughtHide]);
+
+  useEffect(() => {
+    if (activeFrame !== 3) setPurchaseDetailsOpen(false);
+  }, [activeFrame]);
+
+  useEffect(() => () => clearThoughtHide(), [clearThoughtHide]);
+
+  useEffect(() => {
+    if (!filmOpen) return;
+
+    const previousOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const closeOnEscape = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setFilmOpen(false);
+    };
+    window.addEventListener("keydown", closeOnEscape);
+    return () => {
+      document.body.style.overflow = previousOverflow;
+      window.removeEventListener("keydown", closeOnEscape);
+    };
+  }, [filmOpen]);
+  const navFrames = ["Device", "Intelligence", "Memory", "Get Omi"];
+  const wordmarkLetters = [
+    { character: "o", x: 12, length: 304, exitY: letterOExit },
+    { character: "m", x: 326, length: 500, exitY: letterMExit },
+    { character: "i", x: 848, length: 138, exitY: letterIExit },
+  ];
+
+  return (
+    <main ref={scrollTrack} className={styles.lab}>
+      <section className={styles.productSection} aria-labelledby="wearable-heading">
+        <div className={styles.halo} aria-hidden="true" />
+        <div className={styles.haze} aria-hidden="true" />
+
+        <header className={styles.siteNav}>
+          <a className={styles.navBrand} href="/device-lab" aria-label="Omi home">
+            <img
+              className={styles.navLogo}
+              src="/images/omi-logo.png"
+              width="118"
+              height="52"
+              alt=""
+            />
+            <span className={`${styles.navSignal} ${isAwake ? styles.navSignalAwake : ""}`}>
+              <span className={styles.navSignalDot} aria-hidden="true" />
+              {isAwake ? "awake" : "personal intelligence"}
+            </span>
+          </a>
+
+          <nav className={styles.sceneNav} aria-label="Explore the Omi story">
+            {navFrames.map((label, frameIndex) => (
+              <button
+                key={label}
+                className={`${styles.sceneLink} ${activeFrame === frameIndex ? styles.sceneLinkActive : ""}`}
+                type="button"
+                onClick={() => goToFrame(frameIndex)}
+                aria-current={activeFrame === frameIndex ? "step" : undefined}
+                aria-label={`Go to scene ${frameIndex + 1}: ${label}`}
+              >
+                <span className={styles.sceneIndex}>0{frameIndex + 1}</span>
+                <span className={styles.sceneName}>{label}</span>
+              </button>
+            ))}
+          </nav>
+
+          <a className={styles.navCta} href="https://www.omi.me/cart/53310207000868:1">
+            <span>Get Omi</span>
+            <svg viewBox="0 0 18 18" aria-hidden="true">
+              <path d="M4 9h9M9.5 4.5 14 9l-4.5 4.5" />
+            </svg>
+          </a>
+
+          <motion.span
+            className={styles.navProgress}
+            style={{ scaleX: navProgressScale }}
+            aria-hidden="true"
+          />
+        </header>
+
+        <motion.div
+          className={styles.frameOneUi}
+          style={{ opacity: frameOneOpacity }}
+        >
+          <h1 id="wearable-heading" className={styles.wordmark}>
+            <span className={styles.srOnly}>Omi</span>
+            <svg
+              className={styles.wordmarkSvg}
+              viewBox="0 0 1000 500"
+              preserveAspectRatio="xMidYMax meet"
+              aria-hidden="true"
+              focusable="false"
+            >
+              {wordmarkLetters.map(({ character, x, length, exitY }, index) => (
+                <motion.g
+                  key={character}
+                  initial={{ y: reduceMotion ? 0 : 520 }}
+                  animate={{ y: 0 }}
+                  transition={{
+                    duration: reduceMotion ? 0 : 0.78,
+                    delay: reduceMotion ? 0 : 0.08 + index * 0.055,
+                    ease: [0.16, 1, 0.3, 1],
+                  }}
+                >
+                  <motion.text
+                    className={styles.wordmarkLetter}
+                    x={x}
+                    y="472"
+                    textLength={length}
+                    lengthAdjust="spacingAndGlyphs"
+                    style={{ y: reduceMotion ? 0 : exitY }}
+                  >
+                    {character}
+                  </motion.text>
+                </motion.g>
+              ))}
+            </svg>
+          </h1>
+        </motion.div>
+
+        <LayoutGroup id="omi-frame-two-interactions">
+          <motion.div
+            className={styles.frameTwoUi}
+            style={{
+              opacity: frameTwoOpacity,
+              y: reduceMotion ? 0 : frameTwoY,
+              scale: reduceMotion ? 1 : frameTwoScale,
+            }}
+            aria-hidden={activeFrame !== 1}
+          >
+            <div className={styles.frameTwoCopy}>
+              <motion.span
+                className={styles.frameTwoEyebrow}
+                animate={{
+                  opacity: activeFrame === 1 ? 1 : 0,
+                  y: activeFrame === 1 || reduceMotion ? 0 : 14,
+                  filter: activeFrame === 1 || reduceMotion ? "blur(0px)" : "blur(8px)",
+                }}
+                transition={{
+                  duration: reduceMotion ? 0 : 0.58,
+                  delay: activeFrame === 1 && !reduceMotion ? 0.04 : 0,
+                  ease: [0.16, 1, 0.3, 1],
+                }}
+              >
+                How omi works
+              </motion.span>
+              <motion.h2
+                animate={{
+                  opacity: activeFrame === 1 ? 1 : 0,
+                  y: activeFrame === 1 || reduceMotion ? 0 : 22,
+                  filter: activeFrame === 1 || reduceMotion ? "blur(0px)" : "blur(10px)",
+                }}
+                transition={{
+                  duration: reduceMotion ? 0 : 0.68,
+                  delay: activeFrame === 1 && !reduceMotion ? 0.13 : 0,
+                  ease: [0.16, 1, 0.3, 1],
+                }}
+              >
+                Ask. Learn. Do.
+              </motion.h2>
+              <motion.p
+                animate={{
+                  opacity: activeFrame === 1 ? 1 : 0,
+                  y: activeFrame === 1 || reduceMotion ? 0 : 18,
+                  filter: activeFrame === 1 || reduceMotion ? "blur(0px)" : "blur(8px)",
+                }}
+                transition={{
+                  duration: reduceMotion ? 0 : 0.64,
+                  delay: activeFrame === 1 && !reduceMotion ? 0.22 : 0,
+                  ease: [0.16, 1, 0.3, 1],
+                }}
+              >
+                Share your ideas or ask anything that&apos;s on your mind. Omi will
+                answer, knowing everything about you.
+              </motion.p>
+            </div>
+
+            <motion.div
+              className={styles.frameTwoFilmDock}
+              animate={{
+                opacity: activeFrame === 1 ? 1 : 0,
+                y: activeFrame === 1 || reduceMotion ? 0 : 28,
+                clipPath: activeFrame === 1 || reduceMotion
+                  ? "inset(0% 0% 0% 0%)"
+                  : "inset(16% 0% 0% 0%)",
+              }}
+              transition={{
+                duration: reduceMotion ? 0 : 0.76,
+                delay: activeFrame === 1 && !reduceMotion ? 0.31 : 0,
+                ease: [0.16, 1, 0.3, 1],
+              }}
+            >
+              {!filmOpen && (
+                <motion.div
+                  layoutId="omi-launch-film"
+                  className={styles.launchFilm}
+                  transition={{ layout: { duration: reduceMotion ? 0 : 0.72, ease: [0.16, 1, 0.3, 1] } }}
+                >
+                  <motion.img
+                    className={styles.launchFilmPoster}
+                    src="https://i.ytimg.com/vi/MZLzvN3vmtI/maxresdefault.jpg"
+                    alt=""
+                    animate={{
+                      opacity: activeFrame === 1 ? 1 : 0,
+                      scale: activeFrame === 1 || reduceMotion ? 1 : 1.055,
+                    }}
+                    transition={{
+                      duration: reduceMotion ? 0 : 0.86,
+                      delay: activeFrame === 1 && !reduceMotion ? 0.34 : 0,
+                      ease: [0.16, 1, 0.3, 1],
+                    }}
+                  />
+                  <div className={styles.launchFilmShade} aria-hidden="true" />
+                  <motion.button
+                    className={styles.launchFilmOpen}
+                    type="button"
+                    onClick={() => setFilmOpen(true)}
+                    aria-label="Watch the Omi launch film in a larger player"
+                    animate={{
+                      opacity: activeFrame === 1 ? 1 : 0,
+                      y: activeFrame === 1 || reduceMotion ? 0 : 13,
+                    }}
+                    transition={{
+                      duration: reduceMotion ? 0 : 0.52,
+                      delay: activeFrame === 1 && !reduceMotion ? 0.54 : 0,
+                      ease: [0.16, 1, 0.3, 1],
+                    }}
+                  >
+                    <span className={styles.launchFilmPlay} aria-hidden="true">
+                      <svg viewBox="0 0 28 28"><path d="m11 8 8 6-8 6Z" /></svg>
+                    </span>
+                    <span>Watch launch film</span>
+                  </motion.button>
+                  <motion.span
+                    className={styles.launchFilmMeta}
+                    animate={{
+                      opacity: activeFrame === 1 ? 1 : 0,
+                      y: activeFrame === 1 || reduceMotion ? 0 : -9,
+                    }}
+                    transition={{
+                      duration: reduceMotion ? 0 : 0.48,
+                      delay: activeFrame === 1 && !reduceMotion ? 0.45 : 0,
+                      ease: [0.16, 1, 0.3, 1],
+                    }}
+                  >
+                    Official film
+                  </motion.span>
+                </motion.div>
+              )}
+            </motion.div>
+          </motion.div>
+
+          <AnimatePresence>
+            {filmOpen && (
+              <motion.div
+                className={styles.filmModal}
+                role="dialog"
+                aria-modal="true"
+                aria-label="Omi launch film"
+                initial={{ opacity: 0 }}
+                animate={{ opacity: 1 }}
+                exit={{ opacity: 0 }}
+                transition={{ duration: reduceMotion ? 0 : 0.34 }}
+                onMouseDown={() => setFilmOpen(false)}
+              >
+                <motion.div
+                  layoutId="omi-launch-film"
+                  className={styles.filmModalPanel}
+                  transition={{ layout: { duration: reduceMotion ? 0 : 0.72, ease: [0.16, 1, 0.3, 1] } }}
+                  onMouseDown={(event) => event.stopPropagation()}
+                >
+                  <iframe
+                    className={styles.filmModalFrame}
+                    src="https://www.youtube-nocookie.com/embed/MZLzvN3vmtI?autoplay=1&mute=0&controls=1&playsinline=1&rel=0&modestbranding=1&cc_load_policy=0&iv_load_policy=3"
+                    title="Omi launch video"
+                    allow="autoplay; encrypted-media; picture-in-picture; fullscreen"
+                    allowFullScreen
+                  />
+                  <button
+                    className={styles.filmModalClose}
+                    type="button"
+                    onClick={() => setFilmOpen(false)}
+                    aria-label="Close launch film"
+                  >
+                    <span>Close</span>
+                    <svg viewBox="0 0 18 18" aria-hidden="true">
+                      <path d="m4.5 4.5 9 9m0-9-9 9" />
+                    </svg>
+                  </button>
+                </motion.div>
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          <AnimatePresence mode="wait">
+            {activeFrame === 1 && thoughtHintVisible && !messageOpen && (
+              <motion.button
+                className={styles.thoughtPrompt}
+                type="button"
+                initial={{ opacity: 0, scale: reduceMotion ? 1 : 0.92, x: reduceMotion ? 0 : -14 }}
+                animate={{ opacity: 1, scale: 1, x: 0 }}
+                exit={{ opacity: 0, scale: reduceMotion ? 1 : 0.96, x: reduceMotion ? 0 : 10 }}
+                transition={{ duration: reduceMotion ? 0 : 0.48, ease: [0.16, 1, 0.3, 1] }}
+                onPointerEnter={clearThoughtHide}
+                onPointerLeave={() => {
+                  if (!isAwake) scheduleThoughtHide(650);
+                }}
+                onClick={openOmiMessage}
+              >
+                <span className={styles.thoughtPromptSignal} aria-hidden="true" />
+                <span>Omi noticed a pattern</span>
+                <svg viewBox="0 0 18 18" aria-hidden="true">
+                  <path d="M4 9h9m-3.5-3.5L13 9l-3.5 3.5" />
+                </svg>
+              </motion.button>
+            )}
+
+            {activeFrame === 1 && messageOpen && (
+              <motion.aside
+                className={styles.thoughtMessage}
+                aria-live="polite"
+                initial={{
+                  opacity: 0,
+                  y: reduceMotion ? 0 : 24,
+                  scale: reduceMotion ? 1 : 0.97,
+                  clipPath: reduceMotion ? "inset(0% 0% 0% 0%)" : "inset(0% 0% 100% 0%)",
+                }}
+                animate={{ opacity: 1, y: 0, scale: 1, clipPath: "inset(0% 0% 0% 0%)" }}
+                exit={{
+                  opacity: 0,
+                  y: reduceMotion ? 0 : 12,
+                  scale: reduceMotion ? 1 : 0.98,
+                  clipPath: reduceMotion ? "inset(0% 0% 0% 0%)" : "inset(0% 0% 100% 0%)",
+                }}
+                transition={{ duration: reduceMotion ? 0 : 0.56, ease: [0.16, 1, 0.3, 1] }}
+              >
+                <div className={styles.thoughtMessageTopline}>
+                  <span><i aria-hidden="true" /> omi · now</span>
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setMessageOpen(false);
+                      setThoughtHintVisible(false);
+                    }}
+                    aria-label="Close Omi message"
+                  >
+                    <svg viewBox="0 0 18 18" aria-hidden="true"><path d="m4.5 4.5 9 9m0-9-9 9" /></svg>
+                  </button>
+                </div>
+                <AnimatePresence mode="wait" initial={false}>
+                  {!messageConnected ? (
+                    <motion.div
+                      key="pattern"
+                      className={styles.thoughtMessageBody}
+                      initial={{ opacity: 0, y: reduceMotion ? 0 : 14 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      exit={{ opacity: 0, y: reduceMotion ? 0 : -10 }}
+                      transition={{ duration: reduceMotion ? 0 : 0.46, ease: [0.16, 1, 0.3, 1] }}
+                    >
+                      <h3>You keep coming back to the same idea.</h3>
+                      <p>I found the three moments you mentioned it and saved the clearest one. Want me to connect them?</p>
+                      <button type="button" onClick={() => setMessageConnected(true)}>
+                        Connect the dots
+                        <svg viewBox="0 0 18 18" aria-hidden="true"><path d="M4 9h9m-3.5-3.5L13 9l-3.5 3.5" /></svg>
+                      </button>
+                    </motion.div>
+                  ) : (
+                    <motion.div
+                      key="connected"
+                      className={styles.thoughtMessageBody}
+                      initial={{ opacity: 0, y: reduceMotion ? 0 : 14 }}
+                      animate={{ opacity: 1, y: 0 }}
+                      transition={{ duration: reduceMotion ? 0 : 0.46, ease: [0.16, 1, 0.3, 1] }}
+                    >
+                      <h3>Already did.</h3>
+                      <p>Today&apos;s lecture, Tuesday&apos;s voice note, and the thought you had on the walk home are now one memory.</p>
+                      <span className={styles.thoughtMessageDone}>
+                        <svg viewBox="0 0 18 18" aria-hidden="true"><path d="m4 9.5 3 3 7-7" /></svg>
+                        Thread ready
+                      </span>
+                    </motion.div>
+                  )}
+                </AnimatePresence>
+              </motion.aside>
+            )}
+          </AnimatePresence>
+        </LayoutGroup>
+
+        <motion.div
+          className={styles.frameThreeUi}
+          style={{
+            opacity: frameThreeOpacity,
+            y: reduceMotion ? 0 : frameThreeY,
+            scale: reduceMotion ? 1 : frameThreeScale,
+          }}
+          aria-hidden={activeFrame !== 2}
+        >
+          <div className={styles.frameThreeCopy}>
+            <motion.span
+              className={styles.storyEyebrow}
+              animate={{
+                opacity: activeFrame === 2 ? 1 : 0,
+                y: activeFrame === 2 || reduceMotion ? 0 : 14,
+                filter: activeFrame === 2 || reduceMotion ? "blur(0px)" : "blur(8px)",
+              }}
+              transition={{
+                duration: reduceMotion ? 0 : 0.56,
+                delay: activeFrame === 2 && !reduceMotion ? 0.04 : 0,
+                ease: [0.16, 1, 0.3, 1],
+              }}
+            >
+              A memory you can ask
+            </motion.span>
+            <motion.h2
+              animate={{
+                opacity: activeFrame === 2 ? 1 : 0,
+                y: activeFrame === 2 || reduceMotion ? 0 : 22,
+                filter: activeFrame === 2 || reduceMotion ? "blur(0px)" : "blur(10px)",
+              }}
+              transition={{
+                duration: reduceMotion ? 0 : 0.68,
+                delay: activeFrame === 2 && !reduceMotion ? 0.12 : 0,
+                ease: [0.16, 1, 0.3, 1],
+              }}
+            >
+              Recall anything. Instantly.
+            </motion.h2>
+            <motion.p
+              animate={{
+                opacity: activeFrame === 2 ? 1 : 0,
+                y: activeFrame === 2 || reduceMotion ? 0 : 18,
+                filter: activeFrame === 2 || reduceMotion ? "blur(0px)" : "blur(8px)",
+              }}
+              transition={{
+                duration: reduceMotion ? 0 : 0.64,
+                delay: activeFrame === 2 && !reduceMotion ? 0.21 : 0,
+                ease: [0.16, 1, 0.3, 1],
+              }}
+            >
+              Omi turns the conversations around you into transcripts, summaries,
+              tasks, and searchable memories—ready whenever you need them.
+            </motion.p>
+          </div>
+
+          <div className={styles.memoryProof} aria-label="Examples of what Omi creates">
+            {[
+              { label: "Listening", value: "Conversation captured", status: "Live" },
+              { label: "Understanding", value: "Summary ready", status: "08 sec" },
+              { label: "Doing", value: "3 actions found", status: "Ready" },
+              { label: "Recall", value: "What did we decide?", status: "Ask Omi" },
+            ].map((item, index) => (
+              <motion.div
+                className={styles.memoryProofCard}
+                key={item.label}
+                animate={{
+                  opacity: activeFrame === 2 ? 1 : 0,
+                  x: activeFrame === 2 || reduceMotion ? 0 : -24,
+                  clipPath: activeFrame === 2 || reduceMotion
+                    ? "inset(0% 0% 0% 0%)"
+                    : "inset(0% 100% 0% 0%)",
+                }}
+                transition={{
+                  duration: reduceMotion ? 0 : 0.62,
+                  delay: activeFrame === 2 && !reduceMotion ? 0.32 + index * 0.075 : 0,
+                  ease: [0.16, 1, 0.3, 1],
+                }}
+              >
+                <span className={styles.memoryProofIndex}>0{index + 1}</span>
+                <span className={styles.memoryProofText}>
+                  <small>{item.label}</small>
+                  <strong>{item.value}</strong>
+                </span>
+                <span className={styles.memoryProofStatus}>{item.status}</span>
+              </motion.div>
+            ))}
+          </div>
+        </motion.div>
+
+        <motion.div
+          className={styles.frameFourUi}
+          style={{
+            opacity: frameFourOpacity,
+            y: reduceMotion ? 0 : frameFourY,
+          }}
+          aria-hidden={activeFrame !== 3}
+        >
+          <div className={styles.frameFourCopy}>
+            <motion.span
+              className={styles.storyEyebrow}
+              animate={{
+                opacity: activeFrame === 3 ? 1 : 0,
+                y: activeFrame === 3 || reduceMotion ? 0 : 14,
+              }}
+              transition={{
+                duration: reduceMotion ? 0 : 0.54,
+                delay: activeFrame === 3 && !reduceMotion ? 0.04 : 0,
+                ease: [0.16, 1, 0.3, 1],
+              }}
+            >
+              Your Omi
+            </motion.span>
+            <motion.h2
+              animate={{
+                opacity: activeFrame === 3 ? 1 : 0,
+                y: activeFrame === 3 || reduceMotion ? 0 : 24,
+                filter: activeFrame === 3 || reduceMotion ? "blur(0px)" : "blur(10px)",
+              }}
+              transition={{
+                duration: reduceMotion ? 0 : 0.7,
+                delay: activeFrame === 3 && !reduceMotion ? 0.13 : 0,
+                ease: [0.16, 1, 0.3, 1],
+              }}
+            >
+              Remember more. Miss less.
+            </motion.h2>
+            <motion.p
+              animate={{
+                opacity: activeFrame === 3 ? 1 : 0,
+                y: activeFrame === 3 || reduceMotion ? 0 : 18,
+              }}
+              transition={{
+                duration: reduceMotion ? 0 : 0.64,
+                delay: activeFrame === 3 && !reduceMotion ? 0.23 : 0,
+                ease: [0.16, 1, 0.3, 1],
+              }}
+            >
+              One small device for the conversations, ideas, and decisions that
+              shape your day. Wear it, connect the app, and let Omi keep the details close.
+            </motion.p>
+
+            <motion.div
+              className={styles.purchaseActions}
+              animate={{
+                opacity: activeFrame === 3 ? 1 : 0,
+                y: activeFrame === 3 || reduceMotion ? 0 : 20,
+              }}
+              transition={{
+                duration: reduceMotion ? 0 : 0.62,
+                delay: activeFrame === 3 && !reduceMotion ? 0.33 : 0,
+                ease: [0.16, 1, 0.3, 1],
+              }}
+            >
+              <a
+                className={styles.purchasePrimary}
+                href="https://www.omi.me/cart/53310207000868:1"
+                tabIndex={activeFrame === 3 ? 0 : -1}
+              >
+                <span>Get Omi</span>
+                <svg viewBox="0 0 18 18" aria-hidden="true">
+                  <path d="M4 9h9M9.5 4.5 14 9l-4.5 4.5" />
+                </svg>
+              </a>
+              <button
+                className={styles.purchaseSecondary}
+                type="button"
+                tabIndex={activeFrame === 3 ? 0 : -1}
+                aria-expanded={purchaseDetailsOpen}
+                onClick={() => setPurchaseDetailsOpen((open) => !open)}
+              >
+                {purchaseDetailsOpen ? "Hide what’s included" : "See what’s included"}
+                <svg viewBox="0 0 18 18" aria-hidden="true">
+                  <path d={purchaseDetailsOpen ? "M4 11.5 9 6.5l5 5" : "m4 6.5 5 5 5-5"} />
+                </svg>
+              </button>
+            </motion.div>
+
+            <AnimatePresence initial={false}>
+              {purchaseDetailsOpen && activeFrame === 3 && (
+                <motion.div
+                  className={styles.purchaseDetails}
+                  initial={{ opacity: 0, height: 0, y: reduceMotion ? 0 : -8 }}
+                  animate={{ opacity: 1, height: "auto", y: 0 }}
+                  exit={{ opacity: 0, height: 0, y: reduceMotion ? 0 : -8 }}
+                  transition={{ duration: reduceMotion ? 0 : 0.42, ease: [0.16, 1, 0.3, 1] }}
+                >
+                  Omi device · protective case · lanyard · magnetic USB-C charger
+                </motion.div>
+              )}
+            </AnimatePresence>
+          </div>
+
+          <motion.figure
+            className={styles.frameFourImage}
+            animate={{
+              opacity: activeFrame === 3 ? 1 : 0,
+              x: activeFrame === 3 || reduceMotion ? 0 : 42,
+              clipPath: activeFrame === 3 || reduceMotion
+                ? "inset(0% 0% 0% 0%)"
+                : "inset(0% 0% 0% 100%)",
+            }}
+            transition={{
+              duration: reduceMotion ? 0 : 0.88,
+              delay: activeFrame === 3 && !reduceMotion ? 0.27 : 0,
+              ease: [0.16, 1, 0.3, 1],
+            }}
+          >
+            <motion.img
+              src="/images/omi-office-wearer.png"
+              alt="A woman wearing Omi in an office"
+              animate={{ scale: activeFrame === 3 || reduceMotion ? 1 : 1.065 }}
+              transition={{
+                duration: reduceMotion ? 0 : 1.15,
+                delay: activeFrame === 3 && !reduceMotion ? 0.27 : 0,
+                ease: [0.16, 1, 0.3, 1],
+              }}
+            />
+            <span aria-hidden="true" />
+          </motion.figure>
+
+          <motion.div
+            className={styles.purchaseConfidence}
+            animate={{
+              opacity: activeFrame === 3 ? 1 : 0,
+              y: activeFrame === 3 || reduceMotion ? 0 : 18,
+              clipPath: activeFrame === 3 || reduceMotion
+                ? "inset(0% 0% 0% 0%)"
+                : "inset(0% 100% 0% 0%)",
+            }}
+            transition={{
+              duration: reduceMotion ? 0 : 0.74,
+              delay: activeFrame === 3 && !reduceMotion ? 0.48 : 0,
+              ease: [0.16, 1, 0.3, 1],
+            }}
+          >
+            <span><strong>10–14 hr</strong> battery</span>
+            <span><strong>Offline</strong> recording</span>
+            <span><strong>Free plan</strong> included</span>
+          </motion.div>
+        </motion.div>
+
+        <Canvas
+          className={styles.canvas}
+          dpr={mobileOptimized ? [0.7, 0.9] : [0.85, 1]}
+          gl={{
+            antialias: false,
+            alpha: false,
+            powerPreference: "high-performance",
+            failIfMajorPerformanceCaveat: false,
+            stencil: false,
+            toneMapping: THREE.ACESFilmicToneMapping,
+            toneMappingExposure: settings.stage.exposure,
+          }}
+          aria-label="Interactive Omi pendant. Hover to wake its light and set it gently swinging."
+          onCreated={signalReady}
+        >
+          <DeviceStage
+            reduceMotion={reduceMotion}
+            mobileOptimized={mobileOptimized}
+            settings={settings}
+            onWakeChange={setIsAwake}
+            onActivate={openOmiMessage}
+            physicsRelease={physicsRelease}
+            scrollProgress={cameraProgress}
+            activeFrame={activeFrame}
+          />
+        </Canvas>
+
+      </section>
+    </main>
+  );
+}
diff --git a/components/device-lab/DeviceStage.tsx b/components/device-lab/DeviceStage.tsx
new file mode 100644
index 0000000..f8c9929
--- /dev/null
+++ b/components/device-lab/DeviceStage.tsx
@@ -0,0 +1,983 @@
+"use client";
+
+import {
+  Component,
+  Suspense,
+  type ErrorInfo,
+  type RefObject,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  Canvas,
+  type ThreeEvent,
+  useFrame,
+  useThree,
+} from "@react-three/fiber";
+import {
+  Environment,
+  Lightformer,
+  PerspectiveCamera,
+  RoundedBox,
+  Sparkles,
+} from "@react-three/drei";
+import {
+  BallCollider,
+  CuboidCollider,
+  Physics,
+  RigidBody,
+  type RapierRigidBody,
+  useRopeJoint,
+  useSphericalJoint,
+} from "@react-three/rapier";
+import {
+  Bloom,
+  BrightnessContrast,
+  ChromaticAberration,
+  DepthOfField,
+  EffectComposer,
+  HueSaturation,
+  Noise,
+  Vignette,
+} from "@react-three/postprocessing";
+import type { MotionValue } from "framer-motion";
+import { MeshLineGeometry, MeshLineMaterial } from "meshline";
+import * as THREE from "three";
+import type { CameraPoseSettings, LabSettings } from "./device-settings";
+import { getUnifiedShellGeometry } from "./unified-shell";
+
+import {
+  GUNMETAL_CORE_PROFILE,
+  PRODUCT_YAW,
+  createGrainTexture,
+  updateGrainTexture,
+} from "./device-geometry";
+import {
+  type DeviceProps,
+  PendantRig,
+  PhysicsBoundary,
+  PostProcessingBoundary,
+  StaticPendantFallback,
+} from "./PendantScene";
+
+function ArchitecturalBlocks({
+  pendantX,
+  platformTop,
+  backdropTop,
+  sideTop,
+  settings,
+}: {
+  pendantX: number;
+  platformTop: number;
+  backdropTop: number;
+  sideTop: number;
+  settings: LabSettings;
+}) {
+  const platformHeight = 9;
+  const backdropHeight = 10.5;
+  const sideHeight = 9.5;
+  const grainTexture = useMemo(createGrainTexture, []);
+
+  useEffect(() => {
+    updateGrainTexture(
+      grainTexture,
+      settings.architecture.textureRepeat,
+      settings.architecture.textureContrast,
+      settings.architecture.textureSeed,
+    );
+  }, [
+    grainTexture,
+    settings.architecture.textureContrast,
+    settings.architecture.textureRepeat,
+    settings.architecture.textureSeed,
+  ]);
+
+  useEffect(() => () => grainTexture.dispose(), [grainTexture]);
+
+  const bumpMap = settings.architecture.textureEnabled
+    ? grainTexture
+    : undefined;
+  const platform = settings.architecture.platform;
+  const backdrop = settings.architecture.backdrop;
+  const cornerBlockRotation: [number, number, number] = [0.18, -0.35, -0.25];
+  const frame4Anchor = new THREE.PerspectiveCamera();
+  frame4Anchor.position.set(
+    settings.camera.frame4.position.x,
+    settings.camera.frame4.position.y,
+    settings.camera.frame4.position.z,
+  );
+  frame4Anchor.lookAt(
+    settings.camera.frame4.target.x,
+    settings.camera.frame4.target.y,
+    settings.camera.frame4.target.z,
+  );
+  frame4Anchor.updateMatrixWorld();
+
+  return (
+    <>
+      <RoundedBox
+        args={[3.8, platformHeight, 2.15]}
+        radius={0.06}
+        smoothness={3}
+        position={[
+          pendantX,
+          platformTop - platformHeight / 2,
+          -0.42,
+        ]}
+        rotation={[0, PRODUCT_YAW, 0]}
+        castShadow
+        receiveShadow
+      >
+        <meshPhysicalMaterial
+          color={platform.color}
+          metalness={platform.metalness}
+          roughness={platform.roughness}
+          clearcoat={platform.clearcoat}
+          clearcoatRoughness={platform.clearcoatRoughness}
+          bumpMap={bumpMap}
+          bumpScale={platform.bumpScale}
+          envMapIntensity={platform.envMapIntensity}
+          ior={1.05}
+          specularIntensity={0.12}
+        />
+      </RoundedBox>
+
+      <RoundedBox
+        args={[4.6, backdropHeight, 1.35]}
+        radius={0.075}
+        smoothness={3}
+        position={[
+          pendantX + 1.1,
+          backdropTop - backdropHeight / 2,
+          -2.5,
+        ]}
+        rotation={[0, PRODUCT_YAW, 0]}
+        castShadow
+        receiveShadow
+      >
+        <meshPhysicalMaterial
+          color={backdrop.color}
+          metalness={backdrop.metalness}
+          roughness={backdrop.roughness}
+          clearcoat={backdrop.clearcoat}
+          clearcoatRoughness={backdrop.clearcoatRoughness}
+          bumpMap={bumpMap}
+          bumpScale={backdrop.bumpScale}
+          envMapIntensity={backdrop.envMapIntensity}
+          ior={1.02}
+          specularIntensity={0.08}
+        />
+      </RoundedBox>
+
+      <RoundedBox
+        args={[2.7, sideHeight, 1.45]}
+        radius={0.06}
+        smoothness={3}
+        position={[
+          pendantX + 3.25,
+          sideTop - sideHeight / 2,
+          -1.48,
+        ]}
+        rotation={[0, PRODUCT_YAW, 0]}
+        castShadow
+        receiveShadow
+      >
+        <meshPhysicalMaterial
+          color={platform.color}
+          metalness={platform.metalness}
+          roughness={platform.roughness}
+          clearcoat={platform.clearcoat}
+          clearcoatRoughness={platform.clearcoatRoughness}
+          bumpMap={bumpMap}
+          bumpScale={platform.bumpScale}
+          envMapIntensity={platform.envMapIntensity}
+          ior={1.05}
+          specularIntensity={0.12}
+        />
+      </RoundedBox>
+
+      <group
+        position={frame4Anchor.position.toArray()}
+        quaternion={frame4Anchor.quaternion}
+      >
+        <pointLight
+          position={[-2.4, -2.2, -7]}
+          color={settings.stage.fillColor}
+          intensity={35}
+          distance={9}
+          decay={2}
+        />
+        <RoundedBox
+          args={[3.8, platformHeight, 2.15]}
+          radius={0.06}
+          smoothness={3}
+          position={[-4.65, -5.8, -12.2]}
+          rotation={cornerBlockRotation}
+        >
+          <meshPhysicalMaterial
+            color={platform.color}
+            metalness={platform.metalness}
+            roughness={platform.roughness}
+            clearcoat={platform.clearcoat}
+            clearcoatRoughness={platform.clearcoatRoughness}
+            bumpMap={bumpMap}
+            bumpScale={platform.bumpScale}
+            envMapIntensity={platform.envMapIntensity}
+            ior={1.05}
+            specularIntensity={0.12}
+          />
+        </RoundedBox>
+
+        <RoundedBox
+          args={[2.7, sideHeight, 1.45]}
+          radius={0.06}
+          smoothness={3}
+          position={[-0.9, -6.4, -10.6]}
+          rotation={cornerBlockRotation}
+        >
+          <meshPhysicalMaterial
+            color={platform.color}
+            metalness={platform.metalness}
+            roughness={platform.roughness}
+            clearcoat={platform.clearcoat}
+            clearcoatRoughness={platform.clearcoatRoughness}
+            bumpMap={bumpMap}
+            bumpScale={platform.bumpScale}
+            envMapIntensity={platform.envMapIntensity}
+            ior={1.05}
+            specularIntensity={0.12}
+          />
+        </RoundedBox>
+      </group>
+    </>
+  );
+}
+
+function Atmosphere({ mobileOptimized, reduceMotion, positionX, settings }: {
+  mobileOptimized: boolean;
+  reduceMotion: boolean;
+  positionX: number;
+  settings: LabSettings;
+}) {
+  const drift = useRef<THREE.Group>(null);
+
+  useFrame((state, delta) => {
+    if (!drift.current || reduceMotion) return;
+    drift.current.rotation.y += delta * 0.012;
+    drift.current.position.y = Math.sin(state.clock.elapsedTime * 0.12) * 0.08;
+  });
+
+  if (!settings.particles.enabled) return null;
+
+  const dust = settings.particles.dust;
+  const glow = settings.particles.glow;
+
+  return (
+    <group ref={drift} position={[positionX, 0, -0.8]}>
+      <Sparkles
+        key={`dust-${dust.count}`}
+        count={reduceMotion
+          ? Math.max(1, Math.round(dust.count * 0.4))
+          : mobileOptimized
+            ? Math.max(1, Math.round(dust.count * 0.55))
+            : dust.count}
+        scale={[dust.spreadX, dust.spreadY, dust.spreadZ]}
+        size={dust.size}
+        speed={reduceMotion ? 0 : dust.speed}
+        opacity={dust.opacity}
+        color={dust.color}
+        noise={dust.noise}
+      />
+      <Sparkles
+        key={`glow-${glow.count}`}
+        count={reduceMotion
+          ? Math.max(1, Math.round(glow.count * 0.4))
+          : mobileOptimized
+            ? Math.max(1, Math.round(glow.count * 0.55))
+            : glow.count}
+        scale={[glow.spreadX, glow.spreadY, glow.spreadZ]}
+        size={glow.size}
+        speed={reduceMotion ? 0 : glow.speed}
+        opacity={glow.opacity}
+        color={glow.color}
+        noise={glow.noise}
+      />
+    </group>
+  );
+}
+
+const CONVEYOR_ITEM_COUNT = 10;
+const CONVEYOR_SPAN = 19;
+const CONVEYOR_ANGLE = -0.22;
+
+function PendantConveyor({
+  reduceMotion,
+  settings,
+  progress,
+}: {
+  reduceMotion: boolean;
+  settings: LabSettings;
+  progress: MotionValue<number>;
+}) {
+  const conveyor = useRef<THREE.Group>(null);
+  const shellInstances = useRef<THREE.InstancedMesh>(null);
+  const seamInstances = useRef<THREE.InstancedMesh>(null);
+  const coreInstances = useRef<THREE.InstancedMesh>(null);
+  const bezelInstances = useRef<THREE.InstancedMesh>(null);
+  const ledInstances = useRef<THREE.InstancedMesh>(null);
+  // The cavity lip and bail blend are too thin for the 34-cell preview mesh;
+  // keep the conveyor shell at the last artifact-free resolution.
+  const shellGeometry = useMemo(() => getUnifiedShellGeometry(44), []);
+  const seamGeometry = useMemo(
+    () => new THREE.TorusGeometry(0.995, 0.027, 8, 32),
+    [],
+  );
+  const coreGeometry = useMemo(
+    () => new THREE.LatheGeometry(GUNMETAL_CORE_PROFILE, 32),
+    [],
+  );
+  const bezelGeometry = useMemo(
+    () => new THREE.TorusGeometry(0.81, 0.08, 10, 32),
+    [],
+  );
+  const ledGeometry = useMemo(
+    () => new THREE.SphereGeometry(0.036, 8, 6),
+    [],
+  );
+  const item = useMemo(() => new THREE.Object3D(), []);
+  const partMatrix = useMemo(() => new THREE.Matrix4(), []);
+  const seamMatrix = useMemo(
+    () => new THREE.Matrix4().makeTranslation(0, 0, 0.015),
+    [],
+  );
+  const coreMatrix = useMemo(
+    () => new THREE.Matrix4().makeRotationX(Math.PI / 2),
+    [],
+  );
+  const bezelMatrix = useMemo(
+    () => new THREE.Matrix4().makeTranslation(0, 0, 0.35),
+    [],
+  );
+  const ledMatrix = useMemo(
+    () => new THREE.Matrix4().makeTranslation(0, 0, 0.57),
+    [],
+  );
+
+  useEffect(() => () => {
+    seamGeometry.dispose();
+    coreGeometry.dispose();
+    bezelGeometry.dispose();
+    ledGeometry.dispose();
+  }, [bezelGeometry, coreGeometry, ledGeometry, seamGeometry]);
+
+  useFrame((state) => {
+    const visible = progress.get() >= 0.43;
+    if (conveyor.current) conveyor.current.visible = visible;
+    if (!visible) return;
+    if (
+      !shellInstances.current
+      || !seamInstances.current
+      || !coreInstances.current
+      || !bezelInstances.current
+      || !ledInstances.current
+    ) return;
+
+    const movingOffset = reduceMotion ? 0 : state.clock.elapsedTime * 0.34;
+    const cosine = Math.cos(CONVEYOR_ANGLE);
+    const sine = Math.sin(CONVEYOR_ANGLE);
+
+    for (let index = 0; index < CONVEYOR_ITEM_COUNT; index += 1) {
+      const initial = (index / CONVEYOR_ITEM_COUNT) * CONVEYOR_SPAN;
+      const wrapped = THREE.MathUtils.euclideanModulo(
+        initial + movingOffset,
+        CONVEYOR_SPAN,
+      ) - CONVEYOR_SPAN / 2;
+      item.position.set(
+        wrapped * cosine,
+        wrapped * sine,
+        0.38 + Math.sin(index * 1.7) * 0.025,
+      );
+      item.rotation.set(0.05, -0.17, CONVEYOR_ANGLE);
+      item.scale.setScalar(0.84);
+      item.updateMatrix();
+
+      shellInstances.current.setMatrixAt(index, item.matrix);
+      partMatrix.multiplyMatrices(item.matrix, seamMatrix);
+      seamInstances.current.setMatrixAt(index, partMatrix);
+      partMatrix.multiplyMatrices(item.matrix, coreMatrix);
+      coreInstances.current.setMatrixAt(index, partMatrix);
+      partMatrix.multiplyMatrices(item.matrix, bezelMatrix);
+      bezelInstances.current.setMatrixAt(index, partMatrix);
+      partMatrix.multiplyMatrices(item.matrix, ledMatrix);
+      ledInstances.current.setMatrixAt(index, partMatrix);
+    }
+
+    shellInstances.current.instanceMatrix.needsUpdate = true;
+    seamInstances.current.instanceMatrix.needsUpdate = true;
+    coreInstances.current.instanceMatrix.needsUpdate = true;
+    bezelInstances.current.instanceMatrix.needsUpdate = true;
+    ledInstances.current.instanceMatrix.needsUpdate = true;
+
+  });
+
+  return (
+    <group
+      ref={conveyor}
+      position={[
+        settings.conveyor.position.x,
+        settings.conveyor.position.y,
+        settings.conveyor.position.z,
+      ]}
+      rotation={[
+        THREE.MathUtils.degToRad(settings.conveyor.rotation.x),
+        THREE.MathUtils.degToRad(settings.conveyor.rotation.y),
+        THREE.MathUtils.degToRad(settings.conveyor.rotation.z),
+      ]}
+    >
+      <RoundedBox
+        args={[CONVEYOR_SPAN + 1.5, 2.5, 0.42]}
+        radius={0.18}
+        smoothness={3}
+        position={[0, 0, -0.18]}
+        rotation={[0, 0, CONVEYOR_ANGLE]}
+      >
+        <meshPhysicalMaterial
+          color="#0c0f14"
+          metalness={0.14}
+          roughness={0.62}
+          clearcoat={0.16}
+          clearcoatRoughness={0.7}
+          envMapIntensity={0.45}
+          transparent
+          opacity={0.96}
+        />
+      </RoundedBox>
+
+      {[-1.17, 1.17].map((offset) => (
+        <mesh
+          key={offset}
+          position={[
+            -offset * Math.sin(CONVEYOR_ANGLE),
+            offset * Math.cos(CONVEYOR_ANGLE),
+            0.09,
+          ]}
+          rotation={[0, 0, CONVEYOR_ANGLE]}
+        >
+          <boxGeometry args={[CONVEYOR_SPAN + 1.3, 0.045, 0.08]} />
+          <meshStandardMaterial
+            color="#566071"
+            metalness={0.72}
+            roughness={0.34}
+            transparent
+            opacity={0.72}
+          />
+        </mesh>
+      ))}
+
+      <instancedMesh
+        ref={shellInstances}
+        args={[shellGeometry, undefined, CONVEYOR_ITEM_COUNT]}
+      >
+        <meshPhysicalMaterial
+          color={settings.shell.color}
+          transmission={settings.shell.transmission}
+          thickness={settings.shell.thickness}
+          ior={settings.shell.ior}
+          attenuationColor={settings.shell.attenuationColor}
+          attenuationDistance={settings.shell.attenuationDistance}
+          metalness={settings.shell.metalness}
+          roughness={settings.shell.roughness}
+          clearcoat={settings.shell.clearcoat}
+          clearcoatRoughness={settings.shell.clearcoatRoughness}
+          envMapIntensity={settings.shell.envMapIntensity}
+          transparent
+          opacity={1}
+        />
+      </instancedMesh>
+      <instancedMesh
+        ref={seamInstances}
+        args={[seamGeometry, undefined, CONVEYOR_ITEM_COUNT]}
+      >
+        <meshPhysicalMaterial
+          color={settings.seam.color}
+          metalness={settings.seam.metalness}
+          roughness={settings.seam.roughness}
+          clearcoat={settings.seam.clearcoat}
+          clearcoatRoughness={settings.seam.clearcoatRoughness}
+          envMapIntensity={settings.seam.envMapIntensity}
+          transparent
+          opacity={1}
+        />
+      </instancedMesh>
+      <instancedMesh
+        ref={coreInstances}
+        args={[coreGeometry, undefined, CONVEYOR_ITEM_COUNT]}
+      >
+        <meshPhysicalMaterial
+          color={settings.core.color}
+          metalness={settings.core.metalness}
+          roughness={settings.core.roughness}
+          clearcoat={settings.core.clearcoat}
+          clearcoatRoughness={settings.core.clearcoatRoughness}
+          envMapIntensity={settings.core.envMapIntensity}
+          transparent
+          opacity={1}
+        />
+      </instancedMesh>
+      <instancedMesh
+        ref={bezelInstances}
+        args={[bezelGeometry, undefined, CONVEYOR_ITEM_COUNT]}
+      >
+        <meshPhysicalMaterial
+          color={settings.bezel.color}
+          metalness={settings.bezel.metalness}
+          roughness={settings.bezel.roughness}
+          clearcoat={settings.bezel.clearcoat}
+          clearcoatRoughness={settings.bezel.clearcoatRoughness}
+          envMapIntensity={settings.bezel.envMapIntensity}
+          transparent
+          opacity={1}
+        />
+      </instancedMesh>
+      <instancedMesh
+        ref={ledInstances}
+        args={[ledGeometry, undefined, CONVEYOR_ITEM_COUNT]}
+      >
+        <meshBasicMaterial
+          color={settings.led.coreColor}
+          transparent
+          opacity={1}
+          toneMapped={false}
+        />
+      </instancedMesh>
+    </group>
+  );
+}
+
+function RendererSettings({ exposure }: { exposure: number }) {
+  const { gl } = useThree();
+  useEffect(() => {
+    gl.toneMappingExposure = exposure;
+  }, [exposure, gl]);
+  return null;
+}
+
+interface ScrollCameraProps {
+  cameraSettings: LabSettings["camera"];
+  isNarrow: boolean;
+  progress: MotionValue<number>;
+  reduceMotion: boolean;
+}
+
+function smootherStep(value: number) {
+  const t = THREE.MathUtils.clamp(value, 0, 1);
+  return t * t * t * (t * (t * 6 - 15) + 10);
+}
+
+function ScrollCamera({
+  cameraSettings,
+  isNarrow,
+  progress,
+  reduceMotion,
+}: ScrollCameraProps) {
+  const camera = useRef<THREE.PerspectiveCamera>(null);
+  const target = useMemo(() => new THREE.Vector3(), []);
+  const frames = useMemo(() => {
+    const makeFrame = (pose: CameraPoseSettings) => ({
+      position: new THREE.Vector3(
+        pose.position.x,
+        pose.position.y,
+        pose.position.z,
+      ),
+      target: new THREE.Vector3(
+        pose.target.x,
+        pose.target.y,
+        pose.target.z,
+      ),
+      fov: pose.fov,
+    });
+    const nextFrames = [
+      makeFrame(cameraSettings.frame1),
+      makeFrame(cameraSettings.frame2),
+      makeFrame(cameraSettings.frame3),
+      makeFrame(cameraSettings.frame4),
+    ];
+
+    if (isNarrow) {
+      nextFrames[0].position.add(new THREE.Vector3(-3.2, 0.07, 4.4));
+      nextFrames[0].target.add(new THREE.Vector3(-3.2, -0.27, 0));
+      nextFrames[1].position.add(new THREE.Vector3(0, 0.1, 1));
+      nextFrames[1].target.add(new THREE.Vector3(-0.7, -0.26, 0));
+      nextFrames[2].position.add(new THREE.Vector3(0, 0.1, 1));
+      nextFrames[2].target.add(new THREE.Vector3(-0.7, -0.26, 0));
+      nextFrames[3].position.add(new THREE.Vector3(0, 0.1, 1));
+      nextFrames[3].target.add(new THREE.Vector3(-0.7, -0.26, 0));
+      nextFrames.forEach((frame) => {
+        frame.fov += 2;
+      });
+    }
+
+    return nextFrames;
+  }, [cameraSettings, isNarrow]);
+
+  useLayoutEffect(() => {
+    if (!camera.current) return;
+    camera.current.position.copy(frames[0].position);
+    camera.current.lookAt(frames[0].target);
+    camera.current.updateMatrixWorld();
+  }, [frames]);
+
+  useFrame(() => {
+    if (!camera.current) return;
+
+    const scroll = THREE.MathUtils.clamp(progress.get(), 0, 1);
+    const scaledProgress = scroll * (frames.length - 1);
+    const segmentIndex = Math.min(
+      frames.length - 2,
+      Math.floor(scaledProgress),
+    );
+    const segmentProgress = scaledProgress - segmentIndex;
+    const easedProgress = reduceMotion
+      ? (segmentProgress < 0.5 ? 0 : 1)
+      : smootherStep(segmentProgress);
+    const currentFrame = frames[segmentIndex];
+    const nextFrame = frames[segmentIndex + 1];
+
+    camera.current.position.lerpVectors(
+      currentFrame.position,
+      nextFrame.position,
+      easedProgress,
+    );
+    target.lerpVectors(
+      currentFrame.target,
+      nextFrame.target,
+      easedProgress,
+    );
+    camera.current.lookAt(target);
+    camera.current.fov = THREE.MathUtils.lerp(
+      currentFrame.fov,
+      nextFrame.fov,
+      easedProgress,
+    );
+    camera.current.updateProjectionMatrix();
+    camera.current.updateMatrixWorld();
+  });
+
+  return (
+    <PerspectiveCamera
+      ref={camera}
+      makeDefault
+      position={frames[0].position.toArray()}
+      fov={frames[0].fov}
+    />
+  );
+}
+
+function WorldConveyor({
+  reduceMotion,
+  settings,
+  progress,
+}: {
+  reduceMotion: boolean;
+  settings: LabSettings;
+  progress: MotionValue<number>;
+}) {
+  const frame = settings.camera.frame3;
+  const anchorCamera = useMemo(() => {
+    const camera = new THREE.PerspectiveCamera();
+    camera.position.set(frame.position.x, frame.position.y, frame.position.z);
+    camera.lookAt(frame.target.x, frame.target.y, frame.target.z);
+    camera.updateMatrixWorld();
+    return camera;
+  }, [frame]);
+
+  return (
+    <group
+      position={anchorCamera.position.toArray()}
+      quaternion={anchorCamera.quaternion}
+    >
+      <PendantConveyor
+        reduceMotion={reduceMotion}
+        settings={settings}
+        progress={progress}
+      />
+    </group>
+  );
+}
+
+function CinematicEffects({
+  activeFrame,
+  mobileOptimized,
+  settings,
+}: {
+  activeFrame: number;
+  mobileOptimized: boolean;
+  settings: LabSettings;
+}) {
+  const post = settings.postProcessing;
+  const chromaticOffset = useMemo(
+    () => new THREE.Vector2(
+      post.chromaticAberration.offsetX,
+      post.chromaticAberration.offsetY,
+    ),
+    [
+      post.chromaticAberration.offsetX,
+      post.chromaticAberration.offsetY,
+    ],
+  );
+
+  if (!post.enabled) return null;
+
+  return (
+    <PostProcessingBoundary>
+      <EffectComposer
+        multisampling={0}
+        frameBufferType={THREE.UnsignedByteType}
+        depthBuffer
+        stencilBuffer={false}
+        enableNormalPass={false}
+      >
+        <>
+          {!mobileOptimized && post.depthOfField.enabled && activeFrame >= 2 && (
+            <DepthOfField
+              worldFocusDistance={post.depthOfField.focusDistance}
+              worldFocusRange={post.depthOfField.focusRange}
+              focalLength={post.depthOfField.focalLength}
+              bokehScale={post.depthOfField.bokehScale}
+              resolutionScale={Math.min(post.depthOfField.resolutionScale, 0.36)}
+            />
+          )}
+          {post.bloom.enabled && (
+            <Bloom
+              mipmapBlur
+              levels={mobileOptimized ? 3 : 4}
+              intensity={post.bloom.intensity}
+              luminanceThreshold={post.bloom.threshold}
+              luminanceSmoothing={post.bloom.smoothing}
+              radius={post.bloom.radius}
+            />
+          )}
+          {post.colorGrade.enabled && (
+            <>
+              <BrightnessContrast
+                brightness={post.colorGrade.brightness}
+                contrast={post.colorGrade.contrast}
+              />
+              <HueSaturation
+                hue={post.colorGrade.hue}
+                saturation={post.colorGrade.saturation}
+              />
+            </>
+          )}
+          {!mobileOptimized && post.chromaticAberration.enabled && (
+            <ChromaticAberration
+              offset={chromaticOffset}
+              radialModulation={post.chromaticAberration.radialModulation}
+              modulationOffset={post.chromaticAberration.modulationOffset}
+            />
+          )}
+          {post.grain.enabled && (
+            <Noise
+              opacity={post.grain.opacity}
+              premultiply={post.grain.premultiply}
+            />
+          )}
+          {post.vignette.enabled && (
+            <Vignette
+              eskil={false}
+              offset={post.vignette.offset}
+              darkness={post.vignette.darkness}
+            />
+          )}
+        </>
+      </EffectComposer>
+    </PostProcessingBoundary>
+  );
+}
+
+export default function DeviceStage({
+  reduceMotion,
+  mobileOptimized,
+  settings,
+  onWakeChange,
+  onActivate,
+  physicsRelease,
+  scrollProgress,
+  activeFrame,
+}: DeviceProps & {
+  mobileOptimized: boolean;
+  physicsRelease: MotionValue<number>;
+  scrollProgress: MotionValue<number>;
+  activeFrame: number;
+}) {
+  const { size } = useThree();
+  const isNarrow = size.width < 760;
+  const pendantX = isNarrow ? 0 : 3.2;
+  const pendantY = isNarrow ? -0.62 : -0.14;
+  const devicePosition: [number, number, number] = [pendantX, pendantY, 0];
+  const staticFallback = (
+    <StaticPendantFallback
+      reduceMotion={reduceMotion}
+      settings={settings}
+      position={devicePosition}
+      onWakeChange={onWakeChange}
+      onActivate={onActivate}
+      forceAwake={mobileOptimized && activeFrame === 0}
+      interactionEnabled={!mobileOptimized || activeFrame !== 1}
+    />
+  );
+  return (
+    <>
+      <RendererSettings exposure={settings.stage.exposure} />
+      <color attach="background" args={[settings.stage.background]} />
+      <fog
+        attach="fog"
+        args={[settings.stage.fogColor, isNarrow ? 16 : 15, isNarrow ? 28 : 26]}
+      />
+      <ScrollCamera
+        cameraSettings={settings.camera}
+        isNarrow={isNarrow}
+        progress={scrollProgress}
+        reduceMotion={reduceMotion}
+      />
+      <WorldConveyor
+        reduceMotion={reduceMotion}
+        settings={settings}
+        progress={scrollProgress}
+      />
+      <ambientLight color={settings.stage.ambientColor} intensity={settings.stage.ambientIntensity} />
+      <hemisphereLight
+        args={[
+          settings.stage.hemisphereSky,
+          settings.stage.hemisphereGround,
+          settings.stage.hemisphereIntensity,
+        ]}
+      />
+      <spotLight
+        position={[
+          settings.stage.keyPosition.x,
+          settings.stage.keyPosition.y,
+          settings.stage.keyPosition.z,
+        ]}
+        color={settings.stage.keyColor}
+        intensity={settings.stage.keyIntensity}
+        angle={0.34}
+        penumbra={0.9}
+        distance={11}
+      />
+      <spotLight
+        position={[
+          settings.stage.fillPosition.x,
+          settings.stage.fillPosition.y,
+          settings.stage.fillPosition.z,
+        ]}
+        color={settings.stage.fillColor}
+        intensity={settings.stage.fillIntensity}
+        angle={0.28}
+        penumbra={1}
+        distance={10}
+      />
+      <pointLight
+        position={[
+          settings.stage.rimPosition.x,
+          settings.stage.rimPosition.y,
+          settings.stage.rimPosition.z,
+        ]}
+        color={settings.stage.rimColor}
+        intensity={settings.stage.rimIntensity}
+        distance={7}
+      />
+
+      <ArchitecturalBlocks
+        pendantX={pendantX}
+        platformTop={pendantY - 1.8}
+        backdropTop={isNarrow ? 3.7 : 4.05}
+        sideTop={pendantY + 1.3}
+        settings={settings}
+      />
+      <Atmosphere
+        mobileOptimized={mobileOptimized}
+        reduceMotion={reduceMotion}
+        positionX={pendantX}
+        settings={settings}
+      />
+
+      {!reduceMotion && !mobileOptimized ? (
+        <PhysicsBoundary fallback={staticFallback}>
+          <Suspense fallback={staticFallback}>
+            <Physics
+              gravity={[0, -14, 0]}
+              timeStep="vary"
+              interpolate
+              numSolverIterations={5}
+              numInternalPgsIterations={1}
+            >
+              <PendantRig
+                reduceMotion={reduceMotion}
+                settings={settings}
+                position={devicePosition}
+                onWakeChange={onWakeChange}
+                onActivate={onActivate}
+                physicsRelease={physicsRelease}
+              />
+            </Physics>
+          </Suspense>
+        </PhysicsBoundary>
+      ) : staticFallback}
+
+      <Suspense fallback={null}>
+        <Environment resolution={mobileOptimized ? 32 : 64}>
+          <group rotation={[0, 0, Math.PI / 6]}>
+            <Lightformer
+              form="rect"
+              intensity={settings.environment.keyIntensity}
+              color={settings.environment.keyColor}
+              position={[
+                settings.environment.keyPosition.x,
+                settings.environment.keyPosition.y,
+                settings.environment.keyPosition.z,
+              ]}
+              scale={[1.2, 4, 1]}
+            />
+            <Lightformer
+              form="rect"
+              intensity={settings.environment.sideIntensity}
+              color={settings.environment.sideColor}
+              position={[
+                settings.environment.sidePosition.x,
+                settings.environment.sidePosition.y,
+                settings.environment.sidePosition.z,
+              ]}
+              scale={[1, 3, 1]}
+              rotation={[0, -Math.PI / 2, 0]}
+            />
+            <Lightformer
+              form="ring"
+              intensity={settings.environment.ringIntensity}
+              color={settings.environment.ringColor}
+              position={[
+                settings.environment.ringPosition.x,
+                settings.environment.ringPosition.y,
+                settings.environment.ringPosition.z,
+              ]}
+              scale={2.5}
+              rotation={[Math.PI / 2, 0, 0]}
+            />
+          </group>
+        </Environment>
+      </Suspense>
+
+      <CinematicEffects
+        activeFrame={activeFrame}
+        mobileOptimized={mobileOptimized}
+        settings={settings}
+      />
+
+    </>
+  );
+}
diff --git a/components/device-lab/PendantScene.tsx b/components/device-lab/PendantScene.tsx
new file mode 100644
index 0000000..e927f29
--- /dev/null
+++ b/components/device-lab/PendantScene.tsx
@@ -0,0 +1,829 @@
+"use client";
+
+import {
+  Component,
+  Suspense,
+  type ErrorInfo,
+  type RefObject,
+  type ReactNode,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
+import {
+  Canvas,
+  type ThreeEvent,
+  useFrame,
+  useThree,
+} from "@react-three/fiber";
+import {
+  Environment,
+  Lightformer,
+  PerspectiveCamera,
+  RoundedBox,
+  Sparkles,
+} from "@react-three/drei";
+import {
+  BallCollider,
+  CuboidCollider,
+  Physics,
+  RigidBody,
+  type RapierRigidBody,
+  useRopeJoint,
+  useSphericalJoint,
+} from "@react-three/rapier";
+import {
+  Bloom,
+  BrightnessContrast,
+  ChromaticAberration,
+  DepthOfField,
+  EffectComposer,
+  HueSaturation,
+  Noise,
+  Vignette,
+} from "@react-three/postprocessing";
+import type { MotionValue } from "framer-motion";
+import { MeshLineGeometry, MeshLineMaterial } from "meshline";
+import * as THREE from "three";
+import type { CameraPoseSettings, LabSettings } from "./device-settings";
+import { getUnifiedShellGeometry } from "./unified-shell";
+
+import {
+  GUNMETAL_CORE_PROFILE,
+  PENDANT_DROP,
+  PENDANT_SCALE,
+  PRODUCT_YAW,
+  createGrainTexture,
+  updateGrainTexture,
+} from "./device-geometry";
+
+type BodyRef = RefObject<RapierRigidBody>;
+
+interface CordBodies {
+  leftAnchor: BodyRef;
+  leftOne: BodyRef;
+  leftTwo: BodyRef;
+  leftThree: BodyRef;
+  junction: BodyRef;
+  rightThree: BodyRef;
+  rightTwo: BodyRef;
+  rightOne: BodyRef;
+  rightAnchor: BodyRef;
+}
+
+function CordVisual({ bodies, settings }: {
+  bodies: CordBodies;
+  settings: LabSettings;
+}) {
+  const { size } = useThree();
+  const geometry = useMemo(() => {
+    const line = new MeshLineGeometry();
+    line.setPoints([
+      new THREE.Vector3(-5, 7, 0),
+      new THREE.Vector3(-3.8, 5.4, 0),
+      new THREE.Vector3(-2.4, 3.6, 0),
+      new THREE.Vector3(-1.1, 1.8, 0),
+      new THREE.Vector3(0, 0.6, 0),
+      new THREE.Vector3(1.1, 1.8, 0),
+      new THREE.Vector3(2.4, 3.6, 0),
+      new THREE.Vector3(3.8, 5.4, 0),
+      new THREE.Vector3(5, 7, 0),
+    ]);
+    return line;
+  }, []);
+  const material = useMemo(() => new MeshLineMaterial({
+    color: settings.cord.color,
+    lineWidth: 0.234,
+    resolution: new THREE.Vector2(size.width, size.height),
+    sizeAttenuation: 1,
+  }), []);
+  const curve = useMemo(() => new THREE.CatmullRomCurve3(
+    Array.from({ length: 9 }, () => new THREE.Vector3()),
+    false,
+    "catmullrom",
+    0.48,
+  ), []);
+  const lastPoints = useRef<Float32Array | null>(null);
+
+  useEffect(() => {
+    material.color.set(settings.cord.color);
+  }, [material, settings.cord.color]);
+
+  useEffect(() => {
+    material.resolution.set(size.width, size.height);
+  }, [material, size.height, size.width]);
+
+  useEffect(() => () => {
+    geometry.dispose();
+    material.dispose();
+  }, [geometry, material]);
+
+  useFrame(() => {
+    const refs = [
+      bodies.leftAnchor,
+      bodies.leftOne,
+      bodies.leftTwo,
+      bodies.leftThree,
+      bodies.junction,
+      bodies.rightThree,
+      bodies.rightTwo,
+      bodies.rightOne,
+      bodies.rightAnchor,
+    ];
+    if (refs.some((body) => !body.current)) return;
+
+    const firstUpdate = lastPoints.current === null;
+    const nextPoints = lastPoints.current ?? new Float32Array(refs.length * 3);
+    let changed = firstUpdate;
+    refs.forEach((body, index) => {
+      const translation = body.current!.translation();
+      curve.points[index].set(translation.x, translation.y, translation.z - 0.04);
+      const offset = index * 3;
+      if (
+        firstUpdate
+        || Math.abs(nextPoints[offset] - translation.x) > 0.0001
+        || Math.abs(nextPoints[offset + 1] - translation.y) > 0.0001
+        || Math.abs(nextPoints[offset + 2] - translation.z) > 0.0001
+      ) {
+        changed = true;
+        nextPoints[offset] = translation.x;
+        nextPoints[offset + 1] = translation.y;
+        nextPoints[offset + 2] = translation.z;
+      }
+    });
+    lastPoints.current = nextPoints;
+    if (!changed) return;
+    geometry.setPoints(curve.getPoints(24));
+  });
+
+  return (
+    <mesh
+      geometry={geometry}
+      material={material}
+      frustumCulled={false}
+      renderOrder={1}
+    />
+  );
+}
+
+export interface DeviceProps {
+  reduceMotion: boolean;
+  settings: LabSettings;
+  position?: [number, number, number];
+  onWakeChange?: (awake: boolean) => void;
+  onActivate?: () => void;
+  physicsRelease?: MotionValue<number>;
+  forceAwake?: boolean;
+  interactionEnabled?: boolean;
+}
+
+export class PhysicsBoundary extends Component<
+  { children: ReactNode; fallback: ReactNode },
+  { failed: boolean }
+> {
+  state = { failed: false };
+
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+
+  componentDidCatch(error: Error, _info: ErrorInfo) {
+    console.warn("Physics unavailable; using the static 3D fallback.", error);
+  }
+
+  render() {
+    return this.state.failed ? this.props.fallback : this.props.children;
+  }
+}
+
+export class PostProcessingBoundary extends Component<
+  { children: ReactNode },
+  { failed: boolean }
+> {
+  state = { failed: false };
+
+  static getDerivedStateFromError() {
+    return { failed: true };
+  }
+
+  componentDidCatch(error: Error, _info: ErrorInfo) {
+    console.warn("Post processing unavailable; continuing with the base 3D render.", error);
+  }
+
+  render() {
+    return this.state.failed ? null : this.props.children;
+  }
+}
+
+function StaticCord({
+  position,
+  settings,
+}: {
+  position: [number, number, number];
+  settings: LabSettings;
+}) {
+  const { size } = useThree();
+  const [sceneX, sceneY, sceneZ] = position;
+  const geometry = useMemo(() => {
+    const localPoints: Array<[number, number]> = [
+      [-5.1, 7.35],
+      [-3.9, 5.72],
+      [-2.5, 3.97],
+      [-1.15, 2.32],
+      [0, 1.02],
+      [1.15, 2.32],
+      [2.5, 3.97],
+      [3.9, 5.72],
+      [5.1, 7.35],
+    ];
+    const points = localPoints.map(([x, y]) => new THREE.Vector3(
+      sceneX + x * Math.cos(PRODUCT_YAW),
+      sceneY + y,
+      sceneZ - x * Math.sin(PRODUCT_YAW) - 0.04,
+    ));
+    const curve = new THREE.CatmullRomCurve3(
+      points,
+      false,
+      "catmullrom",
+      0.48,
+    );
+    const line = new MeshLineGeometry();
+    line.setPoints(curve.getPoints(32));
+    return line;
+  }, [sceneX, sceneY, sceneZ]);
+  const material = useMemo(() => new MeshLineMaterial({
+    color: settings.cord.color,
+    lineWidth: 0.234,
+    resolution: new THREE.Vector2(size.width, size.height),
+    sizeAttenuation: 1,
+  }), []);
+
+  useEffect(() => {
+    material.color.set(settings.cord.color);
+  }, [material, settings.cord.color]);
+
+  useEffect(() => {
+    material.resolution.set(size.width, size.height);
+  }, [material, size.height, size.width]);
+
+  useEffect(() => () => {
+    geometry.dispose();
+    material.dispose();
+  }, [geometry, material]);
+
+  return (
+    <mesh
+      geometry={geometry}
+      material={material}
+      frustumCulled={false}
+      renderOrder={1}
+    />
+  );
+}
+
+export function StaticPendantFallback({
+  reduceMotion,
+  settings,
+  position = [0, -0.16, 0],
+  onWakeChange,
+  onActivate,
+  forceAwake,
+  interactionEnabled,
+}: DeviceProps) {
+  return (
+    <>
+      <StaticCord position={position} settings={settings} />
+      <group position={[
+        position[0],
+        position[1] + 1.02 - PENDANT_DROP,
+        position[2],
+      ]}>
+        <PendantVisual
+          reduceMotion={reduceMotion}
+          settings={settings}
+          onWakeChange={onWakeChange}
+          onActivate={onActivate}
+          forceAwake={forceAwake}
+          interactionEnabled={interactionEnabled}
+        />
+      </group>
+    </>
+  );
+}
+
+function PendantVisual({
+  body,
+  reduceMotion,
+  settings,
+  onWakeChange,
+  onActivate,
+  physicsRelease,
+  forceAwake = false,
+  interactionEnabled = true,
+}: Omit<DeviceProps, "position"> & { body?: BodyRef }) {
+  const outerGlow = useRef<THREE.MeshBasicMaterial>(null);
+  const innerGlow = useRef<THREE.MeshBasicMaterial>(null);
+  const ledCore = useRef<THREE.MeshBasicMaterial>(null);
+  const ledLight = useRef<THREE.PointLight>(null);
+  const isHovered = useRef(false);
+  const glowLevel = useRef(forceAwake ? 1 : 0);
+  const grainTexture = useMemo(createGrainTexture, []);
+  const shellGrainTexture = useMemo(createGrainTexture, []);
+  const shellGeometry = useMemo(() => getUnifiedShellGeometry(52), []);
+  const outerGlowColor = useMemo(
+    () => new THREE.Color(settings.led.outerColor),
+    [settings.led.outerColor],
+  );
+  const innerGlowColor = useMemo(
+    () => new THREE.Color(settings.led.innerColor),
+    [settings.led.innerColor],
+  );
+  const ledCoreColor = useMemo(
+    () => new THREE.Color(settings.led.coreColor),
+    [settings.led.coreColor],
+  );
+
+  useEffect(() => {
+    updateGrainTexture(grainTexture, settings.texture.repeat, settings.texture.contrast);
+  }, [grainTexture, settings.texture.contrast, settings.texture.repeat]);
+
+  useEffect(() => {
+    updateGrainTexture(
+      shellGrainTexture,
+      settings.shell.noiseScale,
+      settings.shell.noiseContrast,
+      settings.shell.noiseSeed,
+    );
+  }, [
+    settings.shell.noiseContrast,
+    settings.shell.noiseScale,
+    settings.shell.noiseSeed,
+    shellGrainTexture,
+  ]);
+
+  useEffect(
+    () => () => {
+      grainTexture.dispose();
+      shellGrainTexture.dispose();
+    },
+    [grainTexture, shellGrainTexture],
+  );
+
+  const bumpMap = settings.texture.enabled ? grainTexture : undefined;
+  const shellBumpMap = settings.shell.noiseEnabled ? shellGrainTexture : undefined;
+
+  const applyPointerImpact = useCallback((
+    event: ThreeEvent<PointerEvent>,
+    initialImpact: boolean,
+  ) => {
+    if (reduceMotion) return;
+
+    const releaseAmount = physicsRelease?.get() ?? 0;
+    if (releaseAmount < 0.78) return;
+
+    const movementX = event.nativeEvent.movementX;
+    const movementY = event.nativeEvent.movementY;
+    let impactX = THREE.MathUtils.clamp(movementX / 48, -1, 1);
+    let impactY = THREE.MathUtils.clamp(-movementY / 48, -1, 1);
+
+    if (Math.hypot(impactX, impactY) < 0.06 && event.uv) {
+      impactX = 0.5 - event.uv.x;
+      impactY = 0.5 - event.uv.y;
+      const fallbackLength = Math.hypot(impactX, impactY) || 1;
+      impactX /= fallbackLength;
+      impactY /= fallbackLength;
+    }
+
+    const rigidBody = body?.current;
+    if (!rigidBody) return;
+
+    if (Math.hypot(impactX, impactY) < 0.06) {
+      const center = rigidBody.translation();
+      impactX = center.x - event.point.x;
+      impactY = center.y - event.point.y;
+      const fallbackLength = Math.hypot(impactX, impactY) || 1;
+      impactX /= fallbackLength;
+      impactY /= fallbackLength;
+    }
+
+    const interactionEase = THREE.MathUtils.smoothstep(releaseAmount, 0.78, 1);
+    const strength = (initialImpact ? 4.2 : 0.9) * interactionEase;
+    rigidBody.applyImpulseAtPoint(
+      { x: impactX * strength, y: impactY * strength, z: 0 },
+      { x: event.point.x, y: event.point.y, z: event.point.z },
+      true,
+    );
+  }, [body, physicsRelease, reduceMotion]);
+
+  const wakePendant = useCallback((event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation();
+    if (isHovered.current) return;
+    isHovered.current = true;
+    applyPointerImpact(event, true);
+    onWakeChange?.(true);
+    document.documentElement.style.cursor = "pointer";
+  }, [applyPointerImpact, onWakeChange]);
+
+  const movePendant = useCallback((event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation();
+    if (!isHovered.current) return;
+    if (Math.hypot(
+      event.nativeEvent.movementX,
+      event.nativeEvent.movementY,
+    ) < 1.5) return;
+    applyPointerImpact(event, false);
+  }, [applyPointerImpact]);
+
+  const restPendant = useCallback((event: ThreeEvent<PointerEvent>) => {
+    event.stopPropagation();
+    isHovered.current = false;
+    onWakeChange?.(false);
+    document.documentElement.style.cursor = "default";
+  }, [onWakeChange]);
+
+  const activatePendant = useCallback((event: ThreeEvent<MouseEvent>) => {
+    event.stopPropagation();
+    onActivate?.();
+  }, [onActivate]);
+
+  useEffect(() => () => {
+    document.documentElement.style.cursor = "default";
+    onWakeChange?.(false);
+  }, [onWakeChange]);
+
+  useEffect(() => {
+    if (interactionEnabled) return;
+    isHovered.current = false;
+    document.documentElement.style.cursor = "default";
+    onWakeChange?.(false);
+  }, [interactionEnabled, onWakeChange]);
+
+  useFrame((_state, delta) => {
+    const lightTarget = forceAwake || isHovered.current ? 1 : 0;
+    const lightEase = reduceMotion
+      ? 1
+      : 1 - Math.exp(-delta * (lightTarget > glowLevel.current ? 5.5 : 3.2));
+    glowLevel.current = THREE.MathUtils.lerp(
+      glowLevel.current,
+      lightTarget,
+      lightEase,
+    );
+
+    if (outerGlow.current) {
+      outerGlow.current.opacity = settings.led.outerOpacity * glowLevel.current * 2.8;
+      outerGlow.current.color
+        .copy(outerGlowColor)
+        .multiplyScalar(0.25 + glowLevel.current * 3.2);
+    }
+    if (innerGlow.current) {
+      innerGlow.current.opacity = settings.led.innerOpacity * glowLevel.current * 2.3;
+      innerGlow.current.color
+        .copy(innerGlowColor)
+        .multiplyScalar(0.25 + glowLevel.current * 4.5);
+    }
+    if (ledCore.current) {
+      ledCore.current.color
+        .copy(ledCoreColor)
+        .multiplyScalar(0.015 + glowLevel.current * 5.5);
+    }
+    if (ledLight.current) {
+      ledLight.current.intensity = settings.led.lightIntensity * glowLevel.current * 4.5;
+    }
+  });
+
+  return (
+    <group
+      rotation={[0.02, PRODUCT_YAW, -0.015]}
+      scale={PENDANT_SCALE}
+    >
+          {interactionEnabled && (
+            <mesh
+              position={[0, 0, 0.7]}
+              onPointerMove={movePendant}
+              onPointerOver={wakePendant}
+              onPointerOut={restPendant}
+              onClick={activatePendant}
+            >
+              <circleGeometry args={[1.09, 24]} />
+              <meshBasicMaterial
+                transparent
+                opacity={0}
+                depthWrite={false}
+                colorWrite={false}
+              />
+            </mesh>
+          )}
+
+          <mesh geometry={shellGeometry} castShadow receiveShadow>
+        <meshPhysicalMaterial
+          color={settings.shell.color}
+          transmission={settings.shell.transmission}
+          thickness={settings.shell.thickness}
+          ior={settings.shell.ior}
+          attenuationColor={settings.shell.attenuationColor}
+          attenuationDistance={settings.shell.attenuationDistance}
+          metalness={settings.shell.metalness}
+          roughness={settings.shell.roughness}
+          clearcoat={settings.shell.clearcoat}
+          clearcoatRoughness={settings.shell.clearcoatRoughness}
+          bumpMap={shellBumpMap}
+          bumpScale={settings.shell.bumpScale}
+          envMapIntensity={settings.shell.envMapIntensity}
+        />
+          </mesh>
+
+          <mesh position={[0, 0, 0.015]} castShadow>
+        <torusGeometry args={[0.995, 0.027, 10, 48]} />
+        <meshPhysicalMaterial
+          color={settings.seam.color}
+          metalness={settings.seam.metalness}
+          roughness={settings.seam.roughness}
+          clearcoat={settings.seam.clearcoat}
+          clearcoatRoughness={settings.seam.clearcoatRoughness}
+          bumpMap={bumpMap}
+          bumpScale={settings.seam.bumpScale}
+          envMapIntensity={settings.seam.envMapIntensity}
+        />
+          </mesh>
+
+          <mesh rotation={[Math.PI / 2, 0, 0]} castShadow receiveShadow>
+        <latheGeometry args={[GUNMETAL_CORE_PROFILE, 48]} />
+        <meshPhysicalMaterial
+          color={settings.core.color}
+          metalness={settings.core.metalness}
+          roughness={settings.core.roughness}
+          clearcoat={settings.core.clearcoat}
+          clearcoatRoughness={settings.core.clearcoatRoughness}
+          bumpMap={bumpMap}
+          bumpScale={settings.core.bumpScale}
+          envMapIntensity={settings.core.envMapIntensity}
+        />
+          </mesh>
+
+          <mesh position={[0, 0, 0.35]} castShadow>
+        <torusGeometry args={[0.81, 0.08, 12, 48]} />
+        <meshPhysicalMaterial
+          color={settings.bezel.color}
+          metalness={settings.bezel.metalness}
+          roughness={settings.bezel.roughness}
+          clearcoat={settings.bezel.clearcoat}
+          clearcoatRoughness={settings.bezel.clearcoatRoughness}
+          bumpMap={bumpMap}
+          bumpScale={settings.bezel.bumpScale}
+          envMapIntensity={settings.bezel.envMapIntensity}
+        />
+          </mesh>
+
+          <group position={[0, 0, 0.56]}>
+            <mesh>
+          <circleGeometry args={[0.115, 24]} />
+          <meshBasicMaterial
+            ref={outerGlow}
+            color="#000000"
+            transparent
+            opacity={0}
+            blending={THREE.AdditiveBlending}
+            depthWrite={false}
+            toneMapped={false}
+          />
+            </mesh>
+            <mesh position={[0, 0, 0.004]}>
+          <circleGeometry args={[0.067, 24]} />
+          <meshBasicMaterial
+            ref={innerGlow}
+            color="#000000"
+            transparent
+            opacity={0}
+            blending={THREE.AdditiveBlending}
+            depthWrite={false}
+            toneMapped={false}
+          />
+            </mesh>
+            <mesh position={[0, 0, 0.008]}>
+          <circleGeometry args={[0.031, 20]} />
+          <meshBasicMaterial ref={ledCore} color="#000000" toneMapped={false} />
+            </mesh>
+            <pointLight
+          ref={ledLight}
+          color={settings.led.lightColor}
+          intensity={0}
+          distance={1.6}
+          decay={2}
+        />
+          </group>
+    </group>
+  );
+}
+
+export function PendantRig({
+  reduceMotion,
+  settings,
+  position = [0, -0.16, 0],
+  onWakeChange,
+  onActivate,
+  physicsRelease,
+}: DeviceProps) {
+  const [sceneX, sceneY, sceneZ] = position;
+  const orientedPosition = useCallback((x: number, y: number) => (
+    [
+      sceneX + x * Math.cos(PRODUCT_YAW),
+      sceneY + y,
+      sceneZ - x * Math.sin(PRODUCT_YAW),
+    ] as [number, number, number]
+  ), [sceneX, sceneY, sceneZ]);
+  const leftAnchor = useRef<RapierRigidBody>(null) as BodyRef;
+  const leftOne = useRef<RapierRigidBody>(null) as BodyRef;
+  const leftTwo = useRef<RapierRigidBody>(null) as BodyRef;
+  const leftThree = useRef<RapierRigidBody>(null) as BodyRef;
+  const junction = useRef<RapierRigidBody>(null) as BodyRef;
+  const rightThree = useRef<RapierRigidBody>(null) as BodyRef;
+  const rightTwo = useRef<RapierRigidBody>(null) as BodyRef;
+  const rightOne = useRef<RapierRigidBody>(null) as BodyRef;
+  const rightAnchor = useRef<RapierRigidBody>(null) as BodyRef;
+  const pendant = useRef<RapierRigidBody>(null) as BodyRef;
+  const lastRelease = useRef<number | null>(null);
+
+  useRopeJoint(leftAnchor, leftOne, [[0, 0, 0], [0, 0, 0], 2.02]);
+  useRopeJoint(leftOne, leftTwo, [[0, 0, 0], [0, 0, 0], 2.24]);
+  useRopeJoint(leftTwo, leftThree, [[0, 0, 0], [0, 0, 0], 2.14]);
+  useRopeJoint(leftThree, junction, [[0, 0, 0], [0, 0, 0], 1.74]);
+  useRopeJoint(rightAnchor, rightOne, [[0, 0, 0], [0, 0, 0], 2.02]);
+  useRopeJoint(rightOne, rightTwo, [[0, 0, 0], [0, 0, 0], 2.24]);
+  useRopeJoint(rightTwo, rightThree, [[0, 0, 0], [0, 0, 0], 2.14]);
+  useRopeJoint(rightThree, junction, [[0, 0, 0], [0, 0, 0], 1.74]);
+  useSphericalJoint(junction, pendant, [[0, 0, 0], [0, PENDANT_DROP, 0]]);
+
+  const releaseBodies = [
+    { body: leftOne, x: -3.9, y: 5.72, linearDamping: 3.2, angularDamping: 3.2 },
+    { body: leftTwo, x: -2.5, y: 3.97, linearDamping: 3.2, angularDamping: 3.2 },
+    { body: leftThree, x: -1.15, y: 2.32, linearDamping: 3.2, angularDamping: 3.2 },
+    { body: junction, x: 0, y: 1.02, linearDamping: 3.2, angularDamping: 3.2 },
+    { body: rightThree, x: 1.15, y: 2.32, linearDamping: 3.2, angularDamping: 3.2 },
+    { body: rightTwo, x: 2.5, y: 3.97, linearDamping: 3.2, angularDamping: 3.2 },
+    { body: rightOne, x: 3.9, y: 5.72, linearDamping: 3.2, angularDamping: 3.2 },
+    {
+      body: pendant,
+      x: 0,
+      y: 1.02 - PENDANT_DROP,
+      linearDamping: 1.85,
+      angularDamping: 2.4,
+    },
+  ];
+
+  useFrame(() => {
+    const rawRelease = THREE.MathUtils.clamp(physicsRelease?.get() ?? 1, 0, 1);
+    if (releaseBodies.some(({ body }) => !body.current)) return;
+    if (
+      lastRelease.current !== null
+      && Math.abs(lastRelease.current - rawRelease) < 0.001
+    ) return;
+    lastRelease.current = rawRelease;
+    const easedRelease = rawRelease * rawRelease * (3 - 2 * rawRelease);
+    const locked = rawRelease <= 0.001;
+
+    releaseBodies.forEach(({ body, x, y, linearDamping, angularDamping }) => {
+      const rigidBody = body.current;
+      if (!rigidBody) return;
+
+      rigidBody.setGravityScale(easedRelease, easedRelease > 0.001);
+      rigidBody.setLinearDamping(THREE.MathUtils.lerp(14, linearDamping, easedRelease));
+      rigidBody.setAngularDamping(THREE.MathUtils.lerp(14, angularDamping, easedRelease));
+
+      if (locked) {
+        const [resetX, resetY, resetZ] = orientedPosition(x, y);
+        rigidBody.setTranslation({ x: resetX, y: resetY, z: resetZ }, false);
+        rigidBody.setLinvel({ x: 0, y: 0, z: 0 }, false);
+        rigidBody.setAngvel({ x: 0, y: 0, z: 0 }, false);
+        rigidBody.setRotation({ x: 0, y: 0, z: 0, w: 1 }, false);
+      }
+    });
+  });
+
+  const dynamicCordProps = {
+    colliders: false as const,
+    canSleep: true,
+    gravityScale: 0,
+    linearDamping: 3.2,
+    angularDamping: 3.2,
+    enabledTranslations: [true, true, false] as [boolean, boolean, boolean],
+    enabledRotations: [false, false, false] as [boolean, boolean, boolean],
+  };
+  const cordBodies: CordBodies = {
+    leftAnchor,
+    leftOne,
+    leftTwo,
+    leftThree,
+    junction,
+    rightThree,
+    rightTwo,
+    rightOne,
+    rightAnchor,
+  };
+
+  return (
+    <>
+      <CordVisual bodies={cordBodies} settings={settings} />
+
+      <RigidBody
+        ref={leftAnchor}
+        type="fixed"
+        colliders={false}
+        position={orientedPosition(-5.1, 7.35)}
+      >
+        <BallCollider args={[0.04]} collisionGroups={0} />
+      </RigidBody>
+      <RigidBody
+        ref={leftOne}
+        {...dynamicCordProps}
+        position={orientedPosition(-3.9, 5.72)}
+      >
+        <BallCollider args={[0.055]} mass={0.45} collisionGroups={0} />
+      </RigidBody>
+      <RigidBody
+        ref={leftTwo}
+        {...dynamicCordProps}
+        position={orientedPosition(-2.5, 3.97)}
+      >
+        <BallCollider args={[0.055]} mass={0.45} collisionGroups={0} />
+      </RigidBody>
+      <RigidBody
+        ref={leftThree}
+        {...dynamicCordProps}
+        position={orientedPosition(-1.15, 2.32)}
+      >
+        <BallCollider args={[0.055]} mass={0.45} collisionGroups={0} />
+      </RigidBody>
+
+      <RigidBody
+        ref={junction}
+        {...dynamicCordProps}
+        position={orientedPosition(0, 1.02)}
+      >
+        <BallCollider args={[0.065]} mass={0.55} collisionGroups={0} />
+      </RigidBody>
+
+      <RigidBody
+        ref={rightThree}
+        {...dynamicCordProps}
+        position={orientedPosition(1.15, 2.32)}
+      >
+        <BallCollider args={[0.055]} mass={0.45} collisionGroups={0} />
+      </RigidBody>
+      <RigidBody
+        ref={rightTwo}
+        {...dynamicCordProps}
+        position={orientedPosition(2.5, 3.97)}
+      >
+        <BallCollider args={[0.055]} mass={0.45} collisionGroups={0} />
+      </RigidBody>
+      <RigidBody
+        ref={rightOne}
+        {...dynamicCordProps}
+        position={orientedPosition(3.9, 5.72)}
+      >
+        <BallCollider args={[0.055]} mass={0.45} collisionGroups={0} />
+      </RigidBody>
+      <RigidBody
+        ref={rightAnchor}
+        type="fixed"
+        colliders={false}
+        position={orientedPosition(5.1, 7.35)}
+      >
+        <BallCollider args={[0.04]} collisionGroups={0} />
+      </RigidBody>
+
+      <RigidBody
+        ref={pendant}
+        colliders={false}
+        canSleep
+        gravityScale={0}
+        linearDamping={1.85}
+        angularDamping={2.4}
+        enabledTranslations={[true, true, false]}
+        enabledRotations={[false, false, true]}
+        position={orientedPosition(0, 1.02 - PENDANT_DROP)}
+      >
+        <CuboidCollider
+          args={[
+            0.92 * PENDANT_SCALE,
+            1.05 * PENDANT_SCALE,
+            0.28 * PENDANT_SCALE,
+          ]}
+          mass={5}
+          collisionGroups={0}
+        />
+        <PendantVisual
+          body={pendant}
+          reduceMotion={reduceMotion}
+          settings={settings}
+          onWakeChange={onWakeChange}
+          onActivate={onActivate}
+          physicsRelease={physicsRelease}
+        />
+      </RigidBody>
+    </>
+  );
+}
diff --git a/components/device-lab/device-geometry.ts b/components/device-lab/device-geometry.ts
new file mode 100644
index 0000000..b54a0a7
--- /dev/null
+++ b/components/device-lab/device-geometry.ts
@@ -0,0 +1,49 @@
+import * as THREE from "three";
+
+export const GUNMETAL_CORE_PROFILE = [
+  new THREE.Vector2(0, -0.18),
+  new THREE.Vector2(0.75, -0.18),
+  new THREE.Vector2(0.81, -0.15),
+  new THREE.Vector2(0.83, -0.09),
+  new THREE.Vector2(0.83, 0.26),
+  new THREE.Vector2(0.81, 0.35),
+  new THREE.Vector2(0.74, 0.42),
+  new THREE.Vector2(0.6, 0.5),
+  new THREE.Vector2(0.35, 0.54),
+  new THREE.Vector2(0, 0.55),
+];
+
+export const PENDANT_SCALE = 0.75;
+export const PENDANT_DROP = 1.15 * PENDANT_SCALE;
+export const PRODUCT_YAW = -Math.PI / 4;
+
+export function createGrainTexture() {
+  const size = 128;
+  const data = new Uint8Array(size * size * 4);
+  const texture = new THREE.DataTexture(data, size, size, THREE.RGBAFormat);
+  texture.wrapS = THREE.RepeatWrapping;
+  texture.wrapT = THREE.RepeatWrapping;
+  return texture;
+}
+
+export function updateGrainTexture(
+  texture: THREE.DataTexture,
+  repeat: number,
+  contrast: number,
+  initialSeed = 0x5f3759df,
+) {
+  const data = texture.image.data as Uint8Array;
+  let seed = (initialSeed ^ 0x5f3759df) >>> 0;
+  for (let index = 0; index < data.length / 4; index += 1) {
+    seed = (Math.imul(seed, 1664525) + 1013904223) >>> 0;
+    const noise = (seed >>> 24) / 255 - 0.5;
+    const value = THREE.MathUtils.clamp(128 + noise * 255 * contrast, 0, 255);
+    const offset = index * 4;
+    data[offset] = value;
+    data[offset + 1] = value;
+    data[offset + 2] = value;
+    data[offset + 3] = 255;
+  }
+  texture.repeat.set(repeat, repeat);
+  texture.needsUpdate = true;
+}
diff --git a/components/device-lab/device-lab.module.css b/components/device-lab/device-lab.module.css
new file mode 100644
index 0000000..01fa705
--- /dev/null
+++ b/components/device-lab/device-lab.module.css
@@ -0,0 +1,1553 @@
+.fabricationLoader {
+  position: fixed;
+  z-index: 100;
+  inset: 0;
+  overflow: hidden;
+  background: #050608;
+  color: #f2f4f8;
+  opacity: 1;
+  transition:
+    opacity 680ms cubic-bezier(0.22, 1, 0.36, 1),
+    transform 680ms cubic-bezier(0.22, 1, 0.36, 1),
+    filter 680ms ease;
+}
+
+.fabricationLoader::before {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(90deg, transparent 49.95%, rgba(187, 205, 238, 0.045) 50%, transparent 50.05%),
+    linear-gradient(180deg, transparent 49.95%, rgba(187, 205, 238, 0.035) 50%, transparent 50.05%);
+  content: "";
+  pointer-events: none;
+}
+
+.fabricationLoaderExit {
+  transform: scale(1.012);
+  filter: blur(5px);
+  opacity: 0;
+  pointer-events: none;
+}
+
+.fabricationGlow {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: min(50vw, 540px);
+  aspect-ratio: 2.1 / 1;
+  transform: translate(-50%, -50%);
+  border-radius: 50%;
+  background:
+    radial-gradient(ellipse at center, rgba(80, 111, 184, 0.14), rgba(45, 61, 94, 0.045) 44%, transparent 72%);
+  filter: blur(34px);
+  pointer-events: none;
+}
+
+.fabricationCenter {
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+  width: min(500px, 82vw);
+  transform: translate(-50%, -50%);
+  text-align: center;
+}
+
+.fabricationCenter h1 {
+  margin: 0;
+  color: #f5f6f8;
+  font-size: clamp(16px, 1.7vw, 22px);
+  font-weight: 540;
+  letter-spacing: -0.035em;
+  line-height: 1;
+}
+
+.fabricationConveyor {
+  position: relative;
+  width: min(410px, 78vw);
+  height: 92px;
+  margin: 20px auto 0;
+  overflow: hidden;
+  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
+  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
+}
+
+.fabricationTrack {
+  position: absolute;
+  top: 11px;
+  left: -69px;
+  display: flex;
+  gap: 17px;
+  width: max-content;
+  animation: fabrication-conveyor 3.8s linear infinite;
+  will-change: transform;
+}
+
+.fabricationPendant {
+  flex: 0 0 52px;
+  width: 52px;
+  color: rgba(188, 204, 232, 0.31);
+}
+
+.fabricationPendant:nth-child(3n + 1) {
+  color: rgba(202, 215, 238, 0.46);
+}
+
+.fabricationPendant:nth-child(3n + 2) {
+  color: rgba(155, 174, 211, 0.22);
+}
+
+.fabricationPendant svg {
+  display: block;
+  width: 100%;
+  height: auto;
+  overflow: visible;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.2;
+  vector-effect: non-scaling-stroke;
+}
+
+.fabricationPendant .fabricationLed {
+  fill: #9fbfff;
+  stroke: none;
+  filter: drop-shadow(0 0 4px rgba(109, 153, 255, 0.95));
+  animation: fabrication-led 1.9s ease-in-out infinite alternate;
+}
+
+.fabricationRailTop,
+.fabricationRailBottom {
+  position: absolute;
+  right: 3%;
+  left: 3%;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(175, 191, 222, 0.3) 8%, rgba(175, 191, 222, 0.3) 92%, transparent);
+}
+
+.fabricationRailTop {
+  top: 58px;
+}
+
+.fabricationRailBottom {
+  top: 72px;
+}
+
+.fabricationRailTop::after,
+.fabricationRailBottom::after {
+  position: absolute;
+  inset: -2px 0;
+  background: repeating-linear-gradient(90deg, transparent 0 15px, rgba(170, 188, 220, 0.22) 15px 16px);
+  content: "";
+}
+
+.fabricationProgress {
+  position: absolute;
+  z-index: 3;
+  top: 50%;
+  right: clamp(18px, 3.6vw, 56px);
+  display: grid;
+  grid-template-columns: auto 1px;
+  align-items: center;
+  gap: 12px;
+  transform: translateY(-50%);
+  color: rgba(220, 228, 241, 0.7);
+  font-size: 9px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 650;
+  letter-spacing: 0.15em;
+}
+
+.fabricationProgress i {
+  position: relative;
+  width: 1px;
+  height: 62px;
+  transform-origin: bottom;
+  background: #a6c2ff;
+  box-shadow: 0 0 7px rgba(95, 139, 236, 0.6);
+  transition: transform 80ms linear;
+}
+
+@keyframes fabrication-conveyor {
+  to {
+    transform: translate3d(-69px, 0, 0);
+  }
+}
+
+@keyframes fabrication-led {
+  from {
+    opacity: 0.34;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+
+.lab {
+  position: relative;
+  height: 436svh;
+  background: #121212;
+  color: #f6f7fa;
+}
+
+.productSection {
+  position: sticky;
+  top: 0;
+  isolation: isolate;
+  height: 100svh;
+  min-height: 100svh;
+  overflow: hidden;
+  background:
+    radial-gradient(circle at 73% 48%, rgba(81, 106, 170, 0.13), transparent 30%),
+    radial-gradient(circle at 58% 82%, rgba(122, 74, 126, 0.09), transparent 34%),
+    #121212;
+}
+
+.productSection::after {
+  position: absolute;
+  z-index: 3;
+  inset: 0;
+  background:
+    linear-gradient(180deg, rgba(5, 6, 8, 0.4), transparent 24%),
+    radial-gradient(circle at 50% 50%, transparent 52%, rgba(5, 6, 8, 0.22) 100%);
+  content: "";
+  pointer-events: none;
+}
+
+.canvas {
+  position: absolute !important;
+  z-index: 2;
+  inset: 0;
+  width: 100% !important;
+  height: 100% !important;
+  touch-action: pan-y;
+}
+
+.halo {
+  position: absolute;
+  z-index: 1;
+  top: 3%;
+  left: 72%;
+  width: min(66vw, 920px);
+  aspect-ratio: 1;
+  transform: translateX(-50%);
+  border-radius: 50%;
+  background: radial-gradient(
+    circle,
+    rgba(89, 116, 185, 0.14) 0%,
+    rgba(92, 73, 125, 0.07) 38%,
+    transparent 68%
+  );
+  filter: blur(12px);
+  pointer-events: none;
+}
+
+.haze {
+  position: absolute;
+  z-index: 1;
+  right: -12%;
+  bottom: -38%;
+  width: 82vw;
+  height: 72vw;
+  border-radius: 50%;
+  background: radial-gradient(circle, rgba(177, 136, 180, 0.09), transparent 63%);
+  filter: blur(46px);
+  pointer-events: none;
+}
+
+.siteNav {
+  position: absolute;
+  z-index: 12;
+  top: 0;
+  right: 0;
+  left: 0;
+  display: grid;
+  grid-template-columns: minmax(200px, 1fr) auto minmax(200px, 1fr);
+  align-items: center;
+  min-height: 76px;
+  padding: 0 clamp(24px, 3.2vw, 56px);
+  background: linear-gradient(180deg, rgba(5, 6, 9, 0.94), rgba(5, 6, 9, 0.78));
+  color: #f5f7fb;
+}
+
+.siteNav::after {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 1px;
+  background: rgba(255, 255, 255, 0.13);
+  content: "";
+  pointer-events: none;
+}
+
+.navProgress {
+  position: absolute;
+  z-index: 1;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 1px;
+  transform-origin: left;
+  background: #9abaff;
+  box-shadow: 0 0 8px rgba(93, 139, 255, 0.72);
+  pointer-events: none;
+}
+
+.navBrand {
+  display: inline-flex;
+  align-items: center;
+  justify-self: start;
+  gap: 18px;
+  color: inherit;
+  text-decoration: none;
+}
+
+.navBrand::after {
+  order: 1;
+  width: 1px;
+  height: 18px;
+  background: rgba(255, 255, 255, 0.18);
+  content: "";
+}
+
+.navLogo {
+  display: block;
+  width: 52px;
+  height: auto;
+}
+
+.navSignal {
+  order: 2;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  color: rgba(232, 236, 244, 0.58);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.035em;
+  transition: color 240ms ease-out;
+}
+
+.navSignalDot {
+  width: 5px;
+  height: 5px;
+  border-radius: 50%;
+  background: #6f7682;
+  box-shadow: 0 0 0 3px rgba(111, 118, 130, 0.12);
+  transition:
+    background-color 240ms ease-out,
+    box-shadow 240ms ease-out;
+}
+
+.navSignalAwake {
+  color: #dce8ff;
+}
+
+.navSignalAwake .navSignalDot {
+  background: #8db2ff;
+  box-shadow:
+    0 0 0 3px rgba(77, 117, 203, 0.16),
+    0 0 16px rgba(90, 140, 255, 0.8);
+}
+
+.sceneNav {
+  display: flex;
+  align-self: stretch;
+  justify-content: center;
+  gap: 0;
+}
+
+.sceneLink {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 9px;
+  min-width: 112px;
+  padding: 0 16px;
+  border: 0;
+  background: transparent;
+  color: rgba(232, 236, 244, 0.4);
+  font: inherit;
+  cursor: pointer;
+  transition:
+    background-color 240ms ease-out,
+    color 240ms ease-out;
+}
+
+.sceneLink::after {
+  position: absolute;
+  bottom: 13px;
+  left: 50%;
+  width: 3px;
+  height: 3px;
+  transform: translateX(-50%) scale(0);
+  border-radius: 50%;
+  background: #9abaff;
+  box-shadow: 0 0 8px rgba(93, 139, 255, 0.84);
+  content: "";
+  transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.sceneLink:hover,
+.sceneLink:focus-visible,
+.sceneLinkActive {
+  color: #f5f7fb;
+}
+
+.sceneLink:hover {
+  background: rgba(255, 255, 255, 0.035);
+}
+
+.sceneLink:focus-visible {
+  outline: 1px solid rgba(255, 255, 255, 0.6);
+  outline-offset: -8px;
+}
+
+.sceneLinkActive {
+  background: rgba(255, 255, 255, 0.055);
+}
+
+.sceneLinkActive::after {
+  transform: translateX(-50%) scale(1);
+}
+
+.sceneIndex,
+.sceneName {
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.sceneIndex {
+  color: rgba(232, 236, 244, 0.32);
+  font-size: 9px;
+  font-variant-numeric: tabular-nums;
+  transition: color 240ms ease-out;
+}
+
+.sceneLinkActive .sceneIndex {
+  color: #9abaff;
+}
+
+.navCta {
+  display: inline-flex;
+  align-items: center;
+  justify-self: end;
+  gap: 24px;
+  min-height: 42px;
+  padding: 0 15px 0 18px;
+  border: 1px solid #fff;
+  background: #fff;
+  color: #090a0d;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-decoration: none;
+  text-transform: uppercase;
+  transition:
+    background-color 240ms ease-out,
+    color 240ms ease-out,
+    border-color 240ms ease-out;
+}
+
+.navCta svg {
+  width: 17px;
+  height: 17px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.35;
+  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.navCta:hover,
+.navCta:focus-visible {
+  border-color: #b8ccff;
+  background: #b8ccff;
+  color: #07090d;
+}
+
+.navCta:hover svg,
+.navCta:focus-visible svg {
+  transform: translateX(3px);
+}
+
+.navCta:focus-visible {
+  outline: 2px solid #fff;
+  outline-offset: 4px;
+}
+
+.frameOneUi {
+  position: absolute;
+  z-index: 7;
+  inset: 0;
+  mix-blend-mode: difference;
+  pointer-events: none;
+  will-change: opacity, transform;
+}
+
+.wordmark {
+  position: absolute;
+  right: 0;
+  bottom: -2.1vw;
+  left: 0;
+  width: 100vw;
+  margin: 0;
+  color: #fff;
+}
+
+.wordmarkSvg {
+  display: block;
+  width: 100%;
+  height: auto;
+  overflow: visible;
+}
+
+.wordmarkLetter {
+  font-family: "Montserrat", sans-serif;
+  font-size: 520px;
+  font-weight: 700;
+  fill: currentColor;
+  letter-spacing: -0.065em;
+  will-change: transform;
+}
+
+.frameTwoUi {
+  position: absolute;
+  z-index: 6;
+  inset: 0;
+  pointer-events: none;
+  transform-origin: 24% 50%;
+  will-change: opacity, transform;
+}
+
+.frameThreeUi,
+.frameFourUi {
+  position: absolute;
+  z-index: 7;
+  inset: 0;
+  pointer-events: none;
+  transform-origin: 24% 50%;
+  will-change: opacity, transform;
+}
+
+.frameThreeCopy,
+.frameFourCopy {
+  position: absolute;
+  top: clamp(142px, 19vh, 190px);
+  left: clamp(32px, 4vw, 64px);
+  width: min(42vw, 540px);
+  color: #f4f6fa;
+  text-wrap: balance;
+}
+
+.frameThreeCopy {
+  right: clamp(32px, 4vw, 64px);
+  left: auto;
+}
+
+.storyEyebrow {
+  display: block;
+  margin-bottom: clamp(14px, 1.8vw, 25px);
+  color: rgba(191, 209, 249, 0.72);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  will-change: opacity, transform, filter;
+}
+
+.frameThreeCopy h2,
+.frameFourCopy h2 {
+  max-width: 540px;
+  margin: 0;
+  font-family: "Montserrat", sans-serif;
+  font-size: clamp(42px, 4.8vw, 76px);
+  font-weight: 600;
+  letter-spacing: -0.045em;
+  line-height: 0.94;
+  will-change: opacity, transform, filter;
+}
+
+.frameThreeCopy p,
+.frameFourCopy p {
+  max-width: 420px;
+  margin: clamp(16px, 1.8vw, 26px) 0 0;
+  color: rgba(232, 237, 246, 0.72);
+  font-size: clamp(12px, 1.05vw, 15px);
+  line-height: 1.58;
+  text-wrap: pretty;
+  will-change: opacity, transform, filter;
+}
+
+.memoryProof {
+  position: absolute;
+  top: clamp(142px, 19vh, 190px);
+  right: auto;
+  bottom: auto;
+  left: clamp(32px, 4vw, 64px);
+  display: grid;
+  width: min(44vw, 600px);
+  overflow: hidden;
+  border: 1px solid rgba(209, 220, 245, 0.16);
+  background: rgba(7, 10, 16, 0.56);
+  box-shadow: 0 18px 52px rgba(0, 0, 0, 0.18);
+  backdrop-filter: blur(12px) saturate(0.82);
+  -webkit-backdrop-filter: blur(12px) saturate(0.82);
+}
+
+.memoryProofCard {
+  display: grid;
+  grid-template-columns: 48px minmax(0, 1fr) auto;
+  align-items: center;
+  min-height: 54px;
+  border-bottom: 1px solid rgba(209, 220, 245, 0.13);
+  background: linear-gradient(90deg, rgba(8, 11, 17, 0.38), rgba(8, 11, 17, 0.08));
+  will-change: opacity, transform, clip-path;
+}
+
+.memoryProofCard:last-child {
+  border-bottom: 0;
+}
+
+.memoryProofIndex {
+  padding-left: 16px;
+  color: rgba(154, 186, 255, 0.5);
+  font-size: 9px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+}
+
+.memoryProofText {
+  display: grid;
+  gap: 4px;
+}
+
+.memoryProofText small,
+.memoryProofStatus {
+  color: rgba(230, 236, 248, 0.42);
+  font-size: 8px;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.memoryProofText strong {
+  color: rgba(244, 247, 252, 0.92);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.memoryProofStatus {
+  padding-right: 16px;
+  color: rgba(154, 186, 255, 0.72);
+}
+
+.frameFourCopy {
+  z-index: 2;
+  width: min(46vw, 610px);
+}
+
+.frameFourCopy h2 {
+  max-width: 600px;
+  font-size: clamp(44px, 5.3vw, 84px);
+}
+
+.purchaseActions {
+  display: flex;
+  align-items: center;
+  gap: 22px;
+  margin-top: clamp(24px, 3vw, 38px);
+  pointer-events: auto;
+}
+
+.purchasePrimary,
+.purchaseSecondary {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 48px;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.07em;
+  text-decoration: none;
+  text-transform: uppercase;
+}
+
+.purchasePrimary {
+  gap: 38px;
+  min-width: 176px;
+  padding: 0 18px 0 22px;
+  background: #f4f6fa;
+  color: #080a0d;
+  transition: background-color 240ms ease-out, color 240ms ease-out;
+}
+
+.purchasePrimary:hover,
+.purchasePrimary:focus-visible {
+  background: #b8ccff;
+}
+
+.purchasePrimary svg,
+.purchaseSecondary svg {
+  width: 17px;
+  height: 17px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.35;
+}
+
+.purchasePrimary svg {
+  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.purchasePrimary:hover svg,
+.purchasePrimary:focus-visible svg {
+  transform: translateX(3px);
+}
+
+.purchasePrimary:focus-visible,
+.purchaseSecondary:focus-visible {
+  outline: 2px solid #b8ccff;
+  outline-offset: 4px;
+}
+
+.purchaseSecondary {
+  gap: 10px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: rgba(235, 240, 249, 0.72);
+  cursor: pointer;
+}
+
+.purchaseSecondary:hover,
+.purchaseSecondary:focus-visible {
+  color: #fff;
+}
+
+.purchaseDetails {
+  max-width: 500px;
+  overflow: hidden;
+  margin-top: 18px;
+  color: rgba(225, 232, 246, 0.56);
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.035em;
+  line-height: 1.5;
+}
+
+.frameFourImage {
+  position: absolute;
+  z-index: 1;
+  top: clamp(142px, 19vh, 190px);
+  right: clamp(32px, 4vw, 64px);
+  width: min(40vw, 650px);
+  aspect-ratio: 570 / 321;
+  overflow: hidden;
+  margin: 0;
+  border: 1px solid rgba(216, 226, 246, 0.15);
+  background: #080a0d;
+  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.32);
+  pointer-events: none;
+  will-change: opacity, transform, clip-path;
+}
+
+.frameFourImage img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter: saturate(0.76) contrast(1.08) brightness(0.78);
+  will-change: transform;
+}
+
+.frameFourImage > span {
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(90deg, rgba(5, 7, 10, 0.38), transparent 38%),
+    linear-gradient(180deg, transparent 58%, rgba(4, 6, 9, 0.36));
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025);
+}
+
+.purchaseConfidence {
+  position: absolute;
+  right: clamp(32px, 4vw, 64px);
+  bottom: clamp(38px, 6vh, 68px);
+  left: clamp(32px, 4vw, 64px);
+  display: flex;
+  justify-content: flex-end;
+  gap: clamp(24px, 4vw, 64px);
+  padding-top: 18px;
+  border-top: 1px solid rgba(214, 224, 245, 0.16);
+  color: rgba(226, 233, 246, 0.52);
+  font-size: 9px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  will-change: opacity, transform, clip-path;
+}
+
+.purchaseConfidence span {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 6px;
+}
+
+.purchaseConfidence strong {
+  color: rgba(244, 247, 252, 0.92);
+  font-size: 10px;
+  font-weight: 700;
+}
+
+.frameTwoCopy {
+  position: absolute;
+  top: clamp(136px, 19vh, 190px);
+  left: clamp(32px, 4vw, 64px);
+  width: min(42vw, 520px);
+  color: #f4f6fa;
+  text-wrap: balance;
+}
+
+.frameTwoEyebrow {
+  display: block;
+  margin-bottom: clamp(14px, 1.8vw, 25px);
+  color: rgba(229, 235, 246, 0.64);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  will-change: opacity, transform, filter;
+}
+
+.frameTwoCopy h2 {
+  max-width: 500px;
+  margin: 0;
+  font-family: "Montserrat", sans-serif;
+  font-size: clamp(38px, 4.5vw, 70px);
+  font-weight: 600;
+  letter-spacing: -0.035em;
+  line-height: 0.94;
+  will-change: opacity, transform, filter;
+}
+
+.frameTwoCopy p {
+  max-width: 380px;
+  margin: clamp(14px, 1.7vw, 24px) 0 0;
+  color: rgba(232, 237, 246, 0.74);
+  font-size: clamp(12px, 1.05vw, 15px);
+  line-height: 1.55;
+  text-wrap: pretty;
+  will-change: opacity, transform, filter;
+}
+
+.frameTwoFilmDock {
+  position: absolute;
+  bottom: clamp(34px, 5.2vh, 58px);
+  left: clamp(32px, 4vw, 64px);
+  width: min(50vw, 760px);
+  pointer-events: auto;
+  will-change: opacity, transform, clip-path;
+}
+
+.launchFilm {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border: 1px solid rgba(220, 229, 245, 0.18);
+  background: #050607;
+  cursor: pointer;
+}
+
+.launchFilm::before {
+  position: absolute;
+  z-index: 3;
+  inset: 0;
+  border: 1px solid rgba(255, 255, 255, 0.035);
+  content: "";
+  pointer-events: none;
+}
+
+.launchFilmPoster {
+  position: absolute;
+  z-index: 0;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter: saturate(0.78) contrast(1.1) brightness(0.74);
+  will-change: opacity, transform;
+  pointer-events: none;
+}
+
+.launchFilmShade {
+  position: absolute;
+  z-index: 1;
+  inset: 0;
+  background:
+    linear-gradient(90deg, rgba(3, 4, 6, 0.18), transparent 48%),
+    linear-gradient(180deg, rgba(3, 4, 6, 0.12), transparent 54%, rgba(3, 4, 6, 0.78));
+  pointer-events: none;
+}
+
+.launchFilmOpen {
+  position: absolute;
+  z-index: 2;
+  inset: 0;
+  display: flex;
+  align-items: flex-end;
+  gap: 12px;
+  width: 100%;
+  padding: 24px;
+  border: 0;
+  background: transparent;
+  color: #f4f6fa;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-align: left;
+  cursor: pointer;
+}
+
+.launchFilmOpen::after {
+  position: absolute;
+  inset: 0;
+  background: rgba(138, 170, 240, 0);
+  content: "";
+  transition: background-color 300ms ease-out;
+}
+
+.launchFilmOpen:hover::after,
+.launchFilmOpen:focus-visible::after {
+  background: rgba(138, 170, 240, 0.08);
+}
+
+.launchFilmOpen:focus-visible {
+  outline: 2px solid #b8ccff;
+  outline-offset: -5px;
+}
+
+.launchFilmOpen > span {
+  position: relative;
+  z-index: 1;
+}
+
+.launchFilmPlay {
+  display: grid;
+  width: 34px;
+  height: 34px;
+  place-items: center;
+  border-radius: 50%;
+  background: #f4f6fa;
+  color: #080a0d;
+  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.launchFilmOpen:hover .launchFilmPlay,
+.launchFilmOpen:focus-visible .launchFilmPlay {
+  transform: scale(1.08);
+}
+
+.launchFilmPlay svg {
+  width: 18px;
+  height: 18px;
+  fill: currentColor;
+}
+
+.launchFilmMeta {
+  position: absolute;
+  z-index: 2;
+  top: 19px;
+  right: 21px;
+  color: rgba(229, 235, 246, 0.42);
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+}
+
+.filmModal {
+  position: fixed;
+  z-index: 30;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: clamp(24px, 5vw, 72px);
+  background: rgba(1, 2, 4, 0.88);
+  backdrop-filter: blur(18px) saturate(0.76);
+}
+
+.filmModalPanel {
+  position: relative;
+  width: min(92vw, 1500px, calc(84vh * 16 / 9));
+  aspect-ratio: 16 / 9;
+  overflow: visible;
+  background: #000;
+  box-shadow: 0 8px 42px rgba(0, 0, 0, 0.72);
+}
+
+.filmModalFrame {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+.filmModalClose {
+  position: absolute;
+  z-index: 2;
+  top: -44px;
+  right: 0;
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  min-height: 38px;
+  padding: 0 12px 0 14px;
+  border: 0;
+  background: rgba(6, 8, 12, 0.82);
+  color: #f5f7fb;
+  font: inherit;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  cursor: pointer;
+}
+
+.filmModalClose svg {
+  width: 16px;
+  height: 16px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-width: 1.4;
+}
+
+.thoughtPrompt {
+  position: absolute;
+  z-index: 11;
+  top: 43%;
+  left: 72%;
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 40px;
+  padding: 0 13px;
+  border: 1px solid rgba(179, 202, 255, 0.34);
+  background: rgba(8, 11, 17, 0.88);
+  color: #e7edfa;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.thoughtPrompt::before {
+  position: absolute;
+  right: 100%;
+  width: 42px;
+  height: 1px;
+  background: linear-gradient(90deg, transparent, rgba(151, 184, 255, 0.6));
+  content: "";
+}
+
+.thoughtPromptSignal {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: #9abaff;
+  box-shadow: 0 0 14px rgba(91, 137, 255, 0.9);
+  animation: thought-signal 1.8s ease-in-out infinite;
+}
+
+.thoughtPrompt > svg,
+.thoughtMessageBody button svg {
+  width: 17px;
+  height: 17px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.35;
+}
+
+.thoughtPrompt > svg {
+  margin-left: 4px;
+  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.thoughtPrompt:hover > svg,
+.thoughtPrompt:focus-visible > svg {
+  transform: translateX(3px);
+}
+
+.thoughtPrompt:focus-visible {
+  outline: 2px solid #b8ccff;
+  outline-offset: 3px;
+}
+
+.thoughtMessage {
+  position: absolute;
+  z-index: 14;
+  right: clamp(24px, 5vw, 76px);
+  bottom: clamp(34px, 7vh, 76px);
+  width: min(370px, calc(100vw - 48px));
+  min-height: 236px;
+  overflow: hidden;
+  background: rgba(7, 9, 14, 0.94);
+  color: #f3f6fc;
+  will-change: opacity, transform, clip-path;
+}
+
+.thoughtMessageTopline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  min-height: 48px;
+  padding: 0 14px 0 18px;
+  border-bottom: 1px solid rgba(210, 224, 255, 0.12);
+  color: rgba(230, 236, 248, 0.56);
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+}
+
+.thoughtMessageTopline span {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.thoughtMessageTopline i {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #8db2ff;
+  box-shadow: 0 0 12px rgba(90, 140, 255, 0.78);
+}
+
+.thoughtMessageTopline button {
+  display: grid;
+  width: 30px;
+  height: 30px;
+  place-items: center;
+  border: 0;
+  background: transparent;
+  color: rgba(236, 241, 250, 0.64);
+  cursor: pointer;
+}
+
+.thoughtMessageTopline button:hover,
+.thoughtMessageTopline button:focus-visible {
+  color: #fff;
+}
+
+.thoughtMessageTopline button svg {
+  width: 17px;
+  height: 17px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-width: 1.35;
+}
+
+.thoughtMessageBody {
+  padding: 24px 24px 25px;
+}
+
+.thoughtMessageBody h3 {
+  margin: 0;
+  font-family: "Montserrat", sans-serif;
+  font-size: 22px;
+  font-weight: 600;
+  letter-spacing: -0.025em;
+  line-height: 1.12;
+  text-wrap: balance;
+}
+
+.thoughtMessageBody p {
+  margin: 14px 0 0;
+  color: rgba(230, 236, 248, 0.7);
+  font-size: 13px;
+  line-height: 1.55;
+  text-wrap: pretty;
+}
+
+.thoughtMessageBody > button {
+  display: inline-flex;
+  align-items: center;
+  gap: 14px;
+  min-height: 38px;
+  margin-top: 20px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: #b9ceff;
+  font: inherit;
+  font-size: 11px;
+  font-weight: 700;
+  cursor: pointer;
+}
+
+.thoughtMessageBody > button:hover svg,
+.thoughtMessageBody > button:focus-visible svg {
+  transform: translateX(3px);
+}
+
+.thoughtMessageBody > button svg {
+  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.thoughtMessageDone {
+  display: inline-flex;
+  align-items: center;
+  gap: 9px;
+  margin-top: 20px;
+  color: #b9ceff;
+  font-size: 11px;
+  font-weight: 700;
+}
+
+.thoughtMessageDone svg {
+  width: 17px;
+  height: 17px;
+  fill: none;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.5;
+}
+
+@keyframes thought-signal {
+  0%,
+  100% {
+    opacity: 0.72;
+    transform: scale(0.9);
+  }
+  50% {
+    opacity: 1;
+    transform: scale(1.12);
+  }
+}
+
+.srOnly {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (max-width: 960px) {
+  .siteNav {
+    grid-template-columns: 1fr auto;
+  }
+
+  .siteNav::after,
+  .navProgress {
+    bottom: -50px;
+  }
+
+  .sceneNav {
+    position: absolute;
+    top: 76px;
+    right: 0;
+    left: 0;
+    height: 50px;
+    padding: 0 clamp(24px, 3.2vw, 56px);
+    background: rgba(5, 6, 9, 0.9);
+  }
+
+  .sceneLink::after {
+    bottom: 8px;
+  }
+
+}
+
+@media (max-width: 760px) {
+  .fabricationCenter {
+    top: 50%;
+    width: 100%;
+  }
+
+  .fabricationCenter h1 {
+    font-size: clamp(15px, 4.6vw, 18px);
+    line-height: 1;
+  }
+
+  .fabricationConveyor {
+    width: min(410px, 92vw);
+    margin-top: 18px;
+  }
+
+  .fabricationProgress {
+    right: 14px;
+    gap: 8px;
+    font-size: 8px;
+  }
+
+  .fabricationProgress i {
+    height: 48px;
+  }
+
+  .productSection {
+    min-height: 100svh;
+  }
+
+  .productSection::after {
+    background:
+      linear-gradient(180deg, rgba(5, 6, 8, 0.5), transparent 22%),
+      radial-gradient(circle at 50% 50%, transparent 45%, rgba(5, 6, 8, 0.24) 100%);
+  }
+
+  .siteNav {
+    min-height: 72px;
+    padding: 0 20px;
+  }
+
+  .siteNav::after,
+  .navProgress {
+    bottom: -48px;
+  }
+
+  .navSignal {
+    display: none;
+  }
+
+  .navBrand::after {
+    display: none;
+  }
+
+  .navCta {
+    min-height: 40px;
+    padding: 0 13px 0 16px;
+  }
+
+  .sceneNav {
+    top: 72px;
+    right: 0;
+    left: 0;
+    height: 48px;
+    padding: 0 20px;
+  }
+
+  .sceneLink,
+  .sceneLinkActive {
+    flex: 1;
+    min-width: 0;
+    padding: 0 10px;
+  }
+
+  .sceneName {
+    display: none;
+  }
+
+  .sceneLink::after {
+    bottom: 7px;
+  }
+
+  .halo {
+    top: 30%;
+    left: 50%;
+    width: 125vw;
+  }
+
+  .haze {
+    filter: blur(28px);
+  }
+
+  .frameTwoUi {
+    inset: 0;
+    width: auto;
+  }
+
+  .frameTwoCopy {
+    top: 22vh;
+    left: 24px;
+    width: calc(100% - 48px);
+  }
+
+  .frameTwoCopy h2 {
+    max-width: 340px;
+    font-size: clamp(42px, 13vw, 56px);
+  }
+
+  .frameTwoCopy p {
+    max-width: 320px;
+    font-size: 12px;
+  }
+
+  .frameTwoFilmDock {
+    top: auto;
+    right: 18px;
+    bottom: 24px;
+    left: 18px;
+    width: auto;
+  }
+
+  .frameThreeCopy,
+  .frameFourCopy {
+    top: 20vh;
+    left: 24px;
+    width: calc(100% - 48px);
+  }
+
+  .frameThreeCopy {
+    right: 24px;
+    left: 24px;
+    width: auto;
+  }
+
+  .frameThreeCopy h2,
+  .frameFourCopy h2 {
+    max-width: 390px;
+    font-size: clamp(40px, 12vw, 58px);
+  }
+
+  .frameThreeCopy p,
+  .frameFourCopy p {
+    max-width: 335px;
+    font-size: 12px;
+  }
+
+  .memoryProof {
+    top: 56vh;
+    right: 20px;
+    bottom: auto;
+    left: 20px;
+    width: auto;
+    background: rgba(7, 10, 16, 0.62);
+    backdrop-filter: blur(24px) saturate(0.9);
+    -webkit-backdrop-filter: blur(24px) saturate(0.9);
+  }
+
+  .memoryProofCard {
+    grid-template-columns: 44px minmax(0, 1fr) auto;
+    min-height: 48px;
+  }
+
+  .memoryProofIndex {
+    padding-left: 13px;
+  }
+
+  .memoryProofText strong {
+    font-size: 11px;
+  }
+
+  .frameFourCopy {
+    top: 23vh;
+  }
+
+  .frameFourImage {
+    display: none;
+  }
+
+  .purchaseActions {
+    align-items: flex-start;
+    flex-direction: column;
+    gap: 16px;
+    margin-top: 26px;
+  }
+
+  .purchasePrimary {
+    min-width: 168px;
+  }
+
+  .purchaseConfidence {
+    right: 20px;
+    bottom: 30px;
+    left: 20px;
+    justify-content: flex-start;
+    flex-wrap: wrap;
+    gap: 12px 24px;
+  }
+
+  .purchaseConfidence span {
+    width: calc(50% - 12px);
+  }
+
+  .launchFilm {
+    aspect-ratio: 16 / 10;
+  }
+
+  .launchFilmOpen {
+    padding: 18px;
+  }
+
+  .filmModal {
+    padding: 12px;
+  }
+
+  .filmModalPanel {
+    width: 100%;
+  }
+
+  .filmModalClose span {
+    display: none;
+  }
+
+  .filmModalClose {
+    width: 38px;
+    padding: 0;
+    justify-content: center;
+  }
+
+  .thoughtPrompt {
+    top: 41%;
+    right: 14px;
+    left: auto;
+  }
+
+  .thoughtPrompt::before {
+    width: 28px;
+  }
+
+  .thoughtMessage {
+    right: 18px;
+    bottom: 32px;
+    width: calc(100% - 36px);
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .navSignal,
+  .navSignalDot,
+  .sceneLink,
+  .sceneLink::after,
+  .sceneName,
+  .navCta,
+  .navCta svg,
+  .launchFilmOpen::after,
+  .launchFilmPlay,
+  .thoughtPrompt > svg,
+  .thoughtMessageBody > button svg {
+    transition: none;
+  }
+
+  .purchasePrimary,
+  .purchasePrimary svg {
+    transition: none;
+  }
+
+  .thoughtPromptSignal {
+    animation: none;
+  }
+}
diff --git a/components/device-lab/device-settings.ts b/components/device-lab/device-settings.ts
new file mode 100644
index 0000000..8547587
--- /dev/null
+++ b/components/device-lab/device-settings.ts
@@ -0,0 +1,442 @@
+export interface SurfaceSettings {
+  color: string;
+  metalness: number;
+  roughness: number;
+  clearcoat: number;
+  clearcoatRoughness: number;
+  bumpScale: number;
+  envMapIntensity: number;
+}
+
+export interface PlasticSurfaceSettings extends SurfaceSettings {
+  transmission: number;
+  thickness: number;
+  ior: number;
+  attenuationColor: string;
+  attenuationDistance: number;
+  noiseEnabled: boolean;
+  noiseScale: number;
+  noiseContrast: number;
+  noiseSeed: number;
+}
+
+export interface ParticleLayerSettings {
+  color: string;
+  count: number;
+  size: number;
+  speed: number;
+  opacity: number;
+  noise: number;
+  spreadX: number;
+  spreadY: number;
+  spreadZ: number;
+}
+
+export interface CameraPoseSettings {
+  position: {
+    x: number;
+    y: number;
+    z: number;
+  };
+  target: {
+    x: number;
+    y: number;
+    z: number;
+  };
+  fov: number;
+}
+
+export interface LabSettings {
+  texture: {
+    enabled: boolean;
+    repeat: number;
+    contrast: number;
+  };
+  cord: {
+    color: string;
+    metalness: number;
+    roughness: number;
+    bumpScale: number;
+  };
+  shell: PlasticSurfaceSettings;
+  seam: SurfaceSettings;
+  bezel: SurfaceSettings;
+  core: SurfaceSettings;
+  architecture: {
+    textureEnabled: boolean;
+    textureRepeat: number;
+    textureContrast: number;
+    textureSeed: number;
+    platform: SurfaceSettings;
+    backdrop: SurfaceSettings;
+  };
+  particles: {
+    enabled: boolean;
+    dust: ParticleLayerSettings;
+    glow: ParticleLayerSettings;
+  };
+  led: {
+    outerColor: string;
+    outerOpacity: number;
+    innerColor: string;
+    innerOpacity: number;
+    coreColor: string;
+    lightColor: string;
+    lightIntensity: number;
+  };
+  camera: {
+    frame1: CameraPoseSettings;
+    frame2: CameraPoseSettings;
+    frame3: CameraPoseSettings;
+    frame4: CameraPoseSettings;
+  };
+  conveyor: {
+    position: {
+      x: number;
+      y: number;
+      z: number;
+    };
+    rotation: {
+      x: number;
+      y: number;
+      z: number;
+    };
+  };
+  stage: {
+    background: string;
+    fogColor: string;
+    ambientColor: string;
+    ambientIntensity: number;
+    hemisphereSky: string;
+    hemisphereGround: string;
+    hemisphereIntensity: number;
+    keyColor: string;
+    keyIntensity: number;
+    keyPosition: {
+      x: number;
+      y: number;
+      z: number;
+    };
+    fillColor: string;
+    fillIntensity: number;
+    fillPosition: {
+      x: number;
+      y: number;
+      z: number;
+    };
+    rimColor: string;
+    rimIntensity: number;
+    rimPosition: {
+      x: number;
+      y: number;
+      z: number;
+    };
+    exposure: number;
+  };
+  environment: {
+    keyColor: string;
+    keyIntensity: number;
+    keyPosition: {
+      x: number;
+      y: number;
+      z: number;
+    };
+    sideColor: string;
+    sideIntensity: number;
+    sidePosition: {
+      x: number;
+      y: number;
+      z: number;
+    };
+    ringColor: string;
+    ringIntensity: number;
+    ringPosition: {
+      x: number;
+      y: number;
+      z: number;
+    };
+  };
+  postProcessing: {
+    enabled: boolean;
+    bloom: {
+      enabled: boolean;
+      intensity: number;
+      threshold: number;
+      smoothing: number;
+      radius: number;
+    };
+    depthOfField: {
+      enabled: boolean;
+      focusDistance: number;
+      focusRange: number;
+      focalLength: number;
+      bokehScale: number;
+      resolutionScale: number;
+    };
+    colorGrade: {
+      enabled: boolean;
+      brightness: number;
+      contrast: number;
+      saturation: number;
+      hue: number;
+    };
+    vignette: {
+      enabled: boolean;
+      offset: number;
+      darkness: number;
+    };
+    grain: {
+      enabled: boolean;
+      opacity: number;
+      premultiply: boolean;
+    };
+    chromaticAberration: {
+      enabled: boolean;
+      offsetX: number;
+      offsetY: number;
+      radialModulation: boolean;
+      modulationOffset: number;
+    };
+  };
+}
+
+export function createDefaultLabSettings(): LabSettings {
+  return {
+    texture: {
+      enabled: true,
+      repeat: 8,
+      contrast: 0.68,
+    },
+    cord: {
+      color: "#373a3e",
+      metalness: 0.16,
+      roughness: 0.58,
+      bumpScale: 0,
+    },
+    shell: {
+      color: "#ededed",
+      metalness: 0,
+      roughness: 0.45,
+      clearcoat: 0.71,
+      clearcoatRoughness: 0.59,
+      bumpScale: 0.108,
+      envMapIntensity: 0.84,
+      transmission: 0.94,
+      thickness: 1.35,
+      ior: 1.556,
+      attenuationColor: "#8fa3bd",
+      attenuationDistance: 2.65,
+      noiseEnabled: true,
+      noiseScale: 3.25,
+      noiseContrast: 3.45,
+      noiseSeed: 4491,
+    },
+    seam: {
+      color: "#ededed",
+      metalness: 1,
+      roughness: 0.37,
+      clearcoat: 0.28,
+      clearcoatRoughness: 0.16,
+      bumpScale: 0.056,
+      envMapIntensity: 1.04,
+    },
+    bezel: {
+      color: "#ededed",
+      metalness: 1,
+      roughness: 0.37,
+      clearcoat: 0.28,
+      clearcoatRoughness: 0.16,
+      bumpScale: 0.056,
+      envMapIntensity: 1.04,
+    },
+    core: {
+      color: "#ededed",
+      metalness: 1,
+      roughness: 0.37,
+      clearcoat: 0.28,
+      clearcoatRoughness: 0.16,
+      bumpScale: 0.056,
+      envMapIntensity: 1.04,
+    },
+    architecture: {
+      textureEnabled: true,
+      textureRepeat: 18,
+      textureContrast: 0.22,
+      textureSeed: 7319,
+      platform: {
+        color: "#262626",
+        metalness: 0,
+        roughness: 0.7,
+        clearcoat: 0.04,
+        clearcoatRoughness: 0.7,
+        bumpScale: 0.018,
+        envMapIntensity: 0.18,
+      },
+      backdrop: {
+        color: "#1c1c1c",
+        metalness: 0,
+        roughness: 0.88,
+        clearcoat: 0.02,
+        clearcoatRoughness: 0.8,
+        bumpScale: 0.012,
+        envMapIntensity: 0.12,
+      },
+    },
+    particles: {
+      enabled: true,
+      dust: {
+        color: "#a9bbdf",
+        count: 15,
+        size: 2.7,
+        speed: 0.03,
+        opacity: 0.18,
+        noise: 0.6,
+        spreadX: 7.9,
+        spreadY: 4.9,
+        spreadZ: 3.4,
+      },
+      glow: {
+        color: "#b188b4",
+        count: 34,
+        size: 3.2,
+        speed: 0.035,
+        opacity: 0.33,
+        noise: 0.7,
+        spreadX: 6.3,
+        spreadY: 8.9,
+        spreadZ: 2.6,
+      },
+    },
+    led: {
+      outerColor: "#326eff",
+      outerOpacity: 0.09,
+      innerColor: "#4f83ff",
+      innerOpacity: 0.24,
+      coreColor: "#e3edff",
+      lightColor: "#2f6fff",
+      lightIntensity: 1.35,
+    },
+    camera: {
+      frame1: {
+        position: { x: 1.19, y: 0, z: 2.07 },
+        target: { x: 3.15, y: 0.08, z: 0 },
+        fov: 31,
+      },
+      frame2: {
+        position: { x: 0, y: 0.08, z: 14.8 },
+        target: { x: 0.7, y: -0.02, z: 0 },
+        fov: 31,
+      },
+      frame3: {
+        position: { x: 20.03, y: -3.79, z: 5.72 },
+        target: { x: -30, y: -30, z: 0.64 },
+        fov: 31,
+      },
+      frame4: {
+        position: { x: 20.03, y: -12.66, z: 5.72 },
+        target: { x: -30, y: -30, z: 0.64 },
+        fov: 31,
+      },
+    },
+    conveyor: {
+      position: { x: -4.14, y: 0.06, z: -8.19 },
+      rotation: { x: -34.1, y: 0, z: -8.9 },
+    },
+    stage: {
+      background: "#121212",
+      fogColor: "#4d4d4d",
+      ambientColor: "#ffffff",
+      ambientIntensity: 0.31,
+      hemisphereSky: "#edf3ff",
+      hemisphereGround: "#11141a",
+      hemisphereIntensity: 2.49,
+      keyColor: "#a8c6ff",
+      keyIntensity: 206,
+      keyPosition: {
+        x: -3.8,
+        y: 4.5,
+        z: 5,
+      },
+      fillColor: "#ffffff",
+      fillIntensity: 197,
+      fillPosition: {
+        x: 4.5,
+        y: 1.1,
+        z: 3.6,
+      },
+      rimColor: "#214aaf",
+      rimIntensity: 21,
+      rimPosition: {
+        x: -0.7,
+        y: 3.7,
+        z: 1.5,
+      },
+      exposure: 1.4,
+    },
+    environment: {
+      keyColor: "#e8f1ff",
+      keyIntensity: 5.2,
+      keyPosition: {
+        x: -5.1,
+        y: 5.2,
+        z: -0.7,
+      },
+      sideColor: "#b9c7dd",
+      sideIntensity: 4.5,
+      sidePosition: {
+        x: 0.4,
+        y: -0.7,
+        z: 1,
+      },
+      ringColor: "#b188b4",
+      ringIntensity: 9.7,
+      ringPosition: {
+        x: 0,
+        y: -4,
+        z: 1,
+      },
+    },
+    postProcessing: {
+      enabled: true,
+      bloom: {
+        enabled: true,
+        intensity: 2.11,
+        threshold: 0.2,
+        smoothing: 0.42,
+        radius: 0.59,
+      },
+      depthOfField: {
+        enabled: true,
+        focusDistance: 14.55,
+        focusRange: 3.06,
+        focalLength: 0.038,
+        bokehScale: 2.4,
+        resolutionScale: 0.6,
+      },
+      colorGrade: {
+        enabled: true,
+        brightness: 0,
+        contrast: 0.16,
+        saturation: -0.04,
+        hue: 0,
+      },
+      vignette: {
+        enabled: true,
+        offset: 0.2,
+        darkness: 0.67,
+      },
+      grain: {
+        enabled: true,
+        opacity: 0.194,
+        premultiply: true,
+      },
+      chromaticAberration: {
+        enabled: true,
+        offsetX: 0.00055,
+        offsetY: 0.00055,
+        radialModulation: false,
+        modulationOffset: 0.5,
+      },
+    },
+  };
+}
diff --git a/components/device-lab/unified-shell.ts b/components/device-lab/unified-shell.ts
new file mode 100644
index 0000000..0283994
--- /dev/null
+++ b/components/device-lab/unified-shell.ts
@@ -0,0 +1,220 @@
+import * as THREE from "three";
+import { MarchingCubes } from "three/examples/jsm/objects/MarchingCubes.js";
+import { mergeVertices } from "three/examples/jsm/utils/BufferGeometryUtils.js";
+
+const BODY_PROFILE: ReadonlyArray<readonly [number, number]> = [
+  [0, -0.34], [0.48, -0.34], [0.76, -0.3], [0.94, -0.2],
+  [1.01, -0.07], [1.02, 0.04], [0.98, 0.17], [0.85, 0.3],
+  [0.57, 0.39], [0, 0.41],
+];
+
+const BAIL_BLEND_PROFILE: ReadonlyArray<readonly [number, number]> = [
+  [0, 0.72], [0.12, 0.73], [0.22, 0.78], [0.27, 0.86],
+  [0.24, 0.94], [0.18, 1], [0.13, 1.06], [0.095, 1.12], [0, 1.13],
+];
+
+const DEFAULT_GRID_RESOLUTION = 60;
+const BASE_POLYGON_COUNT = 80_000;
+const geometryCache = new Map<number, THREE.BufferGeometry>();
+const BOUNDS_MIN = new THREE.Vector3(-1.2, -1.2, -0.5);
+const BOUNDS_MAX = new THREE.Vector3(1.2, 1.54, 0.64);
+
+function pointSegmentDistance(
+  px: number,
+  py: number,
+  ax: number,
+  ay: number,
+  bx: number,
+  by: number,
+) {
+  const abx = bx - ax;
+  const aby = by - ay;
+  const apx = px - ax;
+  const apy = py - ay;
+  const denominator = abx * abx + aby * aby;
+  const t = denominator === 0
+    ? 0
+    : THREE.MathUtils.clamp((apx * abx + apy * aby) / denominator, 0, 1);
+  return Math.hypot(px - (ax + abx * t), py - (ay + aby * t));
+}
+
+function revolvedProfileSdf(
+  radial: number,
+  axial: number,
+  profile: ReadonlyArray<readonly [number, number]>,
+) {
+  let inside = false;
+  let distance = Number.POSITIVE_INFINITY;
+
+  for (
+    let index = 0, previous = profile.length - 1;
+    index < profile.length;
+    previous = index, index += 1
+  ) {
+    const [ax, ay] = profile[previous];
+    const [bx, by] = profile[index];
+    distance = Math.min(
+      distance,
+      pointSegmentDistance(radial, axial, ax, ay, bx, by),
+    );
+
+    if ((ay > axial) !== (by > axial)) {
+      const intersection = ax + ((ax - bx) * (axial - ay)) / (ay - by);
+      if (radial < intersection) inside = !inside;
+    }
+  }
+
+  return inside ? -distance : distance;
+}
+
+function ellipsoidSdf(
+  x: number,
+  y: number,
+  z: number,
+  radiusX: number,
+  radiusY: number,
+  radiusZ: number,
+) {
+  const normalizedLength = Math.hypot(x / radiusX, y / radiusY, z / radiusZ);
+  const gradientLength = Math.hypot(
+    x / (radiusX * radiusX),
+    y / (radiusY * radiusY),
+    z / (radiusZ * radiusZ),
+  );
+  if (gradientLength < 1e-6) return -Math.min(radiusX, radiusY, radiusZ);
+  return (normalizedLength * (normalizedLength - 1)) / gradientLength;
+}
+
+function bailTorusSdf(x: number, y: number, z: number) {
+  const translatedX = x;
+  const translatedY = y - 1.08;
+  const translatedZ = z - 0.015;
+  const localX = -translatedZ / 0.78;
+  const localY = translatedY / 1.32;
+  const localZ = translatedX / 0.82;
+  const ringDistance = Math.hypot(localX, localY) - 0.16;
+  return (Math.hypot(ringDistance, localZ) - 0.105) * 0.78;
+}
+
+function smoothUnion(first: number, second: number, radius: number) {
+  const blend = THREE.MathUtils.clamp(
+    0.5 + (0.5 * (second - first)) / radius,
+    0,
+    1,
+  );
+  return THREE.MathUtils.lerp(second, first, blend)
+    - radius * blend * (1 - blend);
+}
+
+function roundedCylinderSdf(
+  x: number,
+  y: number,
+  z: number,
+  radius: number,
+  halfDepth: number,
+  cornerRadius: number,
+  centerZ: number,
+) {
+  const radialDistance = Math.hypot(x, y) - (radius - cornerRadius);
+  const axialDistance = Math.abs(z - centerZ) - (halfDepth - cornerRadius);
+  return Math.min(Math.max(radialDistance, axialDistance), 0)
+    + Math.hypot(Math.max(radialDistance, 0), Math.max(axialDistance, 0))
+    - cornerRadius;
+}
+
+function unifiedShellSdf(x: number, y: number, z: number) {
+  const body = revolvedProfileSdf(Math.hypot(x, y), z, BODY_PROFILE);
+  const outerFace = ellipsoidSdf(x, y, z - 0.29, 0.91, 0.91, 0.17);
+  const blend = revolvedProfileSdf(Math.hypot(x, z), y, BAIL_BLEND_PROFILE);
+  const bail = bailTorusSdf(x, y, z);
+
+  let distance = smoothUnion(body, outerFace, 0.035);
+  distance = smoothUnion(distance, blend, 0.08);
+  distance = smoothUnion(distance, bail, 0.055);
+
+  // Front-opening bore: the rear stop at z=-0.21 leaves a thin plastic back wall.
+  const cavity = roundedCylinderSdf(x, y, z, 0.855, 0.465, 0.04, 0.255);
+  return Math.max(distance, -cavity);
+}
+
+function addPlanarUvs(geometry: THREE.BufferGeometry) {
+  const positions = geometry.getAttribute("position");
+  const uvs = new Float32Array(positions.count * 2);
+  const width = BOUNDS_MAX.x - BOUNDS_MIN.x;
+  const height = BOUNDS_MAX.y - BOUNDS_MIN.y;
+
+  for (let index = 0; index < positions.count; index += 1) {
+    uvs[index * 2] = (positions.getX(index) - BOUNDS_MIN.x) / width;
+    uvs[index * 2 + 1] = (positions.getY(index) - BOUNDS_MIN.y) / height;
+  }
+  geometry.setAttribute("uv", new THREE.BufferAttribute(uvs, 2));
+}
+
+function createUnifiedShellGeometry(gridResolution: number) {
+  const maxPolygonCount = Math.max(
+    30_000,
+    Math.round(BASE_POLYGON_COUNT * (gridResolution / 72) ** 2),
+  );
+  const placeholderMaterial = new THREE.MeshBasicMaterial();
+  const marchingCubes = new MarchingCubes(
+    gridResolution,
+    placeholderMaterial,
+    false,
+    false,
+    maxPolygonCount,
+  );
+  marchingCubes.isolation = 0;
+
+  const center = BOUNDS_MIN.clone().add(BOUNDS_MAX).multiplyScalar(0.5);
+  const halfExtent = BOUNDS_MAX.clone().sub(BOUNDS_MIN).multiplyScalar(0.5);
+  const halfResolution = gridResolution / 2;
+
+  for (let z = 0; z < gridResolution; z += 1) {
+    const worldZ = center.z + ((z - halfResolution) / halfResolution) * halfExtent.z;
+    for (let y = 0; y < gridResolution; y += 1) {
+      const worldY = center.y + ((y - halfResolution) / halfResolution) * halfExtent.y;
+      for (let x = 0; x < gridResolution; x += 1) {
+        const worldX = center.x + ((x - halfResolution) / halfResolution) * halfExtent.x;
+        marchingCubes.setCell(x, y, z, -unifiedShellSdf(worldX, worldY, worldZ));
+      }
+    }
+  }
+
+  marchingCubes.update();
+  const activePositions = marchingCubes.positionArray.slice(0, marchingCubes.count * 3);
+  const rawGeometry = new THREE.BufferGeometry();
+  rawGeometry.setAttribute("position", new THREE.BufferAttribute(activePositions, 3));
+
+  const positions = rawGeometry.getAttribute("position");
+  for (let index = 0; index < positions.count; index += 1) {
+    positions.setXYZ(
+      index,
+      center.x + positions.getX(index) * halfExtent.x,
+      center.y + positions.getY(index) * halfExtent.y,
+      center.z + positions.getZ(index) * halfExtent.z,
+    );
+  }
+
+  const geometry = mergeVertices(rawGeometry, 0.0005);
+  geometry.computeVertexNormals();
+  addPlanarUvs(geometry);
+  geometry.computeBoundingBox();
+  geometry.computeBoundingSphere();
+
+  rawGeometry.dispose();
+  marchingCubes.geometry.dispose();
+  placeholderMaterial.dispose();
+  return geometry;
+}
+
+export function getUnifiedShellGeometry(
+  gridResolution = DEFAULT_GRID_RESOLUTION,
+) {
+  const resolution = Math.max(32, Math.round(gridResolution));
+  const cached = geometryCache.get(resolution);
+  if (cached) return cached;
+
+  const geometry = createUnifiedShellGeometry(resolution);
+  geometryCache.set(resolution, geometry);
+  return geometry;
+}
diff --git a/docs/omi-threejs-demo.md b/docs/omi-threejs-demo.md
new file mode 100644
index 0000000..8cb5620
--- /dev/null
+++ b/docs/omi-threejs-demo.md
@@ -0,0 +1,64 @@
+# Omi Three.js Hardware Story
+
+> Unofficial product concept created as a design and engineering exploration. This route is not part of Omi's production storefront.
+
+## Live concept
+
+[omi-threejs-demo.vercel.app/device-lab](https://omi-threejs-demo.vercel.app/device-lab)
+
+## Thesis
+
+As a wearable brand, Omi has to sell more than utility. It has an opportunity to position the pendant as a luxury object for tech-forward individuals: something desirable, expressive, and considered enough to wear every day. The web experience should feel like a digital flagship—memorable on first contact and rich enough to make someone imagine the product in their own hand.
+
+This concept creates that feeling through scale, material response, dramatic light, physical depth, and interaction. The pendant does not read as a flat product image; it has weight, surface, movement, and presence. By letting people experience those qualities before they own the device, the site turns Omi from an abstract AI accessory into an object of desire.
+
+## Design system
+
+- Restrained black and gunmetal palette with cool key light and a muted violet environmental ring.
+- Translucent plastic carrier surrounding a deep metallic device core.
+- Overscale typography and sparse interface chrome keep the product dominant.
+- Scroll keyframes include a short hold before each transition so each composition has time to register.
+- Desktop physics are interaction-led rather than continuously decorative.
+
+## Technical approach
+
+- Next.js 15 and React 19
+- React Three Fiber and Three.js
+- Rapier rope and rigid-body physics on desktop
+- SDF/implicit-volume pendant shell extracted with Marching Cubes and welded into one continuous mesh
+- Instanced conveyor geometry for repeated pendants
+- Framer Motion scroll choreography and UI transitions
+- Selective bloom, color grading, grain, vignette, depth of field, and chromatic aberration
+
+The feature is isolated at `/device-lab`; it does not replace or modify the existing homepage.
+
+## Mobile and performance path
+
+- Physics are disabled for coarse-pointer and phone-width devices; frame one keeps the LED awake while frame-two pointer interactions are removed.
+- Device pixel ratio is capped more aggressively on mobile.
+- Mobile particle counts and environment-map resolution are reduced.
+- Depth of field and chromatic aberration are disabled on mobile; bloom uses fewer levels.
+- The conveyor stays instanced and is not updated until its scene approaches the viewport.
+- The WebGL experience is client-loaded behind a lightweight branded loading state.
+- The canvas permits native vertical touch scrolling.
+
+## Local development
+
+```bash
+npm install
+npm run dev -- -p 3002
+```
+
+Open [localhost:3002/device-lab](http://localhost:3002/device-lab).
+
+## Review checklist
+
+- Desktop: verify all four keyframes, hover wake, click message, film playback, cord physics, conveyor loop, and CTA.
+- Mobile: verify all four keyframes at 390×844 and 375×667, touch scrolling, static pendant interaction, film modal, proof-panel legibility, and CTA.
+- Engineering: run `npx tsc --noEmit` and `npm run build`; confirm zero browser console errors.
+
+## Asset provenance
+
+- `public/images/omi-logo.png` and `public/videos/omi-rewind-hq.mp4` already exist in the upstream public repository.
+- `public/images/omi-office-wearer.png` was supplied as a visual reference for this concept. Confirm Omi's preferred source asset and reuse permission before proposing it for production.
+- The pendant geometry, materials, lighting, physics, choreography, and interface implementation are original to this concept branch.
diff --git a/package-lock.json b/package-lock.json
index 3090241..7d88919 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,12 +9,20 @@
       "version": "0.1.0",
       "dependencies": {
         "@lottiefiles/dotlottie-react": "^0.17.13",
+        "@react-three/drei": "^10.7.7",
+        "@react-three/fiber": "^9.7.0",
+        "@react-three/postprocessing": "^3.0.4",
+        "@react-three/rapier": "^2.2.0",
+        "@types/three": "^0.180.0",
         "framer-motion": "^12.29.0",
+        "meshline": "^3.3.1",
         "mixpanel-browser": "^2.74.0",
         "next": "^15.1.4",
         "posthog-js": "^1.336.4",
+        "postprocessing": "^6.39.4",
         "react": "^19.0.0",
-        "react-dom": "^19.0.0"
+        "react-dom": "^19.0.0",
+        "three": "^0.180.0"
       },
       "devDependencies": {
         "@types/node": "^22.10.5",
@@ -39,6 +47,21 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.29.7",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.7.tgz",
+      "integrity": "sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
+    "node_modules/@dimforge/rapier3d-compat": {
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.12.0.tgz",
+      "integrity": "sha512-uekIGetywIgopfD97oDL5PfeezkFpNhwlzlaEYNOA0N6ghdsOvh/HYjSMek5Q2O1PYvRSDFcqFVJl4r4ZBwOow==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@emnapi/runtime": {
       "version": "1.8.1",
       "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.8.1.tgz",
@@ -572,6 +595,12 @@
       "integrity": "sha512-1QwcDchh/TXTvP9zXUHA5oJOdhEdUrn6U7gAiQ1AXEUrcK6PTU6v5D3byP76BK56fQjoY2WQ2A4pYDCCvoVRqw==",
       "license": "MIT"
     },
+    "node_modules/@mediapipe/tasks-vision": {
+      "version": "0.10.17",
+      "resolved": "https://registry.npmjs.org/@mediapipe/tasks-vision/-/tasks-vision-0.10.17.tgz",
+      "integrity": "sha512-CZWV/q6TTe8ta61cZXjfnnHsfWIdFhms03M9T7Cnd5y2mdpylJM0rF1qRq+wsQVRMLz1OYPVEBU9ph2Bx8cxrg==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@mixpanel/rrdom": {
       "version": "2.0.0-alpha.18.2",
       "resolved": "https://registry.npmjs.org/@mixpanel/rrdom/-/rrdom-2.0.0-alpha.18.2.tgz",
@@ -628,6 +657,18 @@
       "integrity": "sha512-OomKIB6GTx5xvCLJ7iic2khT/t/tnCJUex13aEqsbSqIT/UzUUsqf+LTrgUK5ex+f6odmkCNjre2y5jvpNqn+g==",
       "license": "MIT"
     },
+    "node_modules/@monogrid/gainmap-js": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/@monogrid/gainmap-js/-/gainmap-js-3.4.0.tgz",
+      "integrity": "sha512-2Z0FATFHaoYJ8b+Y4y4Hgfn3FRFwuU5zRrk+9dFWp4uGAdHGqVEdP7HP+gLA3X469KXHmfupJaUbKo1b/aDKIg==",
+      "license": "MIT",
+      "dependencies": {
+        "promise-worker-transferable": "^1.0.4"
+      },
+      "peerDependencies": {
+        "three": ">= 0.159.0"
+      }
+    },
     "node_modules/@next/env": {
       "version": "15.5.9",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-15.5.9.tgz",
@@ -1125,6 +1166,141 @@
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw==",
       "license": "BSD-3-Clause"
     },
+    "node_modules/@react-three/drei": {
+      "version": "10.7.7",
+      "resolved": "https://registry.npmjs.org/@react-three/drei/-/drei-10.7.7.tgz",
+      "integrity": "sha512-ff+J5iloR0k4tC++QtD/j9u3w5fzfgFAWDtAGQah9pF2B1YgOq/5JxqY0/aVoQG5r3xSZz0cv5tk2YuBob4xEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.26.0",
+        "@mediapipe/tasks-vision": "0.10.17",
+        "@monogrid/gainmap-js": "^3.0.6",
+        "@use-gesture/react": "^10.3.1",
+        "camera-controls": "^3.1.0",
+        "cross-env": "^7.0.3",
+        "detect-gpu": "^5.0.56",
+        "glsl-noise": "^0.0.0",
+        "hls.js": "^1.5.17",
+        "maath": "^0.10.8",
+        "meshline": "^3.3.1",
+        "stats-gl": "^2.2.8",
+        "stats.js": "^0.17.0",
+        "suspend-react": "^0.1.3",
+        "three-mesh-bvh": "^0.8.3",
+        "three-stdlib": "^2.35.6",
+        "troika-three-text": "^0.52.4",
+        "tunnel-rat": "^0.1.2",
+        "use-sync-external-store": "^1.4.0",
+        "utility-types": "^3.11.0",
+        "zustand": "^5.0.1"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": "^9.0.0",
+        "react": "^19",
+        "react-dom": "^19",
+        "three": ">=0.159"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-three/fiber": {
+      "version": "9.7.0",
+      "resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-9.7.0.tgz",
+      "integrity": "sha512-EWm9FwcaOZQu/ExFW5rggoCMM1NJet5YbxVxKaOE+KSncrjU0Wx7017qSyGFvupviK89nMYGCWU3BIK4dI1clw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.17.8",
+        "@types/webxr": "*",
+        "base64-js": "^1.5.1",
+        "buffer": "^6.0.3",
+        "its-fine": "^2.0.0",
+        "react-use-measure": "^2.1.7",
+        "scheduler": "^0.27.0",
+        "suspend-react": "^0.1.3",
+        "use-sync-external-store": "^1.4.0",
+        "zustand": "^5.0.3"
+      },
+      "peerDependencies": {
+        "expo": ">=43.0",
+        "expo-asset": ">=8.4",
+        "expo-file-system": ">=11.0",
+        "expo-gl": ">=11.0",
+        "react": ">=19 <19.3",
+        "react-dom": ">=19 <19.3",
+        "react-native": ">=0.78",
+        "three": ">=0.156"
+      },
+      "peerDependenciesMeta": {
+        "expo": {
+          "optional": true
+        },
+        "expo-asset": {
+          "optional": true
+        },
+        "expo-file-system": {
+          "optional": true
+        },
+        "expo-gl": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@react-three/postprocessing": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@react-three/postprocessing/-/postprocessing-3.0.4.tgz",
+      "integrity": "sha512-e4+F5xtudDYvhxx3y0NtWXpZbwvQ0x1zdOXWTbXMK6fFLVDd4qucN90YaaStanZGS4Bd5siQm0lGL/5ogf8iDQ==",
+      "license": "MIT",
+      "dependencies": {
+        "maath": "^0.6.0",
+        "n8ao": "^1.9.4",
+        "postprocessing": "^6.36.6"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": "^9.0.0",
+        "react": "^19.0",
+        "three": ">= 0.156.0"
+      }
+    },
+    "node_modules/@react-three/postprocessing/node_modules/maath": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/maath/-/maath-0.6.0.tgz",
+      "integrity": "sha512-dSb2xQuP7vDnaYqfoKzlApeRcR2xtN8/f7WV/TMAkBC8552TwTLtOO0JTcSygkYMjNDPoo6V01jTw/aPi4JrMw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/three": ">=0.144.0",
+        "three": ">=0.144.0"
+      }
+    },
+    "node_modules/@react-three/rapier": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/@react-three/rapier/-/rapier-2.2.0.tgz",
+      "integrity": "sha512-mVsqbKXlGZoN+XrqdhzFZUQmy8pibEOVzl4k7LC+LHe84bQnYBSagy1Hvbda6bL1PJDdTFyiDiBk5buKFinNIQ==",
+      "dependencies": {
+        "@dimforge/rapier3d-compat": "0.19.2",
+        "suspend-react": "^0.1.3",
+        "three-stdlib": "^2.35.12"
+      },
+      "peerDependencies": {
+        "@react-three/fiber": "^9.0.4",
+        "react": "^19",
+        "three": ">=0.159.0"
+      }
+    },
+    "node_modules/@react-three/rapier/node_modules/@dimforge/rapier3d-compat": {
+      "version": "0.19.2",
+      "resolved": "https://registry.npmjs.org/@dimforge/rapier3d-compat/-/rapier3d-compat-0.19.2.tgz",
+      "integrity": "sha512-AZHL1jqUF55QJkJyU1yKeh4ImX2J93bVLIezT1+o0FZqTix6O06MOaqpKoJ4MmbDCsoZmwO+qc471/SDMDm2AA==",
+      "license": "Apache-2.0"
+    },
     "node_modules/@swc/helpers": {
       "version": "0.5.15",
       "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.15.tgz",
@@ -1134,12 +1310,24 @@
         "tslib": "^2.8.0"
       }
     },
+    "node_modules/@tweenjs/tween.js": {
+      "version": "23.1.3",
+      "resolved": "https://registry.npmjs.org/@tweenjs/tween.js/-/tween.js-23.1.3.tgz",
+      "integrity": "sha512-vJmvvwFxYuGnF2axRtPYocag6Clbb5YS7kLL+SO/TeVFzHqDIWrNKYtcsPMibjDx9O+bu+psAy9NKfWklassUA==",
+      "license": "MIT"
+    },
     "node_modules/@types/css-font-loading-module": {
       "version": "0.0.7",
       "resolved": "https://registry.npmjs.org/@types/css-font-loading-module/-/css-font-loading-module-0.0.7.tgz",
       "integrity": "sha512-nl09VhutdjINdWyXxHWN/w9zlNCfr60JUqJbd24YXUuCwgeL0TpFSdElCwb6cxfB6ybE19Gjj4g0jsgkXxKv1Q==",
       "license": "MIT"
     },
+    "node_modules/@types/draco3d": {
+      "version": "1.4.10",
+      "resolved": "https://registry.npmjs.org/@types/draco3d/-/draco3d-1.4.10.tgz",
+      "integrity": "sha512-AX22jp8Y7wwaBgAixaSvkoG4M/+PlAcm3Qs4OW8yT9DM4xUpWKeFhLueTAyZF39pviAdcDdeJoACapiAceqNcw==",
+      "license": "MIT"
+    },
     "node_modules/@types/node": {
       "version": "22.19.7",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-22.19.7.tgz",
@@ -1149,11 +1337,16 @@
         "undici-types": "~6.21.0"
       }
     },
+    "node_modules/@types/offscreencanvas": {
+      "version": "2019.7.3",
+      "resolved": "https://registry.npmjs.org/@types/offscreencanvas/-/offscreencanvas-2019.7.3.tgz",
+      "integrity": "sha512-ieXiYmgSRXUDeOntE1InxjWyvEelZGP63M+cGuquuRLuIKKT1osnkXjxev9B7d1nXSug5vpunx+gNlbVxMlC9A==",
+      "license": "MIT"
+    },
     "node_modules/@types/react": {
       "version": "19.2.9",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.9.tgz",
       "integrity": "sha512-Lpo8kgb/igvMIPeNV2rsYKTgaORYdO1XGVZ4Qz3akwOj0ySGYMPlQWa8BaLn0G63D1aSaAQ5ldR06wCpChQCjA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.2.2"
@@ -1169,6 +1362,42 @@
         "@types/react": "^19.2.0"
       }
     },
+    "node_modules/@types/react-reconciler": {
+      "version": "0.28.9",
+      "resolved": "https://registry.npmjs.org/@types/react-reconciler/-/react-reconciler-0.28.9.tgz",
+      "integrity": "sha512-HHM3nxyUZ3zAylX8ZEyrDNd2XZOnQ0D5XfunJF5FLQnZbHHYq4UWvW1QfelQNXv1ICNkwYhfxjwfnqivYB6bFg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@types/stats.js": {
+      "version": "0.17.4",
+      "resolved": "https://registry.npmjs.org/@types/stats.js/-/stats.js-0.17.4.tgz",
+      "integrity": "sha512-jIBvWWShCvlBqBNIZt0KAshWpvSjhkwkEu4ZUcASoAvhmrgAUI2t1dXrjSL4xXVLB4FznPrIsX3nKXFl/Dt4vA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/three": {
+      "version": "0.180.0",
+      "resolved": "https://registry.npmjs.org/@types/three/-/three-0.180.0.tgz",
+      "integrity": "sha512-ykFtgCqNnY0IPvDro7h+9ZeLY+qjgUWv+qEvUt84grhenO60Hqd4hScHE7VTB9nOQ/3QM8lkbNE+4vKjEpUxKg==",
+      "license": "MIT",
+      "dependencies": {
+        "@dimforge/rapier3d-compat": "~0.12.0",
+        "@tweenjs/tween.js": "~23.1.3",
+        "@types/stats.js": "*",
+        "@types/webxr": "*",
+        "@webgpu/types": "*",
+        "fflate": "~0.8.2",
+        "meshoptimizer": "~0.22.0"
+      }
+    },
+    "node_modules/@types/three/node_modules/fflate": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.8.3.tgz",
+      "integrity": "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA==",
+      "license": "MIT"
+    },
     "node_modules/@types/trusted-types": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/@types/trusted-types/-/trusted-types-2.0.7.tgz",
@@ -1176,6 +1405,36 @@
       "license": "MIT",
       "optional": true
     },
+    "node_modules/@types/webxr": {
+      "version": "0.5.24",
+      "resolved": "https://registry.npmjs.org/@types/webxr/-/webxr-0.5.24.tgz",
+      "integrity": "sha512-h8fgEd/DpoS9CBrjEQXR+dIDraopAEfu4wYVNY2tEPwk60stPWhvZMf4Foo5FakuQ7HFZoa8WceaWFervK2Ovg==",
+      "license": "MIT"
+    },
+    "node_modules/@use-gesture/core": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/core/-/core-10.3.1.tgz",
+      "integrity": "sha512-WcINiDt8WjqBdUXye25anHiNxPc0VOrlT8F6LLkU6cycrOGUDyY/yyFmsg3k8i5OLvv25llc0QC45GhR/C8llw==",
+      "license": "MIT"
+    },
+    "node_modules/@use-gesture/react": {
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/@use-gesture/react/-/react-10.3.1.tgz",
+      "integrity": "sha512-Yy19y6O2GJq8f7CHf7L0nxL8bf4PZCPaVOCgJrusOeFHY1LvHgYXnmnXg6N5iwAnbgbZCDjo60SiM6IPJi9C5g==",
+      "license": "MIT",
+      "dependencies": {
+        "@use-gesture/core": "10.3.1"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0"
+      }
+    },
+    "node_modules/@webgpu/types": {
+      "version": "0.1.71",
+      "resolved": "https://registry.npmjs.org/@webgpu/types/-/types-0.1.71.tgz",
+      "integrity": "sha512-mMy8/ODcKhab808co15eW+yN+HgXoQxRQHTiBV9Mrvl1r0ufnid7YOcI+gi4eUWSWl9ezD6TW2KXccrL8HCh2A==",
+      "license": "BSD-3-Clause"
+    },
     "node_modules/@xstate/fsm": {
       "version": "1.6.5",
       "resolved": "https://registry.npmjs.org/@xstate/fsm/-/fsm-1.6.5.tgz",
@@ -1256,6 +1515,26 @@
         "node": ">= 0.6.0"
       }
     },
+    "node_modules/base64-js": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/base64-js/-/base64-js-1.5.1.tgz",
+      "integrity": "sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
     "node_modules/baseline-browser-mapping": {
       "version": "2.9.17",
       "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.17.tgz",
@@ -1266,6 +1545,15 @@
         "baseline-browser-mapping": "dist/cli.js"
       }
     },
+    "node_modules/bidi-js": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/bidi-js/-/bidi-js-1.0.3.tgz",
+      "integrity": "sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==",
+      "license": "MIT",
+      "dependencies": {
+        "require-from-string": "^2.0.2"
+      }
+    },
     "node_modules/binary-extensions": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
@@ -1326,6 +1614,30 @@
         "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
       }
     },
+    "node_modules/buffer": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/buffer/-/buffer-6.0.3.tgz",
+      "integrity": "sha512-FTiCpNxtwiZZHEZbcbTIcZjERVICn9yq/pDFkTl95/AxzD1naBctN7YO68riM/gLSDY7sdrMby8hofADYuuqOA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "base64-js": "^1.3.1",
+        "ieee754": "^1.2.1"
+      }
+    },
     "node_modules/camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -1336,6 +1648,19 @@
         "node": ">= 6"
       }
     },
+    "node_modules/camera-controls": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/camera-controls/-/camera-controls-3.1.2.tgz",
+      "integrity": "sha512-xkxfpG2ECZ6Ww5/9+kf4mfg1VEYAoe9aDSY+IwF0UEs7qEzwy0aVRfs2grImIECs/PoBtWFrh7RXsQkwG922JA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=22.0.0",
+        "npm": ">=10.5.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.126.1"
+      }
+    },
     "node_modules/caniuse-lite": {
       "version": "1.0.30001765",
       "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001765.tgz",
@@ -1421,6 +1746,24 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/cross-env": {
+      "version": "7.0.3",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
+      "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==",
+      "license": "MIT",
+      "dependencies": {
+        "cross-spawn": "^7.0.1"
+      },
+      "bin": {
+        "cross-env": "src/bin/cross-env.js",
+        "cross-env-shell": "src/bin/cross-env-shell.js"
+      },
+      "engines": {
+        "node": ">=10.14",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -1452,9 +1795,17 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "dev": true,
       "license": "MIT"
     },
+    "node_modules/detect-gpu": {
+      "version": "5.0.70",
+      "resolved": "https://registry.npmjs.org/detect-gpu/-/detect-gpu-5.0.70.tgz",
+      "integrity": "sha512-bqerEP1Ese6nt3rFkwPnGbsUF9a4q+gMmpTVVOEzoCyeCc+y7/RvJnQZJx1JwhgQI5Ntg0Kgat8Uu7XpBqnz1w==",
+      "license": "MIT",
+      "dependencies": {
+        "webgl-constants": "^1.1.1"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
@@ -1488,6 +1839,12 @@
         "@types/trusted-types": "^2.0.7"
       }
     },
+    "node_modules/draco3d": {
+      "version": "1.5.7",
+      "resolved": "https://registry.npmjs.org/draco3d/-/draco3d-1.5.7.tgz",
+      "integrity": "sha512-m6WCKt/erDXcw+70IJXnG7M3awwQPAsZvJGX5zY7beBqpELw6RDGkYVU0W43AFxye4pDZ5i2Lbyc/NNGqwjUVQ==",
+      "license": "Apache-2.0"
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.5.277",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.277.tgz",
@@ -1643,6 +2000,12 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/glsl-noise": {
+      "version": "0.0.0",
+      "resolved": "https://registry.npmjs.org/glsl-noise/-/glsl-noise-0.0.0.tgz",
+      "integrity": "sha512-b/ZCF6amfAUb7dJM/MxRs7AetQEahYzJ8PtgfrmEdtw6uyGOr+ZSGtgjFm6mfsBkxJ4d2W7kg+Nlqzqvn3Bc0w==",
+      "license": "MIT"
+    },
     "node_modules/hasown": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
@@ -1656,6 +2019,38 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hls.js": {
+      "version": "1.6.16",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.16.tgz",
+      "integrity": "sha512-VSIRpLfRwlAAdGL4wiTucx2ScRipo0ed1FBatWkyt832jC4CReKstga6yIhYVwGu9LOBjuX9wzmRMeQdBJtzEA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/ieee754": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
+      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "BSD-3-Clause"
+    },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ==",
+      "license": "MIT"
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1718,12 +2113,30 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-promise": {
+      "version": "2.2.2",
+      "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
+      "integrity": "sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==",
+      "license": "MIT"
+    },
     "node_modules/isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
       "license": "ISC"
     },
+    "node_modules/its-fine": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/its-fine/-/its-fine-2.0.0.tgz",
+      "integrity": "sha512-KLViCmWx94zOvpLwSlsx6yOCeMhZYaxrJV87Po5k/FoZzcPSahvK5qJ7fYhS61sZi5ikmh2S3Hz55A2l3U69ng==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/react-reconciler": "^0.28.9"
+      },
+      "peerDependencies": {
+        "react": "^19.0.0"
+      }
+    },
     "node_modules/jiti": {
       "version": "1.21.7",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
@@ -1734,6 +2147,15 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "license": "MIT",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
@@ -1760,6 +2182,16 @@
       "integrity": "sha512-mNAgZ1GmyNhD7AuqnTG3/VQ26o760+ZYBPKjPvugO8+nLbYfX6TVpJPseBvopbdY+qpZ/lKUnmEc1LeZYS3QAA==",
       "license": "Apache-2.0"
     },
+    "node_modules/maath": {
+      "version": "0.10.8",
+      "resolved": "https://registry.npmjs.org/maath/-/maath-0.10.8.tgz",
+      "integrity": "sha512-tRvbDF0Pgqz+9XUa4jjfgAQ8/aPKmQdWXilFu2tMy4GWj4NOsx99HlULO4IeREfbO3a0sA145DZYyvXPkybm0g==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/three": ">=0.134.0",
+        "three": ">=0.134.0"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -1770,6 +2202,21 @@
         "node": ">= 8"
       }
     },
+    "node_modules/meshline": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/meshline/-/meshline-3.3.1.tgz",
+      "integrity": "sha512-/TQj+JdZkeSUOl5Mk2J7eLcYTLiQm2IDzmlSvYm7ov15anEcDJ92GHqqazxTSreeNgfnYu24kiEvvv0WlbCdFQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.137"
+      }
+    },
+    "node_modules/meshoptimizer": {
+      "version": "0.22.0",
+      "resolved": "https://registry.npmjs.org/meshoptimizer/-/meshoptimizer-0.22.0.tgz",
+      "integrity": "sha512-IebiK79sqIy+E4EgOr+CAw+Ke8hAspXKzBd0JdgEmPHiAwmvEj2S4h1rfvo+o/BnfEYd/jAOg5IeeIjzlzSnDg==",
+      "license": "MIT"
+    },
     "node_modules/micromatch": {
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
@@ -1830,6 +2277,16 @@
         "thenify-all": "^1.0.0"
       }
     },
+    "node_modules/n8ao": {
+      "version": "1.10.3",
+      "resolved": "https://registry.npmjs.org/n8ao/-/n8ao-1.10.3.tgz",
+      "integrity": "sha512-JFRk4WgUAUWO2KdJTqmBT02dP9kG7rE2oQbBy64E9+YwQ3d96KB9QBanqNy/NnYUfUTYU6Z/5OS5t/yLey7+6Q==",
+      "license": "ISC",
+      "peerDependencies": {
+        "postprocessing": ">=6.30.0",
+        "three": ">=0.137"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.11",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
@@ -2203,6 +2660,21 @@
         "web-vitals": "^5.1.0"
       }
     },
+    "node_modules/postprocessing": {
+      "version": "6.39.4",
+      "resolved": "https://registry.npmjs.org/postprocessing/-/postprocessing-6.39.4.tgz",
+      "integrity": "sha512-oAS/PjAbc/xT3OzjUrGsorJ4J064XwhVD2t0OwKLP/E8QwDMUJ0oOv6ZI1SYMtLchv4g0ySEx+JcLy92+48vlA==",
+      "license": "Zlib",
+      "peerDependencies": {
+        "three": ">= 0.168.0 < 0.186.0"
+      }
+    },
+    "node_modules/potpack": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/potpack/-/potpack-1.0.2.tgz",
+      "integrity": "sha512-choctRBIV9EMT9WGAZHn3V7t0Z2pMQyl0EZE6pFc/6ml3ssw7Dlf/oAOvFwjm1HVsqfQN8GfeFyJ+d8tRzqueQ==",
+      "license": "ISC"
+    },
     "node_modules/preact": {
       "version": "10.28.2",
       "resolved": "https://registry.npmjs.org/preact/-/preact-10.28.2.tgz",
@@ -2213,6 +2685,16 @@
         "url": "https://opencollective.com/preact"
       }
     },
+    "node_modules/promise-worker-transferable": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/promise-worker-transferable/-/promise-worker-transferable-1.0.4.tgz",
+      "integrity": "sha512-bN+0ehEnrXfxV2ZQvU2PetO0n4gqBD4ulq3MI1WOPLgr7/Mg9yRQkX5+0v1vagr74ZTsl7XtzlaYDo2EuCeYJw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "is-promise": "^2.1.0",
+        "lie": "^3.0.2"
+      }
+    },
     "node_modules/protobufjs": {
       "version": "7.5.4",
       "resolved": "https://registry.npmjs.org/protobufjs/-/protobufjs-7.5.4.tgz",
@@ -2285,6 +2767,21 @@
         "react": "^19.2.3"
       }
     },
+    "node_modules/react-use-measure": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/react-use-measure/-/react-use-measure-2.1.7.tgz",
+      "integrity": "sha512-KrvcAo13I/60HpwGO5jpW7E9DfusKyLPLvuHlUyP5zqnmAPhNc6qTRjUQrdTADl0lpPpDVU2/Gg51UlOGHXbdg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.13",
+        "react-dom": ">=16.13"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/read-cache": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
@@ -2308,6 +2805,15 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/require-from-string": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/require-from-string/-/require-from-string-2.0.2.tgz",
+      "integrity": "sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -2458,6 +2964,32 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/stats-gl": {
+      "version": "2.4.2",
+      "resolved": "https://registry.npmjs.org/stats-gl/-/stats-gl-2.4.2.tgz",
+      "integrity": "sha512-g5O9B0hm9CvnM36+v7SFl39T7hmAlv541tU81ME8YeSb3i1CIP5/QdDeSB3A0la0bKNHpxpwxOVRo2wFTYEosQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/three": "*",
+        "three": "^0.170.0"
+      },
+      "peerDependencies": {
+        "@types/three": "*",
+        "three": "*"
+      }
+    },
+    "node_modules/stats-gl/node_modules/three": {
+      "version": "0.170.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.170.0.tgz",
+      "integrity": "sha512-FQK+LEpYc0fBD+J8g6oSEyyNzjp+Q7Ks1C568WWaoMRLW+TkNNWmenWeGgJjV105Gd+p/2ql1ZcjYvNiPZBhuQ==",
+      "license": "MIT"
+    },
+    "node_modules/stats.js": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/stats.js/-/stats.js-0.17.0.tgz",
+      "integrity": "sha512-hNKz8phvYLPEcRkeG1rsGmV5ChMjKDAWU7/OJJdDErPBNChQXxCo3WZurGpnWc6gZhAzEPFad1aVgyOANH1sMw==",
+      "license": "MIT"
+    },
     "node_modules/styled-jsx": {
       "version": "5.1.6",
       "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.6.tgz",
@@ -2517,6 +3049,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/suspend-react": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/suspend-react/-/suspend-react-0.1.3.tgz",
+      "integrity": "sha512-aqldKgX9aZqpoDp3e8/BZ8Dm7x1pJl+qI3ZKxDN0i/IQTWUwBx/ManmlVJ3wowqbno6c2bmiIfs+Um6LbsjJyQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=17.0"
+      }
+    },
     "node_modules/tailwindcss": {
       "version": "3.4.19",
       "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
@@ -2578,6 +3119,44 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/three": {
+      "version": "0.180.0",
+      "resolved": "https://registry.npmjs.org/three/-/three-0.180.0.tgz",
+      "integrity": "sha512-o+qycAMZrh+TsE01GqWUxUIKR1AL0S8pq7zDkYOQw8GqfX8b8VoCKYUoHbhiX5j+7hr8XsuHDVU6+gkQJQKg9w==",
+      "license": "MIT"
+    },
+    "node_modules/three-mesh-bvh": {
+      "version": "0.8.3",
+      "resolved": "https://registry.npmjs.org/three-mesh-bvh/-/three-mesh-bvh-0.8.3.tgz",
+      "integrity": "sha512-4G5lBaF+g2auKX3P0yqx+MJC6oVt6sB5k+CchS6Ob0qvH0YIhuUk1eYr7ktsIpY+albCqE80/FVQGV190PmiAg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">= 0.159.0"
+      }
+    },
+    "node_modules/three-stdlib": {
+      "version": "2.36.1",
+      "resolved": "https://registry.npmjs.org/three-stdlib/-/three-stdlib-2.36.1.tgz",
+      "integrity": "sha512-XyGQrFmNQ5O/IoKm556ftwKsBg11TIb301MB5dWNicziQBEs2g3gtOYIf7pFiLa0zI2gUwhtCjv9fmjnxKZ1Cg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/draco3d": "^1.4.0",
+        "@types/offscreencanvas": "^2019.6.4",
+        "@types/webxr": "^0.5.2",
+        "draco3d": "^1.4.1",
+        "fflate": "^0.6.9",
+        "potpack": "^1.0.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.128.0"
+      }
+    },
+    "node_modules/three-stdlib/node_modules/fflate": {
+      "version": "0.6.11",
+      "resolved": "https://registry.npmjs.org/fflate/-/fflate-0.6.11.tgz",
+      "integrity": "sha512-3JyEFWGjFn7zHmoa9+zG1BmW7X2okcmAB+0Cnu9UFbVs/jCBnl2A8o065ZlXiw145K3eBM3uLuzrYXC0RK7eDg==",
+      "license": "MIT"
+    },
     "node_modules/tinyglobby": {
       "version": "0.2.15",
       "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -2639,6 +3218,36 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/troika-three-text": {
+      "version": "0.52.5",
+      "resolved": "https://registry.npmjs.org/troika-three-text/-/troika-three-text-0.52.5.tgz",
+      "integrity": "sha512-Ry3jRhic9pzcY4JduSvRRyDmVOSqEW19gT4vtK+aCiPNVcDlmkxvGG0YbFd36RTDq1wExOupXnvNF/j1oiHHDA==",
+      "license": "MIT",
+      "dependencies": {
+        "bidi-js": "^1.0.2",
+        "troika-three-utils": "^0.52.5",
+        "troika-worker-utils": "^0.52.0",
+        "webgl-sdf-generator": "1.1.1"
+      },
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-three-utils": {
+      "version": "0.52.5",
+      "resolved": "https://registry.npmjs.org/troika-three-utils/-/troika-three-utils-0.52.5.tgz",
+      "integrity": "sha512-WsePbcX8RtfidRfsxK1eCZCjF81ZDzAKHH/evLs0hdV2wpoCb0vArGZHdzdOJrSS3k4zfdtbKDaBh8+phkrYnw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "three": ">=0.125.0"
+      }
+    },
+    "node_modules/troika-worker-utils": {
+      "version": "0.52.0",
+      "resolved": "https://registry.npmjs.org/troika-worker-utils/-/troika-worker-utils-0.52.0.tgz",
+      "integrity": "sha512-W1CpvTHykaPH5brv5VHLfQo9D1OYuo0cSBEUQFFT/nBUzM8iD6Lq2/tgG/f1OelbAS1WtaTPQzE5uM49egnngw==",
+      "license": "MIT"
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -2652,6 +3261,43 @@
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
       "license": "0BSD"
     },
+    "node_modules/tunnel-rat": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/tunnel-rat/-/tunnel-rat-0.1.2.tgz",
+      "integrity": "sha512-lR5VHmkPhzdhrM092lI2nACsLO4QubF0/yoOhzX7c+wIpbN1GjHNzCc91QlpxBi+cnx8vVJ+Ur6vL5cEoQPFpQ==",
+      "license": "MIT",
+      "dependencies": {
+        "zustand": "^4.3.2"
+      }
+    },
+    "node_modules/tunnel-rat/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/typescript": {
       "version": "5.9.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
@@ -2703,6 +3349,15 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -2710,12 +3365,32 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/utility-types": {
+      "version": "3.11.0",
+      "resolved": "https://registry.npmjs.org/utility-types/-/utility-types-3.11.0.tgz",
+      "integrity": "sha512-6Z7Ma2aVEWisaL6TvBCy7P8rm2LQoPv6dJ7ecIaIixHcwfbJ0x7mWdbcwlIM5IGQxPZSFYeqRCqlOOeKoJYMkw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
     "node_modules/web-vitals": {
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/web-vitals/-/web-vitals-5.1.0.tgz",
       "integrity": "sha512-ArI3kx5jI0atlTtmV0fWU3fjpLmq/nD3Zr1iFFlJLaqa5wLBkUSzINwBPySCX/8jRyjlmy1Volw1kz1g9XE4Jg==",
       "license": "Apache-2.0"
     },
+    "node_modules/webgl-constants": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-constants/-/webgl-constants-1.1.1.tgz",
+      "integrity": "sha512-LkBXKjU5r9vAW7Gcu3T5u+5cvSvh5WwINdr0C+9jpzVB41cjQAP5ePArDtk/WHYdVj0GefCgM73BA7FlIiNtdg=="
+    },
+    "node_modules/webgl-sdf-generator": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/webgl-sdf-generator/-/webgl-sdf-generator-1.1.1.tgz",
+      "integrity": "sha512-9Z0JcMTFxeE+b2x1LJTdnaT8rT8aEp7MVxkNwoycNmJWwPdzoXzMh0BjJSh/AEFP+KPYZUli814h8bJZFIZ2jA==",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -2730,6 +3405,35 @@
       "engines": {
         "node": ">= 8"
       }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.14",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.14.tgz",
+      "integrity": "sha512-/8tAspM5LMPr28b3fwLYrtdj77ECpfZviaP75CMTnwO8ISyaE4GDIG/9rDDYq/cH9D2Xw2A2RXglLInmVBQB/g==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
     }
   }
 }
diff --git a/package.json b/package.json
index 6269de7..77d3df3 100644
--- a/package.json
+++ b/package.json
@@ -10,12 +10,20 @@
   },
   "dependencies": {
     "@lottiefiles/dotlottie-react": "^0.17.13",
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.7.0",
+    "@react-three/postprocessing": "^3.0.4",
+    "@react-three/rapier": "^2.2.0",
+    "@types/three": "^0.180.0",
     "framer-motion": "^12.29.0",
+    "meshline": "^3.3.1",
     "mixpanel-browser": "^2.74.0",
     "next": "^15.1.4",
     "posthog-js": "^1.336.4",
+    "postprocessing": "^6.39.4",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0"
+    "react-dom": "^19.0.0",
+    "three": "^0.180.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.5",
diff --git a/public/images/omi-office-wearer.png b/public/images/omi-office-wearer.png
new file mode 100644
index 0000000..f8a3876
Binary files /dev/null and b/public/images/omi-office-wearer.png differ