feat(design): neues Theme Snow mit Schneefall und Schneedecke
Eisblau in hell und dunkel. Flocken fallen per Canvas und sammeln sich am unteren Fensterrand in einer Hoehenkarte, die per Diffusion geglaettet wird; nach rund vier Minuten ist die Decke voll (26 px). Bei prefers-reduced-motion bleibt es still. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Opus 5
parent
77b61b4a04
commit
831429d559
+25
-4
@@ -138,7 +138,7 @@ Die Darstellung hat **zwei unabhängige Achsen**, beide als Klasse am `<html>`:
|
||||
|
||||
| Achse | Klasse | Werte |
|
||||
| --- | --- | --- |
|
||||
| Farbwelt | `theme-perinco`, `theme-pixel`, `theme-outdoor`, `theme-cyberpunk`, `theme-rainy` | perinco ist der Standard |
|
||||
| Farbwelt | `theme-perinco`, `theme-pixel`, `theme-outdoor`, `theme-cyberpunk`, `theme-rainy`, `theme-snow` | perinco ist der Standard |
|
||||
| Modus | `dark` bzw. keine | hell, dunkel, oder der Systemeinstellung folgen |
|
||||
|
||||
`src/index.css` tauscht darin nur Variablenwerte: `canvas`, `surface`, `ink-*`,
|
||||
@@ -173,7 +173,7 @@ er liest den Benutzer.
|
||||
|
||||
Alle Themes außer perinco legen eine Grafik hinter die obere Leiste und die
|
||||
Seitenleiste: 8-bit-Himmel und Steinmauer, blauer Himmel und Wiese,
|
||||
Neonröhren und regnerische Gasse, Regenwolken und nasse Hügel. Die Dateien liegen als **SVG** in
|
||||
Neonröhren und regnerische Gasse, Regenwolken und nasse Hügel, verschneite Berge und Waldrand. Die Dateien liegen als **SVG** in
|
||||
`public/themes/` und sind von Hand gezeichnet - stilisierte Grafik statt Foto,
|
||||
damit sie in jeder Auflösung scharf bleibt und wenige Kilobyte wiegt.
|
||||
|
||||
@@ -212,9 +212,9 @@ Das ist kein Umweg, sondern erledigt zwei Dinge zugleich:
|
||||
> nur Licht - über Dunkel leuchtet das Neon, über Weiss bleiben blasse farbige
|
||||
> Linien. Wer eine Grafik ergänzt: **keine deckenden Flächen**, nur Motiv.
|
||||
|
||||
### Rainy: das Theme mit Wetter
|
||||
### Rainy und Snow: Themes mit Wetter
|
||||
|
||||
Rainy ist das einzige Theme mit Bewegung. Farben und Grafiken funktionieren wie
|
||||
Rainy und Snow sind die Themes mit Bewegung. Hier zuerst Rainy, Snow folgt unten. Farben und Grafiken funktionieren wie
|
||||
bei den anderen; dazu kommt `src/components/RainyWeather.tsx`, das der
|
||||
`ThemeProvider` nur bei aktivem Rainy einhängt - auch auf der Anmeldeseite, und
|
||||
beim Wechsel auf ein anderes Theme verschwindet es samt Animationsschleife.
|
||||
@@ -238,6 +238,27 @@ noch Blitz. Die Canvas-Schleife läuft über `requestAnimationFrame` und ruht
|
||||
damit in Hintergrund-Tabs; der Zeitschritt ist auf 50 ms begrenzt, damit nach
|
||||
der Rückkehr nichts nachgeholt wird.
|
||||
|
||||
#### Snow
|
||||
|
||||
`src/components/SnowWeather.tsx`, eingehängt vom `ThemeProvider` wie der Regen:
|
||||
ein `<canvas>` über dem Fenster (`z-[90]`, `pointer-events: none`), bei
|
||||
`prefers-reduced-motion` still.
|
||||
|
||||
| Teil | Umsetzung |
|
||||
| --- | --- |
|
||||
| **Flocken** | Alle 70–160 ms eine neue, höchstens 70 gleichzeitig. Radius 1–3 px, große fallen schneller, alle schaukeln seitlich (Sinus). Farbe `--snow-flake`, im hellen Modus mit Kontur `--snow-flake-edge` - weiss auf fast weiss wäre unsichtbar |
|
||||
| **Schneedecke** | Eine Höhenkarte in 3-px-Spalten über die Fensterbreite. Eine Flocke landet, sobald sie die Oberfläche **ihrer** Spalte erreicht, und verteilt sich auf fünf Spalten |
|
||||
| **Glätten** | Diffusion: jede Spalte gleicht sich an ihre Nachbarn an, Faktor an der Zeit (`SPREAD`), nicht an der Framezahl - gleich auf 60 und 144 Hz. Mengenerhaltend, aus Einzelflocken werden flache Hügel |
|
||||
| **Deckel** | `MAX_DEPTH` = 26 px, voll nach rund vier Minuten. Was danach landet, verschwindet |
|
||||
|
||||
Die Decke lebt nur im Speicher; beim Ändern der Fensterbreite wird sie auf die
|
||||
neue Spaltenzahl umgerechnet, nach dem Neuladen ist der Boden frei.
|
||||
|
||||
> **Erfahrungswert Wachstum:** Das Flockenlimit bestimmt die Landerate, nicht
|
||||
> das Spawn-Intervall - eine Flocke braucht gut 10 s durchs Fenster, bei 70
|
||||
> gleichzeitig landen also nur etwa 5 je Sekunde. Wer die Wachstumszeit
|
||||
> ändert, rechnet mit dieser Zahl.
|
||||
|
||||
### Was ein neues Theme können muss
|
||||
|
||||
Die Rollen der Skalen sind über die ganze App gleich; ein Theme, das sie
|
||||
|
||||
Reference in New Issue
Block a user