Die Uhr bekommt Kometenschweife -- und die Koepfe gleiten, statt zu springen

Filipe: "nehm diese uhr bitte und passe sie so gut wie es geht an, auch
die lichter von sekunden, minuten und stunden perfekt anpassen ...
überrasch mich."

ZWEI DINGE, DIE EINE UHR LEBENDIG MACHEN.

1. DER KOMETENSCHWEIF. Ein Bogen in gleichmaessiger Farbe zeigt einen
   STAND. Ein Bogen, der zur Spitze hin heller wird, zeigt eine
   RICHTUNG -- man sieht ohne Nachdenken, wo "jetzt" ist und wohin es
   laeuft. Bei drei Ringen uebereinander ist das der Unterschied
   zwischen Ablesen und Erkennen.

   Gebaut als zweites, kuerzeres Segment ueber dem Bogen: die letzten
   rund 40 Grad, heller, mit runder Kappe. Ein Verlauf ENTLANG der Bahn
   geht in SVG nicht -- `linearGradient` folgt einer Geraden, keiner
   Kurve. Zwei Lagen sind der ehrliche Weg dorthin.

   Die Lage wird gerechnet, nicht geschaetzt: Bei Umfang U, Fortschritt
   a und Schweiflaenge s soll das Segment von (aU - s) bis aU liegen.
   Mit `dasharray: s, U-s` beginnt das sichtbare Stueck bei (U - offset),
   also ist offset = U*(1-a) + s. Die Laenge wird bei kurzen Boegen
   mitgekuerzt -- sonst haenge der Schweif am Anfang einer Minute am
   ENDE des Kreises, sichtbar als heller Strich bei zwoelf Uhr.

2. DIE KOEPFE GLEITEN. Bisher sprangen sie einmal je Sekunde. Jetzt
   uebernimmt der Browser die Bewegung dazwischen (Ueberblendung von
   0,92 s) -- das Skript rechnet weiterhin nur EINMAL je Sekunde. Sechzig
   Bildberechnungen je Sekunde wuerden auf einer stundenlang offenen
   Seite den Rechner warm halten; diese Loesung kostet nichts.

ZWEI FEHLER DABEI, BEIDE NUR IM BILD ZU SEHEN:

  Der erste Versuch rechnete die Winkel aus der vollen Unixzeit, damit
  sie immer weiterwachsen (sonst liefe die Ueberblendung einmal je
  Minute rueckwaerts durchs Zifferblatt). Ergebnis:
  `rotate(1.07333e+10deg)` -- Exponentialschreibweise, Nachkommastellen
  weg. Die Koepfe standen sichtbar neben ihren Boegen, der rote auf der
  anderen Seite der Uhr. Jetzt zaehlt eine eigene Uhr ab dem ersten
  Takt: klein genug zum Rechnen, wachsend genug fuer die Ueberblendung.

  Und ich hatte den Schweifen `rotate(-90deg)` gegeben, damit sie bei
  zwoelf beginnen -- das SVG ist aber bereits gedreht. Sie standen
  dadurch exakt eine Vierteldrehung daneben: oben links, waehrend die
  Boegen oben rechts endeten.

NACHGEMESSEN, in Grad statt nach Augenmass:
  Kopf gegen Bogenende      Abweichung 0,00° / 0,00° / 0,03°
  Schweifende gegen Bogen   Abweichung 0,0° / 0,0° / 0,0°

pruef-start-ansicht EXIT=0 (140), pruef-css-klassen EXIT=0 (28).
Bei `prefers-reduced-motion` gleiten die Koepfe nicht -- sie springen
dann wie vorher.

Co-Authored-By: Claude Opus 5 <[email protected]>

workspace/start.html

@@ -286,6 +286,34 @@
             <circle class="uhr__minute"  data-ring="minute"  cx="50" cy="50" r="38.5" id="uhr-minute" />
             <circle class="uhr__stunde"  data-ring="stunde"  cx="50" cy="50" r="31.5" id="uhr-stunde" />
 
+            <!-- ==== DER KOMETENSCHWEIF (08.09.2026) ==================
+
+                 Filipe: "auch die lichter von sekunden, minuten und
+                 stunden perfekt anpassen, wie die läuft und aussieht
+                 soll wirklich mega perfekt sein."
+
+                 Ein Bogen in gleichmaessiger Farbe zeigt einen STAND.
+                 Ein Bogen, der zur Spitze hin heller wird, zeigt eine
+                 RICHTUNG -- man sieht ohne Nachdenken, wo "jetzt" ist
+                 und wohin es laeuft. Das ist der Unterschied zwischen
+                 einer Anzeige und einem Instrument.
+
+                 Gebaut als eigenes Segment ueber dem Bogen: die letzten
+                 rund 40 Grad vor der Spitze, heller und mit runder
+                 Kappe. Ein Verlauf ENTLANG des Kreises geht in SVG
+                 nicht -- linearGradient folgt einer Geraden, nicht
+                 einer Bahn. Zwei Lagen uebereinander sind der ehrliche
+                 Weg dorthin.
+
+                 Sie liegen VOR der Oberkante, damit die helle Kante
+                 auch auf dem Schweif sitzt und nicht darunter
+                 verschwindet. -->
+            <g class="uhr__spur">
+              <circle class="uhr__spur-bahn" data-spur="sekunde" cx="50" cy="50" r="45.5" />
+              <circle class="uhr__spur-bahn" data-spur="minute"  cx="50" cy="50" r="38.5" />
+              <circle class="uhr__spur-bahn" data-spur="stunde"  cx="50" cy="50" r="31.5" />
+            </g>
+
             <g class="uhr__kante" transform="translate(0 -0.4)">
               <circle class="uhr__sekunde" data-ring="sekunde" cx="50" cy="50" r="45.5" />
               <circle class="uhr__minute"  data-ring="minute"  cx="50" cy="50" r="38.5" />