From 5b73846a1ed6e4a11146ed5f0f404fd8e9f32a0e Mon Sep 17 00:00:00 2001
From: Baruch Tabanpour <btaba@google.com>
Date: Thu, 21 May 2026 10:03:08 -0700
Subject: [PATCH] Upgrade MuJoCo Live loading screen

PiperOrigin-RevId: 919112273
Change-Id: I0ffdf908e32d4197e007ebcc2d9f5136b59cf6b3
---
 src/experimental/studio/live.css  | 79 +++++++++++++++++++++++++++++--
 src/experimental/studio/live.html | 28 +++++++++++
 2 files changed, 104 insertions(+), 3 deletions(-)

diff --git a/src/experimental/studio/live.css b/src/experimental/studio/live.css
index 6c668b27..24cac67a 100644
--- a/src/experimental/studio/live.css
+++ b/src/experimental/studio/live.css
@@ -4,11 +4,40 @@
   left: 0;
   width: 100%;
   height: 100%;
-  background: rgba(0,0,0,0.6);
+  background: radial-gradient(circle at 50% 50%, #0a0f1c 0%, #020407 100%);
   z-index: 10000;
   display: none;
   align-items: center;
   justify-content: center;
+  overflow: hidden;
+  transition: opacity 0.3s ease;
+}
+#loadingOverlay::before {
+  /* 3D Ground Grid */
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-image:
+    linear-gradient(rgba(123, 147, 232, 0.035) 1px, transparent 1px),
+    linear-gradient(90deg, rgba(123, 147, 232, 0.035) 1px, transparent 1px);
+  background-size: 50px 50px;
+  background-position: center center;
+  transform: perspective(500px) rotateX(60deg) scale(2.5);
+  transform-origin: center center;
+  opacity: 0.8;
+  pointer-events: none;
+  animation: grid-drift 60s linear infinite;
+}
+@keyframes grid-drift {
+  0% {
+    background-position: center 0;
+  }
+  100% {
+    background-position: center 1000px;
+  }
 }
 .loading-container {
   color: #fff;
@@ -16,8 +45,52 @@
   font-family: sans-serif;
   text-align: center;
 }
+.loading-visual {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 20px;
+}
+.wireframe-cage {
+  position: absolute;
+  width: 320px;
+  height: 320px;
+  transform-origin: center center;
+  animation: spin-cage 25s linear infinite;
+  opacity: 0.65;
+  z-index: 0;
+  pointer-events: none;
+}
+@keyframes spin-cage {
+  0% {
+    transform: rotate(0deg) scale(0.9);
+  }
+  50% {
+    transform: rotate(180deg) scale(1.04);
+  }
+  100% {
+    transform: rotate(360deg) scale(0.9);
+  }
+}
+.logo-container-svg {
+  position: relative;
+  width: 300px;
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+}
+.brand-logo-svg {
+  width: 100%;
+  height: auto;
+}
 .loading-title {
+  font-size: 18px;
+  margin-top: 120px; /* Push down below the bottom vertices of the rotating cube. */
   margin-bottom: 16px;
+  color: rgba(255, 255, 255, 0.75);
 }
 .loading-subtitle {
   font-size: 14px;
@@ -29,10 +102,10 @@
   opacity: 0.6;
 }
 .loading-download-label {
-  font-size: 13px;
+  font-size: 14px;
 }
 .loading-download-file {
-  font-size: 13px;
+  font-size: 14px;
 }
 #dropOverlay {
   position: fixed;
diff --git a/src/experimental/studio/live.html b/src/experimental/studio/live.html
index 81714b38..b67756f3 100644
--- a/src/experimental/studio/live.html
+++ b/src/experimental/studio/live.html
@@ -8,8 +8,36 @@
   <body style="margin: 0; overflow: hidden">
     <div id="loadingOverlay">
       <div class="loading-container">
+        <div class="loading-visual">
+          <!-- Rotating neon light-blue physics wireframe cage. -->
+          <svg class="wireframe-cage" viewBox="0 0 200 200">
+            <g class="cage-lines">
+              <polygon points="130,10 190,130 96,190 10,96" fill="none" stroke="#00f5d4" stroke-width="0.8" opacity="0.75" />
+              <line x1="10" y1="96" x2="45" y2="106" stroke="#00f5d4" stroke-width="0.6" opacity="0.55" />
+              <line x1="45" y1="106" x2="130" y2="10" stroke="#00f5d4" stroke-width="0.6" opacity="0.55" />
+              <line x1="45" y1="106" x2="96" y2="190" stroke="#00f5d4" stroke-width="0.6" opacity="0.55" />
+              <line x1="45" y1="106" x2="190" y2="130" stroke="#00f5d4" stroke-width="0.5" opacity="0.45" />
+              <line x1="150" y1="100" x2="130" y2="10" stroke="#00f5d4" stroke-width="0.6" opacity="0.55" />
+              <line x1="150" y1="100" x2="96" y2="190" stroke="#00f5d4" stroke-width="0.6" opacity="0.55" />
+              <line x1="150" y1="100" x2="190" y2="130" stroke="#00f5d4" stroke-width="0.6" opacity="0.55" />
+              <line x1="150" y1="100" x2="45" y2="106" stroke="#00f5d4" stroke-width="0.4" opacity="0.35" />
+            </g>
+          </svg>
+
+          <!-- Centered MuJoCo SVG Logo -->
+          <div class="logo-container-svg">
+            <svg viewBox="90 30 415 90" class="brand-logo-svg">
+              <g fill="rgba(255, 255, 255, 0.98)" filter="drop-shadow(0 0 6px rgba(123, 147, 232, 0.25)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.25))">
+                <path d="M136.1,118.4l-19.7-47.3l-7.1,41.6H96.5l15.4-80.9l0,0L136.4,90l25.5-58.1l0,0l13.9,80.9H163l-6.3-41.6 L136.1,118.4L136.1,118.4L136.1,118.4z M211.9,113.2c-4.5,0-8.6-0.9-12.1-2.6c-3.5-1.7-6.3-4.3-8.3-7.6c-2-3.4-3-7.5-3-12.3V55.2h13.6v34.1 c0,2.8,0.4,5,1.1,6.7c0.7,1.7,1.8,3,3.3,3.9s3.2,1.3,5.3,1.3s3.9-0.4,5.3-1.3s2.5-2.2,3.3-3.9c0.7-1.7,1.1-4,1.1-6.8V55.2h13.6 v35.5c0,4.8-1,9-3,12.3c-2,3.4-4.7,5.9-8.3,7.6C220.4,112.4,216.4,113.2,211.9,113.2L211.9,113.2z M260.1,113.6c-3,0-5.9-0.5-8.7-1.4c-2.8-0.9-5.3-2.4-7.6-4.2l6.1-10.8c1.6,1.3,3.1,2.3,4.5,2.9s2.9,1,4.2,1 c1.9,0,3.5-0.4,4.6-1.2s1.9-2,2.4-3.7c0.5-1.7,0.8-4,0.8-6.9V36.1h13.3V90c0,5.3-0.7,9.7-2.2,13.2c-1.5,3.5-3.6,6.1-6.5,7.8 C268.2,112.8,264.5,113.6,260.1,113.6L260.1,113.6z M325.8,113.2c-5.4,0-10.5-1.3-15.1-3.7c-4.6-2.5-8.4-6-11.1-10.5c-2.8-4.5-4.2-9.6-4.2-15.3s1.4-10.4,4.2-15 c2.8-4.5,6.5-8.1,11.2-10.6c4.7-2.6,9.8-3.9,15.3-3.9c5.5,0,10.6,1.3,15.2,3.9c4.6,2.6,8.4,6.1,11.1,10.6 c2.8,4.5,4.2,9.6,4.2,15.1s-1.4,10.6-4.2,15.1c-2.8,4.5-6.5,8-11.2,10.5C336.5,111.9,331.3,113.2,325.8,113.2L325.8,113.2z M325.8,100.9c3.2,0,6.1-0.7,8.6-2.2c2.6-1.5,4.6-3.5,6.1-6.1c1.5-2.6,2.2-5.5,2.2-8.7c0-3.2-0.7-6.1-2.2-8.7 c-1.5-2.7-3.5-4.7-6-6.2s-5.4-2.3-8.6-2.3s-5.9,0.8-8.5,2.3c-2.6,1.5-4.6,3.6-6.1,6.2c-1.5,2.6-2.2,5.5-2.2,8.7s0.8,6.2,2.3,8.9 c1.5,2.6,3.5,4.7,6.1,6.1C320.1,100.1,322.8,100.9,325.8,100.9L325.8,100.9z M408.1,113.6c-7.3,0-13.9-1.7-19.9-5.2c-6-3.5-10.7-8.2-14.2-14.2c-3.5-6-5.2-12.5-5.2-19.7 s1.7-13.8,5.2-19.9c3.5-6.1,8.3-10.9,14.4-14.5c6.1-3.6,13-5.4,20.5-5.4c3.4,0,6.7,0.5,9.9,1.4c3.3,0.9,6.5,2.2,9.6,4l0.1,15.4 c-3.2-2.8-6.5-4.8-9.8-6.2c-3.3-1.4-6.7-2.1-10.2-2.1c-4.8,0-9.2,1.2-13.2,3.6c-4,2.4-7.2,5.7-9.6,9.9c-2.4,4.2-3.5,8.8-3.5,13.8 s1.2,9.4,3.5,13.5c2.4,4.1,5.5,7.3,9.6,9.7c4,2.4,8.5,3.6,13.4,3.6c2.6,0,5-0.3,7.1-0.8c2.1-0.5,4.1-1.4,6.2-2.7 c2-1.2,4.2-2.9,6.7-5l-0.1,15.5c-3.1,1.7-6.4,3.1-9.9,4C415.1,113.2,411.6,113.6,408.1,113.6L408.1,113.6z M473.7,113.2c-5.4,0-10.5-1.3-15.1-3.7c-4.6-2.5-8.4-6-11.1-10.5c-2.8-4.5-4.2-9.6-4.2-15.3s1.4-10.4,4.2-15 c2.8-4.5,6.5-8.1,11.2-10.6s9.8-3.9,15.3-3.9c5.5,0,10.6,1.3,15.2,3.9c4.6,2.6,8.4,6.1,11.1,10.6c2.8,4.5,4.2,9.6,4.2,15.1 s-1.4,10.6-4.2,15.1c-2.8,4.5-6.5,8-11.2,10.5C484.4,111.9,479.3,113.2,473.7,113.2L473.7,113.2z M473.7,100.9 c3.2,0,6.1-0.7,8.6-2.2c2.6-1.5,4.6-3.5,6.1-6.1c1.5-2.6,2.2-5.5,2.2-8.7c0-3.2-0.7-6.1-2.2-8.7c-1.5-2.7-3.5-4.7-6-6.2 s-5.4-2.3-8.6-2.3c-3.2,0-5.9,0.8-8.5,2.3c-2.6,1.5-4.6,3.6-6.1,6.2c-1.5,2.6-2.2,5.5-2.2,8.7s0.8,6.2,2.3,8.9s3.5,4.7,6.1,6.1 C468,100.1,470.7,100.9,473.7,100.9L473.7,100.9z"/>
+              </g>
+            </svg>
+          </div>
+        </div>
+
         <div class="loading-title">Loading model&hellip;</div>
         <div class="loading-subtitle">This may take a moment for large models.</div>
+
+        <!-- Asset Download Indicator -->
         <div id="loadingDownload" class="loading-download">
           <div class="loading-download-label">Downloading asset file</div>
           <div id="loadingDownloadFile" class="loading-download-file"></div>