techadmin/sonith-website
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

feat: animiertes Knoten-Mesh im Hero (v1.5.0)

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
Dominik Höfling
2026-05-04 23:50:14 +02:00
parent 8e729905f7
commit 82cea98b52
5 changed files with 91 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+46 -4
View File
@@ -128,9 +128,51 @@
<div class="absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,_rgba(6,115,145,0.20)_0%,_transparent_55%)]"></div>
<!-- Floating Orbs: lebendige unscharfe Lichtpunkte in CI-Farben -->
<div class="orb orb-petrol absolute top-[15%] left-[8%] w-72 h-72 rounded-full opacity-40"></div>
<div class="orb orb-sonith absolute top-[55%] right-[12%] w-80 h-80 rounded-full opacity-25"></div>
<div class="orb orb-petrol-2 absolute bottom-[12%] left-[35%] w-64 h-64 rounded-full opacity-30"></div>
<div class="orb orb-petrol absolute top-[15%] left-[8%] w-72 h-72 rounded-full opacity-30"></div>
<div class="orb orb-sonith absolute top-[55%] right-[12%] w-80 h-80 rounded-full opacity-20"></div>
<div class="orb orb-petrol-2 absolute bottom-[12%] left-[35%] w-64 h-64 rounded-full opacity-25"></div>
<!-- Animiertes Knoten-Mesh: greift das Logo-Motiv (Netzwerk-Knoten) auf
und transportiert visuell die MSP-/Netzwerk-Kompetenz.
Linien pulsieren mit Datenfluss-Effekt, Knoten leuchten zyklisch auf. -->
<svg class="hero-mesh absolute inset-0 w-full h-full pointer-events-none" viewBox="0 0 1200 800" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
<!-- Verbindungslinien (CI-Petrol) -->
<g class="mesh-lines" stroke="#067391" stroke-width="0.9" stroke-linecap="round" fill="none">
<line x1="180" y1="140" x2="380" y2="90"/>
<line x1="180" y1="140" x2="140" y2="380"/>
<line x1="180" y1="140" x2="300" y2="540"/>
<line x1="380" y1="90" x2="620" y2="180"/>
<line x1="620" y1="180" x2="880" y2="110"/>
<line x1="620" y1="180" x2="520" y2="460"/>
<line x1="880" y1="110" x2="1080" y2="280"/>
<line x1="1080" y1="280" x2="980" y2="480"/>
<line x1="980" y1="480" x2="740" y2="540"/>
<line x1="740" y1="540" x2="520" y2="460"/>
<line x1="740" y1="540" x2="860" y2="720"/>
<line x1="520" y1="460" x2="300" y2="540"/>
<line x1="520" y1="460" x2="560" y2="700"/>
<line x1="300" y1="540" x2="140" y2="380"/>
<line x1="300" y1="540" x2="560" y2="700"/>
<line x1="560" y1="700" x2="860" y2="720"/>
<line x1="1080" y1="280" x2="740" y2="540"/>
</g>
<!-- Knoten (CI-Sonith-Gelb) mit asynchroner Pulse-Animation -->
<g class="mesh-nodes" fill="#DEDC1E">
<circle class="node" cx="180" cy="140" r="4"/>
<circle class="node" cx="380" cy="90" r="3"/>
<circle class="node" cx="620" cy="180" r="5"/>
<circle class="node" cx="880" cy="110" r="3.5"/>
<circle class="node" cx="1080" cy="280" r="4"/>
<circle class="node" cx="980" cy="480" r="3"/>
<circle class="node" cx="740" cy="540" r="4.5"/>
<circle class="node" cx="520" cy="460" r="3.5"/>
<circle class="node" cx="300" cy="540" r="3"/>
<circle class="node" cx="140" cy="380" r="4"/>
<circle class="node" cx="560" cy="700" r="3"/>
<circle class="node" cx="860" cy="720" r="3.5"/>
</g>
</svg>
<!-- Grid Pattern Overlay -->
<div class="absolute inset-0 opacity-[0.03]" style="background-image: url('data:image/svg+xml,%3Csvg width=&quot;60&quot; height=&quot;60&quot; viewBox=&quot;0 0 60 60&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;%3E%3Cg fill=&quot;none&quot; fill-rule=&quot;evenodd&quot;%3E%3Cg fill=&quot;%23ffffff&quot; fill-opacity=&quot;1&quot;%3E%3Cpath d=&quot;M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z&quot;/%3E%3C/g%3E%3C/g%3E%3C/svg%3E');"></div>
@@ -470,7 +512,7 @@
<div class="flex flex-col sm:flex-row items-center justify-between gap-4">
<div class="flex items-center gap-3">
<p class="text-ci-gray text-sm">&copy; 2026 sonith UG (haftungsbeschränkt)</p>
<span class="text-ci-gray/60 text-xs">v1.4.0</span>
<span class="text-ci-gray/60 text-xs">v1.5.0</span>
</div>
<div class="flex items-center gap-6">
<a href="impressum.html" class="text-ci-gray text-sm hover:text-sonith transition-colors">Impressum</a>