From 82cea98b5226cdac58e537c5922ccfbdde77193c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20H=C3=B6fling?= Date: Mon, 4 May 2026 23:50:14 +0200 Subject: [PATCH] feat: animiertes Knoten-Mesh im Hero (v1.5.0) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Greift das Logo-Motiv (vernetzte Knotenpunkte) als ganzflaechiges Hero- Hintergrundelement auf — transportiert visuell die Netzwerk-/MSP-Kompetenz. - 12 Knoten in CI-Sonith-Gelb mit asynchroner Pulse-Animation (skaliert zwischen 1.0 und 1.6, drop-shadow-Glow) - 17 Verbindungslinien in CI-Petrol mit stroke-dasharray-Datenfluss (drei Geschwindigkeiten und Phasen, zufaellig wirkend) - mix-blend-mode: screen fuer weiches Aufblenden auf den Orbs - prefers-reduced-motion respektiert (Animation aus, Mesh bleibt sichtbar) - Orb-Opazitaeten reduziert, damit das Mesh den primaeren Akzent setzt Co-Authored-By: Claude Opus 4.7 (1M context) --- CLAUDE.md | 2 +- css/style.css | 42 ++++++++++++++++++++++++++++++++++++++++ datenschutz.html | 2 +- impressum.html | 2 +- index.html | 50 ++++++++++++++++++++++++++++++++++++++++++++---- 5 files changed, 91 insertions(+), 7 deletions(-) diff --git a/CLAUDE.md b/CLAUDE.md index 1856f7d..ee5bd57 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -73,4 +73,4 @@ Statische Dateien direkt auf Nginx ausliefern. Kein Build-Step notwendig. --- -*Zuletzt aktualisiert: Mai 2026 — v1.4.0 (Adresse Würzburg, Fernwartung, lebendigere Optik)* +*Zuletzt aktualisiert: Mai 2026 — v1.5.0 (animiertes Knoten-Mesh im Hero)* diff --git a/css/style.css b/css/style.css index 752326e..76085b2 100644 --- a/css/style.css +++ b/css/style.css @@ -88,6 +88,48 @@ html { 0 0 48px rgba(6, 115, 145, 0.06); } +/* ---- Hero Mesh: animiertes Knoten-Netz im Logo-Stil ---- */ +.hero-mesh { + opacity: 0.55; + mix-blend-mode: screen; +} + +.mesh-lines line { + stroke-opacity: 0.25; + stroke-dasharray: 4 8; + animation: line-flow 6s linear infinite; +} + +.mesh-lines line:nth-child(3n) { animation-duration: 9s; stroke-opacity: 0.18; } +.mesh-lines line:nth-child(3n+1) { animation-duration: 7s; animation-delay: -2s; } +.mesh-lines line:nth-child(3n+2) { animation-duration: 11s; animation-delay: -4s; stroke-opacity: 0.30; } + +@keyframes line-flow { + to { stroke-dashoffset: -48; } +} + +.node { + transform-box: fill-box; + transform-origin: center; + animation: node-pulse 3.6s ease-in-out infinite; + filter: drop-shadow(0 0 4px rgba(222, 220, 30, 0.6)); +} + +.node:nth-child(2n) { animation-delay: -0.8s; animation-duration: 4.2s; } +.node:nth-child(3n) { animation-delay: -1.6s; animation-duration: 5.0s; } +.node:nth-child(4n+1) { animation-delay: -2.4s; } +.node:nth-child(5n+2) { animation-delay: -3.0s; animation-duration: 4.8s; } + +@keyframes node-pulse { + 0%, 100% { transform: scale(1); opacity: 0.55; } + 50% { transform: scale(1.6); opacity: 1; } +} + +@media (prefers-reduced-motion: reduce) { + .mesh-lines line, + .node { animation: none !important; } +} + /* ---- Floating Orbs (Hero) ---- */ .orb { filter: blur(64px); diff --git a/datenschutz.html b/datenschutz.html index 18957c8..90bcfec 100644 --- a/datenschutz.html +++ b/datenschutz.html @@ -208,7 +208,7 @@

© 2026 sonith UG (haftungsbeschränkt)

- v1.4.0 + v1.5.0
Impressum diff --git a/impressum.html b/impressum.html index 348593f..032f301 100644 --- a/impressum.html +++ b/impressum.html @@ -91,7 +91,7 @@

© 2026 sonith UG (haftungsbeschränkt)

- v1.4.0 + v1.5.0
Impressum diff --git a/index.html b/index.html index e49aef9..74708f2 100644 --- a/index.html +++ b/index.html @@ -128,9 +128,51 @@
-
-
-
+
+
+
+ + +
@@ -470,7 +512,7 @@

© 2026 sonith UG (haftungsbeschränkt)

- v1.4.0 + v1.5.0
Impressum