Showroom · Make-of

How Helm was made

A charter house that doesn't exist, on a bay that's computed sixty times a second. One HTML file, one pinned library, no video.

What it demonstrates

That the most expensive-looking asset on a travel site — the cinematic water hero — can be a shader instead of a stock video: lighter, endless, and steerable. Because the sun is a parameter rather than a pixel, one control re-lights the entire scene from a turquoise Miami midday to a skyline lit window by window at dusk, and the page's whole palette is pulled from what the sky shader actually produces.

Techniques, honestly named

• The examples' ocean, retinted — three.js r160's own Water and Sky addons (the webgl_shaders_ocean pattern), pinned from a CDN. The sea is a flat plane with scrolling normal maps and a planar reflection — plus a three-line patch to the water shader's own fresnel so the sandbar turquoise reads at a distance instead of mirroring the white horizon sky, and per-preset fog that melts the far water into haze.
• Sun as a single source of truth — each time-of-day preset sets sun elevation, turbidity, rayleigh and mie scattering, water tint, fog color, and tone-mapping exposure; the sky is then baked into an environment map (PMREM) so the boat's varnish is lit by the same sky you see behind it.
• A lofted mahogany runabout — no model files: hull stations are lofted from parametric curves (plan taper, rising sheer, round bilge, tumblehome aft blending to bow flare), decked in canvas-painted planking, with chrome tube rails, a wraparound glass windshield, and cream benches. The wood grain itself is drawn onto canvases at load.
• A code-drawn skyline — a generic Miami-flavored silhouette laid out by a seeded random walk onto one canvas, its window grid lit on a second; dusk cross-fades the two on billboards behind the haze. No real building is depicted.
• A plausible swell — the water surface never displaces, so the boat's bob, pitch, and roll are a matched sine composition on the same clock as the shader. Plausible, not physically sampled — and the page says so.
• Respectful fallbacks — reduced motion gets a still midday frame with working presets; no WebGL gets an honest photograph; the loop pauses in hidden tabs; a lost GPU context is caught and rebuilt; pixel ratio is capped.

Recreate it