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
@@ -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 |
Reference in New Issue
Block a user