CASE /// ERLEBNIS · NORDSEE
Leuchtfeuer Nordsee
Konzept von RAVAROErfundenes Beispiel: Den Leuchtturm gibt es nicht, die Website schon.
Vier Tage, zehn Fassungen, ein Leuchtturm — und eine Linse, die man selbst zerlegt.
Wo Erlebnisseiten stehen
Ein Ort, der besucht werden will — ein Hotel am Meer, ein Ausflugsziel, eine Attraktion —, eröffnet seine Website meist mit einem großen Foto und einer Überschrift darüber. Das Foto ist schön, und es ist flach: Der Besucher sieht den Ort an, er ist nicht darin.
Die Effekte, die das ändern — Tiefe, Bewegung, eine Kamera, die fliegt —, werden oft als Motion-Design gezeigt: als Video einer Website, nicht als Website, die man öffnen kann.
Was das echte Problem ist
Ein Bild von einem Ort hält niemanden fest. Die ersten Sekunden entscheiden, ob jemand bleibt, und ein Standfoto verbraucht sie mit Ansehen statt mit Ankommen.
Und eine gesehene Vorlage nachzubauen, ist die leichte Hälfte. Die schwere Hälfte ist, dass es als echte Seite funktioniert: scharf auf einem 5K-Schirm, leicht genug fürs Handy, in jedem Zustand lesbar — und trotzdem eine Website, kein Film, den man absitzen muss.
Die Entscheidung — und warum
Wir haben eine Vorlage, die uns beeindruckt hat, Lage für Lage zerlegt und ihr Rezept mit eigenem Motiv nachgebaut — als echte Website.
Das Rezept hat vier Lagen: hinten die Szene, ein einziges Bild, aus dem ein Film wird; davor ein Riesenwort; davor eine Grasdüne, aus demselben Bild freigestellt; obenauf Überschrift und Text. Der Trick in einem Satz: Das Wort steht zwischen Szene und Düne, und weil die Düne es teilweise verdeckt, glaubt das Auge den Raum.
Die Quelle steht auf der Seite selbst: die Vorlage „Secret“ von Daniel Snows (figmaformotion). Übernommen haben wir das Rezept. Motiv, Leuchtturm, Filme und Code sind unsere eigenen.
Was daraus wurde
Live ansehenEin durchgehender Anflug: von der Düne in der blauen Stunde durch das Riesenwort hindurch, hinaus über die Wellen und hinauf zur Laterne — und von dort hinein in die Linse selbst.
Ein Leuchtturm in der blauen Stunde, das Meer bewegt sich, der Strahl dreht. Davor das Riesenwort Licht, mitten im Strandhafer. Ein Knopf: zum Licht fliegen — oder einfach scrollen.
Das Scrollen trägt die Kamera durch eine Öffnung im Wort. Danach läuft der Flug von selbst, tief über die Wellen und steil am Turm hinauf.
An der Galerie läuft die Brandung weiter. Die Laterne leuchtet unter dem Zeiger auf und lässt sich öffnen.
Die Fresnel-Linse ist ein echtes 3D-Objekt im Browser. Sie folgt dem Zeiger und zerlegt sich in vier Schritten: die Lampe, die Ringe, die das Licht bündeln, die Drehung, die dem Turm seine Kennung gibt, die Reichweite über die Erdkrümmung.
In jedem Ruhezustand stehen Überschrift, eine Erklärung und genau ein nächster Schritt. Neben jedem Klick gibt es einen Weg per Scrollen, damit niemand hängen bleibt.
Den Regler ziehen. Links der erste Beweis vom ersten Tag: Der Turm ist klein, eine gerade Kante schneidet das Wort ab — das liest sich wie ein Balken, nicht wie Raum. Rechts die Fassung vom 3. Oktober: der Turm als Held, das Wort steht hinter ihm im Gras.
Bildschirmfotos der Fassung vom 3. Oktober 2026 (aufgenommen in Version 0.9, die Seite steht inzwischen bei Version 0.11.2; Kapitel 2 und 3 stammen aus Version 0.7 und sind seitdem inhaltlich unverändert). Turm, Jahreszahl, Kennung und Reichweite sind erfunden — die Seite sagt das selbst.
Was es fürs Geschäft tut
Ein Ort, zu dem man hingeflogen ist, bleibt anders hängen als einer, den man angesehen hat. Überall, wo ein Betrieb einen Ort oder ein Erlebnis verkauft — ein Hotel am Meer, ein Ausflugsziel, eine Location, eine Attraktion —, trägt dasselbe Rezept sein eigenes Motiv: sein Haus, seine Küste, seine Halle statt eines Leuchtturms.
Die Seite erklärt außerdem ohne Textwand. Drei Kapitel mit je einem Satz und einer Handlung zeigen, wie ein Leuchtfeuer funktioniert — der Besucher findet es selbst heraus, indem er die Laterne öffnet und die Linse dreht. Derselbe Aufbau trägt jedes Produkt, dessen Inneres das Argument ist.
Und sie zeigt eine Methode statt eines Effekts: Wir können eine Vorlage, die wir irgendwo sehen, in ihre Teile zerlegen und mit einem anderen Motiv als echte Website bauen.
So haben wir gearbeitet
Zuerst zerlegen. Bevor ein einziges Bild entstand, haben wir die Vorlage in ihre Lagen zerlegt und das Rezept in einem Satz aufgeschrieben. Dann ein Drehbuch: Held, Richtung, Lohn, und drei Kamerastandpunkte für den Flug — die Düne, die Wellen, die Galerie.
Die Standbilder entstanden mit Codex, die Filme mit Seedance 2.0: fünfzehn kurze Clips, jeder aus einem Start- und einem Endbild. Jeder Film wurde lokal hochgerechnet und wird in der Größe ausgeliefert, die zum Bildschirm passt — 2560, 1920 oder Hochformat.
Wo etwas falsch aussah, haben wir die Ursache eine Stufe früher gesucht. Der Turm wirkte zuerst hineinkopiert. Der Fehler lag nicht im Film, sondern im Startbild, das den Turm flach beleuchtet und hart umrandet zeigte — jeder Film daraus erbte das. Ein neues, fotoreales Startbild hat es für alle Filme auf einmal behoben.
Ein Clip mit Logikbruch wurde nicht versteckt, sondern neu bestellt. In einem gelieferten Flug kam der Turm ganz nah und stand eine Sekunde später wieder weit hinten am Horizont. Wir haben ihn mit schärferem Auftrag neu bestellt, eingebaut wurde nur der berichtigte Clip.
Geprüft wurde nicht nach Gefühl. Jede Fassung bekam einen Prüfbericht mit Bildschirmbildern bei 2560, 1440 und 390 Bildpunkten, gemessener Verdeckung, Ladegewicht und null Fehlern in der Konsole — rund 3.200 Prüfbilder über zehn Fassungen.
Von der ersten Idee bis zur heutigen Fassung vergingen vier Tage, vom 30. September bis 3. Oktober 2026.
Warum wir das gebaut haben
Leuchtfeuer Nordsee gibt es nicht, und genau deshalb konnten wir es bauen, ohne auf einen Auftrag zu warten. Die Frage war: Können wir das Rezept einer Vorlage, die uns beeindruckt, in eine echte Website verwandeln — mit eigenem Motiv, scharf auf dem großen Schirm und bedienbar am Handy?
Für einen Betrieb, der einen Ort oder ein Erlebnis verkauft, ist das die eigentliche Frage. Nicht, ob ein Effekt im Video gut aussieht, sondern ob ein Besucher auf der Seite ankommt und bleibt.
Solche Konzepte bauen wir, damit ein Kunde vor seiner Entscheidung sieht, was möglich ist. Nicht als Versprechen, sondern als Adresse, die man anklicken kann.
Leuchtfeuer Nordsee ist erfunden. Den Turm, das Jahr 1897, seine Kennung und seine Reichweite haben wir uns ausgedacht; die Seite nennt sich selbst Beispielseite und kennzeichnet diese Werte als Beispiel.
Das Rezept ist nicht von uns. Der Aufbau in Lagen — Szene, Riesenwort, freigestellte Düne — folgt der Vorlage „Secret“ von Daniel Snows (figmaformotion), und die Seite sagt das in ihrem Fuß. Motiv, Filme, Code und die Kapitel zum Mitmachen sind unsere eigenen.
Zu sehen ist hier Version 0.11.2: Das Wort steht hinter dem Turm, das Licht der Laterne färbt die Schrift, und am Ende führt die Seite direkt zu RAVARO. Davor kommt „Dein Wort im Licht“: Die Seite fragt den Besucher, was seine Website bei seinen Kunden auslösen soll, er schreibt sein Wort ins Licht, und der Kegel der Laterne landet darauf. Geprüft wurde in Chrome und in Safaris Browser-Kern bei 2560, 1440 und 390 Bildpunkten; die Probe auf einem echten iPhone steht noch aus.
Gebaut ohne Auftrag. Bewiesen wird damit die Methode, keine Verkaufszahl.
Eine Website, die nur gut aussieht, ist totes Kapital. Website Systems baut eine Seite aus Ihren echten Unternehmenszielen — die Ihnen Arbeit abnimmt und Besucher zu echten Anfragen macht.
WEITERE CASES ///
Nächster Build
NEPHELE Residences
Niemand kauft das Projekt. Man kauft Wohnung A1803.
NUIT VISIBLE
Einen Duft kann man nicht zeigen. Also erzählt ihn der Scroll.
The Elite Cars
Ein Supersportwagen-Händler, dessen Website schon gut aussah — und trotzdem keinem etwas verkaufen konnte, der keine Lust hatte, vorbeizufahren.
CLAW BBQ
Ich kenne diesen Ort. Ihre Website nicht.
Juwelier Dührkoop
Feine Uhren, verkauft von einer Seite, in die man sich nicht hineinlehnen konnte.
Andy Engel
Ein Mann, für den Menschen über Kontinente fliegen — mit einer Website für Leute, die vorbeifahren.
BSD Wiedemann
Wir haben seine Website aufhören lassen, Feuerlöscher zu verkaufen — damit das Unternehmen Expertise verkaufen kann.
Hofmühl
Eine Brauerei verkauft auf ihrer Website kein Bier. Sie verkauft den Grund, warum jemand im Laden nach dieser Flasche greift.
Aurora Grand
Eine Hotel-Website, durch die man läuft, bevor man bucht.
Alle unsere Website-Arbeiten
Alle Projekte in dieser Disziplin — mit Zahlen, Videos und Ergebnissen.