• Updated 12 Nov, 18:36 UTC
  • Next run 13 Nov, 05:17 UTCNext 13 Nov 05:17
  • Last 7 days: 9 new models · 67 runs7 d: 9 models · 67 runs
Wristwatch that shows the current time

Gemini 4 HydrogenGoogle

Network offOpen alone (new tab)

Run details

Model
google/gemini-4-hydrogen
Route
OpenRouter API, one user message
Served by
Google
Effort
medium, OpenRouter's default for this model
Limits
60 min · 400,000 output tokens (our $3.00 stop per request at $7.50/M)
Date
12 Nov 2026
Time
80 s
Size
27 kB
Tokens
108 in, 12,578 out (1,941 of them thinking)
List price
$0.094 at today's price ($1.50 in / $7.50 out per M)
Paid
$0.094

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

27 kB 649 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Chronomètre Genève — Mechanical Wristwatch</title>
  <style>
    :root {
      --bg-inner: #1b1e26;
      --bg-outer: #090a0d;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    html, body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      background: radial-gradient(circle at 50% 42%, var(--bg-inner) 0%, #101218 48%, var(--bg-outer) 100%);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: "Didot", "Bodoni MT", "Palatino Linotype", "Book Antiqua", Georgia, serif;
      -webkit-font-smoothing: antialiased;
      user-select: none;
    }

    /* Subtle ambient studio glow */
    .stage {
      position: relative;
      width: min(94vw, 560px);
      height: min(94vh, 720px);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    svg#watch {
      width: 100%;
      height: 100%;
      max-height: 94vh;
      filter: drop-shadow(0 30px 45px rgba(0, 0, 0, 0.78));
      overflow: visible;
    }

    .brand-main {
      font-family: "Didot", "Bodoni MT", "Times New Roman", serif;
      letter-spacing: 0.26em;
      font-weight: 600;
    }

    .brand-sub {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      letter-spacing: 0.34em;
      font-weight: 500;
    }

    .date-text {
      font-family: "Palatino Linotype", "Book Antiqua", Georgia, serif;
      font-weight: 700;
      font-variant-numeric: lining-nums;
    }
  </style>
</head>
<body>
  <div class="stage" id="stage">
    <svg id="watch" viewBox="0 0 600 760" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Mechanical luxury wristwatch displaying current local time and date">
      <defs>
        <!-- Case & Bezel 18k Rose Gold Gradients -->
        <linearGradient id="gold-case-body" x1="15%" y1="10%" x2="85%" y2="90%">
          <stop offset="0%" stop-color="#f7dfca" />
          <stop offset="22%" stop-color="#d8a382" />
          <stop offset="48%" stop-color="#9c6649" />
          <stop offset="72%" stop-color="#e7be9f" />
          <stop offset="90%" stop-color="#8b593e" />
          <stop offset="100%" stop-color="#c99270" />
        </linearGradient>

        <linearGradient id="gold-bezel-outer" x1="20%" y1="0%" x2="80%" y2="100%">
          <stop offset="0%" stop-color="#fae6d4" />
          <stop offset="18%" stop-color="#dfa987" />
          <stop offset="42%" stop-color="#7c4f37" />
          <stop offset="60%" stop-color="#f3d2b8" />
          <stop offset="82%" stop-color="#9b6649" />
          <stop offset="100%" stop-color="#d49e7c" />
        </linearGradient>

        <linearGradient id="gold-bezel-inner" x1="80%" y1="10%" x2="20%" y2="90%">
          <stop offset="0%" stop-color="#784b34" />
          <stop offset="30%" stop-color="#e8c1a3" />
          <stop offset="55%" stop-color="#f9e6d5" />
          <stop offset="80%" stop-color="#9e694b" />
          <stop offset="100%" stop-color="#5d3825" />
        </linearGradient>

        <linearGradient id="gold-lug-left" x1="0%" y1="0%" x2="100%" y2="30%">
          <stop offset="0%" stop-color="#f5dbc5" />
          <stop offset="40%" stop-color="#c68d6c" />
          <stop offset="80%" stop-color="#7e4f36" />
          <stop offset="100%" stop-color="#b47d5d" />
        </linearGradient>

        <linearGradient id="gold-lug-right" x1="100%" y1="0%" x2="0%" y2="30%">
          <stop offset="0%" stop-color="#85543a" />
          <stop offset="35%" stop-color="#dfaa88" />
          <stop offset="75%" stop-color="#f6dec9" />
          <stop offset="100%" stop-color="#9c6649" />
        </linearGradient>

        <linearGradient id="gold-rehaut" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#6b412c" />
          <stop offset="35%" stop-color="#c89271" />
          <stop offset="65%" stop-color="#4e2e1e" />
          <stop offset="100%" stop-color="#e3b797" />
        </linearGradient>

        <!-- Hand & Index Facet Gradients -->
        <linearGradient id="facet-light" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#fff4ea" />
          <stop offset="55%" stop-color="#eec5a6" />
          <stop offset="100%" stop-color="#c89170" />
        </linearGradient>

        <linearGradient id="facet-dark" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" stop-color="#c48a68" />
          <stop offset="55%" stop-color="#8b583c" />
          <stop offset="100%" stop-color="#5e3823" />
        </linearGradient>

        <linearGradient id="second-hand-gold" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#fff0e2" />
          <stop offset="50%" stop-color="#e2ac89" />
          <stop offset="100%" stop-color="#a87051" />
        </linearGradient>

        <!-- Deep Sunburst Midnight Navy Dial -->
        <radialGradient id="dial-base" cx="50%" cy="46%" r="58%">
          <stop offset="0%" stop-color="#172c52" />
          <stop offset="45%" stop-color="#0f1f3d" />
          <stop offset="82%" stop-color="#091326" />
          <stop offset="100%" stop-color="#040812" />
        </radialGradient>

        <!-- Inner dial vignette for depth -->
        <radialGradient id="dial-vignette" cx="50%" cy="50%" r="50%">
          <stop offset="72%" stop-color="#000000" stop-opacity="0" />
          <stop offset="94%" stop-color="#000000" stop-opacity="0.38" />
          <stop offset="100%" stop-color="#000000" stop-opacity="0.72" />
        </radialGradient>

        <!-- Date Aperture Disc -->
        <linearGradient id="date-disc-grad" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#dfd9cd" />
          <stop offset="25%" stop-color="#f7f4ed" />
          <stop offset="75%" stop-color="#f5f1e8" />
          <stop offset="100%" stop-color="#d3ccbe" />
        </linearGradient>

        <!-- Strap Leather Gradients -->
        <linearGradient id="leather-body" x1="0%" y1="0%" x2="100%" y2="0%">
          <stop offset="0%" stop-color="#0a0e18" />
          <stop offset="14%" stop-color="#172034" />
          <stop offset="50%" stop-color="#1d2840" />
          <stop offset="86%" stop-color="#151e30" />
          <stop offset="100%" stop-color="#080b12" />
        </linearGradient>

        <linearGradient id="leather-fade-top" x1="0%" y1="0%" x2="0%" y2="100%">
          <stop offset="0%" stop-color="#090a0d" stop-opacity="0.92" />
          <stop offset="40%" stop-color="#090a0d" stop-opacity="0.18" />
          <stop offset="100%" stop-color="#090a0d" stop-opacity="0" />
        </linearGradient>

        <linearGradient id="leather-fade-bottom" x1="0%" y1="100%" x2="0%" y2="0%">
          <stop offset="0%" stop-color="#090a0d" stop-opacity="0.92" />
          <stop offset="40%" stop-color="#090a0d" stop-opacity="0.18" />
          <stop offset="100%" stop-color="#090a0d" stop-opacity="0" />
        </linearGradient>

        <!-- Alligator Scale Pattern -->
        <pattern id="gator-scales" width="46" height="32" patternUnits="userSpaceOnUse">
          <rect width="46" height="32" fill="none" />
          <path d="M2,2 C14,0 32,0 44,2 C45,10 45,22 44,30 C32,32 14,32 2,30 C1,22 1,10 2,2 Z"
                fill="rgba(255,255,255,0.025)" stroke="rgba(0,0,0,0.52)" stroke-width="1.6" />
          <path d="M5,5 C15,3.5 31,3.5 41,5" fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="0.8" />
        </pattern>

        <!-- Fine leather grain filter -->
        <filter id="leather-grain" x="0%" y="0%" width="100%" height="100%">
          <feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" result="noise" />
          <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.14 0" in="noise" result="grain" />
          <feComposite in="grain" in2="SourceGraphic" operator="atop" />
        </filter>

        <!-- Sapphire Glass Reflections -->
        <linearGradient id="sapphire-sheen" x1="15%" y1="10%" x2="85%" y2="90%">
          <stop offset="0%" stop-color="#dbeafe" stop-opacity="0.17" />
          <stop offset="28%" stop-color="#ffffff" stop-opacity="0.06" />
          <stop offset="45%" stop-color="#ffffff" stop-opacity="0" />
          <stop offset="82%" stop-color="#60a5fa" stop-opacity="0.03" />
          <stop offset="100%" stop-color="#93c5fd" stop-opacity="0.11" />
        </linearGradient>

        <radialGradient id="sapphire-ar" cx="50%" cy="50%" r="50%">
          <stop offset="86%" stop-color="#3b82f6" stop-opacity="0" />
          <stop offset="97%" stop-color="#38bdf8" stop-opacity="0.08" />
          <stop offset="100%" stop-color="#60a5fa" stop-opacity="0.18" />
        </radialGradient>

        <!-- Clip paths -->
        <clipPath id="dial-clip">
          <circle cx="300" cy="380" r="172" />
        </clipPath>

        <clipPath id="sapphire-clip">
          <circle cx="300" cy="380" r="178" />
        </clipPath>

        <clipPath id="strap-top-clip">
          <path d="M214,22 L386,22 L392,214 L208,214 Z" />
        </clipPath>

        <clipPath id="strap-bottom-clip">
          <path d="M208,546 L392,546 L386,738 L214,738 Z" />
        </clipPath>

        <!-- Soft dial element shadows -->
        <filter id="index-shadow" x="-30%" y="-30%" width="160%" height="160%">
          <feDropShadow dx="1.4" dy="2.4" stdDeviation="1.6" flood-color="#000000" flood-opacity="0.65" />
        </filter>

        <filter id="hand-shadow-blur" x="-40%" y="-40%" width="180%" height="180%">
          <feGaussianBlur stdDeviation="2.1" />
        </filter>
      </defs>

      <!-- ===================== TOP & BOTTOM LEATHER STRAPS ===================== -->
      <g id="straps">
        <!-- Top Strap -->
        <g clip-path="url(#strap-top-clip)">
          <path d="M214,22 L386,22 L392,214 L208,214 Z" fill="url(#leather-body)" />
          <rect x="200" y="20" width="200" height="200" fill="url(#gator-scales)" />
          <!-- Padded bolster edge shadows -->
          <rect x="208" y="22" width="14" height="195" fill="rgba(0,0,0,0.42)" />
          <rect x="378" y="22" width="14" height="195" fill="rgba(0,0,0,0.45)" />
          <!-- Cream saddle stitching -->
          <g id="stitching-top" stroke="#cbbba3" stroke-width="1.45" stroke-linecap="round" stroke-dasharray="5.5, 4.5" opacity="0.72">
            <line x1="224" y1="24" x2="220" y2="210" />
            <line x1="376" y1="24" x2="380" y2="210" />
          </g>
          <rect x="200" y="20" width="200" height="196" fill="url(#leather-fade-top)" />
        </g>

        <!-- Bottom Strap -->
        <g clip-path="url(#strap-bottom-clip)">
          <path d="M208,546 L392,546 L386,738 L214,738 Z" fill="url(#leather-body)" />
          <rect x="200" y="544" width="200" height="200" fill="url(#gator-scales)" />
          <rect x="208" y="544" width="14" height="195" fill="rgba(0,0,0,0.42)" />
          <rect x="378" y="544" width="14" height="195" fill="rgba(0,0,0,0.45)" />
          <g id="stitching-bottom" stroke="#cbbba3" stroke-width="1.45" stroke-linecap="round" stroke-dasharray="5.5, 4.5" opacity="0.72">
            <line x1="220" y1="550" x2="224" y2="736" />
            <line x1="380" y1="550" x2="376" y2="736" />
          </g>
          <rect x="200" y="544" width="200" height="196" fill="url(#leather-fade-bottom)" />
        </g>

        <!-- Subtle springbar shadow where strap meets case -->
        <path d="M205,190 Q300,174 395,190 L395,210 L205,210 Z" fill="rgba(0,0,0,0.55)" />
        <path d="M205,570 Q300,586 395,570 L395,550 L205,550 Z" fill="rgba(0,0,0,0.55)" />
      </g>

      <!-- ===================== WINDING CROWN (3 O'CLOCK) ===================== -->
      <g id="crown" transform="translate(510, 380)">
        <!-- Crown tube -->
        <rect x="-10" y="-14" width="14" height="28" rx="2" fill="#7c4f37" />
        <!-- Crown body -->
        <rect x="0" y="-24" width="21" height="48" rx="5" fill="url(#gold-case-body)" stroke="#5b3724" stroke-width="0.8" />
        <!-- Knurled ridges -->
        <g id="crown-knurls"></g>
        <!-- Polished outer cap -->
        <path d="M18,-22 C24,-18 25,18 18,22 Z" fill="url(#gold-bezel-outer)" />
      </g>

      <!-- ===================== CASE & INTEGRATED LUGS ===================== -->
      <g id="watch-case">
        <!-- Upper & Lower Sculpted Lugs -->
        <!-- Top Left Lug -->
        <path d="M168,214 C178,176 186,144 195,128 L216,128 C214,158 214,185 218,208 Z" fill="url(#gold-lug-left)" />
        <path d="M195,128 L201,128 C196,154 196,184 198,210 L185,212 C186,178 189,150 195,128 Z" fill="rgba(255,244,232,0.34)" />

        <!-- Top Right Lug -->
        <path d="M432,214 C422,176 414,144 405,128 L384,128 C386,158 386,185 382,208 Z" fill="url(#gold-lug-right)" />
        <path d="M405,128 L399,128 C404,154 404,184 402,210 L415,212 C414,178 411,150 405,128 Z" fill="rgba(255,244,232,0.2)" />

        <!-- Bottom Left Lug -->
        <path d="M168,546 C178,584 186,616 195,632 L216,632 C214,602 214,575 218,552 Z" fill="url(#gold-lug-left)" />
        <path d="M195,632 L201,632 C196,606 196,576 198,550 L185,548 C186,582 189,610 195,632 Z" fill="rgba(255,244,232,0.28)" />

        <!-- Bottom Right Lug -->
        <path d="M432,546 C422,584 414,616 405,632 L384,632 C386,602 386,575 382,552 Z" fill="url(#gold-lug-right)" />

        <!-- Outer Case Flank -->
        <circle cx="300" cy="380" r="214" fill="url(#gold-case-body)" />
        <!-- Crisp outer chamfer highlight -->
        <circle cx="300" cy="380" r="213" fill="none" stroke="rgba(255,238,220,0.42)" stroke-width="1.2" />

        <!-- Stepped Concave Bezel -->
        <circle cx="300" cy="380" r="204" fill="url(#gold-bezel-outer)" />
        <circle cx="300" cy="380" r="192" fill="url(#gold-bezel-inner)" />
        <circle cx="300" cy="380" r="181" fill="#3b2316" />

        <!-- Inner Rehaut (angled chapter ring) -->
        <circle cx="300" cy="380" r="179" fill="url(#gold-rehaut)" />
        <circle cx="300" cy="380" r="173.5" fill="#070c17" />
      </g>

      <!-- ===================== WATCH DIAL ===================== -->
      <g id="dial" clip-path="url(#dial-clip)">
        <!-- Deep Sunburst Navy Base -->
        <circle cx="300" cy="380" r="172" fill="url(#dial-base)" />

        <!-- Sunburst Radial Brushing Lines (populated via JS) -->
        <g id="sunburst-rays" opacity="0.22"></g>

        <!-- Subtle Concentric Guilloché Groove Rings -->
        <circle cx="300" cy="380" r="145" fill="none" stroke="rgba(255,255,255,0.035)" stroke-width="0.7" />
        <circle cx="300" cy="380" r="110" fill="none" stroke="rgba(255,255,255,0.03)" stroke-width="0.7" />

        <!-- Outer Minute / 1/5th-Second Precision Track -->
        <g id="minute-track"></g>

        <!-- Vignette depth -->
        <circle cx="300" cy="380" r="172" fill="url(#dial-vignette)" />

        <!-- Brand & Horological Inscriptions -->
        <text x="300" y="294" text-anchor="middle" fill="#e8d6c3" font-size="12.5" class="brand-main">VALMONT</text>
        <text x="300" y="309" text-anchor="middle" fill="#c39d82" font-size="7.2" class="brand-sub">GENÈVE</text>

        <text x="300" y="454" text-anchor="middle" fill="#c9b49f" font-size="6.8" class="brand-sub">CHRONOMÈTRE</text>
        <text x="300" y="466" text-anchor="middle" fill="#9a8878" font-size="6.2" class="brand-sub">AUTOMATIC</text>

        <!-- Subtle Swiss Made signature at 6 o'clock -->
        <text x="300" y="536" text-anchor="middle" fill="#8b9ab2" font-size="5.8" class="brand-sub">SWISS MADE</text>

        <!-- ===================== DATE WINDOW (3 O'CLOCK) ===================== -->
        <g id="date-window" transform="translate(413, 380)">
          <!-- Outer applied rose-gold frame -->
          <rect x="-21" y="-15" width="42" height="30" rx="2.5" fill="url(#gold-bezel-outer)" filter="url(#index-shadow)" />
          <!-- Stepped inner bevel -->
          <rect x="-18.5" y="-12.5" width="37" height="25" rx="1.6" fill="#5b3826" />
          <!-- Recessed ivory date disc -->
          <rect x="-17" y="-11" width="34" height="22" rx="1" fill="url(#date-disc-grad)" />
          <!-- Inner aperture shadow from top/left -->
          <path d="M-17,11 L-17,-11 L17,-11" fill="none" stroke="rgba(0,0,0,0.42)" stroke-width="2" />
          <path d="M-17,11 L17,11 L17,-11" fill="none" stroke="rgba(255,255,255,0.5)" stroke-width="0.8" />
          <!-- Current Day Number -->
          <text id="date-number" x="0" y="5.8" text-anchor="middle" fill="#141822" font-size="16.5" class="date-text">18</text>
        </g>

        <!-- Applied Faceted Rose Gold Indices (populated via JS) -->
        <g id="indices" filter="url(#index-shadow)"></g>

        <!-- ===================== WATCH HANDS & SHADOWS ===================== -->
        <!-- Dynamic directional shadow layer (light from top-left) -->
        <g id="hands-shadows" transform="translate(3.5, 5.5)" opacity="0.52" filter="url(#hand-shadow-blur)">
          <g id="hour-shadow">
            <polygon points="300,398 294.5,380 298.8,274 300,268 301.2,274 305.5,380" fill="#000000" />
          </g>
          <g id="minute-shadow">
            <polygon points="300,404 295.8,380 299.1,230 300,223 300.9,230 304.2,380" fill="#000000" />
          </g>
          <g id="second-shadow">
            <polygon points="299.2,422 300.8,422 300.4,218 299.6,218" fill="#000000" />
            <circle cx="300" cy="408" r="4.5" fill="#000000" />
          </g>
        </g>

        <!-- Hour Hand (Faceted Dauphine) -->
        <g id="hour-hand">
          <!-- Left Bright Facet -->
          <polygon points="300,398 294.2,380 298.6,274 300,268" fill="url(#facet-light)" />
          <!-- Right Shaded Facet -->
          <polygon points="300,398 305.8,380 301.4,274 300,268" fill="url(#facet-dark)" />
          <!-- Crisp Central Ridge -->
          <line x1="300" y1="397" x2="300" y2="269" stroke="rgba(255,250,245,0.65)" stroke-width="0.6" />
        </g>

        <!-- Minute Hand (Long Faceted Dauphine) -->
        <g id="minute-hand">
          <!-- Left Bright Facet -->
          <polygon points="300,404 295.6,380 298.9,230 300,222" fill="url(#facet-light)" />
          <!-- Right Shaded Facet -->
          <polygon points="300,404 304.4,380 301.1,230 300,222" fill="url(#facet-dark)" />
          <!-- Crisp Central Ridge -->
          <line x1="300" y1="403" x2="300" y2="223" stroke="rgba(255,250,245,0.65)" stroke-width="0.55" />
        </g>

        <!-- Sweeping Seconds Hand -->
        <g id="second-hand">
          <!-- Counterweight ring & tail -->
          <polygon points="298.4,424 301.6,424 300.6,216 299.4,216" fill="url(#second-hand-gold)" />
          <!-- Pierced counterweight circle -->
          <circle cx="300" cy="410" r="5" fill="#0d1b36" stroke="url(#facet-light)" stroke-width="1.8" />
          <!-- Central cap -->
          <circle cx="300" cy="380" r="6.8" fill="url(#gold-bezel-outer)" stroke="#5b3724" stroke-width="0.7" />
          <circle cx="300" cy="380" r="2.6" fill="url(#facet-light)" />
          <circle cx="300" cy="380" r="1.1" fill="#5e3823" />
        </g>
      </g>

      <!-- ===================== SAPPHIRE CRYSTAL OVERLAY ===================== -->
      <g id="sapphire-crystal" clip-path="url(#sapphire-clip)" pointer-events="none">
        <!-- Subtle AR Coating Rim -->
        <circle cx="300" cy="380" r="178" fill="url(#sapphire-ar)" />
        <!-- Curved Specular Reflection (moves subtly with pointer) -->
        <g id="crystal-glare">
          <path d="M130,305 C185,205 335,180 445,250 C340,225 215,260 130,305 Z" fill="rgba(255,255,255,0.085)" />
          <circle cx="300" cy="380" r="178" fill="url(#sapphire-sheen)" />
        </g>
        <!-- Crisp inner bezel lip reflection -->
        <circle cx="300" cy="380" r="172.5" fill="none" stroke="rgba(255,244,232,0.22)" stroke-width="0.9" />
      </g>
    </svg>
  </div>

  <script>
    (function () {
      const SVG_NS = "http://www.w3.org/2000/svg";
      const CX = 300;
      const CY = 380;

      function createSvgEl(tag, attrs) {
        const el = document.createElementNS(SVG_NS, tag);
        for (const [k, v] of Object.entries(attrs)) {
          el.setAttribute(k, v);
        }
        return el;
      }

      // 1. Crown Knurling Ridges
      const crownKnurls = document.getElementById("crown-knurls");
      for (let y = -20; y <= 20; y += 3.6) {
        crownKnurls.appendChild(
          createSvgEl("line", {
            x1: "1",
            y1: y.toFixed(1),
            x2: "17",
            y2: y.toFixed(1),
            stroke: "rgba(65, 34, 18, 0.55)",
            "stroke-width": "1.2"
          })
        );
        crownKnurls.appendChild(
          createSvgEl("line", {
            x1: "1",
            y1: (y + 1.1).toFixed(1),
            x2: "17",
            y2: (y + 1.1).toFixed(1),
            stroke: "rgba(255, 236, 218, 0.36)",
            "stroke-width": "0.6"
          })
        );
      }

      // 2. Dial Sunburst Brushing Rays
      const sunburstGroup = document.getElementById("sunburst-rays");
      for (let i = 0; i < 180; i++) {
        const angle = (i * 2) * (Math.PI / 180);
        const x2 = CX + Math.cos(angle) * 172;
        const y2 = CY + Math.sin(angle) * 172;
        const light = i % 3 === 0 ? "rgba(120, 170, 255, 0.14)" : "rgba(0, 0, 0, 0.25)";
        sunburstGroup.appendChild(
          createSvgEl("line", {
            x1: CX,
            y1: CY,
            x2: x2.toFixed(2),
            y2: y2.toFixed(2),
            stroke: light,
            "stroke-width": i % 5 === 0 ? "1.1" : "0.55"
          })
        );
      }

      // 3. Precision Minute & 1/5th-Second Track (300 ticks)
      const minuteTrack = document.getElementById("minute-track");
      // Subtle outer framing hairlines
      minuteTrack.appendChild(
        createSvgEl("circle", {
          cx: CX,
          cy: CY,
          r: "165.5",
          fill: "none",
          stroke: "rgba(226, 188, 155, 0.28)",
          "stroke-width": "0.6"
        })
      );

      for (let i = 0; i < 300; i++) {
        const deg = i * 1.2;
        const isHour = i % 25 === 0;
        const isMinute = i % 5 === 0;

        // Keep track ultra-clean right near the 3 o'clock edge
        const rOuter = 164.5;
        const rInner = isHour ? 156 : isMinute ? 157.5 : 161;
        const rad = (deg - 90) * (Math.PI / 180);

        const x1 = CX + Math.cos(rad) * rInner;
        const y1 = CY + Math.sin(rad) * rInner;
        const x2 = CX + Math.cos(rad) * rOuter;
        const y2 = CY + Math.sin(rad) * rOuter;

        minuteTrack.appendChild(
          createSvgEl("line", {
            x1: x1.toFixed(2),
            y1: y1.toFixed(2),
            x2: x2.toFixed(2),
            y2: y2.toFixed(2),
            stroke: isMinute ? "#ecd4be" : "rgba(210, 188, 168, 0.45)",
            "stroke-width": isHour ? "1.45" : isMinute ? "1.05" : "0.5",
            "stroke-linecap": "butt"
          })
        );
      }

      // 4. Applied Faceted Rose Gold Hour Indices
      const indicesGroup = document.getElementById("indices");

      function addFacetedBaton(deg, offsetX = 0, width = 6.2, rTop = 127, rBottom = 152) {
        const g = createSvgEl("g", {
          transform: `rotate(${deg} ${CX} ${CY}) translate(${offsetX}, 0)`
        });

        const yTop = CY - rBottom;
        const yBot = CY - rTop;
        const halfW = width / 2;
        const tipInset = 3.2;

        // Left bright facet
        g.appendChild(
          createSvgEl("polygon", {
            points: `${CX},${yTop} ${CX - halfW},${yTop + tipInset} ${CX - halfW},${yBot - tipInset} ${CX},${yBot}`,
            fill: "url(#facet-light)"
          })
        );
        // Right darker facet
        g.appendChild(
          createSvgEl("polygon", {
            points: `${CX},${yTop} ${CX + halfW},${yTop + tipInset} ${CX + halfW},${yBot - tipInset} ${CX},${yBot}`,
            fill: "url(#facet-dark)"
          })
        );
        // Top highlight ridge
        g.appendChild(
          createSvgEl("line", {
            x1: CX,
            y1: yTop + 0.5,
            x2: CX,
            y2: yBot - 0.5,
            stroke: "rgba(255, 248, 240, 0.72)",
            "stroke-width": "0.55"
          })
        );

        indicesGroup.appendChild(g);
      }

      for (let h = 0; h < 12; h++) {
        // 3 o'clock is replaced by the framed date window
        if (h === 3) continue;

        const deg = h * 30;
        if (h === 0) {
          // Double applied baton at 12 o'clock
          addFacetedBaton(0, -4.8, 5.4, 125, 152);
          addFacetedBaton(0, 4.8, 5.4, 125, 152);
        } else {
          addFacetedBaton(deg, 0, 5.8, 129, 152);
        }
      }

      // 5. Real-time Mechanical Movement & Date Synchronization
      const hourHand = document.getElementById("hour-hand");
      const minuteHand = document.getElementById("minute-hand");
      const secondHand = document.getElementById("second-hand");

      const hourShadow = document.getElementById("hour-shadow");
      const minuteShadow = document.getElementById("minute-shadow");
      const secondShadow = document.getElementById("second-shadow");

      const dateNumberEl = document.getElementById("date-number");
      let lastRenderedDate = null;

      function updateWatch() {
        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 date = now.getDate();

        const secAngle = seconds * 6;
        const minAngle = minutes * 6;
        const hourAngle = hours * 30;

        const rotHour = `rotate(${hourAngle.toFixed(4)} ${CX} ${CY})`;
        const rotMin = `rotate(${minAngle.toFixed(4)} ${CX} ${CY})`;
        const rotSec = `rotate(${secAngle.toFixed(4)} ${CX} ${CY})`;

        hourHand.setAttribute("transform", rotHour);
        minuteHand.setAttribute("transform", rotMin);
        secondHand.setAttribute("transform", rotSec);

        hourShadow.setAttribute("transform", rotHour);
        minuteShadow.setAttribute("transform", rotMin);
        secondShadow.setAttribute("transform", rotSec);

        if (date !== lastRenderedDate) {
          dateNumberEl.textContent = String(date);
          lastRenderedDate = date;
        }

        requestAnimationFrame(updateWatch);
      }

      requestAnimationFrame(updateWatch);

      // 6. Subtle Interactive Sapphire Glare Shift on Pointer Move
      const crystalGlare = document.getElementById("crystal-glare");
      window.addEventListener(
        "pointermove",
        (e) => {
          const nx = e.clientX / window.innerWidth - 0.5;
          const ny = e.clientY / window.innerHeight - 0.5;
          crystalGlare.setAttribute(
            "transform",
            `translate(${(nx * 14).toFixed(2)}, ${(ny * 10).toFixed(2)})`
          );
        },
        { passive: true }
      );
    })();
  </script>
</body>
</html>

Compare with

Gemini 4 Hydrogen: other attempts