From 1d0451948ac69f45ff8f73dcad2bb583c7c32fcd Mon Sep 17 00:00:00 2001 From: Dogfather Date: Tue, 8 Sep 2026 14:02:05 +0200 Subject: [PATCH] Die drei Bahnen der Uhr gluehen von innen -- und die Stunde wird Bronze Filipe: "die minuten sekunden und stunden soll viel spezieller, krasser und geiler sein, noch vieeeel mehr." Die Bahnen waren flache Striche in einem Verlauf -- sauber gebaut, aber ohne Koerper. Drei Aenderungen, und alle drei arbeiten mit LICHT statt mit mehr Farbe: 1. EIGENLEUCHTEN je Bahn, in ihrer eigenen Farbe. Auf einem schwarzen Zifferblatt kann man einen Strich entweder heller machen (dann blendet er) oder leuchten lassen (dann wirkt er wie eine Anzeige, die Licht abgibt). Zwei Schatten je Bahn: der enge gibt die Kante, der weite die Aura. 2. DIE STUNDE WIRD WARM. Sie lief in Schwarzsilber und war damit dem Zifferblatt am aehnlichsten -- ausgerechnet die Bahn, die man am haeufigsten abliest. Jetzt Bronze: warm gegen das kalte Blau der Minute und das Rot der Sekunde. Damit sind alle drei auf einen Blick zu trennen. Die Wechsel hell/dunkel im Verlauf bleiben, sie sind es, die aus einem Strich Metall machen. 3. DIE PERLEN sind die Spitzen -- dort schaut man hin. Sie bekommen denselben Schein wie ihre Bahn, nur staerker, und einen weissen Kern: der Unterschied zwischen einem farbigen Punkt und einem Licht. UND EINMAL ZURUECKGENOMMEN, nach dem Blick aufs Bild: Die Sekunde bekam zuerst denselben Schein wie die anderen beiden. Sie ist aber die laengste Bahn, die hellste Farbe UND die einzige, die sich sichtbar bewegt -- im Bildschirmfoto war sie ein roter Reifen, neben dem die Uhrzeit selbst zurueckstand. Ihr Leuchten liegt jetzt eine Stufe niedriger als das von Minute und Stunde. Gesehen, nicht gerechnet. Kein Pulsieren: Die Uhr steht dauerhaft im Bild, ein animiertes Leuchten am Bildrand ist genau das, was die Hausregel verbietet. Bei `prefers-reduced-motion` entfaellt der Schein ganz -- die Bahnen bleiben in voller Farbe stehen. pruef-start-ansicht EXIT=0, 140 Pruefungen. Co-Authored-By: Claude Opus 5 --- workspace/assets/css/heim.css | 76 +++++++++++++++++++++++++++++++++++ workspace/start.html | 17 +++++--- 2 files changed, 88 insertions(+), 5 deletions(-) diff --git a/workspace/assets/css/heim.css b/workspace/assets/css/heim.css index 5742bf04..96c20fd5 100644 --- a/workspace/assets/css/heim.css +++ b/workspace/assets/css/heim.css @@ -1583,3 +1583,79 @@ color: CanvasText; filter: none; } } + +/* =================================================================== + DIE DREI BAHNEN DER UHR GLUEHEN VON INNEN (08.09.2026) + + Filipe: "die minuten sekunden und stunden soll viel spezieller, + krasser und geiler sein, noch vieeeel mehr." + + Die Bahnen waren flache Striche in einem Verlauf -- sauber gebaut, + aber ohne Koerper. Drei Dinge geben ihnen Tiefe, und alle drei + arbeiten mit LICHT statt mit mehr Farbe: + + 1. EIGENLEUCHTEN. Jede Bahn wirft einen Schein in ihrer eigenen + Farbe. Das ist nicht Deko: Auf einem schwarzen Zifferblatt kann + man einen Strich entweder heller machen (dann blendet er) oder + leuchten lassen (dann wirkt er wie eine Anzeige, die Licht + abgibt). Zwei Schatten je Bahn, ein enger und ein weiter -- der + enge gibt die Kante, der weite die Aura. + + 2. DIE SPITZE IST HELLER ALS DER REST. `stroke-linecap: round` plus + ein zweiter, kuerzerer Bogen darueber gibt es hier nicht -- statt + dessen leuchtet die PERLE am Ende staerker (siehe unten). Das + Auge sucht bei einer Uhr die Spitze, nicht den Anfang. + + 3. DIE STUNDE WIRD WARM. Sie lief in Schwarzsilber und war damit + dem Zifferblatt am aehnlichsten -- ausgerechnet die Bahn, die man + am haeufigsten abliest. Sie bekommt jetzt einen Bronzeschimmer: + warm gegen das kalte Blau der Minute und das Rot der Sekunde, und + damit sind alle drei auf einen Blick zu trennen. + + AUGENSCHONEND BLEIBT PFLICHT. Die Uhr steht dauerhaft im Bild. Der + Schein liegt deshalb bei 45 bis 55 Prozent Deckkraft und wird NICHT + animiert -- ein pulsierendes Leuchten am Bildrand ist genau das, was + die Hausregel verbietet. */ +/* DIE SEKUNDE GLUEHT SCHWAECHER ALS DIE ANDEREN BEIDEN, und das ist + Absicht: Sie ist die laengste Bahn, die hellste Farbe und die + einzige, die sich sichtbar bewegt. Mit demselben Schein wie Minute + und Stunde zog sie im Bildschirmfoto den ganzen Blick auf sich -- + ein roter Reifen, neben dem die Uhrzeit selbst zurueckstand. + Nachgesehen, nicht gerechnet. */ +.uhr__sekunde { + stroke-width: 3; + filter: + drop-shadow(0 0 1.5px rgba(255, 118, 132, .8)) + drop-shadow(0 0 6px rgba(255, 70, 90, .3)); +} +.uhr__minute { + stroke-width: 3.4; + filter: + drop-shadow(0 0 2px rgba(120, 200, 255, .95)) + drop-shadow(0 0 8px rgba(70, 165, 245, .48)); +} +.uhr__stunde { + stroke-width: 4; + filter: + drop-shadow(0 0 2px rgba(255, 214, 160, .9)) + drop-shadow(0 0 9px rgba(214, 154, 82, .45)); +} + +/* Die Perle am Ende jeder Bahn ist die Spitze -- dort schaut man hin. + Sie bekommt denselben Schein wie ihre Bahn, nur staerker, und einen + weissen Kern: Das ist der Unterschied zwischen einem farbigen Punkt + und einem Licht. */ +.uhr__perle::before { + box-shadow: + 0 0 0 1px rgba(255, 255, 255, .5), + 0 0 6px 1px currentColor, + 0 0 14px 2px currentColor; +} +.uhr__perle--minute::before { color: rgba(99, 184, 245, .85); } +.uhr__perle--stunde::before { color: rgba(226, 176, 108, .8); } + +@media (prefers-reduced-motion: reduce) { + /* Kein Leuchten ohne Not: Wer weniger Bewegung will, will meist auch + weniger Reiz. Die Bahnen bleiben in voller Farbe stehen. */ + .uhr__sekunde, .uhr__minute, .uhr__stunde { filter: none; } +} diff --git a/workspace/start.html b/workspace/start.html index b0344eaa..97945b08 100644 --- a/workspace/start.html +++ b/workspace/start.html @@ -201,12 +201,19 @@ hell-dunkel-hell-dunkel liest sich als geschliffenes Metall, weil eine gebogene Flaeche das Licht genau so zurueckwirft. --> + - - - - - + + + + +