Luminé: Website einer Agentur

Ausgangslage

Luminé entwickelt und produziert Social-Media-Content für Cafés, Handwerk, Sport und Personal Brands, von der Strategie über den Dreh bis zum Schnitt. Eine Agentur, deren Produkt Video ist, braucht eine Website, die Arbeiten zeigt, statt sie zu beschreiben.

Vor dem Umbau stand ein Audit des bestehenden Stands: 12 Routen, jeweils in 8 Bildschirmbreiten. Es fand unter anderem ein Formular ohne Versandweg, Kennzahlen ohne Beleg, drei unterschiedliche visuelle Welten auf einer Seite, einen einzigen Seitentitel für alle Routen und einen Akzentton, der den Kontrast nach WCAG AA verfehlt (4,02 zu 1).

Gestaltungsentscheidungen

• Konzept: Die Seite ist ein Kontaktbogen. Arbeiten stehen in Reihenfolge, mit Frame-Nummer wie (01) und einer Meta-Zeile. Es gibt einen Timecode im Hero und vier große Zeilen „Stoppen. Schauen. Merken. Handeln.“ als Manifest.
• Bildsprache: Statt Stockmaterial läuft im Hero ein Korridor aus 18 Karten mit echten Kundenclips. Jede Karte hat ein Standbild und ein stummes Loop-Video darüber. Die Headline ist als Glasschrift gesetzt: Die laufenden Clips brechen sich in den Buchstaben.
• Typografie: Bricolage Grotesque für Überschriften, Instrument Sans für Fließtext, beide als Variable-Font-Dateien selbst gehostet, mit den Lizenzdateien im Projekt.
• Farbe: Papierton (#F2EEE6) als Grund, Ink (#12100E) für die dunklen Bänder, Klein-Blau (#2233E0) als einzige Akzentfarbe. Gelb (#FFD23F) erscheint nur als Marker-Fläche hinter einem Wort. Die Kontrastwerte stehen als Kommentar an den Tokens, etwa 6,93 zu 1 für Blau auf Papier. Ein Umschalter wechselt zwischen hellem und dunklem Theme, die Ink-Bänder bleiben in beiden dunkel.
• Bewegung: Ein Ladescreen läuft nur beim Direktaufruf der Startseite, mindestens 900 und höchstens 2500 Millisekunden, und wartet dann auf ein Tippen. Diese Geste schaltet die Videos für Safari und iOS frei. Ein Vorhang begleitet den Seitenwechsel, Lenis glättet das Scrollen (1,1 Sekunden). Bei reduzierter Bewegung entfallen Ladescreen und Smooth Scroll.
• Work-Bahn: Vertikales Scrollen fährt die Kacheln seitlich, ein Video nach dem anderen liegt mittig. Videos starten ab 60 Prozent Sichtbarkeit, höchstens zwei laufen gleichzeitig, das Standbild bleibt darunter.
• Kontakt-Abschluss: Eine Pixel-Berglandschaft auf einem Canvas mit 8x8-Bayer-Dithering, hell und dunkel getrennt, deren Vordergrund in genau die Farbe des Footers übergeht.

Aufbau und Seiten

Die Startseite besteht aus Hero, Proof-Streifen, Work-Bahn, Manifest, Leistungen-Teaser mit fünf Zeilen und dem Kontakt-Abschnitt. Dazu kommen die Seiten Leistungen, Projekte, vier Fallseiten, Anfrage, Impressum, Datenschutz und eine 404-Seite.

Die Anfrage ist ein echtes Formular mit Validierung, Honeypot-Feld und Zeitprüfung gegen Bots. Ein Entwurf bleibt in der Sitzung erhalten. Die Erfolgsmeldung erscheint nur, wenn der Server mit einem 2xx-Status antwortet. Kontaktweg und Endpunkt kommen aus Umgebungsvariablen und stehen nie im Code.

Technik

Die Seite läuft mit Vite 7, React 19, TypeScript und react-router-dom, gestaltet mit CSS-Modulen. Lenis übernimmt das Scrollen, die Bibliothek motion nur das schwebende Feld auf der Projekte-Seite. Unterseiten werden erst beim Aufruf geladen. Nach dem Entfernen von three.js, GSAP und mehreren Effekt-Komponenten sank das Start-JavaScript laut Build-Protokoll von 115,6 auf 86,0 kB gzip.

Jede Route setzt Titel und Beschreibung selbst. Im HTML stehen Open-Graph-Angaben, JSON-LD (Organization, WebSite), Sitemap, robots.txt und ein noscript-Block mit den wichtigsten Links. Da die Seite eine Single-Page-App ist, sehen Crawler ohne JavaScript diese Grundwerte, aber nicht alle Inhalte.

Was das Projekt zeigt

Ein Projekt mit viel Bewegung braucht Regeln: eine Hauptbewegung pro Abschnitt, jede mit statischem Endzustand bei reduzierter Bewegung, Videos nur, wenn sie im Bild sind. Luminé zeigt, wie sich eine bildstarke Seite bauen lässt, ohne Ladezeit und Tastaturbedienung zu opfern: Die 18 Korridor-Karten sind keine Tab-Stops, der Skip-Link steht als erstes Element im DOM.