• Updated 23 Oct, 19:41 UTC
  • Next run 24 Oct, 05:17 UTCNext 24 Oct 05:17
  • Last 7 days: 5 new models, 196 runs7 d: 5 models, 196 runs
Wristwatch that shows the current time

Gemini 3.8 FlashGoogle

Network offOpen alone (new tab)

Run details

Model
google/gemini-3.8-flash
Route
OpenRouter API, one user message
Served by
Google
Effort
medium, OpenRouter's default for this model
Limits
60 min · 65,536 output tokens (the model's limit)
Date
23 Oct 2026
Time
84 s
Size
20 kB
Tokens
76 in, 11,089 out (3,106 of them thinking)
List price
$0.046 at today's price ($0.825 in / $4.13 out per M)
Paid
$0.042

Raw files: output · meta.json

Exact prompt

Draw a mechanical wristwatch that shows the current local time, with a sweeping seconds hand and a date window. Make it look expensive.

It must be one complete, self-contained HTML file: inline all CSS and JavaScript, and make no network requests of any kind (no CDNs, web fonts or remote images). Reply with the file in a single ```html code block.

Source

20 kB 457 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Haute Horlogerie - Mechanical Timepiece</title>
<style>
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: radial-gradient(circle at 50% 40%, #1e242d 0%, #0d1014 60%, #050709 100%);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    overflow: hidden;
    perspective: 1000px;
  }

  .watch-scene {
    position: relative;
    width: 600px;
    height: 600px;
    display: flex;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(0 35px 50px rgba(0, 0, 0, 0.85)) 
            drop-shadow(0 10px 20px rgba(0, 0, 0, 0.6));
    user-select: none;
    transform-style: preserve-3d;
    transition: transform 0.15s ease-out;
  }

  svg {
    width: 100%;
    height: 100%;
    overflow: visible;
  }

  /* Micro-textures & Smooth Transitions */
  .hand {
    will-change: transform;
    transform-origin: 300px 300px;
  }

  .glare-overlay {
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0.35;
    transition: transform 0.1s ease-out, opacity 0.3s;
  }
</style>
</head>
<body>

<div class="watch-scene" id="watchScene">
  <svg viewBox="0 0 600 600" id="watchSvg">
    <defs>
      <!-- Drop Shadows -->
      <filter id="handShadow" x="-30%" y="-30%" width="160%" height="160%">
        <feDropShadow dx="3" dy="6" stdDeviation="4" flood-color="#020508" flood-opacity="0.65"/>
      </filter>
      <filter id="secondHandShadow" x="-30%" y="-30%" width="160%" height="160%">
        <feDropShadow dx="4" dy="8" stdDeviation="3" flood-color="#000000" flood-opacity="0.5"/>
      </filter>
      <filter id="dialDepth" x="-20%" y="-20%" width="140%" height="140%">
        <feGaussianBlur in="SourceAlpha" stdDeviation="5"/>
        <feOffset dx="0" dy="4"/>
        <feComposite in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1"/>
        <feColorMatrix type="matrix" values="0 0 0 0 0   0 0 0 0 0   0 0 0 0 0  0 0 0 0.8 0"/>
      </filter>
      <filter id="subtleGlow" x="-20%" y="-20%" width="140%" height="140%">
        <feGaussianBlur stdDeviation="1.5" result="blur"/>
        <feComposite in="SourceGraphic" in2="blur" operator="over"/>
      </filter>

      <!-- Steel Bracelet Gradients -->
      <linearGradient id="braceletGradH" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#3a4048"/>
        <stop offset="15%" stop-color="#7e8894"/>
        <stop offset="28%" stop-color="#4a525d"/>
        <stop offset="50%" stop-color="#9aa5b2"/>
        <stop offset="72%" stop-color="#4a525d"/>
        <stop offset="85%" stop-color="#7e8894"/>
        <stop offset="100%" stop-color="#3a4048"/>
      </linearGradient>

      <!-- Metallic Case Gradients -->
      <radialGradient id="caseBevel" cx="50%" cy="50%" r="50%">
        <stop offset="80%" stop-color="#8a95a3"/>
        <stop offset="92%" stop-color="#ffffff"/>
        <stop offset="95%" stop-color="#4d5560"/>
        <stop offset="98%" stop-color="#2a3038"/>
        <stop offset="100%" stop-color="#14171a"/>
      </radialGradient>

      <linearGradient id="brushedBezel" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="#c5cdd6"/>
        <stop offset="20%" stop-color="#7a8593"/>
        <stop offset="40%" stop-color="#eaf0f6"/>
        <stop offset="55%" stop-color="#555f6c"/>
        <stop offset="75%" stop-color="#c5cdd6"/>
        <stop offset="90%" stop-color="#8c97a5"/>
        <stop offset="100%" stop-color="#f0f5fa"/>
      </linearGradient>

      <linearGradient id="steppedRing" x1="0%" y1="100%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#12161b"/>
        <stop offset="45%" stop-color="#353e49"/>
        <stop offset="55%" stop-color="#697686"/>
        <stop offset="100%" stop-color="#101317"/>
      </linearGradient>

      <!-- Sunburst Dial Gradients -->
      <radialGradient id="dialSunburst" cx="50%" cy="50%" r="50%">
        <stop offset="0%" stop-color="#1a3250"/>
        <stop offset="45%" stop-color="#0f2035"/>
        <stop offset="75%" stop-color="#091321"/>
        <stop offset="100%" stop-color="#03070d"/>
      </radialGradient>

      <!-- Hand Facet Gradients (3D Metallic Bevels) -->
      <linearGradient id="handLightLeft" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#ffffff"/>
        <stop offset="100%" stop-color="#bdc7d4"/>
      </linearGradient>
      <linearGradient id="handDarkRight" x1="0%" y1="0%" x2="100%" y2="0%">
        <stop offset="0%" stop-color="#748191"/>
        <stop offset="100%" stop-color="#3b4450"/>
      </linearGradient>

      <!-- Second Hand Rose/Flame Blue Gradient -->
      <linearGradient id="bluedSteel" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="#468cf0"/>
        <stop offset="50%" stop-color="#1a54b8"/>
        <stop offset="100%" stop-color="#0b2866"/>
      </linearGradient>

      <!-- Date Window Gradients -->
      <linearGradient id="dateBevel" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="#242c37"/>
        <stop offset="35%" stop-color="#5a6878"/>
        <stop offset="70%" stop-color="#ffffff"/>
        <stop offset="100%" stop-color="#181e25"/>
      </linearGradient>

      <radialGradient id="datePlate" cx="40%" cy="40%" r="70%">
        <stop offset="0%" stop-color="#fdfcf8"/>
        <stop offset="100%" stop-color="#ded8cc"/>
      </radialGradient>

      <!-- Sapphire Glass Anti-Reflective Coating / Specular Highlight -->
      <linearGradient id="glassGlare" x1="0%" y1="0%" x2="100%" y2="100%">
        <stop offset="0%" stop-color="#ffffff" stop-opacity="0.45"/>
        <stop offset="25%" stop-color="#9bc4ff" stop-opacity="0.15"/>
        <stop offset="45%" stop-color="#ffffff" stop-opacity="0.0"/>
        <stop offset="70%" stop-color="#9bc4ff" stop-opacity="0.05"/>
        <stop offset="90%" stop-color="#ffffff" stop-opacity="0.25"/>
      </linearGradient>
    </defs>

    <!-- BRACELET END LINKS -->
    <g id="bracelet">
      <!-- Top Link -->
      <path d="M 200 40 L 400 40 L 385 120 L 215 120 Z" fill="url(#braceletGradH)" stroke="#22272e" stroke-width="1.5"/>
      <line x1="265" y1="40" x2="260" y2="120" stroke="#252a32" stroke-width="2"/>
      <line x1="335" y1="40" x2="340" y2="120" stroke="#252a32" stroke-width="2"/>
      <line x1="200" y1="40" x2="400" y2="40" stroke="#717a86" stroke-width="2"/>

      <!-- Bottom Link -->
      <path d="M 215 480 L 385 480 L 400 560 L 200 560 Z" fill="url(#braceletGradH)" stroke="#22272e" stroke-width="1.5"/>
      <line x1="260" y1="480" x2="265" y2="560" stroke="#252a32" stroke-width="2"/>
      <line x1="340" y1="480" x2="335" y2="560" stroke="#252a32" stroke-width="2"/>
      <line x1="215" y1="480" x2="385" y2="480" stroke="#717a86" stroke-width="1.5"/>
    </g>

    <!-- WATCH CASE & LUGS -->
    <g id="case">
      <!-- Ergonomic Lugs -->
      <path d="M 180 130 C 175 220 170 380 180 470 L 225 470 C 215 380 215 220 225 130 Z" fill="url(#brushedBezel)" stroke="#1a1e24" stroke-width="1.5"/>
      <path d="M 420 130 C 425 220 430 380 420 470 L 375 470 C 385 380 385 220 375 130 Z" fill="url(#brushedBezel)" stroke="#1a1e24" stroke-width="1.5"/>

      <!-- Screw-down Crown with knurling -->
      <g id="crown" transform="translate(488, 282)">
        <path d="M 0 5 L 14 5 C 17 5 19 8 19 12 L 19 24 C 19 28 17 31 14 31 L 0 31 Z" fill="url(#steppedRing)" stroke="#12161b" stroke-width="1.5"/>
        <line x1="4" y1="6" x2="4" y2="30" stroke="#7f8c9b" stroke-width="1.5"/>
        <line x1="8" y1="6" x2="8" y2="30" stroke="#373e46" stroke-width="1.5"/>
        <line x1="12" y1="6" x2="12" y2="30" stroke="#7f8c9b" stroke-width="1.5"/>
        <line x1="16" y1="9" x2="16" y2="27" stroke="#373e46" stroke-width="1.5"/>
      </g>

      <!-- Case Outer Body (42mm proportion) -->
      <circle cx="300" cy="300" r="198" fill="url(#caseBevel)"/>
      <circle cx="300" cy="300" r="195" fill="none" stroke="#ffffff" stroke-width="1" opacity="0.6"/>
      <circle cx="300" cy="300" r="185" fill="url(#brushedBezel)" stroke="#2b313a" stroke-width="1.5"/>
      
      <!-- Mirror Polished Chamfer -->
      <circle cx="300" cy="300" r="172" fill="none" stroke="#ffffff" stroke-width="2" opacity="0.8"/>
      <circle cx="300" cy="300" r="170" fill="url(#steppedRing)"/>
      <circle cx="300" cy="300" r="162" fill="none" stroke="#000000" stroke-width="2.5"/>
    </g>

    <!-- DIAL FACE -->
    <g id="dial">
      <!-- Main Dial Surface -->
      <circle cx="300" cy="300" r="160" fill="url(#dialSunburst)"/>

      <!-- Radial Micro-Guilloche / Sunburst lines -->
      <g id="sunburstLines" opacity="0.12" stroke="#89b6ea" stroke-width="0.5"></g>

      <!-- Subtle Depth Shadow Inside Dial -->
      <circle cx="300" cy="300" r="160" fill="none" stroke="#000000" stroke-width="6" opacity="0.4"/>

      <!-- Dial Typography / Branding -->
      <g id="brandText" text-anchor="middle">
        <text x="300" y="215" font-family="'Didot', 'Bodoni MT', 'Cinzel', 'Times New Roman', serif" font-size="14" font-weight="700" fill="#f5f7fa" letter-spacing="4">VACHERON</text>
        <text x="300" y="228" font-family="'Helvetica Neue', 'Arial', sans-serif" font-size="7" font-weight="500" fill="#a6b4c3" letter-spacing="3.5">GENÈVE</text>
        
        <path d="M 293 234 L 307 234 M 300 231 L 300 237" stroke="#cfa45d" stroke-width="0.8" opacity="0.7"/>

        <text x="300" y="382" font-family="'Helvetica Neue', 'Arial', sans-serif" font-size="6.5" font-weight="600" fill="#c39d63" letter-spacing="2.5">CHRONOMÈTRE</text>
        <text x="300" y="393" font-family="'Helvetica Neue', 'Arial', sans-serif" font-size="5.5" font-weight="400" fill="#8293a4" letter-spacing="2">OFFICIALLY CERTIFIED</text>
        <text x="300" y="403" font-family="'Helvetica Neue', 'Arial', sans-serif" font-size="5.5" font-weight="400" fill="#8293a4" letter-spacing="2">AUTOMATIC</text>

        <text x="291" y="449" font-family="'Helvetica Neue', sans-serif" font-size="4.5" font-weight="600" fill="#586777" letter-spacing="0.5">SWISS</text>
        <text x="309" y="449" font-family="'Helvetica Neue', sans-serif" font-size="4.5" font-weight="600" fill="#586777" letter-spacing="0.5">MADE</text>
      </g>

      <!-- Date Aperture Window at 3 o'clock -->
      <g id="dateWindowGroup">
        <!-- Beveled Outer Frame -->
        <rect x="382" y="286" width="38" height="28" rx="2.5" fill="url(#dateBevel)" filter="drop-shadow(0 2px 3px rgba(0,0,0,0.7))"/>
        <!-- Inner Aperture Cutout -->
        <rect x="385" y="289" width="32" height="22" rx="1.5" fill="url(#datePlate)"/>
        <!-- Inner Shadow Step -->
        <rect x="385" y="289" width="32" height="22" rx="1.5" fill="none" stroke="#161b22" stroke-width="1.2" opacity="0.75"/>
        <line x1="385" y1="290" x2="417" y2="290" stroke="#000000" stroke-width="1.5" opacity="0.5"/>
        <!-- Dynamic Date Number -->
        <text id="dateText" x="401" y="306" font-family="'Baskerville', 'Georgia', 'Times New Roman', serif" font-size="16" font-weight="bold" fill="#11161d" text-anchor="middle">--</text>
      </g>

      <!-- Applied Indices & Minute Ticks Container -->
      <g id="ticksContainer"></g>
      <g id="indicesContainer"></g>
    </g>

    <!-- HANDS STACK (Layered with Drop Shadows) -->
    <g id="handsGroup">
      <!-- 1. Hour Hand -->
      <g id="hourHandGroup" class="hand" filter="url(#handShadow)">
        <!-- Faceted Dauphine Blade -->
        <polygon points="300,300 293,296 295,200 300,182" fill="url(#handLightLeft)"/>
        <polygon points="300,300 307,296 305,200 300,182" fill="url(#handDarkRight)"/>
        <!-- Luminous Core Inlay -->
        <polygon points="298.5,275 298,205 300,190 302,205 301.5,275" fill="#eafcee" filter="url(#subtleGlow)" opacity="0.95"/>
        <!-- Rear Counterbalance -->
        <polygon points="295,304 300,318 305,304 300,300" fill="#9cb0c3"/>
      </g>

      <!-- 2. Minute Hand -->
      <g id="minuteHandGroup" class="hand" filter="url(#handShadow)">
        <!-- Faceted Dauphine Blade (longer, extending to minute track) -->
        <polygon points="300,300 294,296 296,155 300,138" fill="url(#handLightLeft)"/>
        <polygon points="300,300 306,296 304,155 300,138" fill="url(#handDarkRight)"/>
        <!-- Luminous Core Inlay -->
        <polygon points="298.5,278 298,155 300,143 302,155 301.5,278" fill="#eafcee" filter="url(#subtleGlow)" opacity="0.95"/>
        <!-- Rear Counterbalance -->
        <polygon points="295,304 300,324 305,304 300,300" fill="#9cb0c3"/>
      </g>

      <!-- 3. Center Wheel Pivot Spacer -->
      <circle cx="300" cy="300" r="7" fill="#1b222a"/>
      <circle cx="300" cy="300" r="5.5" fill="#7d8b99"/>

      <!-- 4. Sweeping Seconds Hand (Counterbalanced, Blued Steel) -->
      <g id="secondHandGroup" class="hand" filter="url(#secondHandShadow)">
        <!-- Needle Tip -->
        <polygon points="299.4,300 299.7,132 300,126 300.3,132 300.6,300" fill="#549eff"/>
        <line x1="300" y1="130" x2="300" y2="300" stroke="url(#bluedSteel)" stroke-width="1.2"/>
        <!-- Counterbalance Extension -->
        <line x1="300" y1="300" x2="300" y2="352" stroke="url(#bluedSteel)" stroke-width="1.5"/>
        <!-- Skeletonized Pear/Ogee Counterweight -->
        <circle cx="300" cy="342" r="5.5" fill="none" stroke="url(#bluedSteel)" stroke-width="1.6"/>
        <circle cx="300" cy="342" r="2.2" fill="url(#bluedSteel)"/>
      </g>

      <!-- 5. Center Cap (Mirror Polished Steel Cannon Pinion Cap) -->
      <circle cx="300" cy="300" r="3.2" fill="#ffffff"/>
      <circle cx="300" cy="300" r="2" fill="#2b343f"/>
      <circle cx="299.3" cy="299.3" r="0.8" fill="#ffffff" opacity="0.8"/>
    </g>

    <!-- SAPPHIRE CRYSTAL GLARE / REFLECTION -->
    <ellipse id="crystalGlare" class="glare-overlay" cx="300" cy="300" rx="160" ry="160" fill="url(#glassGlare)"/>
  </svg>
</div>

<script>
  (function initWatch() {
    // 1. Generate Sunburst Dial Radial Lines
    const sunburstContainer = document.getElementById('sunburstLines');
    const totalRays = 120;
    let raysHtml = '';
    for (let i = 0; i < totalRays; i++) {
      const angle = (i * 360) / totalRays;
      const rad = (angle * Math.PI) / 180;
      const x2 = (300 + 158 * Math.cos(rad)).toFixed(2);
      const y2 = (300 + 158 * Math.sin(rad)).toFixed(2);
      raysHtml += `<line x1="300" y1="300" x2="${x2}" y2="${y2}" />`;
    }
    sunburstContainer.innerHTML = raysHtml;

    // 2. Generate Minute Track & Applied Markers
    const ticksContainer = document.getElementById('ticksContainer');
    const indicesContainer = document.getElementById('indicesContainer');
    let ticksHtml = '';
    let indicesHtml = '';

    for (let i = 0; i < 60; i++) {
      const angle = i * 6;
      const isFive = i % 5 === 0;
      const rad = ((angle - 90) * Math.PI) / 180;

      // Minute Chapter Ring Ticks
      const rOuter = 155;
      const rInner = isFive ? 146 : 150;
      const x1 = (300 + rOuter * Math.cos(rad)).toFixed(2);
      const y1 = (300 + rOuter * Math.sin(rad)).toFixed(2);
      const x2 = (300 + rInner * Math.cos(rad)).toFixed(2);
      const y2 = (300 + rInner * Math.sin(rad)).toFixed(2);
      const strokeColor = isFive ? '#ccd8e4' : '#5b6d80';
      const strokeW = isFive ? '1.5' : '0.75';
      ticksHtml += `<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="${strokeColor}" stroke-width="${strokeW}" />`;

      // 3D Applied Luminous Hour Markers
      if (isFive) {
        // Skip normal marker at 3 o'clock to comfortably clear the date window aperture
        if (i === 15) {
          // Truncated luxury baton beside date window
          indicesHtml += `
            <g transform="rotate(${angle} 300 300)">
              <rect x="297" y="152" width="6" height="7" rx="0.8" fill="url(#handLightLeft)" stroke="#1a222a" stroke-width="0.5"/>
              <rect x="298.5" y="153.5" width="3" height="4" fill="#d8f8e0"/>
            </g>
          `;
          continue;
        }

        // Double Baton at 12 o'clock
        if (i === 0) {
          indicesHtml += `
            <g transform="rotate(0 300 300)">
              <!-- Left Baton -->
              <rect x="293.5" y="144" width="5.5" height="23" rx="1" fill="url(#handLightLeft)" filter="drop-shadow(0 2px 3px rgba(0,0,0,0.6))"/>
              <rect x="295" y="146" width="2.5" height="17" fill="#eafcee" filter="url(#subtleGlow)"/>
              <!-- Right Baton -->
              <rect x="301" y="144" width="5.5" height="23" rx="1" fill="url(#handDarkRight)" filter="drop-shadow(0 2px 3px rgba(0,0,0,0.6))"/>
              <rect x="302.5" y="146" width="2.5" height="17" fill="#eafcee" filter="url(#subtleGlow)"/>
            </g>
          `;
        } else {
          // Standard Faceted 3D Baton
          indicesHtml += `
            <g transform="rotate(${angle} 300 300)">
              <polygon points="296.5,144 300,142 300,167 296.5,165" fill="url(#handLightLeft)" filter="drop-shadow(0 2px 2px rgba(0,0,0,0.6))"/>
              <polygon points="303.5,144 300,142 300,167 303.5,165" fill="url(#handDarkRight)" filter="drop-shadow(0 2px 2px rgba(0,0,0,0.6))"/>
              <!-- Luminous Center Capsule -->
              <rect x="298.8" y="146" width="2.4" height="17" rx="0.5" fill="#eafcee" filter="url(#subtleGlow)"/>
              <!-- Luminous Pearl Pip on Outer Rim -->
              <circle cx="300" cy="140" r="1.4" fill="#eafcee" filter="url(#subtleGlow)"/>
            </g>
          `;
        }
      }
    }
    ticksContainer.innerHTML = ticksHtml;
    indicesContainer.innerHTML = indicesHtml;

    // 3. Hands & Date Elements
    const hourHand = document.getElementById('hourHandGroup');
    const minuteHand = document.getElementById('minuteHandGroup');
    const secondHand = document.getElementById('secondHandGroup');
    const dateText = document.getElementById('dateText');
    const watchScene = document.getElementById('watchScene');
    const crystalGlare = document.getElementById('crystalGlare');

    let lastDay = -1;

    // High Precision Sweeping Time Loop (Mechanical 28,800 vph / Smooth Gliding Motion)
    function renderTime() {
      const now = new Date();
      const ms = now.getMilliseconds();
      const seconds = now.getSeconds() + ms / 1000;
      const minutes = now.getMinutes() + seconds / 60;
      const hours = (now.getHours() % 12) + minutes / 60;

      const secDeg = seconds * 6;
      const minDeg = minutes * 6;
      const hourDeg = hours * 30;

      // Rotate Hands with SVG Transforms
      secondHand.setAttribute('transform', `rotate(${secDeg} 300 300)`);
      minuteHand.setAttribute('transform', `rotate(${minDeg} 300 300)`);
      hourHand.setAttribute('transform', `rotate(${hourDeg} 300 300)`);

      // Update Date Window accurately
      const currentDay = now.getDate();
      if (currentDay !== lastDay) {
        dateText.textContent = String(currentDay);
        lastDay = currentDay;
      }

      requestAnimationFrame(renderTime);
    }
    requestAnimationFrame(renderTime);

    // 4. Subtle Interactive 3D Parallax & Glare Shift
    let bounds;
    function updateBounds() {
      bounds = watchScene.getBoundingClientRect();
    }
    window.addEventListener('resize', updateBounds);
    updateBounds();

    window.addEventListener('mousemove', (e) => {
      if (!bounds) updateBounds();
      const mouseX = e.clientX - bounds.left;
      const mouseY = e.clientY - bounds.top;

      const normX = (mouseX / bounds.width - 0.5) * 2; // -1 to 1
      const normY = (mouseY / bounds.height - 0.5) * 2; // -1 to 1

      // Subtle tilt
      const tiltX = -normY * 7;
      const tiltY = normX * 7;
      watchScene.style.transform = `rotateX(${tiltX}deg) rotateY(${tiltY}deg)`;

      // Dynamic sapphire reflection displacement
      const glareX = -normX * 18;
      const glareY = -normY * 18;
      crystalGlare.style.transform = `translate(${glareX}px, ${glareY}px)`;
    });

    // Reset smoothly on mouse leave
    document.addEventListener('mouseleave', () => {
      watchScene.style.transform = `rotateX(0deg) rotateY(0deg)`;
      crystalGlare.style.transform = `translate(0px, 0px)`;
    });
  })();
</script>
</body>
</html>

Compare with

Gemini 3.8 Flash: other attempts