diff --git a/client/src/mobile/components/MDancingTrek.tsx b/client/src/mobile/components/MDancingTrek.tsx
index 2c938620e..a023adb75 100644
--- a/client/src/mobile/components/MDancingTrek.tsx
+++ b/client/src/mobile/components/MDancingTrek.tsx
@@ -1,4 +1,5 @@
-import { useState } from 'react'
+import { useState } from 'react';
+import MascotClip, { findClip, mascot3dEnabled } from './trek3d/MascotClip';
 
 /**
  * The TREK mascot — an empty-state character that IS the TREK mark: the logo is
@@ -37,38 +38,58 @@ export type TrekScene =
   | 'costs'
   | 'search'
   | 'tasks'
-  | 'tours'
+  | 'tours';
 
-export type TrekMood = 'default' | 'happy' | 'sad' | 'sleepy' | 'confused' | 'error'
+export type TrekMood = 'default' | 'happy' | 'sad' | 'sleepy' | 'confused' | 'error';
 
 const MARK =
-  'M 855.636719 699.203125 L 222.246094 699.203125 C 197.679688 699.203125 179.90625 675.75 186.539062 652.101562 L 360.429688 32.390625 C 364.921875 16.386719 379.511719 5.328125 396.132812 5.328125 L 1029.527344 5.328125 C 1054.089844 5.328125 1071.867188 28.777344 1065.230469 52.429688 L 891.339844 672.136719 C 886.851562 688.140625 872.257812 699.203125 855.636719 699.203125 Z M 444.238281 1166.980469 L 533.773438 847.898438 C 540.410156 824.246094 522.632812 800.796875 498.070312 800.796875 L 172.472656 800.796875 C 155.851562 800.796875 141.261719 811.855469 136.769531 827.859375 L 47.234375 1146.941406 C 40.597656 1170.59375 58.375 1194.042969 82.9375 1194.042969 L 408.535156 1194.042969 C 425.15625 1194.042969 439.75 1182.984375 444.238281 1166.980469 Z M 609.003906 827.859375 L 435.113281 1447.570312 C 428.476562 1471.21875 446.253906 1494.671875 470.816406 1494.671875 L 1104.210938 1494.671875 C 1120.832031 1494.671875 1135.421875 1483.609375 1139.914062 1467.605469 L 1313.804688 847.898438 C 1320.441406 824.246094 1302.664062 800.796875 1278.101562 800.796875 L 644.707031 800.796875 C 628.085938 800.796875 613.492188 811.855469 609.003906 827.859375 Z M 1056.105469 333.019531 L 966.570312 652.101562 C 959.933594 675.75 977.710938 699.203125 1002.273438 699.203125 L 1327.871094 699.203125 C 1344.492188 699.203125 1359.085938 688.140625 1363.574219 672.136719 L 1453.109375 353.054688 C 1459.746094 329.40625 1441.96875 305.953125 1417.40625 305.953125 L 1091.808594 305.953125 C 1075.1875 305.953125 1060.597656 317.015625 1056.105469 333.019531 Z'
+  'M 855.636719 699.203125 L 222.246094 699.203125 C 197.679688 699.203125 179.90625 675.75 186.539062 652.101562 L 360.429688 32.390625 C 364.921875 16.386719 379.511719 5.328125 396.132812 5.328125 L 1029.527344 5.328125 C 1054.089844 5.328125 1071.867188 28.777344 1065.230469 52.429688 L 891.339844 672.136719 C 886.851562 688.140625 872.257812 699.203125 855.636719 699.203125 Z M 444.238281 1166.980469 L 533.773438 847.898438 C 540.410156 824.246094 522.632812 800.796875 498.070312 800.796875 L 172.472656 800.796875 C 155.851562 800.796875 141.261719 811.855469 136.769531 827.859375 L 47.234375 1146.941406 C 40.597656 1170.59375 58.375 1194.042969 82.9375 1194.042969 L 408.535156 1194.042969 C 425.15625 1194.042969 439.75 1182.984375 444.238281 1166.980469 Z M 609.003906 827.859375 L 435.113281 1447.570312 C 428.476562 1471.21875 446.253906 1494.671875 470.816406 1494.671875 L 1104.210938 1494.671875 C 1120.832031 1494.671875 1135.421875 1483.609375 1139.914062 1467.605469 L 1313.804688 847.898438 C 1320.441406 824.246094 1302.664062 800.796875 1278.101562 800.796875 L 644.707031 800.796875 C 628.085938 800.796875 613.492188 811.855469 609.003906 827.859375 Z M 1056.105469 333.019531 L 966.570312 652.101562 C 959.933594 675.75 977.710938 699.203125 1002.273438 699.203125 L 1327.871094 699.203125 C 1344.492188 699.203125 1359.085938 688.140625 1363.574219 672.136719 L 1453.109375 353.054688 C 1459.746094 329.40625 1441.96875 305.953125 1417.40625 305.953125 L 1091.808594 305.953125 C 1075.1875 305.953125 1060.597656 317.015625 1056.105469 333.019531 Z';
 
 const SCENE_MOOD: Partial<Record<TrekScene, TrekMood>> = {
   notifications: 'sleepy',
   search: 'confused',
+};
+
+type MascotProps = {
+  size?: number;
+  scene?: TrekScene;
+  mood?: TrekMood;
+  className?: string;
+};
+
+/**
+ * Picks the look: the pre-rendered 3D clip when one exists for this scene and
+ * face (see `trek3d/MascotClip`), the SVG otherwise, under reduced motion, in
+ * tests, or when `localStorage['trek-mascot-3d']` is `'0'`.
+ */
+export default function MDancingTrek(props: MascotProps) {
+  const { size = 96, scene = 'idle', mood, className = '' } = props;
+  const sceneMood = SCENE_MOOD[scene] ?? 'default';
+  const clip =
+    import.meta.env.MODE !== 'test' && mascot3dEnabled() ? findClip(scene, mood ?? sceneMood, sceneMood) : null;
+  if (clip)
+    return (
+      <MascotClip
+        clip={clip}
+        scene={scene}
+        size={size}
+        className={className}
+        fallback={<MDancingTrekSvg {...props} />}
+      />
+    );
+  return <MDancingTrekSvg {...props} />;
 }
 
-export default function MDancingTrek({
-  size = 96,
-  scene = 'idle',
-  mood,
-  className = '',
-}: {
-  size?: number
-  scene?: TrekScene
-  mood?: TrekMood
-  className?: string
-}) {
-  const face = mood ?? SCENE_MOOD[scene] ?? 'default'
+function MDancingTrekSvg({ size = 96, scene = 'idle', mood, className = '' }: MascotProps) {
+  const face = mood ?? SCENE_MOOD[scene] ?? 'default';
   // Ground shadow sits under whatever the mascot stands on this scene.
-  const shadowCy = scene === 'transport' ? 86 : 73
+  const shadowCy = scene === 'transport' ? 86 : 73;
   // Poke to react: remounting the svg replays the entrance pop-in as a tap bounce.
-  const [poke, setPoke] = useState(0)
+  const [poke, setPoke] = useState(0);
   return (
     <svg
       key={poke}
-      onClick={() => setPoke(p => p + 1)}
+      onClick={() => setPoke((p) => p + 1)}
       width={size}
       height={(size * 96) / 88}
       viewBox="0 0 88 96"
@@ -96,7 +117,7 @@ export default function MDancingTrek({
         <SceneFront scene={scene} />
       </g>
     </svg>
-  )
+  );
 }
 
 /* ── Eyes ────────────────────────────────────────────────────────────────────
@@ -111,7 +132,7 @@ function Eyes({ mood }: { mood: TrekMood }) {
         <path d="M33.7 34 Q36 31.2 38.3 34" />
         <path d="M42.7 34 Q45 31.2 47.3 34" />
       </g>
-    )
+    );
   }
   if (mood === 'sad') {
     // The mirror of `happy`: the same arcs bent the other way. `sleepy` is a
@@ -122,7 +143,7 @@ function Eyes({ mood }: { mood: TrekMood }) {
         <path d="M33.7 32 Q36 34.8 38.3 32" />
         <path d="M42.7 32 Q45 34.8 47.3 32" />
       </g>
-    )
+    );
   }
   if (mood === 'sleepy') {
     return (
@@ -130,7 +151,7 @@ function Eyes({ mood }: { mood: TrekMood }) {
         <path d="M33.7 33 Q36 34.4 38.3 33" />
         <path d="M42.7 33 Q45 34.4 47.3 33" />
       </g>
-    )
+    );
   }
   if (mood === 'error') {
     return (
@@ -138,7 +159,7 @@ function Eyes({ mood }: { mood: TrekMood }) {
         <path d="M34.4 31.4 L37.6 34.6 M37.6 31.4 L34.4 34.6" />
         <path d="M43.4 31.4 L46.6 34.6 M46.6 31.4 L43.4 34.6" />
       </g>
-    )
+    );
   }
   if (mood === 'confused') {
     // one eye open, one a raised squint — reads puzzled
@@ -146,9 +167,15 @@ function Eyes({ mood }: { mood: TrekMood }) {
       <g className="trek-eyes">
         <circle className="trek-eye" cx="36" cy="33" r="2.3" />
         <circle cx="36.4" cy="33.3" r="1" fill="currentColor" />
-        <path d="M42.7 32.6 Q45 31.4 47.3 32.6" fill="none" stroke="var(--m-bg)" strokeWidth="1.8" strokeLinecap="round" />
+        <path
+          d="M42.7 32.6 Q45 31.4 47.3 32.6"
+          fill="none"
+          stroke="var(--m-bg)"
+          strokeWidth="1.8"
+          strokeLinecap="round"
+        />
       </g>
-    )
+    );
   }
   // default — open eyes that blink and glance around
   return (
@@ -160,7 +187,7 @@ function Eyes({ mood }: { mood: TrekMood }) {
         <circle cx="45.4" cy="33.3" r="1" fill="currentColor" />
       </g>
     </g>
-  )
+  );
 }
 
 /* ── Scene props ─────────────────────────────────────────────────────────────
@@ -174,12 +201,23 @@ function Eyes({ mood }: { mood: TrekMood }) {
  * mark that gap is the only thing telling the pack from the body behind it.
  */
 function SceneOnBody({ scene }: { scene: TrekScene }) {
-  if (scene !== 'tours') return null
-  const cut = { stroke: 'var(--m-bg)', strokeWidth: 1.6, paintOrder: 'stroke' as const, strokeLinejoin: 'round' as const }
+  if (scene !== 'tours') return null;
+  const cut = {
+    stroke: 'var(--m-bg)',
+    strokeWidth: 1.6,
+    paintOrder: 'stroke' as const,
+    strokeLinejoin: 'round' as const,
+  };
   return (
     <g>
       {/* a small smile under the eyes, glad to be out walking */}
-      <path d="M38.2 38.9 Q40.4 41.2 42.6 38.9" fill="none" stroke="var(--m-bg)" strokeWidth="1.4" strokeLinecap="round" />
+      <path
+        d="M38.2 38.9 Q40.4 41.2 42.6 38.9"
+        fill="none"
+        stroke="var(--m-bg)"
+        strokeWidth="1.4"
+        strokeLinecap="round"
+      />
       {/* the pack, slung over the left side */}
       <g className="trek-pack">
         <g transform="translate(2.6 4.2) rotate(-7 17 44)">
@@ -188,9 +226,19 @@ function SceneOnBody({ scene }: { scene: TrekScene }) {
           <rect x="11.6" y="25.4" width="1.2" height="5.6" fill="var(--m-bg)" />
           <rect x="20.8" y="25.4" width="1.2" height="5.6" fill="var(--m-bg)" />
           {/* body of the pack */}
-          <path d="M10 34 Q10 31.2 13 31.2 L21.6 31.2 Q24.6 31.2 24.6 34 L25 55.4 Q25 59 21.4 59 L12.6 59 Q9 59 9.2 55.4 Z" fill="currentColor" {...cut} />
+          <path
+            d="M10 34 Q10 31.2 13 31.2 L21.6 31.2 Q24.6 31.2 24.6 34 L25 55.4 Q25 59 21.4 59 L12.6 59 Q9 59 9.2 55.4 Z"
+            fill="currentColor"
+            {...cut}
+          />
           {/* lid seam and buckle */}
-          <path d="M10.2 38.4 Q17.4 40.6 24.7 38.4" fill="none" stroke="var(--m-bg)" strokeWidth="1.1" strokeLinecap="round" />
+          <path
+            d="M10.2 38.4 Q17.4 40.6 24.7 38.4"
+            fill="none"
+            stroke="var(--m-bg)"
+            strokeWidth="1.1"
+            strokeLinecap="round"
+          />
           <rect x="16" y="38.8" width="2.8" height="3.4" rx="0.7" fill="var(--m-bg)" />
           {/* front pocket */}
           <rect x="12" y="46" width="10.6" height="9.4" rx="2.6" fill="none" stroke="var(--m-bg)" strokeWidth="1.1" />
@@ -198,7 +246,7 @@ function SceneOnBody({ scene }: { scene: TrekScene }) {
         </g>
       </g>
     </g>
-  )
+  );
 }
 
 function SceneBack({ scene }: { scene: TrekScene }) {
@@ -209,11 +257,22 @@ function SceneBack({ scene }: { scene: TrekScene }) {
         <g>
           <g className="trek-hills" fill="currentColor">
             <path d="M44 73 L62 41 L69.5 52 L74.5 46 L88 73 Z" opacity="0.14" />
-            <path d="M58.6 47.2 L62 41 L65.6 46.4 L63.4 45.2 L61.6 47.6 Z M72.6 49 L74.5 46 L77 50.2 L75.4 49.4 Z" opacity="0.3" />
+            <path
+              d="M58.6 47.2 L62 41 L65.6 46.4 L63.4 45.2 L61.6 47.6 Z M72.6 49 L74.5 46 L77 50.2 L75.4 49.4 Z"
+              opacity="0.3"
+            />
           </g>
-          <path className="trek-trail" d="M10 77.5 H78" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeDasharray="3.4 4.6" opacity="0.35" />
+          <path
+            className="trek-trail"
+            d="M10 77.5 H78"
+            stroke="currentColor"
+            strokeWidth="1.4"
+            strokeLinecap="round"
+            strokeDasharray="3.4 4.6"
+            opacity="0.35"
+          />
         </g>
-      )
+      );
     case 'transport':
       // skateboard under the body — deck + two wheels spinning in place
       return (
@@ -228,7 +287,7 @@ function SceneBack({ scene }: { scene: TrekScene }) {
             <circle cx="56" cy="79" r="1.1" fill="var(--m-bg)" />
           </g>
         </g>
-      )
+      );
     case 'guide':
       // tall staff with a big pennant fluttering near the top
       return (
@@ -239,7 +298,7 @@ function SceneBack({ scene }: { scene: TrekScene }) {
             <path d="M73 25 L90 30.5 L73 40 Z" fill="currentColor" />
           </g>
         </g>
-      )
+      );
     case 'packing':
       // rolling suitcase parked beside the body — rocks on its wheels,
       // handle telescoping up and down
@@ -258,7 +317,7 @@ function SceneBack({ scene }: { scene: TrekScene }) {
             <circle cx="79" cy="73.4" r="2" fill="currentColor" />
           </g>
         </g>
-      )
+      );
     case 'links':
       // two chain links clicking into each other beside the body. The lower one
       // carries a surface-coloured under-stroke so it reads as passing through
@@ -273,7 +332,7 @@ function SceneBack({ scene }: { scene: TrekScene }) {
             </g>
           </g>
         </g>
-      )
+      );
     case 'polls':
       // vote bars gently rising and settling like live tallies
       return (
@@ -282,24 +341,36 @@ function SceneBack({ scene }: { scene: TrekScene }) {
           <rect className="trek-bar trek-d2" x="73" y="52" width="5" height="20" rx="1.5" fill="currentColor" />
           <rect className="trek-bar trek-d3" x="80" y="56" width="5" height="16" rx="1.5" fill="currentColor" />
         </g>
-      )
+      );
     case 'collections':
       // a map pin dropping in and bouncing beside the body
       return (
         <g className="trek-pin">
-          <path d="M73 48 C 78 48 81.5 51.6 81.5 56.4 C 81.5 61.6 76 66 73 70 C 70 66 64.5 61.6 64.5 56.4 C 64.5 51.6 68 48 73 48 Z" fill="currentColor" />
+          <path
+            d="M73 48 C 78 48 81.5 51.6 81.5 56.4 C 81.5 61.6 76 66 73 70 C 70 66 64.5 61.6 64.5 56.4 C 64.5 51.6 68 48 73 48 Z"
+            fill="currentColor"
+          />
           <circle cx="73" cy="56.2" r="2.9" fill="var(--m-bg)" />
         </g>
-      )
+      );
     case 'atlas':
       // a globe beside the body, meridians drifting
       return (
         <g className="trek-globe-wrap">
           <circle cx="73" cy="60" r="11" fill="currentColor" />
           <path d="M63 57 H83 M64.5 64.5 H81.5" stroke="var(--m-bg)" strokeWidth="1.2" strokeLinecap="round" />
-          <ellipse className="trek-globe" cx="73" cy="60" rx="4.6" ry="11" fill="none" stroke="var(--m-bg)" strokeWidth="1.2" />
+          <ellipse
+            className="trek-globe"
+            cx="73"
+            cy="60"
+            rx="4.6"
+            ry="11"
+            fill="none"
+            stroke="var(--m-bg)"
+            strokeWidth="1.2"
+          />
         </g>
-      )
+      );
     case 'costs':
       // a stack of coins beside the body, top one bouncing on
       return (
@@ -312,7 +383,7 @@ function SceneBack({ scene }: { scene: TrekScene }) {
             <rect x="72.7" y="58.6" width="2.6" height="5.8" rx="1.3" fill="var(--m-bg)" />
           </g>
         </g>
-      )
+      );
     case 'chat':
       // a speech bubble beside the body with three typing dots pulsing in turn
       return (
@@ -323,9 +394,9 @@ function SceneBack({ scene }: { scene: TrekScene }) {
           <circle className="trek-dot trek-d2" cx="73" cy="51.5" r="1.9" fill="var(--m-bg)" />
           <circle className="trek-dot trek-d3" cx="79" cy="51.5" r="1.9" fill="var(--m-bg)" />
         </g>
-      )
+      );
     default:
-      return null
+      return null;
   }
 }
 
@@ -340,12 +411,18 @@ function SceneFront({ scene }: { scene: TrekScene }) {
               <rect x="69.1" y="40.5" width="2.2" height="33.5" rx="1.1" fill="currentColor" />
               <rect x="67.9" y="34" width="4.6" height="9" rx="2" fill="currentColor" />
             </g>
-            <path d="M68.2 35.6 Q63.8 37.6 66.6 42" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" />
+            <path
+              d="M68.2 35.6 Q63.8 37.6 66.6 42"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.1"
+              strokeLinecap="round"
+            />
             <rect x="68.6" y="38.2" width="3.2" height="0.9" rx="0.45" fill="var(--m-bg)" />
             <ellipse cx="70.2" cy="69" rx="3.4" ry="1.1" fill="none" stroke="currentColor" strokeWidth="1.2" />
           </g>
         </g>
-      )
+      );
     // Files reuse the booking ticket per design — a card getting written on.
     case 'bookings':
     case 'files':
@@ -360,16 +437,33 @@ function SceneFront({ scene }: { scene: TrekScene }) {
             <rect className="trek-write trek-d3" x="64" y="63.5" width="7" height="1.7" rx="0.85" fill="var(--m-bg)" />
           </g>
         </g>
-      )
+      );
     case 'notes':
       // a paper note (surface colour) with ink lines being written and a
       // scribbling pencil — pencil is ink (light in dark theme, dark in light)
       return (
         <g className="trek-note">
           <g transform="rotate(5 70 55)">
-            <rect x="60" y="44" width="20" height="24" rx="2.5" fill="var(--m-bg)" stroke="currentColor" strokeWidth="1.4" />
+            <rect
+              x="60"
+              y="44"
+              width="20"
+              height="24"
+              rx="2.5"
+              fill="var(--m-bg)"
+              stroke="currentColor"
+              strokeWidth="1.4"
+            />
             <rect className="trek-write" x="63.5" y="50" width="13" height="1.7" rx="0.85" fill="currentColor" />
-            <rect className="trek-write trek-d2" x="63.5" y="54.5" width="13" height="1.7" rx="0.85" fill="currentColor" />
+            <rect
+              className="trek-write trek-d2"
+              x="63.5"
+              y="54.5"
+              width="13"
+              height="1.7"
+              rx="0.85"
+              fill="currentColor"
+            />
             <rect className="trek-write trek-d3" x="63.5" y="59" width="8" height="1.7" rx="0.85" fill="currentColor" />
           </g>
           <g className="trek-pencil">
@@ -381,22 +475,40 @@ function SceneFront({ scene }: { scene: TrekScene }) {
             </g>
           </g>
         </g>
-      )
+      );
     case 'journey':
       // an open book with a fluttering page and a ribbon bookmark
       return (
         <g className="trek-journal">
           <path d="M58 53 Q71 49.5 71 52 L71 69 Q71 66.5 58 70 Z" fill="currentColor" />
           <path d="M84 53 Q71 49.5 71 52 L71 69 Q71 66.5 84 70 Z" fill="currentColor" />
-          <path d="M60.5 56 Q66 54 70 55.5 M60.5 60 Q66 58 70 59.5 M60.5 64 Q66 62 70 63.5" stroke="var(--m-bg)" strokeWidth="1" fill="none" strokeLinecap="round" />
-          <path d="M76 55.4 Q80 54 83 55.6 M76 59.4 Q80 58 83 59.6" stroke="var(--m-bg)" strokeWidth="1" fill="none" strokeLinecap="round" />
+          <path
+            d="M60.5 56 Q66 54 70 55.5 M60.5 60 Q66 58 70 59.5 M60.5 64 Q66 62 70 63.5"
+            stroke="var(--m-bg)"
+            strokeWidth="1"
+            fill="none"
+            strokeLinecap="round"
+          />
+          <path
+            d="M76 55.4 Q80 54 83 55.6 M76 59.4 Q80 58 83 59.6"
+            stroke="var(--m-bg)"
+            strokeWidth="1"
+            fill="none"
+            strokeLinecap="round"
+          />
           <g className="trek-page">
             <path d="M71 52 Q78 50.5 82 52 L82 68.5 Q78 67 71 68.5 Z" fill="currentColor" />
-            <path d="M74 55.4 Q78 54.2 81 55.6 M74 59.4 Q78 58.2 81 59.6" stroke="var(--m-bg)" strokeWidth="1" fill="none" strokeLinecap="round" />
+            <path
+              d="M74 55.4 Q78 54.2 81 55.6 M74 59.4 Q78 58.2 81 59.6"
+              stroke="var(--m-bg)"
+              strokeWidth="1"
+              fill="none"
+              strokeLinecap="round"
+            />
           </g>
           <rect x="70" y="49.5" width="2.2" height="9" fill="var(--m-bg)" />
         </g>
-      )
+      );
     case 'dashboard':
       // a little paper plane looping around, ready for a first trip
       return (
@@ -404,16 +516,40 @@ function SceneFront({ scene }: { scene: TrekScene }) {
           <path d="M64 53 L87 58 L70 68 L71 60 Z" fill="currentColor" />
           <path d="M87 58 L71 60 L70 68" stroke="var(--m-bg)" strokeWidth="0.9" fill="none" strokeLinejoin="round" />
         </g>
-      )
+      );
     case 'notifications':
       // all caught up — a stack of Zzz drifting up while the mascot dozes
       return (
         <g className="trek-zzz" fill="currentColor">
-          <path className="trek-z trek-z1" d="M63 50 h5 l-5 6 h5" fill="none" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round" strokeLinecap="round" />
-          <path className="trek-z trek-z2" d="M69 42 h6 l-6 7 h6" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinejoin="round" strokeLinecap="round" />
-          <path className="trek-z trek-z3" d="M76 32 h7 l-7 8 h7" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinejoin="round" strokeLinecap="round" />
+          <path
+            className="trek-z trek-z1"
+            d="M63 50 h5 l-5 6 h5"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.4"
+            strokeLinejoin="round"
+            strokeLinecap="round"
+          />
+          <path
+            className="trek-z trek-z2"
+            d="M69 42 h6 l-6 7 h6"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.6"
+            strokeLinejoin="round"
+            strokeLinecap="round"
+          />
+          <path
+            className="trek-z trek-z3"
+            d="M76 32 h7 l-7 8 h7"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.8"
+            strokeLinejoin="round"
+            strokeLinecap="round"
+          />
         </g>
-      )
+      );
     case 'search':
       // a magnifying glass scanning back and forth
       return (
@@ -422,7 +558,7 @@ function SceneFront({ scene }: { scene: TrekScene }) {
           <circle cx="72" cy="56" r="5.4" fill="var(--m-bg)" />
           <rect x="77" y="62.5" width="3" height="10" rx="1.5" fill="currentColor" transform="rotate(-45 78.5 67.5)" />
         </g>
-      )
+      );
     case 'tasks':
       // a clipboard checklist with a checkmark ticking on
       return (
@@ -436,11 +572,19 @@ function SceneFront({ scene }: { scene: TrekScene }) {
             <rect x="69.5" y="56.2" width="9" height="1.7" rx="0.85" fill="var(--m-bg)" />
             <rect x="63.5" y="61.6" width="4" height="4" rx="1" fill="var(--m-bg)" />
             <rect x="69.5" y="62.8" width="6" height="1.7" rx="0.85" fill="var(--m-bg)" />
-            <path className="trek-check" d="M64 50.5 l1.3 1.4 l2.2 -2.7" fill="none" stroke="currentColor" strokeWidth="1.1" strokeLinecap="round" strokeLinejoin="round" />
+            <path
+              className="trek-check"
+              d="M64 50.5 l1.3 1.4 l2.2 -2.7"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth="1.1"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
           </g>
         </g>
-      )
+      );
     default:
-      return null
+      return null;
   }
 }
diff --git a/client/src/mobile/components/trek3d/MascotClip.tsx b/client/src/mobile/components/trek3d/MascotClip.tsx
new file mode 100644
index 000000000..e08bbd2ea
--- /dev/null
+++ b/client/src/mobile/components/trek3d/MascotClip.tsx
@@ -0,0 +1,286 @@
+import { useEffect, useRef, useState, type ReactNode } from 'react';
+import meta from './clips.meta.json';
+
+/**
+ * The 3D TREK mascot as pre-rendered clips. Each clip is a plain H.264 MP4 with
+ * "stacked alpha": the colour frame on top, its transparency below as a grey
+ * mask. A tiny WebGL shader joins the halves into a transparent image, so the
+ * same file plays everywhere (iOS included) with hardware decoding and no
+ * runtime 3D. Eyes are holes in the mask, like the SVG's `--m-bg` cut-outs.
+ *
+ * One seamless loop per scene and theme plus a one-shot click clip; the click
+ * cross-fades into the clip and back inside the shader. The <video> elements
+ * stay 2 px stand-ins: browsers hang their own controls on visible videos.
+ *
+ * Clips live next to this file as `<scene>[--<mood>]-<light|dark>-<loop|poke>.mp4`,
+ * cropped to the area the scene uses; `crop` in clips.meta.json places them back
+ * inside the full 88:96 box so every scene keeps the same scale. Only URLs are
+ * bundled; the files load when a mascot actually renders.
+ */
+const CLIPS = import.meta.glob('./clips/*.mp4', { query: '?url', import: 'default', eager: true }) as Record<
+  string,
+  string
+>;
+const META = meta as Record<string, { poke: number; crop: [number, number, number, number] }>;
+
+const FADE_MS = 140;
+// The clips frame the figure with more air than the SVG, so they render at 1.6 times the requested size
+const CLIP_SCALE = 1.6;
+
+function clipKey(scene: string, mood: string, sceneMood: string) {
+  return mood === sceneMood ? scene : `${scene}--${mood}`;
+}
+
+export function findClip(scene: string, mood: string, sceneMood: string): string | null {
+  const key = clipKey(scene, mood, sceneMood);
+  return CLIPS[`./clips/${key}-light-loop.mp4`] ? key : null;
+}
+
+let webgl: boolean | null = null;
+function hasWebgl(): boolean {
+  if (webgl === null) {
+    try {
+      webgl = !!document.createElement('canvas').getContext('webgl');
+    } catch {
+      webgl = false;
+    }
+  }
+  return webgl;
+}
+
+/** Opt-out for comparing against the SVG: localStorage `trek-mascot-3d` = `0`. */
+export function mascot3dEnabled(): boolean {
+  try {
+    if (localStorage.getItem('trek-mascot-3d') === '0') return false;
+  } catch {
+    /* storage blocked: keep the default */
+  }
+  if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) return false;
+  return hasWebgl();
+}
+
+function useIsDark() {
+  const read = () => document.documentElement.classList.contains('dark');
+  const [dark, setDark] = useState(read);
+  useEffect(() => {
+    const mo = new MutationObserver(() => setDark(read()));
+    mo.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] });
+    return () => mo.disconnect();
+  }, []);
+  return dark;
+}
+
+const VERT = `attribute vec2 p; varying vec2 uv;
+void main(){ uv = vec2((p.x + 1.0) * 0.5, (1.0 - p.y) * 0.5); gl_Position = vec4(p, 0.0, 1.0); }`;
+// colour from the top half, alpha from the bottom half; premultiplied for the canvas
+const FRAG = `precision mediump float; uniform sampler2D a; uniform sampler2D b; uniform float m; varying vec2 uv;
+vec4 px(sampler2D t){ vec3 c = texture2D(t, vec2(uv.x, uv.y * 0.5)).rgb; float al = texture2D(t, vec2(uv.x, 0.5 + uv.y * 0.5)).r; return vec4(c * al, al); }
+void main(){ gl_FragColor = mix(px(a), px(b), m); }`;
+
+function setupGl(canvas: HTMLCanvasElement) {
+  const gl = canvas.getContext('webgl', { alpha: true, premultipliedAlpha: true, antialias: false });
+  if (!gl) return null;
+  const shader = (type: number, src: string) => {
+    const s = gl.createShader(type);
+    if (s) {
+      gl.shaderSource(s, src);
+      gl.compileShader(s);
+    }
+    return s;
+  };
+  const prog = gl.createProgram();
+  const vs = shader(gl.VERTEX_SHADER, VERT),
+    fs = shader(gl.FRAGMENT_SHADER, FRAG);
+  if (!prog || !vs || !fs) return null;
+  gl.attachShader(prog, vs);
+  gl.attachShader(prog, fs);
+  gl.linkProgram(prog);
+  if (!gl.getProgramParameter(prog, gl.LINK_STATUS)) return null;
+  gl.useProgram(prog);
+  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.STATIC_DRAW);
+  const loc = gl.getAttribLocation(prog, 'p');
+  gl.enableVertexAttribArray(loc);
+  gl.vertexAttribPointer(loc, 2, gl.FLOAT, false, 0, 0);
+  const tex = (unit: number, name: string) => {
+    const t = gl.createTexture();
+    gl.activeTexture(gl.TEXTURE0 + unit);
+    gl.bindTexture(gl.TEXTURE_2D, t);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array(4));
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+    gl.uniform1i(gl.getUniformLocation(prog, name), unit);
+    return t;
+  };
+  const texA = tex(0, 'a'),
+    texB = tex(1, 'b');
+  const mixLoc = gl.getUniformLocation(prog, 'm');
+  const upload = (unit: number, t: WebGLTexture | null, v: HTMLVideoElement) => {
+    gl.activeTexture(gl.TEXTURE0 + unit);
+    gl.bindTexture(gl.TEXTURE_2D, t);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, v);
+  };
+  return {
+    draw(loop: HTMLVideoElement | null, poke: HTMLVideoElement | null, m: number) {
+      gl.viewport(0, 0, canvas.width, canvas.height);
+      if (loop && loop.readyState >= 2) upload(0, texA, loop);
+      if (poke && m > 0 && poke.readyState >= 2) upload(1, texB, poke);
+      gl.uniform1f(mixLoc, m);
+      gl.clearColor(0, 0, 0, 0);
+      gl.clear(gl.COLOR_BUFFER_BIT);
+      gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
+    },
+  };
+}
+
+const HIDDEN_VIDEO = {
+  position: 'absolute',
+  insetInlineStart: 0,
+  top: 0,
+  width: 2,
+  height: 2,
+  opacity: 0,
+  pointerEvents: 'none',
+} as const;
+
+export default function MascotClip({
+  clip,
+  scene,
+  size,
+  className = '',
+  fallback,
+}: {
+  clip: string;
+  scene: string;
+  size: number;
+  className?: string;
+  /** shown when the device refuses to autoplay (e.g. iOS low power mode) */
+  fallback: ReactNode;
+}) {
+  const theme = useIsDark() ? 'dark' : 'light';
+  const loopUrl = CLIPS[`./clips/${clip}-${theme}-loop.mp4`];
+  const pokeUrl = CLIPS[`./clips/${scene}-${theme}-poke.mp4`];
+  const pokeMs = (META[scene]?.poke ?? 2) * 1000;
+  const [x, y, w, h] = META[clip]?.crop ?? [0, 0, 1, 1];
+  const boxW = size * CLIP_SCALE,
+    boxH = (boxW * 96) / 88;
+
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const loopRef = useRef<HTMLVideoElement>(null);
+  const pokeRef = useRef<HTMLVideoElement>(null);
+  const [failed, setFailed] = useState(false);
+  // 0 = loop, 1 = click clip; the draw loop eases toward the target for the cross-fade
+  const mix = useRef({ value: 0, target: 0, until: 0 });
+
+  useEffect(() => {
+    const v = loopRef.current;
+    if (!v) return;
+    v.play().catch(() => setFailed(true));
+  }, [loopUrl]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas || failed) return;
+    const gl = setupGl(canvas);
+    if (!gl) {
+      setFailed(true);
+      return;
+    }
+    let raf = 0,
+      visible = true,
+      last = performance.now();
+    const io = new IntersectionObserver(([e]) => {
+      visible = e.isIntersecting;
+    });
+    io.observe(canvas);
+    const frame = (now: number) => {
+      raf = requestAnimationFrame(frame);
+      const dt = now - last;
+      last = now;
+      if (!visible) return;
+      const m = mix.current;
+      if (m.target === 1 && now > m.until) m.target = 0;
+      const step = dt / FADE_MS;
+      m.value = m.target > m.value ? Math.min(1, m.value + step) : Math.max(0, m.value - step);
+      const dpr = Math.min(window.devicePixelRatio || 1, 2);
+      const cw = Math.round(canvas.clientWidth * dpr),
+        ch = Math.round(canvas.clientHeight * dpr);
+      if (canvas.width !== cw || canvas.height !== ch) {
+        canvas.width = cw;
+        canvas.height = ch;
+      }
+      gl.draw(loopRef.current, pokeRef.current, m.value);
+    };
+    raf = requestAnimationFrame(frame);
+    // No loseContext() here: StrictMode re-runs this effect on the same canvas, which would then hand back the dead
+    // context. The browser frees it with the canvas.
+    return () => {
+      cancelAnimationFrame(raf);
+      io.disconnect();
+    };
+  }, [failed]);
+
+  if (failed) return <>{fallback}</>;
+
+  const poke = () => {
+    const v = pokeRef.current;
+    if (!v) return;
+    v.currentTime = 0;
+    v.play()
+      .then(() => {
+        mix.current.target = 1;
+        mix.current.until = performance.now() + Math.max(300, pokeMs - FADE_MS);
+      })
+      .catch(() => {
+        mix.current.target = 0;
+      });
+  };
+
+  return (
+    <span
+      role="presentation"
+      onClick={poke}
+      className={`relative inline-block shrink-0 cursor-pointer ${className}`}
+      style={{ width: boxW, height: boxH }}
+    >
+      <canvas
+        ref={canvasRef}
+        aria-hidden
+        className="pointer-events-none absolute"
+        style={{
+          left: `${x * 100}%` /* rtl-lint-disable: the crop sits where the frame was cut, video is never mirrored */,
+          top: `${y * 100}%`,
+          width: `${w * 100}%`,
+          height: `${h * 100}%`,
+        }}
+      />
+      <video
+        key={loopUrl}
+        ref={loopRef}
+        src={loopUrl}
+        autoPlay
+        loop
+        muted
+        playsInline
+        disablePictureInPicture
+        aria-hidden
+        style={HIDDEN_VIDEO}
+      />
+      {pokeUrl && (
+        <video
+          key={pokeUrl}
+          ref={pokeRef}
+          src={pokeUrl}
+          muted
+          playsInline
+          preload="auto"
+          disablePictureInPicture
+          aria-hidden
+          style={HIDDEN_VIDEO}
+        />
+      )}
+    </span>
+  );
+}
diff --git a/client/src/mobile/components/trek3d/clips.meta.json b/client/src/mobile/components/trek3d/clips.meta.json
new file mode 100644
index 000000000..137ab1d52
--- /dev/null
+++ b/client/src/mobile/components/trek3d/clips.meta.json
@@ -0,0 +1,122 @@
+{
+  "idle": {
+    "poke": 2.3,
+    "crop": [0.14545, 0.11667, 0.72273, 0.74167]
+  },
+  "idle--sleepy": {
+    "poke": 2.3,
+    "crop": [0.14545, 0.11667, 0.72273, 0.74167]
+  },
+  "idle--happy": {
+    "poke": 2.3,
+    "crop": [0.14545, 0.11667, 0.72273, 0.74167]
+  },
+  "idle--sad": {
+    "poke": 2.3,
+    "crop": [0.14545, 0.11667, 0.72273, 0.74167]
+  },
+  "idle--confused": {
+    "poke": 2.3,
+    "crop": [0.14545, 0.11667, 0.72273, 0.74167]
+  },
+  "idle--error": {
+    "poke": 2.3,
+    "crop": [0.14545, 0.11667, 0.72273, 0.74167]
+  },
+  "dashboard": {
+    "poke": 2,
+    "crop": [0.07273, 0.14583, 0.88182, 0.625]
+  },
+  "dashboard--happy": {
+    "poke": 2,
+    "crop": [0.07273, 0.14583, 0.88182, 0.625]
+  },
+  "transport": {
+    "poke": 1.5,
+    "crop": [0.19545, 0.0, 0.64545, 0.75]
+  },
+  "transport--sad": {
+    "poke": 1.5,
+    "crop": [0.19545, 0.0, 0.64545, 0.75]
+  },
+  "transport--happy": {
+    "poke": 1.5,
+    "crop": [0.19545, 0.0, 0.64545, 0.75]
+  },
+  "bookings": {
+    "poke": 2.1,
+    "crop": [0.16364, 0.19167, 0.83636, 0.575]
+  },
+  "tours": {
+    "poke": 2.2,
+    "crop": [0.08636, 0.11667, 0.81364, 0.65417]
+  },
+  "packing": {
+    "poke": 2.45,
+    "crop": [0.09091, 0.025, 0.82273, 0.7125]
+  },
+  "packing--happy": {
+    "poke": 2.45,
+    "crop": [0.09091, 0.025, 0.82273, 0.7125]
+  },
+  "tasks": {
+    "poke": 2,
+    "crop": [0.13182, 0.1125, 0.85909, 0.80833]
+  },
+  "costs": {
+    "poke": 2.3,
+    "crop": [0.14091, 0.0, 0.85909, 0.7625]
+  },
+  "files": {
+    "poke": 2.1,
+    "crop": [0.16364, 0.21667, 0.76818, 0.52917]
+  },
+  "notes": {
+    "poke": 2.6,
+    "crop": [0.13182, 0.0875, 0.86818, 0.67083]
+  },
+  "links": {
+    "poke": 2.2,
+    "crop": [0.03636, 0.08333, 0.91364, 0.66667]
+  },
+  "polls": {
+    "poke": 2,
+    "crop": [0.08636, 0.12917, 0.76364, 0.6125]
+  },
+  "chat": {
+    "poke": 2.2,
+    "crop": [0.12727, 0.18333, 0.80455, 0.55417]
+  },
+  "guide": {
+    "poke": 2.2,
+    "crop": [0.10909, 0.1875, 0.85909, 0.55]
+  },
+  "journey": {
+    "poke": 2.2,
+    "crop": [0.09545, 0.2, 0.86818, 0.57083]
+  },
+  "collections": {
+    "poke": 2.25,
+    "crop": [0.0, 0.0, 0.95455, 0.75417]
+  },
+  "collections--happy": {
+    "poke": 2.25,
+    "crop": [0.0, 0.0, 0.95455, 0.75417]
+  },
+  "atlas": {
+    "poke": 2.4,
+    "crop": [0.12273, 0.20833, 0.70909, 0.52917]
+  },
+  "notifications": {
+    "poke": 2.4,
+    "crop": [0.00909, 0.05417, 0.86364, 0.6875]
+  },
+  "search": {
+    "poke": 2.2,
+    "crop": [0.14545, 0.0125, 0.75909, 0.75833]
+  },
+  "search--sad": {
+    "poke": 2.2,
+    "crop": [0.14545, 0.0125, 0.75909, 0.75833]
+  }
+}
diff --git a/client/src/mobile/components/trek3d/clips/atlas-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/atlas-dark-loop.mp4
new file mode 100644
index 000000000..b6bbf9736
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/atlas-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/atlas-dark-poke.mp4 b/client/src/mobile/components/trek3d/clips/atlas-dark-poke.mp4
new file mode 100644
index 000000000..93a26889b
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/atlas-dark-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/atlas-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/atlas-light-loop.mp4
new file mode 100644
index 000000000..d9aa1261e
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/atlas-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/atlas-light-poke.mp4 b/client/src/mobile/components/trek3d/clips/atlas-light-poke.mp4
new file mode 100644
index 000000000..5566b3d65
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/atlas-light-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/bookings-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/bookings-dark-loop.mp4
new file mode 100644
index 000000000..95fb08209
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/bookings-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/bookings-dark-poke.mp4 b/client/src/mobile/components/trek3d/clips/bookings-dark-poke.mp4
new file mode 100644
index 000000000..259c0171f
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/bookings-dark-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/bookings-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/bookings-light-loop.mp4
new file mode 100644
index 000000000..10cfddf17
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/bookings-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/bookings-light-poke.mp4 b/client/src/mobile/components/trek3d/clips/bookings-light-poke.mp4
new file mode 100644
index 000000000..1a66ed804
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/bookings-light-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/chat-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/chat-dark-loop.mp4
new file mode 100644
index 000000000..b9b2c3eb3
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/chat-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/chat-dark-poke.mp4 b/client/src/mobile/components/trek3d/clips/chat-dark-poke.mp4
new file mode 100644
index 000000000..9188bd917
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/chat-dark-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/chat-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/chat-light-loop.mp4
new file mode 100644
index 000000000..3e1bd0453
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/chat-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/chat-light-poke.mp4 b/client/src/mobile/components/trek3d/clips/chat-light-poke.mp4
new file mode 100644
index 000000000..b083e15c5
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/chat-light-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/collections--happy-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/collections--happy-dark-loop.mp4
new file mode 100644
index 000000000..91a281f59
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/collections--happy-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/collections--happy-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/collections--happy-light-loop.mp4
new file mode 100644
index 000000000..6bd8661ef
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/collections--happy-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/collections-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/collections-dark-loop.mp4
new file mode 100644
index 000000000..3910fbbd8
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/collections-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/collections-dark-poke.mp4 b/client/src/mobile/components/trek3d/clips/collections-dark-poke.mp4
new file mode 100644
index 000000000..6582f4f00
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/collections-dark-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/collections-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/collections-light-loop.mp4
new file mode 100644
index 000000000..349437053
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/collections-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/collections-light-poke.mp4 b/client/src/mobile/components/trek3d/clips/collections-light-poke.mp4
new file mode 100644
index 000000000..65fd3eb06
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/collections-light-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/costs-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/costs-dark-loop.mp4
new file mode 100644
index 000000000..a3d98e72e
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/costs-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/costs-dark-poke.mp4 b/client/src/mobile/components/trek3d/clips/costs-dark-poke.mp4
new file mode 100644
index 000000000..37cee815d
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/costs-dark-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/costs-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/costs-light-loop.mp4
new file mode 100644
index 000000000..c1727f6a3
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/costs-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/costs-light-poke.mp4 b/client/src/mobile/components/trek3d/clips/costs-light-poke.mp4
new file mode 100644
index 000000000..631b2bf9d
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/costs-light-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/dashboard--happy-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/dashboard--happy-dark-loop.mp4
new file mode 100644
index 000000000..86a543fdc
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/dashboard--happy-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/dashboard--happy-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/dashboard--happy-light-loop.mp4
new file mode 100644
index 000000000..7dc162adf
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/dashboard--happy-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/dashboard-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/dashboard-dark-loop.mp4
new file mode 100644
index 000000000..3c6a3323b
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/dashboard-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/dashboard-dark-poke.mp4 b/client/src/mobile/components/trek3d/clips/dashboard-dark-poke.mp4
new file mode 100644
index 000000000..69b77e1f9
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/dashboard-dark-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/dashboard-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/dashboard-light-loop.mp4
new file mode 100644
index 000000000..b0741d451
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/dashboard-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/dashboard-light-poke.mp4 b/client/src/mobile/components/trek3d/clips/dashboard-light-poke.mp4
new file mode 100644
index 000000000..376c07841
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/dashboard-light-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/files-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/files-dark-loop.mp4
new file mode 100644
index 000000000..e933e0684
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/files-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/files-dark-poke.mp4 b/client/src/mobile/components/trek3d/clips/files-dark-poke.mp4
new file mode 100644
index 000000000..bf604d62d
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/files-dark-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/files-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/files-light-loop.mp4
new file mode 100644
index 000000000..dcf408321
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/files-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/files-light-poke.mp4 b/client/src/mobile/components/trek3d/clips/files-light-poke.mp4
new file mode 100644
index 000000000..f3f1967d2
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/files-light-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/guide-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/guide-dark-loop.mp4
new file mode 100644
index 000000000..d3b526299
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/guide-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/guide-dark-poke.mp4 b/client/src/mobile/components/trek3d/clips/guide-dark-poke.mp4
new file mode 100644
index 000000000..dedf6f41d
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/guide-dark-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/guide-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/guide-light-loop.mp4
new file mode 100644
index 000000000..9feee8646
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/guide-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/guide-light-poke.mp4 b/client/src/mobile/components/trek3d/clips/guide-light-poke.mp4
new file mode 100644
index 000000000..9ac272337
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/guide-light-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/idle--confused-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/idle--confused-dark-loop.mp4
new file mode 100644
index 000000000..bb95c8717
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/idle--confused-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/idle--confused-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/idle--confused-light-loop.mp4
new file mode 100644
index 000000000..58982e8bb
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/idle--confused-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/idle--error-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/idle--error-dark-loop.mp4
new file mode 100644
index 000000000..a98eeffc5
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/idle--error-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/idle--error-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/idle--error-light-loop.mp4
new file mode 100644
index 000000000..f80cb9486
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/idle--error-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/idle--happy-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/idle--happy-dark-loop.mp4
new file mode 100644
index 000000000..c5cf3141c
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/idle--happy-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/idle--happy-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/idle--happy-light-loop.mp4
new file mode 100644
index 000000000..001fc5bc9
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/idle--happy-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/idle--sad-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/idle--sad-dark-loop.mp4
new file mode 100644
index 000000000..e96fd0930
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/idle--sad-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/idle--sad-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/idle--sad-light-loop.mp4
new file mode 100644
index 000000000..067d62f3b
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/idle--sad-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/idle--sleepy-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/idle--sleepy-dark-loop.mp4
new file mode 100644
index 000000000..e05d86a9b
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/idle--sleepy-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/idle--sleepy-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/idle--sleepy-light-loop.mp4
new file mode 100644
index 000000000..fd51bc7a5
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/idle--sleepy-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/idle-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/idle-dark-loop.mp4
new file mode 100644
index 000000000..76356cfd0
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/idle-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/idle-dark-poke.mp4 b/client/src/mobile/components/trek3d/clips/idle-dark-poke.mp4
new file mode 100644
index 000000000..4e8c38e2b
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/idle-dark-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/idle-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/idle-light-loop.mp4
new file mode 100644
index 000000000..4f7ac402e
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/idle-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/idle-light-poke.mp4 b/client/src/mobile/components/trek3d/clips/idle-light-poke.mp4
new file mode 100644
index 000000000..ae078d019
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/idle-light-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/journey-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/journey-dark-loop.mp4
new file mode 100644
index 000000000..6ffedd121
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/journey-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/journey-dark-poke.mp4 b/client/src/mobile/components/trek3d/clips/journey-dark-poke.mp4
new file mode 100644
index 000000000..eaa89efea
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/journey-dark-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/journey-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/journey-light-loop.mp4
new file mode 100644
index 000000000..392d793db
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/journey-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/journey-light-poke.mp4 b/client/src/mobile/components/trek3d/clips/journey-light-poke.mp4
new file mode 100644
index 000000000..dda5f7c41
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/journey-light-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/links-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/links-dark-loop.mp4
new file mode 100644
index 000000000..a272b5f31
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/links-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/links-dark-poke.mp4 b/client/src/mobile/components/trek3d/clips/links-dark-poke.mp4
new file mode 100644
index 000000000..5138c9f7c
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/links-dark-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/links-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/links-light-loop.mp4
new file mode 100644
index 000000000..e47ac8ebd
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/links-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/links-light-poke.mp4 b/client/src/mobile/components/trek3d/clips/links-light-poke.mp4
new file mode 100644
index 000000000..8b8d531e1
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/links-light-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/notes-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/notes-dark-loop.mp4
new file mode 100644
index 000000000..5febc77c9
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/notes-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/notes-dark-poke.mp4 b/client/src/mobile/components/trek3d/clips/notes-dark-poke.mp4
new file mode 100644
index 000000000..9267848f3
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/notes-dark-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/notes-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/notes-light-loop.mp4
new file mode 100644
index 000000000..60287675f
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/notes-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/notes-light-poke.mp4 b/client/src/mobile/components/trek3d/clips/notes-light-poke.mp4
new file mode 100644
index 000000000..a36a48c2a
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/notes-light-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/notifications-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/notifications-dark-loop.mp4
new file mode 100644
index 000000000..4c3727788
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/notifications-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/notifications-dark-poke.mp4 b/client/src/mobile/components/trek3d/clips/notifications-dark-poke.mp4
new file mode 100644
index 000000000..e131a49cd
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/notifications-dark-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/notifications-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/notifications-light-loop.mp4
new file mode 100644
index 000000000..e6db199e1
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/notifications-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/notifications-light-poke.mp4 b/client/src/mobile/components/trek3d/clips/notifications-light-poke.mp4
new file mode 100644
index 000000000..18e2153fc
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/notifications-light-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/packing--happy-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/packing--happy-dark-loop.mp4
new file mode 100644
index 000000000..ad47a297e
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/packing--happy-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/packing--happy-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/packing--happy-light-loop.mp4
new file mode 100644
index 000000000..a2eb11caa
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/packing--happy-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/packing-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/packing-dark-loop.mp4
new file mode 100644
index 000000000..117a02996
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/packing-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/packing-dark-poke.mp4 b/client/src/mobile/components/trek3d/clips/packing-dark-poke.mp4
new file mode 100644
index 000000000..da2dee9ca
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/packing-dark-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/packing-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/packing-light-loop.mp4
new file mode 100644
index 000000000..33d42ae1f
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/packing-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/packing-light-poke.mp4 b/client/src/mobile/components/trek3d/clips/packing-light-poke.mp4
new file mode 100644
index 000000000..6b79b6b46
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/packing-light-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/polls-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/polls-dark-loop.mp4
new file mode 100644
index 000000000..697a5c4a8
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/polls-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/polls-dark-poke.mp4 b/client/src/mobile/components/trek3d/clips/polls-dark-poke.mp4
new file mode 100644
index 000000000..23133e0a7
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/polls-dark-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/polls-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/polls-light-loop.mp4
new file mode 100644
index 000000000..de0ea068c
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/polls-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/polls-light-poke.mp4 b/client/src/mobile/components/trek3d/clips/polls-light-poke.mp4
new file mode 100644
index 000000000..f31f49ab1
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/polls-light-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/search--sad-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/search--sad-dark-loop.mp4
new file mode 100644
index 000000000..92c6d7dd0
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/search--sad-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/search--sad-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/search--sad-light-loop.mp4
new file mode 100644
index 000000000..1c661959b
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/search--sad-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/search-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/search-dark-loop.mp4
new file mode 100644
index 000000000..c2c39f5da
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/search-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/search-dark-poke.mp4 b/client/src/mobile/components/trek3d/clips/search-dark-poke.mp4
new file mode 100644
index 000000000..aa5c18521
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/search-dark-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/search-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/search-light-loop.mp4
new file mode 100644
index 000000000..4d7790052
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/search-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/search-light-poke.mp4 b/client/src/mobile/components/trek3d/clips/search-light-poke.mp4
new file mode 100644
index 000000000..833d73337
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/search-light-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/tasks-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/tasks-dark-loop.mp4
new file mode 100644
index 000000000..bba22a273
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/tasks-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/tasks-dark-poke.mp4 b/client/src/mobile/components/trek3d/clips/tasks-dark-poke.mp4
new file mode 100644
index 000000000..16025e3a2
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/tasks-dark-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/tasks-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/tasks-light-loop.mp4
new file mode 100644
index 000000000..64eaf1d33
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/tasks-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/tasks-light-poke.mp4 b/client/src/mobile/components/trek3d/clips/tasks-light-poke.mp4
new file mode 100644
index 000000000..a88f83d57
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/tasks-light-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/tours-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/tours-dark-loop.mp4
new file mode 100644
index 000000000..2107ebafc
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/tours-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/tours-dark-poke.mp4 b/client/src/mobile/components/trek3d/clips/tours-dark-poke.mp4
new file mode 100644
index 000000000..12f8d9dfb
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/tours-dark-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/tours-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/tours-light-loop.mp4
new file mode 100644
index 000000000..713982453
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/tours-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/tours-light-poke.mp4 b/client/src/mobile/components/trek3d/clips/tours-light-poke.mp4
new file mode 100644
index 000000000..b39c12203
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/tours-light-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/transport--happy-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/transport--happy-dark-loop.mp4
new file mode 100644
index 000000000..343e7e122
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/transport--happy-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/transport--happy-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/transport--happy-light-loop.mp4
new file mode 100644
index 000000000..b6fe39572
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/transport--happy-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/transport--sad-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/transport--sad-dark-loop.mp4
new file mode 100644
index 000000000..d13607735
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/transport--sad-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/transport--sad-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/transport--sad-light-loop.mp4
new file mode 100644
index 000000000..e3f9b53a6
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/transport--sad-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/transport-dark-loop.mp4 b/client/src/mobile/components/trek3d/clips/transport-dark-loop.mp4
new file mode 100644
index 000000000..920b7c4a5
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/transport-dark-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/transport-dark-poke.mp4 b/client/src/mobile/components/trek3d/clips/transport-dark-poke.mp4
new file mode 100644
index 000000000..6a61b4149
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/transport-dark-poke.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/transport-light-loop.mp4 b/client/src/mobile/components/trek3d/clips/transport-light-loop.mp4
new file mode 100644
index 000000000..eab20a9fe
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/transport-light-loop.mp4 differ
diff --git a/client/src/mobile/components/trek3d/clips/transport-light-poke.mp4 b/client/src/mobile/components/trek3d/clips/transport-light-poke.mp4
new file mode 100644
index 000000000..89c03000e
Binary files /dev/null and b/client/src/mobile/components/trek3d/clips/transport-light-poke.mp4 differ