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 320 200" width="320" height="200" 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-mid.svg ist eine davon); jede ist
anders breit und wandert deshalb bei gleicher Dauer unterschiedlich
schnell - das gibt Tiefe.
-->
<path d="M0 55.8 L10 56.6 L20 57.0 L30 56.9 L40 56.5 L50 55.6 L60 54.4 L70 52.8 L80 51.0 L90 49.0 L100 46.9 L110 44.7 L120 42.6 L130 40.6 L140 38.9 L150 37.4 L160 36.2 L170 35.4 L180 35.0 L190 35.1 L200 35.5 L210 36.4 L220 37.6 L230 39.2 L240 41.0 L250 43.0 L260 45.1 L270 47.3 L280 49.4 L290 51.4 L300 53.1 L310 54.6 L320 55.8 L320 200 L0 200 Z" fill="#f2b98a" opacity="0.5" />
</svg>

After

Width:  |  Height:  |  Size: 930 B