From 2d84bac91d4b99b138ab8d0fb6eb0aa4f53ccc6a Mon Sep 17 00:00:00 2001 From: Sascha Wolf Date: Thu, 17 Sep 2026 23:31:12 +0200 Subject: [PATCH] feat(design): Wellen in der Seitenleiste von Aura rollen Die festen Huegel weichen drei Wellenkacheln (aura-wave-back/mid/front). Jede ist genau eine Sinusperiode breit, wiederholt sich waagerecht und wandert in 40 s um ihre eigene Kachelbreite - nahtlos und in beiden Modi. Unterschiedliche Kachelbreiten ergeben unterschiedliche Geschwindigkeiten. Loest aura-hills ab; bei prefers-reduced-motion stehen die Wellen still. Co-Authored-By: Claude Opus 5 (1M context) --- docs/05-frontend.md | 2 +- docs/07-anleitung-benutzer.md | 2 + public/themes/aura-sidebar.svg | 9 ++--- public/themes/aura-wave-back.svg | 12 ++++++ public/themes/aura-wave-front.svg | 12 ++++++ public/themes/aura-wave-mid.svg | 12 ++++++ src/index.css | 65 ++++++++++++++++++++----------- 7 files changed, 85 insertions(+), 29 deletions(-) create mode 100644 public/themes/aura-wave-back.svg create mode 100644 public/themes/aura-wave-front.svg create mode 100644 public/themes/aura-wave-mid.svg diff --git a/docs/05-frontend.md b/docs/05-frontend.md index edf8760..6d05cac 100644 --- a/docs/05-frontend.md +++ b/docs/05-frontend.md @@ -271,7 +271,7 @@ ist `theme-aura`, der Unterschied kommt wie immer aus `.dark`. | --- | --- | | **Leiste** | Vier Hintergrundebenen statt zwei: Sonne bzw. Mond (`aura-sun.svg`, `aura-moon.svg`, 130 px in der Ecke oben rechts, halb angeschnitten), Schleier, Sterne (`aura-stars.svg`, nur nachts) und ein Himmelsverlauf. Weil jede Ebene eigene Lage und Größe braucht, stehen die in `--aura-header-position` und `--aura-header-size` | | **Ziehende Wolken** | Reines CSS: `.app-header::before` mit zwei nahtlosen 800-px-Kacheln (`aura-clouds-near.svg`, `aura-clouds-far.svg`). `@keyframes aura-clouds` schiebt sie in 150 s um genau 1600 bzw. 800 px - Neustart ohne Ruck, vordere Lage doppelt so schnell. Nachts auf `--aura-cloud-opacity` 0,28 abgedunkelt | -| **Schaukelnde Hügel** | Reines CSS, nur hell: `@keyframes aura-hills` schiebt in der Seitenleiste allein die Grafik-Ebene (`aura-sidebar.svg`) 26 s lang um ±9 px waagerecht und 4 px senkrecht. Der Schleier davor bleibt stehen, sonst würde die Schrift wandern. Die Grafik ist unten verankert und wird beschnitten (`preserveAspectRatio="xMidYMax slice"`), deshalb reißt am Rand keine Lücke auf | +| **Rollende Wellen** | Reines CSS, beide Modi: drei Wellenkacheln (`aura-wave-back/mid/front.svg`) liegen in der Seitenleiste unter dem Schleier und über dem Dunst. Jede ist genau **eine Sinusperiode** breit, passt deshalb waagerecht nahtlos an sich selbst und wiederholt sich (`repeat-x`). `@keyframes aura-waves` schiebt jede in 40 s um genau ihre eigene Kachelbreite (260, 320, 400 px) - am Rundenende ist das Bild deckungsgleich, also kein Ruck, und weil die Kacheln verschieden breit sind, läuft die vorderste am schnellsten. Schleier und Dunst stehen still, sonst wanderte die Helligkeit unter den Menüpunkten | | **Sonnenstrahlen** | `src/components/AuraWeather.tsx`, nur hell. Alle 16–24 s zwei oder drei `.aura-ray`-Elemente: vom Sonnenmittelpunkt in Richtung Ecke unten links, leicht aufgefächert, per `clip-path` zur Sonne hin verjüngt und weichgezeichnet. Web Animations API: 4 s anschwellen, leicht schwenken, verblassen, danach entfernt | Zwei Stolperstellen: diff --git a/docs/07-anleitung-benutzer.md b/docs/07-anleitung-benutzer.md index 4b07877..fbfdf83 100644 --- a/docs/07-anleitung-benutzer.md +++ b/docs/07-anleitung-benutzer.md @@ -112,6 +112,8 @@ die Scanner-Einstellungen. Alles andere ist für beide Rollen gleich. rechts. Im hellen Modus („Sunshine“) fallen etwa alle 20 Sekunden zwei bis drei Sonnenstrahlen von der Sonne oben rechts quer über den Bildschirm nach unten links; im dunklen Modus („Mond“) steht dort der Mond, ohne Strahlen. + Unten in der Seitenleiste rollen drei Wellen in Pastell langsam durch - + die vorderste am schnellsten, in beiden Modi. Wer im Betriebssystem **„Bewegung reduzieren"** eingeschaltet hat, sieht bei allen nur Farben und Grafiken - ohne Regen, Blitz, Schnee, Wolkenzug und Sonnenstrahlen. diff --git a/public/themes/aura-sidebar.svg b/public/themes/aura-sidebar.svg index 163766f..9a027af 100644 --- a/public/themes/aura-sidebar.svg +++ b/public/themes/aura-sidebar.svg @@ -1,8 +1,8 @@ @@ -14,7 +14,4 @@ - - - diff --git a/public/themes/aura-wave-back.svg b/public/themes/aura-wave-back.svg new file mode 100644 index 0000000..221ab37 --- /dev/null +++ b/public/themes/aura-wave-back.svg @@ -0,0 +1,12 @@ + + + + diff --git a/public/themes/aura-wave-front.svg b/public/themes/aura-wave-front.svg new file mode 100644 index 0000000..ef8711d --- /dev/null +++ b/public/themes/aura-wave-front.svg @@ -0,0 +1,12 @@ + + + + diff --git a/public/themes/aura-wave-mid.svg b/public/themes/aura-wave-mid.svg new file mode 100644 index 0000000..4b687bb --- /dev/null +++ b/public/themes/aura-wave-mid.svg @@ -0,0 +1,12 @@ + + + + diff --git a/src/index.css b/src/index.css index 3766c34..2d8bc6e 100644 --- a/src/index.css +++ b/src/index.css @@ -902,6 +902,9 @@ html.theme-aura:not(.dark) { rgb(255 253 247 / 0.35) 78%, rgb(255 253 247 / 0.5) 100% ), + url('/themes/aura-wave-front.svg'), + url('/themes/aura-wave-mid.svg'), + url('/themes/aura-wave-back.svg'), url('/themes/aura-sidebar.svg'); --color-canvas: #fbf6ea; @@ -967,6 +970,9 @@ html.theme-aura.dark { rgb(19 22 42 / 0.6) 78%, rgb(19 22 42 / 0.7) 100% ), + url('/themes/aura-wave-front.svg'), + url('/themes/aura-wave-mid.svg'), + url('/themes/aura-wave-back.svg'), url('/themes/aura-sidebar.svg'); --color-canvas: #0c0e1c; @@ -1114,16 +1120,29 @@ html.theme-aura.dark { } /* - * Aura, hell: die Huegel in der Seitenleiste schaukeln langsam hin und her. + * Rollende Wellen in der Seitenleiste (Theme Aura, beide Modi). * - * Bewegt wird nur die Grafik-Ebene (zweiter Wert), der Schleier darueber - * bleibt stehen. Die Grafik ist an der Unterkante verankert und wird - * beschnitten (preserveAspectRatio slice), deshalb entsteht am Rand keine - * Luecke. 26 Sekunden pro Runde: als Bewegung kaum zu bemerken, aber die - * Leiste wirkt nicht mehr wie ein Standbild. + * Drei Wellenkacheln (aura-wave-*.svg) liegen unter dem Schleier und ueber + * dem Dunst. Jede ist genau eine Sinusperiode breit und wiederholt sich + * waagerecht; @keyframes aura-waves schiebt jede um genau ihre eigene + * Kachelbreite weiter, deshalb sieht das Bild am Ende der Runde aus wie am + * Anfang und es ruckt nicht. Weil die Kacheln unterschiedlich breit sind, + * laufen sie bei gleicher Dauer unterschiedlich schnell - vorne schneller + * als hinten, das gibt Tiefe. + * + * Es bewegen sich nur die Wellen: der Schleier (erste Ebene) und der Dunst + * (letzte) stehen still, sonst wanderte die Helligkeit unter den + * Menuepunkten. */ - html.theme-aura:not(.dark) .app-sidebar { - animation: aura-hills 26s ease-in-out infinite; + html.theme-aura .app-sidebar { + background-repeat: no-repeat, repeat-x, repeat-x, repeat-x, no-repeat; + background-size: + cover, + 260px 165px, + 320px 200px, + 400px 235px, + cover; + animation: aura-waves 40s linear infinite; } /* Sonnenstrahl (components/AuraWeather.tsx): verjuengt zur Sonne hin. */ @@ -1144,7 +1163,7 @@ html.theme-aura.dark { @media (prefers-reduced-motion: reduce) { html.theme-aura .app-header::before, - html.theme-aura:not(.dark) .app-sidebar { + html.theme-aura .app-sidebar { animation: none; } } @@ -1269,24 +1288,26 @@ html.theme-aura.dark { } /* - * Schaukelnde Huegel in der Seitenleiste (Theme Aura, hell). Der erste Wert ist - * der Schleier und bleibt stehen, der zweite die Grafik: 9 px nach rechts, - * dabei 4 px tiefer, und zurueck. + * Rollende Wellen in der Seitenleiste (Theme Aura). Reihenfolge der Werte wie + * im Bild: Schleier, Welle vorn, Welle Mitte, Welle hinten, Dunst. Jede Welle + * wandert um genau ihre Kachelbreite - 260, 320 und 400 px - und ist damit + * nach einer Runde wieder deckungsgleich. */ -@keyframes aura-hills { - 0% { +@keyframes aura-waves { + from { background-position: center top, - calc(50% - 9px) bottom; + 0 bottom, + 0 bottom, + 0 bottom, + center bottom; } - 50% { + to { background-position: center top, - calc(50% + 9px) calc(100% + 4px); - } - 100% { - background-position: - center top, - calc(50% - 9px) bottom; + 260px bottom, + 320px bottom, + 400px bottom, + center bottom; } }