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
+12
View File
@@ -0,0 +1,12 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 260 165" width="260" height="165" preserveAspectRatio="none">
<!--
Aura, Seitenleiste: eine Wellenlage. Genau eine Sinusperiode ueber die
Breite der Kachel - deshalb passt sie waagerecht nahtlos an sich selbst,
und index.css kann sie endlos durchschieben, ohne dass es ruckt.
Drei solche Kacheln liegen uebereinander (aura-wave-front.svg ist eine davon); jede ist
anders breit und wandert deshalb bei gleicher Dauer unterschiedlich
schnell - das gibt Tiefe.
-->
<path d="M0 55.7 L10 53.3 L20 50.6 L30 47.5 L40 44.4 L50 41.3 L60 38.6 L70 36.2 L80 34.5 L90 33.4 L100 33.0 L110 33.4 L120 34.5 L130 36.3 L140 38.7 L150 41.4 L160 44.5 L170 47.6 L180 50.7 L190 53.4 L200 55.8 L210 57.5 L220 58.6 L230 59.0 L240 58.6 L250 57.5 L260 55.7 L260 165 L0 165 Z" fill="#9fcfa8" opacity="0.6" />
</svg>

After

Width:  |  Height:  |  Size: 872 B