How this site
was built.

Direction before pixels

Every strong site is one decision repeated everywhere. Here the decision was “the bridge of a ship at night”: dark, instrument-lit, calm, precise. From that single idea the whole system follows — the palette, the type, the motion, even the copy (“decks”, “soundings”, coordinates in the footer).

The palette is deliberately not a template dark theme. It pairs an abyssal blue-black (#04080F) with two instrument colors: bioluminescent luma (#46E8C2) for the living, digital layer, and sextant brass (#E0A458) for the analogue, nautical layer. A third signal coral appears only where maritime reality demands attention — alerts and inspections. Three typefaces map to three voices: Fraunces (a wonky optical serif) for command headlines, Space Grotesk for prose, and IBM Plex Mono for anything that pretends to be data — coordinates, ETAs, tickers.

A procedural ocean, not a video

The hero is a real-time WebGL simulation, not a looped MP4. A 320×220-segment plane is displaced in the vertex shader by five stacked Gerstner waves — the classic trochoidal wave model where vertices move in circles, so crests sharpen and troughs flatten like real swell. Each wave contributes to a running tangent/binormal, giving analytically correct normals with zero texture lookups.

The fragment shader then layers the mood: a Fresnel term reflects the night sky at grazing angles, a warm brass corridor of glints runs toward a beacon on the horizon (value-noise thresholded against a distance-shaped mask), and a counter-moving band of bioluminescent sparkle lives only in nearby crests. A separate full-screen quad draws the sky gradient plus a twinkling hashed starfield. The camera drifts with the pointer and dips as you scroll — three lines of lerp that make the scene feel inhabited.

A globe made of real geography

The network globe refuses the usual “random dots on a sphere”. At build time, a Node script samples a jittered 1° grid against the Natural Earth 110m land polygons (via the world-atlas package) using ray-casting point-in-polygon tests, emitting ~11,000 genuine land coordinates to JSON. At runtime those become a twinkling point cloud whose far-side points fade by facing angle — computed in the vertex shader from the model matrix.

Ten real ports (Rotterdam to Busan) are joined by cubic-Bézier great-circle arcs lifted off the surface proportionally to their chord length. Each arc carries a per-vertex t attribute; the fragment shader animates a light pulse along it — the trade lane breathes. Small vessel dots ride the same curves at varied speeds, port beacons pulse as camera-facing rings, and a back-side fresnel sphere provides the atmosphere. Drag it — inertia included.

A motion system, not animations

Motion is centralized so the whole page shares one dialect: Lenis smooth-scrolls, GSAP ScrollTrigger choreographs, and SplitText slices every headline into masked lines that rise with a power4.out ease. The rules: entrances rise, data draws itself (SVG stroke-dashoffset for the feature icons and dashboard sparklines), numbers count up, and nothing animates twice. Buttons are magnetic (they lean toward the pointer), cards carry a pointer-tracked radial glow, and a two-part custom cursor — instant dot, lagging ring — ties every interaction together.

Restraint is enforced by code: prefers-reduced-motion collapses the preloader, marquee, parallax and shader time to near-static, and both WebGL scenes pause via ScrollTrigger the moment they leave the viewport.

Worldbuilding is the polish

What makes a fictional product feel real is the density of plausible detail: a live AIS-style ticker with vessel positions that parse correctly, a dashboard whose KPIs a DPA would actually track (open non-conformities, certificates expiring in 90 days), international signal flags spelling F-A-T-H-O-M in the footer, and a preloader that counts up to Istanbul's real coordinates. None of this is decoration — it is the product argument, rendered.

Ship it, then iterate like a critic

The site was built with Vite (two Rollup entries — this page is just rehber/index.html, which becomes the /rehber/ route on any static host) and deployed to Cloudflare's edge. Before shipping, it went through three full critique passes: Playwright loaded the site at desktop and mobile widths, screenshotted every section, and each pass hunted for flaws — rhythm breaks, contrast failures, dead hover states, shader banding — which were fixed before the next pass. Treat your own work as a reviewer would and the last 20% appears.