• 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

GLM 5.3 PrimeZ.ai

Network offOpen alone (new tab)

Run details

Model
z-ai/glm-5.3-prime
Route
OpenRouter API, one user message
Served by
Alibaba
Effort
max, OpenRouter's default for this model
Limits
60 min · 131,072 output tokens (the model's limit)
Date
23 Oct 2026
Time
14 min 23 s
Size
41 kB
Tokens
87 in, 76,145 out (61,054 of them thinking)
List price
$0.67 at today's price ($2.8 in / $8.8 out per M)
Paid
$0.67

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

41 kB 720 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Aurelian · Calibre A-72</title>
<style>
  :root{
    --serif:"Didot","Bodoni MT","Didot LT STD","Hoefler Text",Georgia,"Times New Roman",serif;
    --sans:"Helvetica Neue","Segoe UI",Arial,sans-serif;
    --w:min(58vh,78vw);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{
    background:#0B0A08 radial-gradient(130% 100% at 50% 40%, #14100B 0%, #0B0A08 52%, #060504 100%);
    color:#D8CDB4; font-family:var(--serif);
    overflow:hidden; display:flex; flex-direction:column;
    -webkit-font-smoothing:antialiased; user-select:none;
  }
  /* ---------- ambience ---------- */
  .spot{position:fixed;left:50%;top:46%;width:120vmin;height:120vmin;transform:translate(-50%,-50%);
    background:radial-gradient(closest-side, rgba(216,186,138,.10), rgba(216,186,138,.03) 45%, transparent 70%);
    pointer-events:none;z-index:0}
  .vignette{position:fixed;inset:0;pointer-events:none;z-index:6;
    background:radial-gradient(115% 90% at 50% 42%, rgba(0,0,0,0) 55%, rgba(0,0,0,.5) 100%)}
  .grain{position:fixed;inset:0;width:100vw;height:100vh;opacity:.05;mix-blend-mode:overlay;
    pointer-events:none;z-index:7}
  /* ---------- page furniture ---------- */
  header{padding:26px 20px 6px;text-align:center;pointer-events:none;z-index:1;
    animation:fadeIn 1.2s ease .15s backwards}
  h1{font-weight:400;font-size:clamp(15px,2.4vw,23px);letter-spacing:.55em;padding-left:.55em;color:#E6D9BC}
  header p{margin-top:7px;font-size:9px;letter-spacing:.42em;padding-left:.42em;color:#8B7E63}
  footer{padding:6px 20px 24px;text-align:center;z-index:1;animation:fadeIn 1.2s ease .35s backwards}
  .clock{font-family:var(--sans);font-size:13px;letter-spacing:.16em;color:#E6D8B8;
    font-variant-numeric:tabular-nums}
  .clock .dim{color:#7C6F55}
  .ctrl{margin-top:14px;display:inline-flex;align-items:center;gap:9px;background:none;
    border:1px solid rgba(214,190,140,.28);color:#D6BE8C;font-family:var(--serif);
    font-size:10.5px;letter-spacing:.3em;padding:10px 20px 10px 17px;border-radius:999px;cursor:pointer;
    transition:border-color .3s,background .3s,color .3s}
  .ctrl:hover{border-color:rgba(214,190,140,.6);background:rgba(214,190,140,.06);color:#EBDDB6}
  .ctrl:focus-visible{outline:1px solid rgba(214,190,140,.5);outline-offset:3px}
  .ctrl svg{display:block;flex:none}
  .corner{position:fixed;bottom:16px;font-size:9px;letter-spacing:.22em;color:#6E6350;z-index:1}
  .corner.left{left:22px}.corner.right{right:22px}
  @keyframes fadeIn{from{opacity:0}}
  /* ---------- the watch ---------- */
  main{flex:1;display:grid;place-items:center;perspective:1500px;position:relative;min-height:0;z-index:1}
  .floorShadow{position:absolute;left:50%;top:calc(50% + var(--w)*.64);
    width:calc(var(--w)*.82);height:calc(var(--w)*.11);transform:translateX(-50%);
    background:radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.62), rgba(0,0,0,0) 68%);
    filter:blur(8px);z-index:0}
  .tilt{width:var(--w);height:calc(var(--w)*760/600);transform-style:preserve-3d;
    will-change:transform;position:relative;z-index:2;cursor:pointer;
    animation:fadeIn 1.4s ease .1s backwards}
  .lift{position:absolute;inset:0;transform-style:preserve-3d}
  .lift.go{animation:flipLift .95s cubic-bezier(.45,.05,.3,1)}
  @keyframes flipLift{0%,100%{transform:translateZ(0)}48%{transform:translateZ(70px)}}
  .flipper{position:absolute;inset:0;transform-style:preserve-3d;
    transition:transform .92s cubic-bezier(.66,-.02,.28,1.02);will-change:transform}
  .flipper.flipped{transform:rotateY(180deg)}
  .face{position:absolute;inset:0;width:100%;height:100%;
    backface-visibility:hidden;-webkit-backface-visibility:hidden}
  .face.back{transform:rotateY(180deg)}
  #f_crown,#b_crown{cursor:pointer}
  svg text{font-family:var(--serif)}
  #f_dateText{font-family:var(--sans)}
  @media (max-width:640px){.corner{display:none}:root{--w:min(52vh,88vw)}}
  @media (max-height:640px){header{padding-top:12px}.corner{display:none}}
</style>
</head>
<body>

<div class="spot"></div>

<header>
  <h1>AURELIAN</h1>
  <p>HAUTE HORLOGERIE · GENÈVE</p>
</header>

<main>
  <div class="floorShadow"></div>

  <div class="tilt" id="tilt">
    <div class="lift" id="lift">
      <div class="flipper" id="flipper">

        <!-- ================= DIAL SIDE ================= -->
        <svg class="face front" id="watchFront" viewBox="0 0 600 760" role="img"
             aria-label="Aurelian wristwatch dial showing the current local time">
          <defs>
            <linearGradient id="f_case" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0" stop-color="#F2D9AE"/><stop offset=".25" stop-color="#DDAF70"/>
              <stop offset=".5" stop-color="#9F7139"/><stop offset=".72" stop-color="#C89355"/>
              <stop offset="1" stop-color="#6B471E"/>
            </linearGradient>
            <linearGradient id="f_bezel" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0" stop-color="#FDF2D8"/><stop offset=".22" stop-color="#EDC88D"/>
              <stop offset=".48" stop-color="#AD7F45"/><stop offset=".66" stop-color="#8F6230"/>
              <stop offset=".85" stop-color="#DDB26E"/><stop offset="1" stop-color="#5E3F1A"/>
            </linearGradient>
            <radialGradient id="f_rehaut" cx=".5" cy=".5" r=".5">
              <stop offset="0" stop-color="#143626"/><stop offset=".75" stop-color="#0D2A1C"/>
              <stop offset="1" stop-color="#07170F"/>
            </radialGradient>
            <radialGradient id="f_dial" cx=".5" cy=".42" r=".65">
              <stop offset="0" stop-color="#29684C"/><stop offset=".45" stop-color="#1C4B36"/>
              <stop offset=".8" stop-color="#133325"/><stop offset="1" stop-color="#0B2418"/>
            </radialGradient>
            <radialGradient id="f_cap" cx=".38" cy=".35" r=".8">
              <stop offset="0" stop-color="#FFF1C9"/><stop offset=".5" stop-color="#E6BC74"/>
              <stop offset="1" stop-color="#7B531F"/>
            </radialGradient>
            <linearGradient id="f_secG" gradientUnits="userSpaceOnUse" x1="300" y1="216" x2="300" y2="424">
              <stop offset="0" stop-color="#FFEDBB"/><stop offset=".5" stop-color="#DFB266"/>
              <stop offset="1" stop-color="#8F6428"/>
            </linearGradient>
            <linearGradient id="f_dateFrame" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stop-color="#F1DBA4"/><stop offset=".5" stop-color="#B8874A"/>
              <stop offset="1" stop-color="#6E4B20"/>
            </linearGradient>
            <linearGradient id="f_crownG" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stop-color="#F6E4B4"/><stop offset=".5" stop-color="#C79A5B"/>
              <stop offset="1" stop-color="#7C5526"/>
            </linearGradient>
            <linearGradient id="f_strapG" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0" stop-color="#0E0805"/><stop offset=".1" stop-color="#221510"/>
              <stop offset=".5" stop-color="#301E13"/><stop offset=".9" stop-color="#221510"/>
              <stop offset="1" stop-color="#0E0805"/>
            </linearGradient>
            <linearGradient id="f_fadeT" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stop-color="#0A0908"/><stop offset="1" stop-color="#0A0908" stop-opacity="0"/>
            </linearGradient>
            <linearGradient id="f_fadeB" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stop-color="#0A0908" stop-opacity="0"/><stop offset="1" stop-color="#0A0908"/>
            </linearGradient>
            <pattern id="f_leather" width="64" height="30" patternUnits="userSpaceOnUse">
              <rect width="64" height="30" fill="#1B120B"/>
              <rect x="1" y="1" width="28" height="13" rx="6" fill="#231610" stroke="#332212" stroke-opacity=".55"/>
              <rect x="33" y="1" width="28" height="13" rx="6" fill="#231610" stroke="#332212" stroke-opacity=".55"/>
              <rect x="-14" y="16" width="28" height="13" rx="6" fill="#1E130C" stroke="#2E1C12" stroke-opacity=".55"/>
              <rect x="18" y="16" width="28" height="13" rx="6" fill="#1E130C" stroke="#2E1C12" stroke-opacity=".55"/>
              <rect x="50" y="16" width="28" height="13" rx="6" fill="#1E130C" stroke="#2E1C12" stroke-opacity=".55"/>
            </pattern>
            <radialGradient id="f_glow" cx=".5" cy=".5" r=".5">
              <stop offset="0" stop-color="#FFFFFF" stop-opacity=".18"/>
              <stop offset=".6" stop-color="#FFFFFF" stop-opacity=".05"/>
              <stop offset="1" stop-color="#FFFFFF" stop-opacity="0"/>
            </radialGradient>
            <filter id="f_hs" x="-60%" y="-60%" width="220%" height="220%">
              <feDropShadow dx="1.5" dy="4.5" stdDeviation="2.6" flood-color="#000000" flood-opacity=".45"/>
            </filter>
            <filter id="f_blur"><feGaussianBlur stdDeviation="3.5"/></filter>
            <clipPath id="f_cryst"><circle cx="300" cy="380" r="191"/></clipPath>
          </defs>

          <!-- alligator straps, running off into the dark -->
          <g>
            <rect x="252" y="-4" width="96" height="198" rx="9" fill="#1A110A"/>
            <rect x="252" y="-4" width="96" height="198" rx="9" fill="url(#f_leather)"/>
            <rect x="252" y="-4" width="96" height="198" rx="9" fill="url(#f_strapG)" opacity=".9"/>
            <line x1="262" y1="4" x2="262" y2="182" stroke="#7A5830" stroke-width="1.3" stroke-dasharray="6 5" opacity=".5"/>
            <line x1="338" y1="4" x2="338" y2="182" stroke="#7A5830" stroke-width="1.3" stroke-dasharray="6 5" opacity=".5"/>
            <rect x="250" y="-4" width="100" height="78" fill="url(#f_fadeT)"/>
          </g>
          <g>
            <rect x="252" y="566" width="96" height="198" rx="9" fill="#1A110A"/>
            <rect x="252" y="566" width="96" height="198" rx="9" fill="url(#f_leather)"/>
            <rect x="252" y="566" width="96" height="198" rx="9" fill="url(#f_strapG)" opacity=".9"/>
            <line x1="262" y1="574" x2="262" y2="752" stroke="#7A5830" stroke-width="1.3" stroke-dasharray="6 5" opacity=".5"/>
            <line x1="338" y1="574" x2="338" y2="752" stroke="#7A5830" stroke-width="1.3" stroke-dasharray="6 5" opacity=".5"/>
            <rect x="250" y="682" width="100" height="82" fill="url(#f_fadeB)"/>
          </g>

          <!-- lugs -->
          <g>
            <g transform="rotate(24 300 380)">
              <path d="M 286 182 C 285 152 287 132 292 122 C 296 114 304 114 308 122 C 313 132 315 152 314 182 Z"
                    fill="url(#f_case)" stroke="#503716" stroke-width=".8"/>
              <path d="M 293.5 168 C 292 148 294 134 297 126" fill="none" stroke="#F2D9A8" stroke-width="1.2" opacity=".3"/>
            </g>
            <g transform="rotate(-24 300 380)">
              <path d="M 286 182 C 285 152 287 132 292 122 C 296 114 304 114 308 122 C 313 132 315 152 314 182 Z"
                    fill="url(#f_case)" stroke="#503716" stroke-width=".8"/>
              <path d="M 293.5 168 C 292 148 294 134 297 126" fill="none" stroke="#F2D9A8" stroke-width="1.2" opacity=".3"/>
            </g>
            <g transform="rotate(156 300 380)">
              <path d="M 286 182 C 285 152 287 132 292 122 C 296 114 304 114 308 122 C 313 132 315 152 314 182 Z"
                    fill="url(#f_case)" stroke="#503716" stroke-width=".8"/>
            </g>
            <g transform="rotate(204 300 380)">
              <path d="M 286 182 C 285 152 287 132 292 122 C 296 114 304 114 308 122 C 313 132 315 152 314 182 Z"
                    fill="url(#f_case)" stroke="#503716" stroke-width=".8"/>
            </g>
          </g>

          <!-- case, bezel, rehaut, dial -->
          <circle cx="300" cy="380" r="219" fill="url(#f_case)"/>
          <circle cx="300" cy="380" r="219" fill="none" stroke="#3A2712" stroke-opacity=".5"/>
          <circle cx="300" cy="380" r="214" fill="url(#f_bezel)"/>
          <path d="M 102.9 327.2 A 204 204 0 0 1 247.2 182.8" fill="none" stroke="#FFEFC6" stroke-width="2.5" opacity=".3"/>
          <path d="M 497.1 432.8 A 204 204 0 0 1 352.8 577.2" fill="none" stroke="#3A2410" stroke-width="2.5" opacity=".4"/>
          <circle cx="300" cy="380" r="192" fill="#0A1B12"/>
          <circle cx="300" cy="380" r="190" fill="url(#f_rehaut)"/>
          <circle cx="300" cy="380" r="176" fill="url(#f_dial)"/>

          <!-- sunray brushing, minute track, indices (generated) -->
          <g id="f_rays"></g>
          <circle cx="300" cy="380" r="173" fill="none" stroke="#000000" stroke-opacity=".28" stroke-width="8"/>
          <g id="f_ticks"></g>
          <g id="f_idx"></g>

          <!-- printing -->
          <text x="303" y="301" text-anchor="middle" font-size="25" letter-spacing="7" fill="#EFE5CC">AURELIAN</text>
          <text x="302" y="323" text-anchor="middle" font-size="10.5" letter-spacing="4.5" fill="#C9BFA5">GENÈVE</text>
          <text x="301.5" y="468" text-anchor="middle" font-size="11" letter-spacing="3.5" fill="#C9BFA5">AUTOMATIQUE</text>
          <text x="301" y="486" text-anchor="middle" font-size="8.5" letter-spacing="2.5" fill="#A69C82">CALIBRE A-72</text>
          <text x="262" y="551" text-anchor="middle" font-size="6.8" letter-spacing="1.6" fill="#B7AD93">SWISS</text>
          <text x="338" y="551" text-anchor="middle" font-size="6.8" letter-spacing="1.6" fill="#B7AD93">MADE</text>

          <!-- date window at 3 o'clock -->
          <g>
            <rect x="399" y="357" width="58" height="46" rx="6" fill="#07130C"/>
            <rect x="401" y="359" width="54" height="42" rx="5" fill="url(#f_dateFrame)" stroke="#55391A" stroke-width=".8"/>
            <rect x="405" y="363" width="46" height="34" rx="3" fill="#F4EEDF"/>
            <rect x="405" y="363" width="46" height="8" rx="3" fill="#1F1A14" opacity=".14"/>
            <text id="f_dateText" x="428" y="388" text-anchor="middle" font-size="23" font-weight="600" fill="#23201A">1</text>
          </g>

          <!-- hands (shadow wrapper stays unrotated so shadows fall the same way) -->
          <g filter="url(#f_hs)">
            <g id="f_hour">
              <polygon points="300,278 291,396 300,410" fill="#F3DD9F"/>
              <polygon points="300,278 309,396 300,410" fill="#A87834"/>
              <polygon points="300,278 309,396 300,410 291,396" fill="none" stroke="#5A3F17" stroke-width=".8"/>
            </g>
          </g>
          <g filter="url(#f_hs)">
            <g id="f_min">
              <polygon points="300,220 292,397 300,412" fill="#F3DD9F"/>
              <polygon points="300,220 308,397 300,412" fill="#A87834"/>
              <polygon points="300,220 308,397 300,412 292,397" fill="none" stroke="#5A3F17" stroke-width=".8"/>
            </g>
          </g>
          <g filter="url(#f_hs)">
            <g id="f_sec">
              <polygon points="300,214 301.8,336 301.8,414 298.2,414 298.2,336"
                       fill="url(#f_secG)" stroke="#6B471E" stroke-width=".5"/>
              <circle cx="300" cy="421" r="8" fill="url(#f_secG)" stroke="#6B471E" stroke-width=".6"/>
            </g>
          </g>
          <circle cx="300" cy="380" r="11.5" fill="url(#f_cap)" stroke="#5F4419" stroke-width=".7"/>
          <circle cx="300" cy="377" r="3.2" fill="#FFF3CF" opacity=".9"/>

          <!-- sapphire reflections (shift with the light as you tilt) -->
          <g clip-path="url(#f_cryst)">
            <g id="f_sheen">
              <ellipse cx="240" cy="292" rx="120" ry="78" fill="url(#f_glow)" transform="rotate(-22 240 292)" opacity=".8"/>
              <ellipse cx="372" cy="468" rx="62" ry="38" fill="url(#f_glow)" transform="rotate(-22 372 468)" opacity=".5"/>
              <path d="M 131.4 301.4 A 186 186 0 0 1 251.9 200.3" fill="none"
                    stroke="#FFFFFF" stroke-width="9" opacity=".1" filter="url(#f_blur)"/>
            </g>
          </g>

          <!-- crown -->
          <g id="f_crown">
            <title>Flip the watch over</title>
            <rect x="512" y="367" width="10" height="26" fill="url(#f_crownG)"/>
            <rect x="520" y="360" width="30" height="40" rx="9" fill="url(#f_crownG)" stroke="#5A3E1A" stroke-width=".8"/>
            <path d="M 525 363 V 397 M 529.5 362.5 V 397.5 M 534 362 V 398 M 538.5 362.5 V 397.5 M 543 363 V 397"
                  stroke="#7A5526" stroke-width="1.1" opacity=".55" fill="none"/>
            <ellipse cx="550" cy="380" rx="4" ry="16.5" fill="#7A5323"/>
            <circle cx="535" cy="380" r="30" fill="transparent"/>
          </g>
        </svg>

        <!-- ================= CASEBACK / MOVEMENT ================= -->
        <svg class="face back" id="watchBack" viewBox="0 0 600 760" role="img"
             aria-label="Exhibition caseback revealing the Calibre A-72 movement">
          <defs>
            <linearGradient id="b_case" x1="0" y1="0" x2="1" y2="1">
              <stop offset="0" stop-color="#F2D9AE"/><stop offset=".25" stop-color="#DDAF70"/>
              <stop offset=".5" stop-color="#9F7139"/><stop offset=".72" stop-color="#C89355"/>
              <stop offset="1" stop-color="#6B471E"/>
            </linearGradient>
            <radialGradient id="b_brushed" cx=".5" cy=".5" r=".5">
              <stop offset=".82" stop-color="#B58647"/><stop offset=".845" stop-color="#E9C88A"/>
              <stop offset=".85" stop-color="#A8763C"/><stop offset=".87" stop-color="#D9AF6C"/>
              <stop offset=".875" stop-color="#966A34"/><stop offset=".90" stop-color="#CFA45F"/>
              <stop offset=".91" stop-color="#8E6231"/><stop offset=".945" stop-color="#C49755"/>
              <stop offset=".96" stop-color="#7E5623"/><stop offset=".99" stop-color="#BD9053"/>
              <stop offset="1" stop-color="#6B471E"/>
            </radialGradient>
            <radialGradient id="b_perlDot" cx=".38" cy=".35" r=".8">
              <stop offset="0" stop-color="#D6D2C6"/><stop offset=".65" stop-color="#BCB8AC"/>
              <stop offset="1" stop-color="#A29E92"/>
            </radialGradient>
            <pattern id="b_perlage" width="30" height="30" patternUnits="userSpaceOnUse">
              <circle cx="7" cy="7" r="10" fill="url(#b_perlDot)"/>
              <circle cx="22" cy="22" r="10" fill="url(#b_perlDot)"/>
            </pattern>
            <pattern id="b_cotes" width="42" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(24)">
              <rect width="42" height="20" fill="#BEBAAE"/>
              <rect width="20" height="20" fill="#C9C5B9"/>
              <rect x="20" width="2" height="20" fill="#8F8B7E"/>
              <rect x="0.6" width="1.2" height="20" fill="#E8E4D8" opacity=".8"/>
              <rect x="39.6" width="1.2" height="20" fill="#E8E4D8" opacity=".8"/>
            </pattern>
            <pattern id="b_cotes2" width="42" height="20" patternUnits="userSpaceOnUse" patternTransform="rotate(-16)">
              <rect width="42" height="20" fill="#BCB8AC"/>
              <rect width="20" height="20" fill="#C6C2B6"/>
              <rect x="20" width="2" height="20" fill="#8B877A"/>
              <rect x="0.6" width="1.2" height="20" fill="#E6E2D6" opacity=".8"/>
            </pattern>
            <radialGradient id="b_steelG" cx=".38" cy=".35" r=".8">
              <stop offset="0" stop-color="#EDE9DD"/><stop offset="1" stop-color="#9C988C"/>
            </radialGradient>
            <radialGradient id="b_rubyG" cx=".38" cy=".35" r=".8">
              <stop offset="0" stop-color="#E46B84"/><stop offset=".55" stop-color="#A81E3D"/>
              <stop offset="1" stop-color="#64101F"/>
            </radialGradient>
            <radialGradient id="b_chaton" cx=".38" cy=".35" r=".8">
              <stop offset="0" stop-color="#F0D9A0"/><stop offset="1" stop-color="#8A6229"/>
            </radialGradient>
            <radialGradient id="b_hubG" cx=".38" cy=".35" r=".8">
              <stop offset="0" stop-color="#F4E0AC"/><stop offset=".55" stop-color="#C89355"/>
              <stop offset="1" stop-color="#7A5323"/>
            </radialGradient>
            <linearGradient id="b_beamG" gradientUnits="userSpaceOnUse" x1="446" y1="430" x2="404" y2="354">
              <stop offset="0" stop-color="#DBD7CB"/><stop offset="1" stop-color="#A29E92"/>
            </linearGradient>
            <linearGradient id="b_rotorG" gradientUnits="userSpaceOnUse" x1="180" y1="480" x2="420" y2="540">
              <stop offset="0" stop-color="#E9C285"/><stop offset=".45" stop-color="#C08D49"/>
              <stop offset="1" stop-color="#7E5622"/>
            </linearGradient>
            <linearGradient id="b_crownG" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stop-color="#F6E4B4"/><stop offset=".5" stop-color="#C79A5B"/>
              <stop offset="1" stop-color="#7C5526"/>
            </linearGradient>
            <linearGradient id="b_strapG" x1="0" y1="0" x2="1" y2="0">
              <stop offset="0" stop-color="#0E0805"/><stop offset=".1" stop-color="#221510"/>
              <stop offset=".5" stop-color="#301E13"/><stop offset=".9" stop-color="#221510"/>
              <stop offset="1" stop-color="#0E0805"/>
            </linearGradient>
            <linearGradient id="b_fadeT" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stop-color="#0A0908"/><stop offset="1" stop-color="#0A0908" stop-opacity="0"/>
            </linearGradient>
            <linearGradient id="b_fadeB" x1="0" y1="0" x2="0" y2="1">
              <stop offset="0" stop-color="#0A0908" stop-opacity="0"/><stop offset="1" stop-color="#0A0908"/>
            </linearGradient>
            <pattern id="b_leather" width="64" height="30" patternUnits="userSpaceOnUse">
              <rect width="64" height="30" fill="#1B120B"/>
              <rect x="1" y="1" width="28" height="13" rx="6" fill="#231610" stroke="#332212" stroke-opacity=".55"/>
              <rect x="33" y="1" width="28" height="13" rx="6" fill="#231610" stroke="#332212" stroke-opacity=".55"/>
              <rect x="-14" y="16" width="28" height="13" rx="6" fill="#1E130C" stroke="#2E1C12" stroke-opacity=".55"/>
              <rect x="18" y="16" width="28" height="13" rx="6" fill="#1E130C" stroke="#2E1C12" stroke-opacity=".55"/>
              <rect x="50" y="16" width="28" height="13" rx="6" fill="#1E130C" stroke="#2E1C12" stroke-opacity=".55"/>
            </pattern>
            <filter id="b_blur"><feGaussianBlur stdDeviation="5"/></filter>
            <clipPath id="b_mov"><circle cx="300" cy="380" r="173"/></clipPath>
            <path id="b_ct" d="M 300 184 a 196 196 0 1 1 -0.02 0" fill="none"/>
            <path id="b_rotArc" d="M 164.2 458.5 A 157 157 0 0 0 435.8 458.5" fill="none"/>
            <mask id="b_rotorMask" maskUnits="userSpaceOnUse" x="0" y="0" width="600" height="760">
              <path d="M 457.9 437.5 A 168 168 0 0 1 142.1 437.5 L 201.3 416 A 105 105 0 0 0 398.7 416 Z" fill="#FFFFFF"/>
              <g fill="none" stroke="#000000" stroke-width="26" stroke-linecap="round">
                <path d="M 404.1 467.4 A 136 136 0 0 1 355.3 504.3"/>
                <path d="M 337.5 510.7 A 136 136 0 0 1 276.4 514.0"/>
                <path d="M 257.9 509.3 A 136 136 0 0 1 205.6 478.0"/>
              </g>
            </mask>
          </defs>

          <!-- straps -->
          <g>
            <rect x="252" y="-4" width="96" height="198" rx="9" fill="#1A110A"/>
            <rect x="252" y="-4" width="96" height="198" rx="9" fill="url(#b_leather)"/>
            <rect x="252" y="-4" width="96" height="198" rx="9" fill="url(#b_strapG)" opacity=".9"/>
            <line x1="262" y1="4" x2="262" y2="182" stroke="#7A5830" stroke-width="1.3" stroke-dasharray="6 5" opacity=".5"/>
            <line x1="338" y1="4" x2="338" y2="182" stroke="#7A5830" stroke-width="1.3" stroke-dasharray="6 5" opacity=".5"/>
            <rect x="250" y="-4" width="100" height="78" fill="url(#b_fadeT)"/>
          </g>
          <g>
            <rect x="252" y="566" width="96" height="198" rx="9" fill="#1A110A"/>
            <rect x="252" y="566" width="96" height="198" rx="9" fill="url(#b_leather)"/>
            <rect x="252" y="566" width="96" height="198" rx="9" fill="url(#b_strapG)" opacity=".9"/>
            <line x1="262" y1="574" x2="262" y2="752" stroke="#7A5830" stroke-width="1.3" stroke-dasharray="6 5" opacity=".5"/>
            <line x1="338" y1="574" x2="338" y2="752" stroke="#7A5830" stroke-width="1.3" stroke-dasharray="6 5" opacity=".5"/>
            <rect x="250" y="682" width="100" height="82" fill="url(#b_fadeB)"/>
          </g>

          <!-- lugs -->
          <g>
            <g transform="rotate(24 300 380)"><path d="M 286 182 C 285 152 287 132 292 122 C 296 114 304 114 308 122 C 313 132 315 152 314 182 Z" fill="url(#b_case)" stroke="#503716" stroke-width=".8"/></g>
            <g transform="rotate(-24 300 380)"><path d="M 286 182 C 285 152 287 132 292 122 C 296 114 304 114 308 122 C 313 132 315 152 314 182 Z" fill="url(#b_case)" stroke="#503716" stroke-width=".8"/></g>
            <g transform="rotate(156 300 380)"><path d="M 286 182 C 285 152 287 132 292 122 C 296 114 304 114 308 122 C 313 132 315 152 314 182 Z" fill="url(#b_case)" stroke="#503716" stroke-width=".8"/></g>
            <g transform="rotate(204 300 380)"><path d="M 286 182 C 285 152 287 132 292 122 C 296 114 304 114 308 122 C 313 132 315 152 314 182 Z" fill="url(#b_case)" stroke="#503716" stroke-width=".8"/></g>
          </g>

          <!-- caseback -->
          <circle cx="300" cy="380" r="219" fill="url(#b_case)"/>
          <circle cx="300" cy="380" r="219" fill="none" stroke="#3A2712" stroke-opacity=".5"/>
          <circle cx="300" cy="380" r="214" fill="url(#b_brushed)"/>
          <circle cx="300" cy="380" r="176" fill="#221910"/>

          <!-- the calibre -->
          <g clip-path="url(#b_mov)">
            <circle cx="300" cy="380" r="173" fill="#B3AFA4"/>
            <rect x="125" y="205" width="350" height="350" fill="url(#b_perlage)"/>
            <g id="b_gearLayer"></g>
            <path d="M 194 350 C 186 302 212 260 258 248 C 306 236 350 248 364 276 C 374 298 362 322 336 336 C 302 354 244 366 216 360 C 200 356 196 356 194 350 Z"
                  fill="url(#b_cotes)" stroke="#847F72" stroke-width="1"/>
            <path d="M 198 472 C 208 444 248 432 298 432 C 350 432 392 444 404 470 C 412 490 396 512 364 524 C 328 534 252 532 224 516 C 206 506 194 492 198 472 Z"
                  fill="url(#b_cotes2)" stroke="#847F72" stroke-width="1"/>
            <text x="240" y="322" text-anchor="middle" font-size="9" letter-spacing="2.2" fill="#8B8779" transform="rotate(-24 240 322)">AURELIAN</text>
            <text x="300" y="486" text-anchor="middle" font-size="8.5" letter-spacing="2" fill="#8B8779" transform="rotate(-4 300 486)">N° 072 · ADJUSTED</text>
            <g id="b_furni"></g>

            <!-- hairspring + balance wheel, beating at 4 Hz -->
            <g id="b_springG"><polyline id="b_spring" fill="none" stroke="#4C5F80" stroke-width="1.2" stroke-opacity=".9"/></g>
            <g id="b_balance">
              <circle cx="404" cy="354" r="44" fill="none" stroke="#D9A94F" stroke-width="7.5"/>
              <circle cx="404" cy="354" r="40" fill="none" stroke="#7A5323" stroke-width="1" opacity=".7"/>
              <line x1="366" y1="336.2" x2="442" y2="371.8" stroke="#D9A94F" stroke-width="5.5"/>
              <circle cx="435" cy="323" r="2.8" fill="#E8C88F" stroke="#8A6229" stroke-width=".5"/>
              <circle cx="435" cy="385" r="2.8" fill="#E8C88F" stroke="#8A6229" stroke-width=".5"/>
              <circle cx="373" cy="323" r="2.8" fill="#E8C88F" stroke="#8A6229" stroke-width=".5"/>
              <circle cx="373" cy="385" r="2.8" fill="#E8C88F" stroke="#8A6229" stroke-width=".5"/>
              <circle cx="404" cy="354" r="4.5" fill="#EDE7D6"/>
            </g>
            <g id="b_cock">
              <line x1="446" y1="430" x2="404" y2="354" stroke="url(#b_beamG)" stroke-width="24" stroke-linecap="round"/>
              <circle cx="446" cy="430" r="12" fill="url(#b_steelG)" stroke="#6E6A5E"/>
              <line x1="441" y1="425" x2="451" y2="435" stroke="#5A564C" stroke-width="1.6"/>
              <circle cx="404" cy="354" r="13" fill="url(#b_steelG)" stroke="#6E6A5E"/>
              <circle cx="404" cy="354" r="4.4" fill="url(#b_rubyG)"/>
              <circle cx="402.6" cy="352.6" r="1.3" fill="#F79BAC" opacity=".85"/>
            </g>
          </g>

          <!-- oscillating weight (simulated rotor) -->
          <g id="b_rotor">
            <g mask="url(#b_rotorMask)">
              <path d="M 457.9 437.5 A 168 168 0 0 1 142.1 437.5 L 201.3 416 A 105 105 0 0 0 398.7 416 Z"
                    fill="url(#b_rotorG)" stroke="#6B471E" stroke-width="1.5"/>
              <path d="M 453.9 442.3 A 166 166 0 0 1 146.1 442.3" fill="none" stroke="#F6E3B4" stroke-width="2.4" opacity=".5"/>
              <path d="M 397 425.3 A 107 107 0 0 1 203 425.3" fill="none" stroke="#4A3113" stroke-width="1.6" opacity=".5"/>
              <text font-size="11.5" letter-spacing="3" fill="#6B471E" opacity=".9">
                <textPath href="#b_rotArc" startOffset="60">AURELIAN · AUTOMATIQUE</textPath>
              </text>
            </g>
            <circle cx="300" cy="380" r="16" fill="url(#b_hubG)" stroke="#6B471E" stroke-width="1.2"/>
            <circle cx="300" cy="380" r="4.5" fill="url(#b_rubyG)"/>
            <circle cx="300" cy="376.5" r="1.4" fill="#F79BAC" opacity=".8"/>
            <circle cx="300" cy="390.5" r="2" fill="#E8C88F" stroke="#8A6229" stroke-width=".4"/>
            <circle cx="290.9" cy="374.8" r="2" fill="#E8C88F" stroke="#8A6229" stroke-width=".4"/>
            <circle cx="309.1" cy="374.8" r="2" fill="#E8C88F" stroke="#8A6229" stroke-width=".4"/>
          </g>

          <!-- sapphire rim, engraving, reflection -->
          <circle cx="300" cy="380" r="174.5" fill="none" stroke="#9A7337" stroke-width="2.6" opacity=".8"/>
          <text font-size="12" letter-spacing="3.2" transform="translate(0 1.1)" fill="#EFDBA9" opacity=".5">
            <textPath href="#b_ct">AURELIAN · GENÈVE · CALIBRE A-72 · TWENTY-FIVE JEWELS · AUTOMATIQUE · 28 800 A/H · SWISS MADE · ADJUSTED TO FIVE POSITIONS ·</textPath>
          </text>
          <text font-size="12" letter-spacing="3.2" fill="#6E4C22">
            <textPath href="#b_ct">AURELIAN · GENÈVE · CALIBRE A-72 · TWENTY-FIVE JEWELS · AUTOMATIQUE · 28 800 A/H · SWISS MADE · ADJUSTED TO FIVE POSITIONS ·</textPath>
          </text>
          <g id="b_sheen">
            <path d="M 142.1 322.5 A 168 168 0 0 1 242.5 222.1" fill="none"
                  stroke="#FFFFFF" stroke-width="16" opacity=".06" filter="url(#b_blur)"/>
          </g>

          <!-- crown, seen from the other side -->
          <g id="b_crown">
            <rect x="78" y="367" width="10" height="26" fill="url(#b_crownG)"/>
            <rect x="50" y="360" width="30" height="40" rx="9" fill="url(#b_crownG)" stroke="#5A3E1A" stroke-width=".8"/>
            <path d="M 57 363 V 397 M 61.5 362.5 V 397.5 M 66 362 V 398 M 70.5 362.5 V 397.5 M 75 363 V 397"
                  stroke="#7A5526" stroke-width="1.1" opacity=".55" fill="none"/>
            <ellipse cx="50" cy="380" rx="4" ry="16.5" fill="#7A5323"/>
            <circle cx="65" cy="380" r="30" fill="transparent"/>
          </g>
        </svg>

      </div>
    </div>
  </div>
</main>

<footer>
  <p class="clock">
    <span id="clockTime">--:--:--</span>
    <span class="dim"> · <span id="clockZone"></span> · <span id="clockUTC"></span></span>
  </p>
  <button class="ctrl" id="flipBtn" type="button">
    <svg width="13" height="13" viewBox="0 0 14 14" fill="none" stroke="currentColor"
         stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M12 7a5 5 0 1 1-1.46-3.54"/>
      <path d="M10.9 1v2.7H8.2"/>
    </svg>
    <span id="flipLabel">VIEW MOVEMENT</span>
  </button>
</footer>

<span class="corner left">CALIBRE A-72 · 28,800 VPH · 25 JEWELS</span>
<span class="corner right">ROSE GOLD · ALLIGATOR · SAPPHIRE</span>

<div class="vignette"></div>
<svg class="grain" aria-hidden="true">
  <filter id="grF"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/>
    <feColorMatrix type="saturate" values="0"/></filter>
  <rect width="100%" height="100%" filter="url(#grF)"/>
</svg>

<script>
(function(){
  "use strict";
  var NS = "http://www.w3.org/2000/svg";
  var $ = function(id){ return document.getElementById(id); };
  function el(name, attrs, parent){
    var e = document.createElementNS(NS, name);
    for (var k in attrs) e.setAttribute(k, attrs[k]);
    parent.appendChild(e);
    return e;
  }

  /* ---------- generated dial furniture (front) ---------- */
  var rays = $("f_rays");
  for (var i = 0; i < 90; i++){
    el("line", {
      x1:300, y1:362, x2:300, y2:212,
      transform:"rotate(" + (i*4) + " 300 380)",
      stroke: (i % 2) ? "#0A1C12" : "#48936C",
      "stroke-opacity": (i % 2) ? .22 : .09,
      "stroke-width": 2.2, "stroke-linecap":"round"
    }, rays);
  }

  var ticks = $("f_ticks");
  for (var n = 0; n < 60; n++){
    var M = (n % 5 === 0);
    el("line", {
      x1:300, y1:380 - (M ? 158 : 162), x2:300, y2:380 - (M ? 172 : 169),
      transform:"rotate(" + (n*6) + " 300 380)",
      stroke:"#EDE3C9", "stroke-width": M ? 2.6 : 1.1, "stroke-opacity": M ? .95 : .8
    }, ticks);
  }

  var idx = $("f_idx");
  function baton(g, dx){
    var cx = 300 + dx;
    var outline = "M " + cx + " 222 L " + (cx+5) + " 227.5 L " + (cx+5) + " 264 L " + (cx-5) + " 264 L " + (cx-5) + " 227.5 Z";
    el("path", { d:outline, transform:"translate(1.6 3.6)", fill:"rgba(0,0,0,.35)" }, g);
    el("path", { d:"M " + cx + " 222 L " + (cx-5) + " 227.5 L " + (cx-5) + " 264 L " + cx + " 264 Z", fill:"#F0D896" }, g);
    el("path", { d:"M " + cx + " 222 L " + (cx+5) + " 227.5 L " + (cx+5) + " 264 L " + cx + " 264 Z", fill:"#A87834" }, g);
    el("path", { d:outline, fill:"none", stroke:"#573D16", "stroke-width":.7 }, g);
  }
  for (var h = 0; h < 12; h++){
    if (h === 3) continue;                       // date window lives there
    var g = el("g", { transform:"rotate(" + (h*30) + " 300 380)" }, idx);
    if (h === 0){ baton(g, -7.5); baton(g, 7.5); } // double baton at twelve
    else baton(g, 0);
  }

  /* ---------- generated movement furniture (back) ---------- */
  function makeGear(parent, cx, cy, r, teeth, armAngle){
    var outer = el("g", { transform:"translate(" + cx + " " + cy + ")" }, parent);
    var g = el("g", {}, outer);
    for (var t = 0; t < teeth; t++){
      el("rect", { x:-2.2, y:-r-4, width:4.4, height:5, rx:1, fill:"#B9974F",
                   transform:"rotate(" + (t*360/teeth) + ")" }, g);
    }
    el("circle", { r:r, fill:"#C9AE5E", stroke:"#8F7A42", "stroke-width":1 }, g);
    for (var a = 0; a < 4; a++){
      el("line", { x1:0, y1:0, x2:0, y2:-r, stroke:"#C9AE5E", "stroke-width":5.5,
                   transform:"rotate(" + (a*90 + armAngle) + ")" }, g);
    }
    el("circle", { r:r*.42, fill:"#C9AE5E", stroke:"#8F7A42", "stroke-width":1 }, g);
    el("circle", { r:4, fill:"url(#b_rubyG)" }, outer);
    return g;
  }
  var gearLayer = $("b_gearLayer");
  var g1 = makeGear(gearLayer, 332, 400, 34, 22, 0);
  var g2 = makeGear(gearLayer, 238, 414, 20, 15, 45);
  var g3 = makeGear(gearLayer, 380, 268, 17, 13, 20);

  var furni = $("b_furni");
  function screw(x, y, a){
    var s = el("g", { transform:"translate(" + x + " " + y + ")" }, furni);
    el("circle", { r:4.6, fill:"url(#b_steelG)", stroke:"#6E6A5E", "stroke-width":1 }, s);
    el("line", { x1:-2.9, y1:0, x2:2.9, y2:0, stroke:"#57534B", "stroke-width":1.5, transform:"rotate(" + a + ")" }, s);
    el("circle", { r:1.1, cx:-1.5, cy:-1.6, fill:"#FFFFFF", opacity:.5 }, s);
  }
  function jewel(x, y){
    var j = el("g", { transform:"translate(" + x + " " + y + ")" }, furni);
    el("circle", { r:7.6, fill:"url(#b_chaton)", stroke:"#7A5323", "stroke-width":.8 }, j);
    el("circle", { r:4.1, fill:"url(#b_rubyG)" }, j);
    el("circle", { r:1.2, cx:-1.3, cy:-1.4, fill:"#F79BAC", opacity:.8 }, j);
  }
  screw(270,268,15); screw(348,300,72); screw(232,500,112); screw(342,514,38); screw(388,466,20);
  jewel(238,292); jewel(330,266); jewel(252,462); jewel(358,488);

  /* hairspring: an Archimedean spiral around the balance staff */
  (function(){
    var pts = [], turns = 4.5, steps = 360*turns/12;
    for (var k = 0; k <= steps; k++){
      var ang = k * 12 * Math.PI/180;
      var rr = 5 + 30 * (k/steps);
      pts.push((404 + rr*Math.cos(ang)).toFixed(1) + " " + (354 + rr*Math.sin(ang)).toFixed(1));
    }
    $("b_spring").setAttribute("points", pts.join(" "));
  })();

  /* ---------- state & elements ---------- */
  var hourH = $("f_hour"), minH = $("f_min"), secH = $("f_sec");
  var bBalance = $("b_balance"), bSpringG = $("b_springG"), bRotor = $("b_rotor");
  var fSheen = $("f_sheen"), bSheen = $("b_sheen");
  var tiltEl = $("tilt"), liftEl = $("lift"), flipperEl = $("flipper");
  var dateText = $("f_dateText"), clockTime = $("clockTime");
  var reduced = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  var flipped = false, lastSec = -1, lastDate = -1;
  var p2 = function(n){ return String(n).padStart(2, "0"); };

  /* timezone caption */
  try {
    $("clockZone").textContent = (Intl.DateTimeFormat().resolvedOptions().timeZone || "Local time").replace(/_/g, " ");
  } catch(e){ $("clockZone").textContent = "Local time"; }
  (function(){
    var off = -new Date().getTimezoneOffset();
    var sgn = off < 0 ? "−" : "+", ao = Math.abs(off);
    var oh = Math.floor(ao/60), om = ao % 60;
    $("clockUTC").textContent = "UTC" + sgn + oh + (om ? ":" + p2(om) : "");
  })();

  /* rotor physics: heavy side wants to hang down, your mouse shakes it */
  var rot = { a: 0.6, v: 2.4 };

  /* pointer parallax */
  var tx = 0, ty = 0, px = 0, py = 0, lastX = null, lastY = null;
  window.addEventListener("pointermove", function(e){
    if (lastX !== null && !reduced){
      var dx = Math.max(-30, Math.min(30, e.clientX - lastX));
      var dy = Math.max(-30, Math.min(30, e.clientY - lastY));
      rot.v = Math.max(-9, Math.min(9, rot.v + dx*0.0016 + dy*0.0009));
    }
    lastX = e.clientX; lastY = e.clientY;
    tx = (e.clientX / window.innerWidth  - 0.5) * 2;
    ty = (e.clientY / window.innerHeight - 0.5) * 2;
  });

  /* flip */
  function setFlip(f){
    flipped = f;
    flipperEl.classList.toggle("flipped", f);
    $("flipLabel").textContent = f ? "VIEW DIAL" : "VIEW MOVEMENT";
    rot.v = Math.max(-9, Math.min(9, rot.v + (f ? 1 : -1) * 3.2));  // give the rotor a twirl
    if (!reduced){
      liftEl.classList.remove("go"); void liftEl.offsetWidth; liftEl.classList.add("go");
    }
  }
  tiltEl.addEventListener("click", function(){ setFlip(!flipped); });
  $("flipBtn").addEventListener("click", function(){ setFlip(!flipped); });
  window.addEventListener("keydown", function(e){
    if (e.key === "f" || e.key === "F") setFlip(!flipped);
  });

  /* ---------- the loop: real local time, sweeping seconds ---------- */
  var last = performance.now();
  function frame(now){
    var dt = Math.min(0.05, (now - last) / 1000); last = now;
    var t = now / 1000;

    var d = new Date();
    var s = d.getSeconds() + d.getMilliseconds()/1000;   // continuous -> true sweep
    var m = d.getMinutes() + s/60;                        // minute hand creeps, as on a real movement
    var h = d.getHours() % 12 + m/60;
    hourH.setAttribute("transform", "rotate(" + (h*30).toFixed(3) + " 300 380)");
    minH.setAttribute("transform",  "rotate(" + (m*6).toFixed(3)  + " 300 380)");
    secH.setAttribute("transform",  "rotate(" + (s*6).toFixed(3)  + " 300 380)");

    if (d.getSeconds() !== lastSec){
      lastSec = d.getSeconds();
      clockTime.textContent = p2(d.getHours()) + ":" + p2(d.getMinutes()) + ":" + p2(d.getSeconds());
      if (d.getDate() !== lastDate){ lastDate = d.getDate(); dateText.textContent = String(lastDate); }
    }

    /* balance wheel oscillating at 28,800 vph (4 Hz) + breathing hairspring */
    var w = 2 * Math.PI * 4 * t;
    var phi = 2.6 * Math.sin(w);
    bBalance.setAttribute("transform", "rotate(" + (phi*180/Math.PI).toFixed(2) + " 404 354)");
    var sc = 1 + 0.05 * Math.sin(w + 1.25);
    bSpringG.setAttribute("transform", "translate(404 354) scale(" + sc.toFixed(4) + ") translate(-404 -354)");

    /* going train */
    g1.setAttribute("transform", "rotate(" + (t*6).toFixed(2)  + ")");
    g2.setAttribute("transform", "rotate(" + (-t*48).toFixed(2) + ")");
    g3.setAttribute("transform", "rotate(" + (t*60).toFixed(2) + ")");

    /* rotor: gravity toward bottom, damping, a whisper of idle life */
    rot.v += (-Math.sin(rot.a) * 7 + 0.15 * Math.sin(t*0.9)) * dt;
    rot.v *= Math.exp(-0.9 * dt);
    rot.a += rot.v * dt;
    bRotor.setAttribute("transform", "rotate(" + (rot.a*180/Math.PI).toFixed(2) + " 300 380)");

    /* parallax tilt + travelling crystal reflections */
    var k = Math.min(1, dt * 4.5);
    px += (tx - px) * k; py += (ty - py) * k;
    if (!reduced){
      tiltEl.style.transform = "rotateY(" + (px*7).toFixed(2) + "deg) rotateX(" + (-py*5.5).toFixed(2) + "deg)";
      fSheen.setAttribute("transform", "translate(" + (px*16).toFixed(1) + " " + (py*11).toFixed(1) + ")");
      bSheen.setAttribute("transform", "translate(" + ((flipped?-1:1)*px*14).toFixed(1) + " " + (py*10).toFixed(1) + ")");
    }

    requestAnimationFrame(frame);
  }
  dateText.textContent = String(new Date().getDate());
  requestAnimationFrame(frame);
})();
</script>
</body>
</html>

Compare with

GLM 5.3 Prime: other attempts