Der Schmetterling geht live
Wie ein einziges SVG zur Seele unserer Studio-Website wurde - und was wir gelernt haben, als wir es durch SSR und einen Clip-Path-Moduswechsel gefädelt haben.
Wir haben einen Schmetterling gebaut - und am Ende über alles geschrieben, nur nicht über die Flügel.
Ein Zeichen mit Absicht
Die meisten Logos stehen still. Das Monarch-Zeichen nicht, denn auch das Studio steht nicht still. Die Flügel schlagen, der Thorax glüht, die Linien pulsieren. Nichts davon ist Spielerei: Jedes Verhalten spiegelt den Modus wider.
Im Business-Modus ist der Schmetterling monochrom - ein klarer Tuschestrich. Die Linien werden neutral, der Halo verblasst, die Flügel bleiben ruhig. Das ist die Version, die eine CTO sieht, wenn sie uns für den Neubau ihres Backends prüft. Die Stimmung: gelassen.
Wechseln Sie in den Kreativ-Modus, und dasselbe SVG wird satt und farbig. Orange Linien leuchten auf den Flügeln, der Halo um den Thorax atmet, die Flügel beginnen ihren langsamen Schlag. Dieselben Pfaddaten, eine völlig andere Wirkung.
Ein SVG, zwei Gesichter
Der Trick: Alles ist CSS. Die Pfadgeometrie ist fix, es ändern sich nur Strokes, Fills und Animationen - abhängig von [data-mode] auf dem Root-Element. Kein bedingtes Rendering, kein JavaScript pro Frame, kein Jonglieren mit zwei Assets.
[data-mode="creative"] .bf .bf-trace {
stroke: var(--orange) !important;
opacity: 1;
}
[data-mode="creative"] .bf .bf-wing-r {
animation: flapR 3s ease-in-out infinite;
}Das [data-mode]-Attribut wird inzwischen serverseitig aus einem Cookie gesetzt. Das heißt: Der Schmetterling stimmt schon beim ersten Paint - kein Aufflackern von Business zu Kreativ, wenn jemand die Seite im bevorzugten Modus neu lädt.
Was wir anders machen würden
Ehrlich gesagt? Weniger. Wer von einer eigenständigen HTML-Demo portiert, ist schnell versucht, alles zu “verbessern”. Meistens hatte der ursprüngliche Autor aber gute Gründe. Das Timing des Flügelschlags haben wir exakt so übernommen, wie es entworfen war - schneller wirkt hektisch, langsamer wirkt leblos. Der 3-Sekunden-Loop ist die richtige Antwort.
Der einzige echte Umbau war der Moduswechsel selbst - Sweep-Balken für Business, eine Partikelexplosion für Kreativ. Dieser Teil hat förmlich darum gebettelt, originalgetreu portiert zu werden. Genau das haben wir getan.