Zwei Webseiten, zwei Ansätze
Wir betreiben aktuell zwei Webseiten: embedflow.de als Unternehmensseite und web.embedflow.de als Landingpage für unsere Webdesign-Leistungen. Beide laufen auf Next.js mit TypeScript und Tailwind CSS, teilen sich die gleiche Deployment-Pipeline und unterstützen Dark Mode. Trotzdem unterscheiden sie sich technisch erheblich.
embedflow.de ist auf schnelle Ladezeiten und Suchmaschinen-Sichtbarkeit optimiert. Animationen laufen über CSS und Intersection Observer, ohne zusätzliche Runtime-Bibliothek. web.embedflow.de dagegen zeigt, was technisch möglich ist: Framer Motion für komplexe Animationen, WebGL-Shader für visuelle Effekte und sechs verschiedene Design-Stile als interaktive Demo.
Dieser Beitrag beschreibt die technischen Entscheidungen hinter beiden Seiten.
Design-System: Neomorphismus und Farblogik
embedflow.de
Die Unternehmensseite arbeitet mit einem neomorphen Design-Ansatz: Weiche Schatten erzeugen den Eindruck von erhabenen oder eingedrückten Elementen, ohne dass klassische Borders oder harte Kanten nötig sind. Jede Karte, jeder Button und jedes Formularfeld hat zwei Schattenebenen, eine helle und eine dunkle Seite, die zusammen den 3D-Effekt erzeugen.
Als Akzentfarbe dient ein Eisblau, das sich durch Buttons, Hover-Effekte und Gradient-Texte zieht. Die Typografie beschränkt sich auf eine einzige Schriftfamilie (Plus Jakarta Sans) in verschiedenen Gewichtungen. Das spart HTTP-Requests und sorgt für ein konsistentes Schriftbild.
Dark Mode und Light Mode werden über CSS Custom Properties gesteuert. Ein Toggle im Header wechselt ein data-theme-Attribut, das die gesamte Farblogik umschaltet. Die Präferenz wird per Cookie gespeichert, damit Besucher beim nächsten Aufruf direkt das gewählte Theme sehen.
web.embedflow.de
Die Webdesign-Seite geht einen Schritt weiter und zeigt sechs verschiedene Design-Philosophien als interaktive Vorschau:
Clean Minimal setzt auf maximalen Weißraum und haarfeine Borders. Glassmorphismus arbeitet mit backdrop-filter: blur() und halbtransparenten Flächen, hinter denen animierte Farbverläufe durchscheinen. Claymorphismus imitiert weiches Material mit übergroßen Border-Radien und warmen Pastelltönen. Neomorphismus nutzt das gleiche Schattenprinzip wie embedflow.de, hier aber als eigenständigen Demo-Stil. Skeuomorphismus erzeugt eine Holzoptik über mehrere überlagerte CSS-Gradienten, die Maserung und Astlöcher simulieren. Bold Editorial setzt auf maximalen Kontrast: schwarzer Hintergrund, große Typografie, Magazin-Layout.
Jeder Stil wird als eigenständiges CSS-Konfigurationsobjekt definiert, mit Werten für Container, Bild-Wrapper und Textbereiche. Das macht es möglich, jeden Stil in Light und Dark Mode zu zeigen, ohne die Komponenten-Logik zu duplizieren.
Für die Typografie nutzt die Webdesign-Seite zwei Schriften: Outfit für Headlines (geometrisch, editorial) und Plus Jakarta Sans für den Fließtext (konsistent mit embedflow.de). Die Headlines skalieren fluid per clamp(), sodass sie auf jedem Viewport proportional wirken.
Animationen: CSS vs. Framer Motion
embedflow.de: CSS-First
Auf der Unternehmensseite haben wir bewusst auf Runtime-Animationsbibliotheken verzichtet. Alle Scroll-Animationen laufen über CSS Keyframes, die per Intersection Observer ausgelöst werden.
Das Prinzip: Jedes Element startet mit opacity: 0 und einem leichten Versatz (z.B. 16px nach unten). Sobald es im Viewport sichtbar wird, fügt der Observer eine CSS-Klasse hinzu, die die Animation auslöst. Fünf Grundbewegungen (hoch, runter, links, rechts, Fade) lassen sich kombinieren und zeitlich staffeln.
Für gestaffelte Animationen (z.B. Feature-Karten, die nacheinander einblenden) gibt es eine Wrapper-Komponente, die ihren Kindern automatisch aufsteigende Verzögerungen zuweist. Das erzeugt den Eindruck einer Wellenanimation, ohne dass jedes Element einzeln konfiguriert werden muss.
Zwei Details, die in der Praxis wichtig sind: Erstens respektieren alle Animationen prefers-reduced-motion. Wer in den Systemeinstellungen reduzierte Bewegung aktiviert hat, sieht die Inhalte sofort ohne Animation. Zweitens unterscheiden wir zwischen Mount-Animationen (spielen beim Seitenaufruf) und Scroll-Animationen (spielen beim Scrollen). Hero-Elemente nutzen Mount, alle anderen Scroll.
Die Easing-Kurven sind bewusst gewählt: Ein schneller Start mit langsamem Auslauf (cubic-bezier(0.16, 1, 0.3, 1)) fühlt sich natürlicher an als lineares Easing und gibt den Elementen einen leicht federnden Charakter.
web.embedflow.de: Framer Motion
Die Webdesign-Seite nutzt Framer Motion, weil die Animationen hier komplexer sind und als Showcase dienen sollen.
Blur-Text-Animation: Einzelne Wörter oder Buchstaben blenden per Intersection Observer nacheinander ein, jeweils von blur(10px) zu blur(0) mit einem leichten Y-Versatz. Das erzeugt einen Tiefenschärfe-Effekt, als würde die Kamera auf den Text fokussieren.
Parallax-Bilder: Bilder verschieben sich beim Scrollen langsamer als der Rest der Seite. Framer Motions useScroll() und useTransform() mappen die Scroll-Position auf einen Y-Versatz, sodass ein natürlicher Tiefeneffekt entsteht.
3D-Tablet-Mockup: Ein Vorschaubild kippt beim Scrollen von einer leichten Perspektive (20 Grad) in die Frontale, während es gleichzeitig skaliert und nach oben gleitet. Drei Transformationen laufen synchron und erzeugen den Eindruck, als würde man ein Tablet in die Hand nehmen.
Magnetischer Cursor: Ein benutzerdefinierter Cursor folgt der Maus mit leichter Verzögerung, gesteuert über Spring-Physik (Federsteifigkeit und Dämpfung). Bei Hover-Elementen wächst er von 8px auf 48px. Auf Touch-Geräten und bei prefers-reduced-motion wird er automatisch deaktiviert.
Animierter Button-Rahmen: Ein leuchtender Punkt wandert entlang der SVG-Kontur eines Buttons. Die Position wird per useAnimationFrame() berechnet, der Punkt gleitet in einem Dreisekundenzyklus einmal um die gesamte Außenkante.
Warum zwei verschiedene Ansätze?
embedflow.de ist eine Content-Seite. Besucher kommen, um Informationen zu finden, nicht um Animationen zu bewundern. CSS-Animationen reichen dafür aus und halten das JavaScript-Bundle klein.
web.embedflow.de ist ein Portfolio. Hier sollen die Animationen zeigen, was wir technisch beherrschen. Framer Motion bietet dafür Spring-Physik, synchronisierte Transformationen und eine deklarative API, die mit reinem CSS schwer nachzubauen wäre.
WebGL: Galaxy und Aurora
Beide Seiten nutzen WebGL-Shader für Hintergrundeffekte, aber mit unterschiedlicher Komplexität.
embedflow.de: Galaxy-Hintergrund
Der Hero-Bereich zeigt einen animierten Sternenhimmel. Das ist kein Video und kein GIF, sondern ein Fragment-Shader, der Sterne prozedural generiert. Eine Hash-Funktion platziert Lichtpunkte pseudo-zufällig, vier Parallax-Ebenen erzeugen Tiefe, und ein Twinkle-Effekt lässt einzelne Sterne pulsieren.
Leistungstechnisch wichtig: Der Shader läuft nur, solange der Hero-Bereich sichtbar ist. Ein Intersection Observer pausiert das Rendering, sobald der Besucher nach unten scrollt. Das spart GPU-Zyklen auf dem gesamten Rest der Seite.
Die Mausbewegung beeinflusst den Sternenhimmel leicht, aber nicht über direkte Positionszuordnung (das wäre ruckelig), sondern über eine gedämpfte Interpolation. Die Sterne folgen der Maus mit Verzögerung, was den Effekt natürlicher wirken lässt.
web.embedflow.de: Aurora-Effekt
Die Webdesign-Seite nutzt einen Simplex-Noise-Shader, der organische Wellenformen erzeugt, ähnlich wie Nordlichter. Drei Farbstufen werden über Rausch-Funktionen interpoliert, die sich zeitabhängig verschieben. Das Ergebnis ist ein sich langsam verändernder Farbverlauf, der nie gleich aussieht.
Beide Shader-Effekte werden per Dynamic Import geladen (ssr: false), damit sie den Server-seitigen Render-Prozess nicht blockieren und das initiale HTML schnell ausgeliefert wird.
Interaktive Karten: Glow, Partikel und Tilt
Die MagicCard-Komponente auf embedflow.de kombiniert mehrere Effekte zu einem interaktiven Element:
Bei Hover erscheint ein radialer Glow-Effekt, der der Mausposition folgt. Gleichzeitig streuen 16 Partikel aus dem Zentrum nach außen, jedes mit eigener Laufzeit und Opazität. Die Karte kippt leicht in Richtung der Maus (Tilt-Effekt mit Perspektive), was einen dreidimensionalen Eindruck erzeugt.
Für die Performance werden die Partikel beim ersten Hover einmalig initialisiert und bei späteren Hovers wiederverwendet. Die Position der Karte wird gecacht, um Layout-Neuberechnungen während der Mausbewegung zu vermeiden.
SEO und Sichtbarkeit für Suchmaschinen und KI
Structured Data
embedflow.de implementiert mehrere JSON-LD-Schemas:
- Organization: Firmenname, Adresse, Gründungsjahr, Expertise-Bereiche, Social-Media-Profile
- LocalBusiness: Geolokation (Ingolstadt), Einzugsgebiet, Kontaktdaten
- WebSite: Sprachzuordnung (de-DE), Verlags-Referenz
- Service: Pro Service-Seite ein eigenes Schema mit Typ, Anbieter und Verfügbarkeit
- FAQPage: Auf jeder Service-Seite und der Homepage werden FAQ-Abschnitte als strukturiertes Schema ausgezeichnet
- BlogPosting: Jeder Blog-Beitrag erhält Autor, Datum, Keywords und Breadcrumb-Navigation
- BreadcrumbList: Für Service-Seiten, Blog-Posts und Standort-Seiten
Diese Daten helfen Suchmaschinen und KI-Systemen, den Inhalt der Seite zu verstehen und in Ergebnissen korrekt darzustellen. Besonders die FAQPage-Schemas und BlogPosting-Schemas erhöhen die Chance, in Featured Snippets und AI Overviews zitiert zu werden.
Sitemap-Strategie
Die Sitemap wird dynamisch generiert und nutzt die Git-History, um das letzte Änderungsdatum jeder Seite zu bestimmen. Das ist genauer als ein festes Datum pro Build: Wenn sich nur die Datenschutz-Seite ändert, bekommt nur diese ein neues lastModified.
Seiten werden nach Priorität gewichtet: Homepage (1.0), Service-Seiten (0.9), Standort-Seiten (0.85), Blog-Posts (0.7), Impressum und Datenschutz (0.2). Blog-URLs werden automatisch aus den MDX-Dateien im Content-Verzeichnis generiert. Ein neuer Blog-Post braucht keinen Code-Change in der Sitemap.
robots.txt und KI-Crawler
In der robots.txt sind neben dem Standard-Googlebot auch KI-spezifische Crawler explizit erlaubt: GPTBot und ChatGPT-User (OpenAI), ClaudeBot und anthropic-ai (Anthropic), PerplexityBot (Perplexity), Google-Extended (Gemini), Applebot-Extended (Apple Intelligence) und CCBot (Common Crawl). Das ist eine bewusste Entscheidung: Wir wollen, dass KI-Systeme unsere Inhalte finden und zitieren können.
Server-Side Rendering
Beide Seiten nutzen Next.js mit Server-Side Rendering und statischer Generierung. Das heißt: Suchmaschinen sehen beim Crawlen den vollständigen HTML-Inhalt, nicht eine leere Seite, die erst per JavaScript befüllt wird. Heading-Hierarchie, Meta-Tags, Open-Graph-Daten und strukturierte Schemas sind direkt im initialen HTML vorhanden.
Performance-Entscheidungen
Das Ergebnis dieser Entscheidungen lässt sich messen. embedflow.de erreicht in Google Lighthouse einen Performance-Score von 99/100, Accessibility 100/100, Best Practices 96/100 und SEO 100/100. Das sind keine theoretischen Werte aus einem lokalen Build, sondern Messungen gegen die produktive Seite.
Einige Entscheidungen, die sich auf die Ladezeit auswirken:
Font-Loading: Eine einzige Schriftfamilie auf embedflow.de, nur Latin-Subset. Das spart mehrere hundert Kilobyte gegenüber einer Konfiguration mit zwei oder drei Fonts in allen Schnitten.
Dynamic Imports: WebGL-Komponenten (Galaxy, Aurora) werden per dynamic() mit ssr: false geladen. Sie blockieren weder den Server-Render noch den Critical Rendering Path.
Bild-Optimierung: Alle Bilder laufen über next/image mit automatischer Formatkonvertierung (WebP wo unterstützt), Größenanpassung und Lazy Loading. Hero-Bilder werden mit priority markiert, damit sie sofort geladen werden.
CSS vs. Runtime: Die Entscheidung, auf embedflow.de keine Framer Motion zu verwenden, spart ca. 30-40KB gzipped aus dem Client-Bundle. Für eine Content-Seite mit primär informativem Zweck ist das ein sinnvoller Trade-off.
Was wir anders machen als Template-Seiten
Webseiten-Templates und Baukästen lösen ein echtes Problem: Sie sind schnell und günstig. Aber sie haben Grenzen, die spätestens bei Performance, SEO und individuellen Interaktionen sichtbar werden.
Viele Template-Seiten, besonders auf WordPress-Basis, laden fünf bis zehn JavaScript-Bibliotheken, von denen der Besucher drei braucht. Sie rendern oft Client-seitig, was die Indexierung verlangsamen kann und für KI-Crawler problematisch ist. Ihre Design-Optionen enden dort, wo die Theme-Einstellungen aufhören.
Unsere Seiten sind von Grund auf für den jeweiligen Zweck gebaut. Die Animation auf der Unternehmensseite ist eine CSS-Klasse, kein 50KB-Plugin. Der Sternenhimmel ist ein Shader, der bei Bedarf pausiert, kein eingebettetes Video. Die Strukturdaten sind maschinenlesbar in den HTML-Kopf geschrieben, nicht als Plugin nachinstalliert.
Das ist aufwendiger. Aber das Ergebnis ist eine Seite, die schnell lädt, in Suchmaschinen sichtbar ist und sich anfühlt, als wäre sie für genau diesen Zweck gemacht worden. Weil sie es ist.
Häufige Fragen
Warum Next.js statt WordPress?
Next.js rendert Seiten serverseitig und liefert fertiges HTML aus. Suchmaschinen und KI-Crawler sehen sofort den vollständigen Inhalt. Dazu kommen automatische Bild-Optimierung, Code-Splitting und volle Kontrolle über Performance — ohne Plugin-Abhängigkeiten.
Was ist Neomorphismus im Webdesign?
Neomorphismus erzeugt den Eindruck von erhabenen oder eingedrückten Elementen durch weiche Schatten. Zwei Schattenebenen — eine helle und eine dunkle Seite — simulieren Tiefe, ohne klassische Borders oder harte Kanten zu verwenden.
Was ist der Unterschied zwischen CSS-Animationen und Framer Motion?
CSS-Animationen laufen ohne zusätzliche JavaScript-Bibliothek und halten das Bundle klein. Framer Motion bietet Spring-Physik, synchronisierte Transformationen und eine deklarative API für komplexere Effekte. Für Content-Seiten reicht CSS, für Showcases und Portfolios lohnt sich Framer Motion.
Wie optimiert man Webseiten für KI-Suchmaschinen?
Server-Side Rendering, damit der Inhalt ohne JavaScript sichtbar ist. Strukturierte Daten (JSON-LD) für Organisation, Services und FAQ. Explizite Erlaubnis für KI-Crawler in der robots.txt. Und Inhalte, die als eigenständige Antworten funktionieren — nicht nur als Teil einer Seite.