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:
Sascha Wolf
2026-09-17 23:31:12 +02:00
co-authored by Claude Opus 5
parent 49c03f5e1b
commit 2d84bac91d
7 changed files with 85 additions and 29 deletions
+3 -6
View File
@@ -1,8 +1,8 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 900" width="260" height="900" preserveAspectRatio="xMidYMax slice">
<!--
Aura, Seitenleiste: sanfte Huegel in Pastell, von unten hereinwachsend.
Eine Datei fuer beide Modi - der Schleier des Mond-Modus toent sie zur
Nacht ab (index.css).
Aura, Seitenleiste: nur der warme Dunst ueber dem unteren Rand. Die Wellen
darueber liegen in eigenen Dateien (aura-wave-*.svg), weil sie sich
bewegen und dafuer einzeln verschoben werden muessen.
-->
<defs>
<linearGradient id="dunst" x1="0" y1="0" x2="0" y2="1">
@@ -14,7 +14,4 @@
</filter>
</defs>
<rect y="520" width="260" height="380" fill="url(#dunst)" filter="url(#weich)" />
<path d="M0 730 C 60 690 120 700 170 720 C 210 736 240 716 260 706 L260 900 L0 900 Z" fill="#c7b8e8" opacity="0.5" />
<path d="M0 780 C 50 760 110 772 160 764 C 200 758 236 770 260 762 L260 900 L0 900 Z" fill="#f2b98a" opacity="0.55" />
<path d="M0 830 C 70 812 130 826 190 818 C 220 814 244 820 260 816 L260 900 L0 900 Z" fill="#9fcfa8" opacity="0.55" />
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 796 B