Outer Light is a single-file HTML template for boutique hotels and remote stays, dressed as a fictional lighthouse hotel on an island at 63°N. The whole page plays out as one June day: the clock in the header follows the scroll from first light to the blue night, and every sunrise, sunset and daylight figure on the page is calculated from the configured latitude and longitude rather than typed in. Move the hotel by changing one line of the script and the sun times follow. Everything is plain HTML, CSS and JavaScript with no framework, no build step and no photographs; the Archivo and IBM Plex Mono typefaces are embedded in the page.
The hero is a horizon generated in one fragment shader. The sky takes its color from the sun's real altitude, light glitters across moving water, and a lighthouse on a granite islet turns its beam with two flashes every ten seconds. Move the pointer and the beam swings after it; aim at the lantern and you catch the flash. A short sunrise plays as the loader lifts. The same shader returns twice more: inside the room windows, each showing the hour that room looks its best, and in the footer, where the islet sits under the night sky with its windows lit and the beam still turning.
Past the hero, a paper tide washes over it and the intro text brightens word by word as you read. Four room types sit in a sticky stack, each with a floor plan that draws itself. Getting here is a sea chart drawn on canvas, with halftone islands, depth contours and the boat route traced out from the harbor. The day section pins a sun arc that lights each item on the program as the sun reaches it, then a night tide rolls in and turns the page dark for the seasons, with one daylight arc for each open month, a review block and the booking form.
The booking form has steppers for nights and guests, a room picker, inline errors and a confirmation that takes focus, and its arrival date is limited to the next open season, whatever year the page is opened in. It validates and confirms in the browser only, so connect it to your own booking system before launch. Dark mode follows the visitor's system setting with a moonlit palette, scrolling glides on to the next section when a gesture ends, and adding ?tune to the address opens sliders for the hero's sun, haze, clouds, grain and beam. The download is a ZIP with the finished page (index.html) and RECREATE.md, which holds the complete page source and notes on how the motion system works. Prices, names and contact details are placeholders for your own.
Key Features
– Plain HTML, CSS and JavaScript in one file, with no framework, no build step and no image files
– WebGL sunrise with a cursor-following lighthouse beam, reused in the room windows and the night footer
– Header clock that runs through one June day, with sun times computed for whatever location you set
– Sticky room stack with self-drawing floor plans, a canvas sea chart with the boat route and a pinned sun arc
– Booking request form tied to the next open season, with steppers, inline errors and a focused confirmation
– Dark mode from the system setting, reduced-motion support and scrolling that glides on to the next section
– Hidden ?tune panel with sliders for the hero horizon and a button that copies the values as JSON
Ideal For
Boutique hotels, guesthouses and seasonal lodges.
Island, coastal and remote stays that guests reach by boat, ferry or a long drive.
Studios pitching a hospitality site with no photography to license.
