Making-of: Diese Website

Ein kurzer Blick hinter die Kulissen — wie die Odisho-Tech-Solutions-Website entstanden ist und wie man so etwas nachbauen kann. Gebaut von Claude (Fable) in einer einzigen Session, komplett ohne Framework und ohne Build-Step.

1. Konzept: Das Logo ist die Idee

Das Odisho-Logo zeigt einen Monitor, der sich links in grüne Pixel auflöst. Diese Metapher trägt die ganze Seite: Aus Chaos wird Ordnung — Technik setzt sich zusammen, bis sie einfach funktioniert.

• Im Hero fliegen die Pixel einzeln ein und setzen den Monitor zusammen — das Logo wird zur Ladeanimation.
• Ein dezentes Canvas-Partikelfeld lässt Pixel im Hintergrund nach oben treiben.
• Pixel-Formen tauchen als Motiv überall wieder auf: Marquee-Trenner, Listen-Punkte, Kontakt-Deko.

2. Das Logo als SVG nachgebaut

Statt das Logo als Bild einzubinden, wurde es als Inline-SVG aus ca. 25 Grundformen rekonstruiert (abgerundete Rechtecke + Kreise). Jede Form bekommt einen eigenen Verzögerungs-Index als CSS-Custom-Property:

<rect class="px" style="--i:5" x="86" y="66" width="126" height="40" rx="20"/>

.logo-scene.play .px {
  animation: pxIn .8s cubic-bezier(.34,1.56,.64,1) forwards;
  animation-delay: calc(var(--i) * 70ms);
}

Der Trick für die organisch „verschmolzene" linke Kante des Monitors: ein paar Pills in exakt derselben Gehäusefarbe überlappen das Gehäuse — gleiche Farbe, unsichtbarer Übergang.

3. Farbpalette & Typografie

Alle Farben stammen direkt aus dem Logo und leben als CSS-Variablen: Limettengrün #8DC63F, Blattgrün #CDE3AC, Türkis #4FB8B0, Navy #22265B und Monitor-Grau #54565A.

Schriften: Bricolage Grotesque (Display, charaktervoll aber gut lesbar) und Inter (Fließtext). Beide als Variable Fonts lokal gehostet — zusammen nur ~125 KB, kein externer Request, DSGVO-freundlich.

4. Die interaktive Smart-Home-Szene

Das Herzstück: ein Wohnzimmer bei Nacht, komplett als SVG gezeichnet. Vier Schalter (Licht, Heizung, Kamera, Tür) setzen CSS-Klassen auf das SVG — der Rest ist reines CSS:

.sh-scene.licht-on .lampglow { opacity: 1; }
.sh-scene.heizung-on .sh-heatwave { animation: heat 1.6s infinite; }
.sh-scene.kamera-on .camcone { animation: camScan 3.4s infinite; }

Das Thermostat zählt beim Einschalten sichtbar von 19,5° auf 22,0° hoch — Zahlen, die man sich vorstellen kann, verkaufen besser als jedes Feature-Sheet.

5. Weitere Techniken

• 3D-Tilt-Karten: pointermove + perspective()/rotateX/Y, gedrosselt über requestAnimationFrame, nur auf Geräten mit Maus (hover: hover-Media-Query).
• Scroll-Reveals: ein einziger IntersectionObserver, Klasse .in, gestaffelte Verzögerung via --d.
• Fachchinesisch-Übersetzer: 3D-Kartenflip (rotateX(180deg) + backface-visibility) — Fachjargon dreht sich zu Klartext. Philosophie als Interaktion.
• Barrierefreiheit: prefers-reduced-motion deaktiviert alle Animationen, Schalter nutzen aria-pressed/role="switch", Kontraste auf Lesbarkeit geprüft.
• Performance: kein Framework, keine Bibliothek, keine Bilder — die ganze Grafik ist SVG + CSS. Partikel pausieren, wenn der Tab unsichtbar ist.

6. Social-Preview mit KI (Higgsfield)

Das Vorschaubild fürs Teilen (og:image) entstand hybrid: Zuerst wurde das SVG-Logo per Playwright als PNG gerendert und als Referenz zu Higgsfield hochgeladen. Seedream 5.0 lite verwandelte die flache Vektorgrafik dann in einen glossy 3D-Render — mit exakten Markenfarben im Prompt verankert. Den Schriftzug hat die KI bewusst nicht gemacht (Bildmodelle vertippen sich gern): Der wurde als HTML über den Render gelegt und wieder per Playwright zum fertigen 1200×630-Bild verschmolzen.

SVG → Playwright-PNG → Higgsfield (image-to-image)
→ 3D-Render → HTML-Compositing → og-image.jpg

7. Deployment auf Vercel

Die Seite ist ein statischer Ordner — HTML, CSS, JS, Fonts. Deployment in einem Befehl:

npx vercel deploy --prod --yes

Die vercel.json sorgt für saubere URLs (/guide statt /guide/index.html) und aggressives Font-Caching:

{
  "cleanUrls": true,
  "headers": [{
    "source": "/fonts/(.*)",
    "headers": [{ "key": "Cache-Control",
                  "value": "public, max-age=31536000, immutable" }]
  }]
}

8. Iterationspässe

Nach dem ersten Build wurde die Seite in mindestens drei Durchgängen mit der Feinzahnbürste geprüft: Desktop- und Mobile-Screenshots (380 px), Browser-Konsole auf Fehler, Kontraste, Animations-Timing, Responsive-Brüche. Erst wenn ein Durchgang nichts Neues findet, ist Schluss.