• Updated 1 Nov, 11:50 UTC
  • Next run 2 Nov, 05:17 UTCNext 2 Nov 05:17
  • Last 7 days: 4 new models · 99 runs7 d: 4 models · 99 runs
Wristwatch that shows the current time

Fugu MaxSakana AI

Network offOpen alone

Run details

Model
sakana/fugu-max
Route
OpenRouter API, one user message
Served by
Sakana AI
Effort
high, OpenRouter's default for this model
Limits
60 min · 128,000 output tokens (the model's limit)
Date
1 Nov 2026
Time
5 min 53 s
Size
16 kB
Tokens
181 in, 38,370 out (32,564 of them thinking)
List price
$0.23 at today's price ($2.00 in / $6.00 out per M)
Paid
$0.23

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

16 kB 311 lines Raw

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>FUGU Genève · Automatic</title>
<style>
  html, body { height: 100%; margin: 0; }
  body {
    background: radial-gradient(1100px 720px at 50% 40%, #24272d 0%, #14161a 48%, #07080a 100%);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  svg { height: min(97vh, 132vw); display: block; }
</style>
</head>
<body>
<svg viewBox="0 0 600 800" xmlns="http://www.w3.org/2000/svg" role="img"
     aria-label="Mechanical wristwatch showing the current local time">
  <defs>
    <!-- polished metals -->
    <linearGradient id="gCase" x1="0" y1="0" x2=".9" y2="1">
      <stop offset="0" stop-color="#f4f5f6"/><stop offset=".22" stop-color="#c2c6ca"/>
      <stop offset=".45" stop-color="#787d82"/><stop offset=".62" stop-color="#d6d9dc"/>
      <stop offset=".82" stop-color="#83878c"/><stop offset="1" stop-color="#55595e"/>
    </linearGradient>
    <linearGradient id="gBezel" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#fdfefe"/><stop offset=".16" stop-color="#c8ccd0"/>
      <stop offset=".38" stop-color="#7b7f84"/><stop offset=".55" stop-color="#e0e3e6"/>
      <stop offset=".78" stop-color="#8b8f94"/><stop offset="1" stop-color="#c4c8cc"/>
    </linearGradient>
    <linearGradient id="gRehaut" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#04060a"/><stop offset=".55" stop-color="#171b21"/>
      <stop offset="1" stop-color="#3a3f47"/>
    </linearGradient>
    <linearGradient id="gMetal" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#fdfdfe"/><stop offset=".32" stop-color="#c9cdd1"/>
      <stop offset=".58" stop-color="#767a7f"/><stop offset="1" stop-color="#45494e"/>
    </linearGradient>
    <linearGradient id="gCrown" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#e9ebee"/><stop offset=".35" stop-color="#a2a7ac"/>
      <stop offset=".65" stop-color="#5f6368"/><stop offset="1" stop-color="#c9cdd1"/>
    </linearGradient>
    <!-- dauphine hand facets -->
    <linearGradient id="gFacetL" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#ffffff"/><stop offset="1" stop-color="#9aa0a7"/>
    </linearGradient>
    <linearGradient id="gFacetR" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0" stop-color="#5c6167"/><stop offset="1" stop-color="#22262a"/>
    </linearGradient>
    <linearGradient id="gSec" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#f6f8fa"/><stop offset="1" stop-color="#8f959c"/>
    </linearGradient>
    <radialGradient id="gCW">
      <stop offset="0" stop-color="#ffffff"/><stop offset=".6" stop-color="#a9adb3"/>
      <stop offset="1" stop-color="#4a4e53"/>
    </radialGradient>
    <radialGradient id="gHub">
      <stop offset="0" stop-color="#ffffff"/><stop offset=".55" stop-color="#b0b4b9"/>
      <stop offset="1" stop-color="#565a5f"/>
    </radialGradient>
    <!-- date disc & dial vignette -->
    <radialGradient id="gDate">
      <stop offset="0" stop-color="#fefcf4"/><stop offset=".8" stop-color="#efe9d8"/>
      <stop offset="1" stop-color="#ddd5bf"/>
    </radialGradient>
    <radialGradient id="gVin">
      <stop offset=".5" stop-color="#000" stop-opacity="0"/>
      <stop offset=".82" stop-color="#020810" stop-opacity=".28"/>
      <stop offset="1" stop-color="#00040c" stop-opacity=".55"/>
    </radialGradient>
    <!-- leather -->
    <linearGradient id="gLeatherT" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#3c2c1d"/><stop offset="1" stop-color="#1a120b"/>
    </linearGradient>
    <linearGradient id="gLeatherB" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#241a10"/><stop offset="1" stop-color="#0e0a06"/>
    </linearGradient>
    <linearGradient id="gScale" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#4c3a27"/><stop offset=".35" stop-color="#2f2216"/>
      <stop offset="1" stop-color="#1a1109"/>
    </linearGradient>
    <!-- sapphire reflections -->
    <linearGradient id="gSheenA" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#fff" stop-opacity="0"/>
      <stop offset=".5" stop-color="#fff" stop-opacity=".11"/>
      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="gSheenB" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0" stop-color="#fff" stop-opacity="0"/>
      <stop offset=".5" stop-color="#fff" stop-opacity=".07"/>
      <stop offset="1" stop-color="#fff" stop-opacity="0"/>
    </linearGradient>
    <filter id="b6" x="-30%" y="-30%" width="160%" height="160%"><feGaussianBlur stdDeviation="7"/></filter>
    <filter id="b2" x="-80%" y="-80%" width="260%" height="260%"><feGaussianBlur stdDeviation="1.4"/></filter>
    <filter id="b08" x="-40%" y="-40%" width="180%" height="180%"><feGaussianBlur stdDeviation=".7"/></filter>
    <clipPath id="cryst"><circle cx="300" cy="400" r="179"/></clipPath>
    <path id="hourShape" d="M0 -112 L8 -26 5.5 18 -5.5 18 -8 -26 Z"/>
    <path id="minShape"  d="M0 -152 L7 -30 4.8 20 -4.8 20 -7 -30 Z"/>
  </defs>

  <!-- alligator strap (filled by script) -->
  <g id="strap"></g>

  <!-- grounding shadow -->
  <circle cx="300" cy="400" r="212" fill="#000" opacity="0.45" filter="url(#b6)"/>

  <!-- lugs -->
  <g fill="url(#gCase)" stroke="#000" stroke-opacity=".35" stroke-width="1">
    <rect x="235" y="176" width="32" height="54" rx="13" transform="rotate(-6 251 203)"/>
    <rect x="333" y="176" width="32" height="54" rx="13" transform="rotate(6 349 203)"/>
    <rect x="235" y="470" width="32" height="54" rx="13" transform="rotate(6 251 497)"/>
    <rect x="333" y="470" width="32" height="54" rx="13" transform="rotate(-6 349 497)"/>
  </g>

  <!-- fluted crown -->
  <g>
    <rect x="494" y="392" width="16" height="16" fill="#565a5f"/>
    <rect x="502" y="386" width="26" height="28" rx="4" fill="url(#gCrown)" stroke="#101216" stroke-width=".8"/>
    <path d="M508 388 V412 M513 387.5 V412.5 M518 388 V412 M523 389 V411" stroke="#000" stroke-opacity=".32" stroke-width="1.1"/>
    <path d="M505.5 389 V411" stroke="#fff" stroke-opacity=".4" stroke-width="1"/>
  </g>

  <!-- case band, bezel, rehaut -->
  <circle cx="300" cy="400" r="201" fill="none" stroke="url(#gCase)" stroke-width="10"/>
  <circle cx="300" cy="400" r="187" fill="none" stroke="url(#gBezel)" stroke-width="20"/>
  <circle cx="300" cy="400" r="173.5" fill="none" stroke="url(#gRehaut)" stroke-width="9"/>
  <circle cx="300" cy="400" r="178.5" fill="none" stroke="#fff" stroke-opacity=".15" stroke-width="1"/>

  <!-- dial -->
  <circle cx="300" cy="400" r="170" fill="#0a1424"/>
  <g id="burst"></g>
  <circle cx="300" cy="400" r="170" fill="url(#gVin)"/>
  <circle cx="300" cy="400" r="168.5" fill="none" stroke="#000" stroke-opacity=".4" stroke-width="3.5" filter="url(#b08)"/>
  <g id="track"></g>

  <!-- dial typography -->
  <g font-family="Georgia, 'Times New Roman', Times, serif" text-anchor="middle">
    <rect x="296" y="314" width="8" height="8" transform="rotate(45 300 318)"
          fill="url(#gMetal)" stroke="#000" stroke-opacity=".3" stroke-width=".4"/>
    <text x="303.5" y="352" font-size="23" letter-spacing="7" fill="#eef1f5">FUGU</text>
    <text x="301.6" y="370" font-size="9" letter-spacing="3.2" fill="#aab1bc">GENÈVE</text>
    <text x="301.5" y="452" font-size="9.5" letter-spacing="3" fill="#aab1bc">AUTOMATIC</text>
    <text x="286" y="567" font-size="6.5" letter-spacing="1.5" fill="#8b929c" text-anchor="end">SWISS</text>
    <text x="314" y="567" font-size="6.5" letter-spacing="1.5" fill="#8b929c">MADE</text>
  </g>

  <!-- date window at 3 o'clock -->
  <g>
    <rect x="408.5" y="384.5" width="41" height="31" rx="2.5" fill="#000" opacity=".45"
          filter="url(#b08)" transform="translate(1.6 2.6)"/>
    <rect x="408.5" y="384.5" width="41" height="31" rx="2.5" fill="url(#gMetal)"
          stroke="#0a0c10" stroke-width=".8"/>
    <rect x="412.5" y="388.5" width="33" height="23" fill="url(#gDate)" stroke="#6c6552" stroke-width=".7"/>
    <rect x="412.5" y="388.5" width="33" height="5" fill="#000" opacity=".13"/>
    <text id="dateTxt" x="429" y="406.5" font-size="18.5" font-weight="bold" fill="#221f19"
          text-anchor="middle" font-family="Georgia, 'Times New Roman', Times, serif">–</text>
  </g>

  <!-- applied indices (filled by script) -->
  <g id="idx"></g>

  <!-- hour hand -->
  <g id="hourRot">
    <g transform="translate(300 400)">
      <use href="#hourShape" fill="#000" opacity=".28" filter="url(#b2)" transform="translate(2.5 4.5)"/>
      <polygon points="0,-112 -8,-26 -5.5,18 0,18" fill="url(#gFacetL)"/>
      <polygon points="0,-112 8,-26 5.5,18 0,18" fill="url(#gFacetR)"/>
      <use href="#hourShape" fill="none" stroke="#000" stroke-opacity=".3" stroke-width=".6"/>
      <line x1="0" y1="18" x2="0" y2="-110" stroke="#fff" stroke-opacity=".45" stroke-width=".5"/>
    </g>
  </g>
  <!-- minute hand -->
  <g id="minRot">
    <g transform="translate(300 400)">
      <use href="#minShape" fill="#000" opacity=".28" filter="url(#b2)" transform="translate(2.5 4.5)"/>
      <polygon points="0,-152 -7,-30 -4.8,20 0,20" fill="url(#gFacetL)"/>
      <polygon points="0,-152 7,-30 4.8,20 0,20" fill="url(#gFacetR)"/>
      <use href="#minShape" fill="none" stroke="#000" stroke-opacity=".3" stroke-width=".6"/>
      <line x1="0" y1="20" x2="0" y2="-150" stroke="#fff" stroke-opacity=".45" stroke-width=".5"/>
    </g>
  </g>
  <circle cx="300" cy="400" r="10.5" fill="url(#gHub)" stroke="#000" stroke-opacity=".35" stroke-width=".7"/>

  <!-- seconds hand -->
  <g id="secRot">
    <g transform="translate(300 400)">
      <g opacity=".25" filter="url(#b2)" transform="translate(2 3.5)">
        <rect x="-1.1" y="-160" width="2.2" height="198" fill="#000"/>
        <circle cx="0" cy="38" r="9.5" fill="#000"/>
      </g>
      <rect x="-1.1" y="-160" width="2.2" height="198" fill="url(#gSec)"/>
      <circle cx="0" cy="38" r="9.5" fill="url(#gCW)" stroke="#000" stroke-opacity=".3" stroke-width=".6"/>
      <circle cx="0" cy="38" r="3" fill="#0d1118"/>
    </g>
  </g>
  <circle cx="300" cy="400" r="4.8" fill="url(#gHub)" stroke="#000" stroke-opacity=".4" stroke-width=".5"/>
  <circle cx="300" cy="400" r="1.6" fill="#10141a"/>

  <!-- sapphire crystal reflections -->
  <g clip-path="url(#cryst)" pointer-events="none">
    <g id="rim"></g>
    <rect x="40" y="150" width="520" height="130" fill="url(#gSheenA)" transform="rotate(-32 300 400)"/>
    <rect x="120" y="505" width="360" height="70" fill="url(#gSheenB)" transform="rotate(-32 300 400)"/>
  </g>
  <circle cx="300" cy="400" r="206" fill="none" stroke="#000" stroke-opacity=".5" stroke-width="1.4"/>
</svg>

<script>
(function () {
  "use strict";
  const CX = 300, CY = 400;

  /* ---- sunburst dial: 144 radial wedges, brightness sweeping with angle ---- */
  let burst = "";
  const N = 144, R = 170;
  for (let i = 0; i < N; i++) {
    const a0 = (i / N) * 2 * Math.PI;
    const a1 = ((i + 1) / N) * 2 * Math.PI;
    const mid = (a0 + a1) / 2;
    const b = Math.cos(2 * (mid - 0.75 * Math.PI)); // bright lobes upper-left / lower-right
    const l = 17 + 11 * (0.5 + 0.5 * b);
    const hue = 221 - 7 * b;
    const x0 = CX + R * Math.cos(a0), y0 = CY + R * Math.sin(a0);
    const x1 = CX + R * Math.cos(a1), y1 = CY + R * Math.sin(a1);
    burst += '<path d="M' + CX + ' ' + CY +
             ' L' + x0.toFixed(2) + ' ' + y0.toFixed(2) +
             ' A' + R + ' ' + R + ' 0 0 1 ' + x1.toFixed(2) + ' ' + y1.toFixed(2) + ' Z"' +
             ' fill="hsl(' + hue.toFixed(1) + ', 62%, ' + l.toFixed(1) + '%)"' +
             ' stroke="#000" stroke-opacity=".14" stroke-width=".4"/>';
  }
  document.getElementById("burst").innerHTML = burst;

  /* ---- "chemin de fer" minute track ---- */
  let tr = '<circle cx="300" cy="400" r="160" fill="none" stroke="#d9dfef" stroke-opacity=".5" stroke-width=".7"/>' +
           '<circle cx="300" cy="400" r="153.5" fill="none" stroke="#d9dfef" stroke-opacity=".5" stroke-width=".7"/>';
  for (let i = 0; i < 60; i++) {
    const rad = i * 6 * Math.PI / 180, five = i % 5 === 0;
    const r0 = five ? 150 : 153.5, r1 = 160;
    tr += '<line x1="' + (CX + r0 * Math.sin(rad)).toFixed(1) + '" y1="' + (CY - r0 * Math.cos(rad)).toFixed(1) +
          '" x2="' + (CX + r1 * Math.sin(rad)).toFixed(1) + '" y2="' + (CY - r1 * Math.cos(rad)).toFixed(1) +
          '" stroke="#e6ebf7" stroke-opacity="' + (five ? .95 : .55) +
          '" stroke-width="' + (five ? 1.7 : .7) + '"/>';
  }
  document.getElementById("track").innerHTML = tr;

  /* ---- applied polished baton indices (double at 12, none at 3 for the date) ---- */
  const baton = function (x, w) {
    return '<rect x="' + x + '" y="254" width="' + w + '" height="28" rx="1.1" fill="#000" opacity=".4" transform="translate(1.2 2)"/>' +
           '<rect x="' + x + '" y="254" width="' + w + '" height="28" rx="1.1" fill="url(#gMetal)" stroke="#0a0c10" stroke-width=".55"/>';
  };
  let idx = "";
  [1, 2, 4, 5, 6, 7, 8, 9, 10, 11].forEach(function (h) {
    idx += '<g transform="rotate(' + (h * 30) + ' 300 400)">' + baton(296, 8) + '</g>';
  });
  idx += '<g>' + baton(288.5, 7) + baton(304.5, 7) + '</g>';
  document.getElementById("idx").innerHTML = idx;

  /* ---- alligator strap with stitching ---- */
  let s = '<rect x="230" y="-40" width="140" height="440" fill="url(#gLeatherT)"/>' +
          '<rect x="230" y="400" width="140" height="440" fill="url(#gLeatherB)"/>';
  for (let y = -30; y < 840; y += 27) {
    const o = (0.72 + 0.28 * Math.abs(Math.sin(y * 0.37))).toFixed(2);
    s += '<g opacity="' + o + '" stroke="#000" stroke-opacity=".38" stroke-width=".7" fill="url(#gScale)">' +
         '<rect x="240" y="' + y + '" width="31" height="23" rx="7"/>' +
         '<rect x="275" y="' + y + '" width="50" height="23" rx="8"/>' +
         '<rect x="329" y="' + y + '" width="31" height="23" rx="7"/></g>';
  }
  s += '<path d="M236 -40 V840 M364 -40 V840" stroke="#c9ad7c" stroke-opacity=".4" stroke-width="1.4" stroke-dasharray="7 6" fill="none"/>' +
       '<path d="M231 -40 V840 M369 -40 V840" stroke="#fff" stroke-opacity=".05" stroke-width="1.2" fill="none"/>';
  document.getElementById("strap").innerHTML = s;

  /* ---- crystal rim glints ---- */
  const arc = function (r, a0, a1, col, sw) {
    const p = function (a) {
      const t = a * Math.PI / 180;
      return (CX + r * Math.cos(t)).toFixed(2) + ' ' + (CY + r * Math.sin(t)).toFixed(2);
    };
    return '<path d="M' + p(a0) + ' A' + r + ' ' + r + ' 0 0 1 ' + p(a1) +
           '" fill="none" stroke="' + col + '" stroke-width="' + sw +
           '" stroke-linecap="round" filter="url(#b08)"/>';
  };
  document.getElementById("rim").innerHTML =
    arc(171, 195, 255, "rgba(255,255,255,.32)", 3) +
    arc(171, 25, 80, "rgba(255,255,255,.12)", 2.5);

  /* ---- the movement: 28,800 vph, i.e. 8 beats per second ---- */
  const hourRot = document.getElementById("hourRot");
  const minRot  = document.getElementById("minRot");
  const secRot  = document.getElementById("secRot");
  const dateTxt = document.getElementById("dateTxt");
  let lastDate = -1;

  function tick() {
    const now = new Date();
    // quantise to 1/8 s so the seconds hand "sweeps" in micro-steps like a real escapement
    const s = now.getSeconds() + Math.floor(now.getMilliseconds() / 125) / 8;
    const m = now.getMinutes() + s / 60;              // minute hand creeps continuously
    const h = now.getHours() % 12 + m / 60;
    secRot.setAttribute("transform",  "rotate(" + (s * 6).toFixed(3)  + " 300 400)");
    minRot.setAttribute("transform",  "rotate(" + (m * 6).toFixed(3)  + " 300 400)");
    hourRot.setAttribute("transform", "rotate(" + (h * 30).toFixed(3) + " 300 400)");
    const d = now.getDate();
    if (d !== lastDate) { lastDate = d; dateTxt.textContent = d; } // date jumps at midnight
    requestAnimationFrame(tick);
  }
  tick();
})();
</script>
</body>
</html>

Compare with

Grok 4.7Qwen3.8 Max (0902)GPT-6.1 Terra

Fugu Max: other attempts