Noctis Studio Eine Dunkelkammer, keine Galerie

01 · Überblick

Eine Dunkelkammer, keine Galerie

Fotografen-Websites machen meist einen von zwei Fehlern: ein Lightbox-Raster, das jedes Bild als austauschbar behandelt, oder eine randlose Diashow, in der man sehr lange nichts anschaut. Für dieses Konzept habe ich mir Noctis als Studio vorgestellt, das jedes Bild von Hand gradet und achtzehn Hochzeiten im Jahr annimmt — die Site musste also so wählerisch sein wie der Buchungskalender.

Stattdessen verhält sie sich wie eine Dunkelkammer. Der Grund ist beinahe schwarz, die einzige Farbe ist ein Signalrot, das so verwendet wird, wie eine Kamera es verwendet, Reveals kommen als Verschlusswischer statt als Blende, und die Arbeiten liegen auf einem Streifen, den man zieht — ein Kontaktbogen, kein Karussell.

02 · Die Idee

Vorhandenes Licht, von Hand gegradet

Drei Entscheidungen tragen den Build, und jede borgt sich die Disziplin der Geräte statt einer Web-Konvention.

• Rot ist ein Signal

  Aufnahmepunkte, Bildzähler, eine Handlungsaufforderung. Nie ein Hintergrund, nie Dekoration — genau so, wie die Kamera es verwendet.

• Wischer, keine Blenden

  Jeder Reveal ist ein clip-path, der in eine Richtung läuft. Er liest sich als Verschluss, und das ist die eine Metapher, die sich diese Marke verdient hat.

• Ein Cursor, der sich benimmt

  Ein eigener Punkt, nur auf feinen Zeigern, der den Systemcursor über Text oder einem Formularfeld nie ersetzt.

03 · Ziele

Was die Seite leisten musste

1. Arbeiten in einer Größe zeigen, die es wert ist

   Ein horizontaler Streifen, auf dem jedes Bild groß genug ist, um beurteilt zu werden, und auf dem das Weiterkommen ein bewusster Akt ist statt einer Autoplay-Schleife.

2. Drei Disziplinen ohne drei Seiten erklären

   Hochzeiten, Editorial und Kommerz in einem Abschnitt unter einer Gradierung, weil das Studio sie gleich behandelt.

3. Echte Verfügbarkeit veröffentlichen

   Ein Buchungskalender, aus dem aktuellen Datum berechnet und am Monatsersten beginnend, statt eines Formulars, das verspricht, dass sich jemand melden wird.

4. Die Leserin nie im Dunkeln festhalten

   Scheitert das Skript, entfernt der onerror-Handler die JS-Klasse, damit nichts hinter einem Wischer verborgen bleibt, der nie laufen wird.

04 · Baureihenfolge

Zehn Module, der Reihe nach

Das Skript ist als zehn nummerierte Module geschrieben, und sie kamen in der Reihenfolge hinein, in der die Seite von ihnen abhängt: die Gradierung, dann der Rahmen darum, dann die Bewegung, dann die zwei Dinge, die eine Anfrage entgegennehmen.

1. Die Gradierung

   Vierzehn Custom Properties auf :root: beinahe Schwarz, ein angehobenes Schwarz, damit Panels ohne Rahmen lesbar sind, ein Silber und zwei Haarlinien-Grautöne, und drei Rottöne — das Markenrot, ein tieferer Ton für weiße Schrift auf roter Fläche bei 4,95:1 und ein hellerer für rote Schrift auf dem beinahe schwarzen Grund bei 4,64:1.

2. Kopfbereich und Overlay-Navigation

   Ein sich verdichtender Kopfbereich und ein bildschirmfüllendes Menü mit Tab-Falle. Die kamen zuerst, weil alles andere auf der Seite darunter sitzt.

3. Der Wischer

   Eine Easing-Kurve, eine clip-path-Richtung, über eine einzige Klasse angewendet, damit jeder Abschnitt identisch erscheint.

4. Die Zieh-Leiste

   Pointer Capture, Pfeiltasten, ein Live-Zähler und Fokussicherheit für die Tastatur — das größte Einzelmodul im Build.

5. Der Kalender und das Formular

   Verfügbarkeit aus dem tatsächlichen Datum abgeleitet, dann eine Buchungsanfrage mit fünf Feldern, die eine Referenz zurückgibt.

05 · Architektur

Drei Dateien

Kein Bundler, keine Slider-Bibliothek und keinerlei Abhängigkeit. Die Leiste, der Cursor, die Wischer und der Kalender sind 796 von Hand geschriebene Zeilen über zehn Module in einer Datei.

06 · Was sich gewehrt hat

Probleme, und was sie gelöst hat

1. Problem

   Ziehen zum Scrollen, gebaut mit mousemove-Listenern auf Dokumentebene, bricht in dem Moment, in dem der Cursor das Element verlässt — und verliert jedes Mal einen Listener, wenn der Zeiger abhandenkommt.

   Lösung

   setPointerCapture. Das Element bekommt weiter Ereignisse, wohin der Cursor auch geht, und der Browser gibt die Erfassung bei pointerup oder pointercancel selbst frei — es gibt keinen Aufräumcode, den man vergessen könnte.

2. Problem

   Ein Ziehen, das über einem Link endet, löst einen Klick aus — die Maus nach dem Bewegen der Leiste loszulassen navigiert also von der Seite weg.

   Lösung

   Den zurückgelegten Weg mitzählen und den Klick in der Capture-Phase schlucken, wenn er ein paar Pixel überschreitet. Unter der Schwelle war es ein Klick, darüber ein Ziehen.

3. Problem

   Ein eigener Cursor ist der schnellste Weg, eine Site kaputt wirken zu lassen: Er hinkt auf einem Trackpad hinterher, verschwindet über Eingabefeldern und bedeutet auf Touch überhaupt nichts.

   Lösung

   Er hängt hinter einer Fine-Pointer-Query, existiert also auf Touch nie, und der echte Cursor wird über jedem bedienbaren Element wiederhergestellt, statt global versteckt zu werden.

4. Problem

   clip-path-Reveals verstecken Inhalt standardmäßig, und das ist die dunkelste Seite der Sammlung — ein gescheitertes Skript würde einen schwarzen Bildschirm ohne Erklärung hinterlassen.

   Lösung

   Das Skript-Tag trägt ein onerror, das die JS-Klasse entfernt, sodass ein fehlgeschlagener Ladevorgang jeden Wischer in seinen gesetzten Zustand zurückstellt, statt das gesamte Portfolio des Studios zu verstecken.

07 · Behaltenswert

Die Teile, die es wert sind zu bleiben

• Ausgewählte Arbeiten

  Ein Zieh-Streifen mit Pfeilen, einem Zähler und Blättern per Tastatur. Jede Eingabeart erreicht jedes Bild.

• Der Buchungskalender

  Verfügbarkeit aus dem tatsächlichen Datum abgeleitet und am Monatsersten beginnend — echte Knappheit statt einer behaupteten.

• Das Kamera-Display

  Eine Bildanzeige im Hero, die sich die Typografie des Suchers borgt. Reines CSS, kein Canvas und kein Bild.

• Wir lassen das Licht aus

  Ein Atelier-Abschnitt, der die Gradierung erklärt — die eine Stelle, an der das Studio über Methode spricht statt Ergebnisse zu zeigen.

08 · Live starten

Hier starten

Der echte Build, eingebettet und laufend. Es wird nichts davon geladen, bevor du es verlangst — die Seite, die du gerade liest, bleibt also so leicht, wie sie aussieht.

noctisstudio.co

Hier starten

Der echte Build, laufend in der Seite. Die Live-Vorschau ist eine eingebettete Seite. Drücke Escape, um sie zu verlassen.

Im Vollbild öffnen