Particle-1Particle AI

Run details

Model

particle-ai/particle-1

Route

OpenRouter API, one user message

Served by

Particle AI

Effort

high, OpenRouter's default for this model

Limits

60 min · 131,072 output tokens (the model's limit)

Date

28 Oct 2026

Time

2 min

Size

13 kB

Tokens

157 in, 20,896 out (15,747 of them thinking)

List price

$0.010 at today's price ($0.05 in / $0.5 out per M)

Paid

$0.021

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.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Particle — Chronomètre Automatique</title>
<style>
  :root { color-scheme: dark; }
  html, body { height: 100%; margin: 0; }
  body {
    background:
      radial-gradient(ellipse 65% 55% at 50% 32%, #23262e 0%, #101216 48%, #050608 100%),
      #050608;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
  }
  svg {
    height: min(95vh, 1050px);
    width: auto;
    max-width: 96vw;
    display: block;
  }
</style>
</head>
<body>

<svg viewBox="0 0 600 900" xmlns="http://www.w3.org/2000/svg" aria-label="Mechanical wristwatch showing local time">
  <defs>
    <!-- ===== Metals ===== -->
    <linearGradient id="steelFlank" x1="0.08" y1="0" x2="0.92" y2="1">
      <stop offset="0"    stop-color="#eef1f4"/>
      <stop offset="0.17" stop-color="#9aa0a8"/>
      <stop offset="0.33" stop-color="#565b62"/>
      <stop offset="0.50" stop-color="#d7dce2"/>
      <stop offset="0.66" stop-color="#7e848c"/>
      <stop offset="0.82" stop-color="#b9c0c8"/>
      <stop offset="1"    stop-color="#4b5057"/>
    </linearGradient>

    <linearGradient id="steelBezel" x1="0" y1="1" x2="1" y2="0">
      <stop offset="0"    stop-color="#4d525a"/>
      <stop offset="0.15" stop-color="#cfd5dc"/>
      <stop offset="0.30" stop-color="#f7f9fb"/>
      <stop offset="0.45" stop-color="#8f959d"/>
      <stop offset="0.60" stop-color="#e3e8ee"/>
      <stop offset="0.78" stop-color="#6a7078"/>
      <stop offset="0.90" stop-color="#c6ccd3"/>
      <stop offset="1"    stop-color="#3e434a"/>
    </linearGradient>

    <linearGradient id="handG" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0"    stop-color="#8e949b"/>
      <stop offset="0.32" stop-color="#f5f7f9"/>
      <stop offset="0.50" stop-color="#c3c9d0"/>
      <stop offset="0.68" stop-color="#f5f7f9"/>
      <stop offset="1"    stop-color="#7d838a"/>
    </linearGradient>

    <linearGradient id="goldG" x1="0" y1="0" x2="1" y2="1">
      <stop offset="0"    stop-color="#f9ecc0"/>
      <stop offset="0.30" stop-color="#dcb863"/>
      <stop offset="0.55" stop-color="#9a7723"/>
      <stop offset="0.78" stop-color="#e8cf87"/>
      <stop offset="1"    stop-color="#7d5f16"/>
    </linearGradient>

    <!-- ===== Dial ===== -->
    <radialGradient id="dialG" cx="0.5" cy="0.40" r="0.70">
      <stop offset="0"    stop-color="#33699f"/>
      <stop offset="0.26" stop-color="#1d4379"/>
      <stop offset="0.56" stop-color="#0e2749"/>
      <stop offset="0.82" stop-color="#071627"/>
      <stop offset="1"    stop-color="#03080f"/>
    </radialGradient>

    <!-- ===== Leather ===== -->
    <linearGradient id="leather" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0"    stop-color="#170c06"/>
      <stop offset="0.09" stop-color="#3b2314"/>
      <stop offset="0.23" stop-color="#5c3620"/>
      <stop offset="0.50" stop-color="#452718"/>
      <stop offset="0.77" stop-color="#5c3620"/>
      <stop offset="0.91" stop-color="#331d10"/>
      <stop offset="1"    stop-color="#140a04"/>
    </linearGradient>

    <linearGradient id="strapSheen" x1="0" y1="0" x2="1" y2="0">
      <stop offset="0"    stop-color="#ffffff" stop-opacity="0"/>
      <stop offset="0.30" stop-color="#ffffff" stop-opacity="0.07"/>
      <stop offset="0.50" stop-color="#ffffff" stop-opacity="0"/>
      <stop offset="1"    stop-color="#000000" stop-opacity="0.28"/>
    </linearGradient>

    <!-- ===== Glass / crystal ===== -->
    <linearGradient id="glass" x1="0.12" y1="0" x2="0.78" y2="1">
      <stop offset="0"    stop-color="#ffffff" stop-opacity="0.16"/>
      <stop offset="0.32" stop-color="#ffffff" stop-opacity="0.02"/>
      <stop offset="0.60" stop-color="#ffffff" stop-opacity="0"/>
      <stop offset="1"    stop-color="#ffffff" stop-opacity="0.07"/>
    </linearGradient>

    <!-- ===== Date window shade ===== -->
    <linearGradient id="dateShade" x1="0" y1="0" x2="0" y2="1">
      <stop offset="0"    stop-color="#000000" stop-opacity="0.22"/>
      <stop offset="0.35" stop-color="#000000" stop-opacity="0"/>
      <stop offset="0.80" stop-color="#000000" stop-opacity="0.05"/>
      <stop offset="1"    stop-color="#000000" stop-opacity="0.16"/>
    </linearGradient>

    <!-- ===== Halo behind the watch ===== -->
    <radialGradient id="halo" cx="0.5" cy="0.5" r="0.5">
      <stop offset="0"    stop-color="#8fb4ff" stop-opacity="0.10"/>
      <stop offset="0.55" stop-color="#4a6ea8" stop-opacity="0.04"/>
      <stop offset="1"    stop-color="#000000" stop-opacity="0"/>
    </radialGradient>

    <filter id="blur16" x="-50%" y="-50%" width="200%" height="200%">
      <feGaussianBlur stdDeviation="16"/>
    </filter>

    <clipPath id="dialClip">
      <circle cx="0" cy="0" r="180"/>
    </clipPath>
  </defs>

  <!-- ambient halo -->
  <ellipse cx="300" cy="430" rx="330" ry="330" fill="url(#halo)"/>

  <!-- ================= STRAPS ================= -->
  <g id="straps">
    <!-- upper strap -->
    <path d="M238,46 Q238,30 254,30 L346,30 Q362,30 362,46 L378,332 L222,332 Z" fill="url(#leather)"/>
    <path d="M238,46 Q238,30 254,30 L346,30 Q362,30 362,46 L378,332 L222,332 Z" fill="url(#strapSheen)"/>
    <path d="M246,48 L231,322" fill="none" stroke="#c69a63" stroke-width="1.8" stroke-dasharray="7 6" opacity="0.45"/>
    <path d="M354,48 L369,322" fill="none" stroke="#c69a63" stroke-width="1.8" stroke-dasharray="7 6" opacity="0.45"/>

    <!-- lower strap -->
    <path d="M222,568 L378,568 L364,856 Q364,872 348,872 L252,872 Q236,872 236,856 Z" fill="url(#leather)"/>
    <path d="M222,568 L378,568 L364,856 Q364,872 348,872 L252,872 Q236,872 236,856 Z" fill="url(#strapSheen)"/>
    <path d="M230,578 L244,858" fill="none" stroke="#c69a63" stroke-width="1.8" stroke-dasharray="7 6" opacity="0.45"/>
    <path d="M370,578 L356,858" fill="none" stroke="#c69a63" stroke-width="1.8" stroke-dasharray="7 6" opacity="0.45"/>
  </g>

  <!-- ================= WATCH ================= -->
  <g transform="translate(300,430)">

    <!-- cast shadow under the case -->
    <ellipse cx="4" cy="14" rx="196" ry="196" fill="#000000" opacity="0.62" filter="url(#blur16)"/>

    <!-- crown at 3 o'clock -->
    <g id="crown">
      <rect x="190" y="-15" width="30" height="30" rx="7" fill="url(#steelBezel)"/>
      <g stroke="#31363d" stroke-width="1.4" opacity="0.55">
        <line x1="197" y1="-12" x2="197" y2="12"/>
        <line x1="202" y1="-13.5" x2="202" y2="13.5"/>
        <line x1="207" y1="-13.5" x2="207" y2="13.5"/>
        <line x1="212" y1="-12" x2="212" y2="12"/>
      </g>
    </g>

    <!-- case & bezel -->
    <circle r="203" fill="url(#steelFlank)"/>
    <circle r="203" fill="none" stroke="#1b1f24" stroke-width="1.6" opacity="0.9"/>
    <circle r="196" fill="url(#steelBezel)"/>
    <circle r="196" fill="none" stroke="#ffffff" stroke-width="0.9" opacity="0.28"/>
    <circle r="189" fill="url(#steelFlank)"/>
    <circle r="189" fill="none" stroke="#0b0d10" stroke-width="2" opacity="0.55"/>
    <circle r="182" fill="#04060a"/>

    <!-- ================= DIAL ================= -->
    <g clip-path="url(#dialClip)">
      <circle r="180" fill="url(#dialG)"/>
      <g id="sunburst"></g>
      <g id="minuteTrack"></g>
      <g id="indices"></g>

      <!-- signature -->
      <text x="0" y="-88" text-anchor="middle" font-family="Georgia, 'Times New Roman', serif"
            font-size="17" letter-spacing="5" fill="#e9eff8" opacity="0.96">PARTICLE</text>
      <text x="0" y="-70" text-anchor="middle" font-family="Georgia, 'Times New Roman', serif"
            font-size="7.5" letter-spacing="3.6" fill="#8ea6c6" opacity="0.92">GENÈVE</text>
      <text x="0" y="118" text-anchor="middle" font-family="Georgia, 'Times New Roman', serif"
            font-size="7.5" letter-spacing="3.6" fill="#8ea6c6" opacity="0.92">AUTOMATIQUE</text>

      <!-- date window -->
      <g id="dateWindow">
        <rect x="100" y="-22" width="58" height="44" rx="6" fill="url(#steelBezel)" stroke="#171b20" stroke-width="1"/>
        <rect x="105" y="-17" width="48" height="34" rx="3" fill="#f5f1e6"/>
        <rect x="105" y="-17" width="48" height="34" rx="3" fill="url(#dateShade)"/>
        <text id="dateText" x="129" y="0" text-anchor="middle" dominant-baseline="central"
              font-family="Georgia, 'Times New Roman', serif" font-size="24" fill="#14171c">1</text>
      </g>
    </g>

    <!-- ================= HANDS ================= -->
    <g id="hourHand">
      <polygon points="0,-96 8.5,-20 8.5,14 0,21 -8.5,14 -8.5,-20" fill="url(#handG)"/>
      <polygon points="0,-86 3.4,-22 3.4,6 -3.4,6 -3.4,-22" fill="#eae6d6" opacity="0.92"/>
    </g>

    <g id="minHand">
      <polygon points="0,-152 6,-24 6,16 0,22 -6,16 -6,-24" fill="url(#handG)"/>
      <polygon points="0,-134 2.6,-26 2.6,4 -2.6,4 -2.6,-26" fill="#eae6d6" opacity="0.92"/>
    </g>

    <g id="secHand">
      <line x1="0" y1="42" x2="0" y2="-158" stroke="#8a6a1e" stroke-width="3.2" stroke-linecap="round"/>
      <line x1="0" y1="42" x2="0" y2="-158" stroke="#e8c85c" stroke-width="1.5" stroke-linecap="round"/>
      <circle cx="0" cy="35" r="7" fill="url(#goldG)" stroke="#7d5f16" stroke-width="0.9"/>
      <circle cx="0" cy="-158" r="2.2" fill="#e8c85c"/>
    </g>

    <!-- centre cap -->
    <circle r="10" fill="url(#steelBezel)" stroke="#242a31" stroke-width="1"/>
    <circle r="4.6" fill="#191d23"/>
    <circle r="4.6" fill="none" stroke="#8d939b" stroke-width="0.8" opacity="0.7"/>

    <!-- ================= CRYSTAL ================= -->
    <g clip-path="url(#dialClip)" pointer-events="none">
      <circle r="180" fill="url(#glass)"/>
      <ellipse cx="-46" cy="-102" rx="112" ry="54" fill="#ffffff" opacity="0.065"
               transform="rotate(-28 -46 -102)"/>
      <ellipse cx="60" cy="128" rx="90" ry="42" fill="#ffffff" opacity="0.03"
               transform="rotate(-28 60 128)"/>
    </g>

    <!-- bezel inner highlight -->
    <circle r="181" fill="none" stroke="#ffffff" stroke-width="1" opacity="0.14"/>
  </g>
</svg>

<script>
(function () {
  "use strict";

  var NS = "http://www.w3.org/2000/svg";
  var D2R = Math.PI / 180;

  function el(name, attrs) {
    var n = document.createElementNS(NS, name);
    for (var k in attrs) {
      if (Object.prototype.hasOwnProperty.call(attrs, k)) n.setAttribute(k, attrs[k]);
    }
    return n;
  }

  /* ---------- sunburst dial finish ---------- */
  var sun = document.getElementById("sunburst");
  var frag = document.createDocumentFragment();
  for (var i = 0; i < 300; i++) {
    var a = (i * 1.2) * D2R;
    var sx = Math.sin(a), cy = -Math.cos(a);
    var op = 0.012 + 0.048 * Math.pow(Math.abs(Math.cos(a * 2)), 3);
    frag.appendChild(el("line", {
      x1: (sx * 10).toFixed(2),
      y1: (cy * 10).toFixed(2),
      x2: (sx * 180).toFixed(2),
      y2: (cy * 180).toFixed(2),
      stroke: "#cfe1ff",
      "stroke-width": "1.1",
      opacity: op.toFixed(3)
    }));
  }
  sun.appendChild(frag);

  /* ---------- minute track ---------- */
  var track = document.getElementById("minuteTrack");
  var tf = document.createDocumentFragment();
  for (var m = 0; m < 60; m++) {
    var ang = (m * 6) * D2R;
    var five = (m % 5 === 0);
    var r1 = five ? 161 : 168;
    var r2 = 175;
    tf.appendChild(el("line", {
      x1: (Math.sin(ang) * r1).toFixed(2),
      y1: (-Math.cos(ang) * r1).toFixed(2),
      x2: (Math.sin(ang) * r2).toFixed(2),
      y2: (-Math.cos(ang) * r2).toFixed(2),
      stroke: five ? "#e8f0fd" : "#a9bed9",
      "stroke-width": five ? 2.2 : 1,
      "stroke-linecap": "round",
      opacity: five ? 0.95 : 0.55
    }));
  }
  track.appendChild(tf);

  /* ---------- applied hour indices ---------- */
  var idx = document.getElementById("indices");
  for (var h = 0; h < 12; h++) {
    if (h === 3) continue; /* date window lives at 3 */
    var g = el("g", { transform: "rotate(" + (h * 30) + ")" });

    function bar(x, y, w, hh, rx, fill, op) {
      var attrs = { x: x, y: y, width: w, height: hh, rx: rx, fill: fill };
      if (op !== undefined) attrs.opacity = op;
      if (fill === "url(#steelBezel)") {
        attrs.stroke = "#0a1220";
        attrs["stroke-width"] = "0.7";
        attrs["stroke-opacity"] = "0.75";
      }
      g.appendChild(el("rect", attrs));
    }

    if (h === 0) {
      bar(-11.5, -151, 7, 29, 2, "url(#steelBezel)");
      bar(4.5, -151, 7, 29, 2, "url(#steelBezel)");
      bar(-9.8, -146, 3.6, 20, 1.4, "#efe9d1", 0.9);
      bar(6.2, -146, 3.6, 20, 1.4, "#efe9d1", 0.9);
    } else {
      bar(-4.6, -151, 9.2, 29, 2, "url(#steelBezel)");
      bar(-2.1, -146, 4.2, 20, 1.4, "#efe9d1", 0.9);
    }
    idx.appendChild(g);
  }

  /* ---------- time keeping ---------- */
  var hourHand = document.getElementById("hourHand");
  var minHand = document.getElementById("minHand");
  var secHand = document.getElementById("secHand");
  var dateText = document.getElementById("dateText");
  var lastDate = -1;

  function frame() {
    var now = new Date();
    var s = now.getSeconds() + now.getMilliseconds() / 1000;
    var m = now.getMinutes() + s / 60;
    var h = (now.getHours() % 12) + m / 60;

    secHand.setAttribute("transform", "rotate(" + (s * 6).toFixed(3) + ")");
    minHand.setAttribute("transform", "rotate(" + (m * 6).toFixed(3) + ")");
    hourHand.setAttribute("transform", "rotate(" + (h * 30).toFixed(3) + ")");

    var d = now.getDate();
    if (d !== lastDate) {
      dateText.textContent = d;
      lastDate = d;
    }

    requestAnimationFrame(frame);
  }

  requestAnimationFrame(frame);
})();
</script>
</body>
</html>