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) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
49c03f5e1b
commit
2d84bac91d
+1
-1
@@ -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:
|
||||
|
||||
@@ -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.
|
||||
|
||||
Reference in New Issue
Block a user