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 400 235" width="400" height="235" 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-back.svg ist eine davon); jede ist
anders breit und wandert deshalb bei gleicher Dauer unterschiedlich
schnell - das gibt Tiefe.
-->
<path d="M0 40.0 L10 41.4 L20 42.8 L30 44.1 L40 45.3 L50 46.4 L60 47.3 L70 48.0 L80 48.6 L90 48.9 L100 49.0 L110 48.9 L120 48.6 L130 48.0 L140 47.3 L150 46.4 L160 45.3 L170 44.1 L180 42.8 L190 41.4 L200 40.0 L210 38.6 L220 37.2 L230 35.9 L240 34.7 L250 33.6 L260 32.7 L270 32.0 L280 31.4 L290 31.1 L300 31.0 L310 31.1 L320 31.4 L330 32.0 L340 32.7 L350 33.6 L360 34.7 L370 35.9 L380 37.2 L390 38.6 L400 40.0 L400 235 L0 235 Z" fill="#c7b8e8" opacity="0.55" />
</svg>

After

Width:  |  Height:  |  Size: 1012 B