CASE /// EXPERIENCE · NORTH SEA
Leuchtfeuer Nordsee
Concept by RAVAROInvented example: the lighthouse doesn't exist, the website does.
Four days, ten versions, one lighthouse — and a lens you take apart yourself.
Where experience sites stand
A place that wants to be visited — a hotel by the sea, a destination, an attraction — usually opens its website with one large photo and a headline across it. The photo is beautiful, and it is flat: the visitor looks at the place, he is not in it.
The effects that change this — depth, movement, a camera that flies — are often shown as motion designs: a video of a website, not a website you can open.
What the real problem is
A picture of a place holds nobody. The first seconds decide whether a visitor stays, and a still photo spends them on looking instead of arriving.
And copying a design you have seen is the easy half. The hard half is making it work as a real page: sharp on a 5K screen, light enough for a phone, readable in every state — and still a website, not a film you have to sit through.
The decision — and why
We took a design we admired apart, layer by layer, and rebuilt its recipe with a motif of our own — as a real website.
The recipe has four layers: at the back the scene, a single image turned into a film; in front of it a giant word; in front of that a grassy dune cut out of the same image; on top the heading and the text. The trick in one sentence: the word stands between the scene and the dune, and because the dune covers part of it, the eye believes in the space.
The source is named on the page itself: the design “Secret” by Daniel Snows (figmaformotion). What we took was the recipe. The motif, the lighthouse, the films and the code are our own.
What it became
View it liveOne continuous approach: from the dune at blue hour, through the giant word, out over the waves and up to the lantern — and from there into the lens itself.
A lighthouse at blue hour, the sea moving, the beam turning. In front of it the giant word Licht, standing in the beach grass. One button: fly to the light — or simply scroll.
Scrolling carries the camera through an opening in the word. Then the flight runs by itself, low over the waves and steeply up the tower.
At the gallery the surf keeps moving. The lantern glows under the pointer and can be opened.
The Fresnel lens is a real 3D object in the browser. It follows the pointer and comes apart in four steps: the lamp, the rings that bundle the light, the rotation that gives the tower its signal, the range over the curve of the earth.
In every resting state there is a heading, one explanation and exactly one next step. Every click has a scroll path beside it, so nobody gets stuck.
Drag the handle. Left, the first proof from day one: the tower is small and a straight edge cuts the word off — it reads as a bar, not as space. Right, the version of 3 October: the tower as the hero, the word standing behind it in the grass.
Screenshots of the build as of 3 October 2026 (taken in version 0.9, the page is now at version 0.11.2; chapters 2 and 3 were taken in version 0.7 and are unchanged in content since). The tower, its year, signal and range are invented — the page says so itself.
What it does for the business
A place you have flown to stays with you differently from a place you have looked at. Wherever a business sells a location or an experience — a hotel by the sea, a destination, a venue, an attraction — the same recipe carries its own motif: their house, their coast, their hall instead of a lighthouse.
The page also explains without a wall of text. Three chapters, each with one sentence and one action, show how a lighthouse works — the visitor finds out himself by opening the lantern and turning the lens. The same structure works for any product whose inside is the argument.
And it shows a method rather than an effect: we can take a design we see somewhere, work out what it is made of and build it with someone else's motif as a real website.
How we worked
Take it apart first. Before a single image existed, we broke the original design down into its layers and wrote the recipe down in one sentence. Then a script: hero, direction, reward, and three camera positions for the flight — the dune, the waves, the gallery.
The still images were made with Codex, the films with Seedance 2.0: fifteen short clips, each made from a start and an end frame. Every film was upscaled locally and is delivered in a size that fits the screen — 2560, 1920 or portrait.
Where something looked wrong, we looked for the cause one step earlier. The tower first looked pasted in. The fault was not in the film but in the start image, which showed the tower flatly lit and hard-edged — every film made from it inherited that. A new, photoreal start image fixed it for all films at once.
A clip with a logic error was not hidden but ordered again. In one delivered flight the tower came close and a second later stood far away on the horizon again. We reordered it with a stricter brief, and only the corrected clip went in.
Testing wasn't done by feel. Every version got a test report with screenshots at 2560, 1440 and 390 pixels, measured coverage, load weight and zero console errors — around 3,200 test images across ten versions.
From the first idea to the current version took four days, 30 September to 3 October 2026.
Why we built it
Leuchtfeuer Nordsee doesn't exist, and that is exactly why we could build it without waiting for a client. The question was: can we take the recipe of a design we admire and turn it into a real website — with our own motif, sharp on a large screen and usable on a phone?
For a business that sells a place or an experience, that is the actual question. Not whether an effect looks good in a video, but whether a visitor arrives on the page and stays.
We build concepts like this so a client can see what is possible before deciding. Not as a promise, but as an address you can click.
Leuchtfeuer Nordsee is invented. The tower, the year 1897, its signal and its range were made up by us; the page calls itself an example page and marks those figures as examples.
The recipe is not ours. The layer structure — scene, giant word, cut-out dune — follows the design “Secret” by Daniel Snows (figmaformotion), and the page says so in its footer. Motif, films, code and the interactive chapters are our own.
What you see here is version 0.11.2: the word stands behind the tower, the lantern's light colours the lettering, and the page ends with a direct way to RAVARO. Just before that comes “Dein Wort im Licht” — your word in the light: the page asks the visitor what his website should spark in his customers, he writes his word into the light, and the lantern's beam lands on it. It was tested in Chrome and in Safari's browser engine at 2560, 1440 and 390 pixels; a check on a real iPhone is still to come.
It was built without a client. What it proves is the method, not a sales figure.
A website that only looks nice is dead weight. Website Systems builds a site from your actual business goals — one that takes work off your plate and turns visitors into real enquiries.
MORE CASES ///
Next build
NEPHELE Residences
Nobody buys the development. They buy apartment A1803.
NUIT VISIBLE
A scent cannot be shown. So we let the scroll tell it.
The Elite Cars
A supercar dealer whose website already looked good — and still could not sell a car to someone who didn't feel like driving over.
CLAW BBQ
I know this place. Their website did not.
Juwelier Dührkoop
Fine watches, sold from a page you could not lean into.
Andy Engel
A man people fly across continents for, with a website built for people driving past.
BSD Wiedemann
We stopped his website selling fire extinguishers, so the business could start selling expertise.
Hofmühl
A brewery does not sell beer on its website. It sells the reason someone reaches for that bottle in the shop.
Aurora Grand
A hotel website you walk through before you book.
All our website work
Every project in this discipline — numbers, videos and results.