Nightglass is a single-file HTML template for an observatory with a small lodge, dressed as a fictional dark-sky observatory with eight rooms on a mountain ridge in Teruel, Spain. The page is one guided night, told the way the tour runs it: the young Moon before it sets, Saturn, the double star Albireo and then the Andromeda Galaxy once the Moon has gone. The header counts how old the light in the eyepiece is, rolling from seconds for the Moon to millions of years for Andromeda as you scroll. Everything is plain HTML, CSS and JavaScript with no framework, no build step and no photographs, and the Chivo and Chivo Mono typefaces are embedded in the file.
One WebGL sky sits behind the whole page. About 1,600 stars from the Yale Bright Star Catalogue are drawn at their catalogue positions, brightness and colours, with seeded fainter stars along the Milky Way, and the Moon's phase, the planets and the twilight come from the page's own ephemeris for a place and a date set in two constants in the script. When the loader lifts, the sun sinks and the stars come out brightest first and the Milky Way last, over a ridge with the observatory's domes. The sky keeps turning, a meteor crosses now and then, a guide's laser points from star to star, and pointing at a bright star, a planet or the Moon names it with its magnitude and distance.
As you scroll, the camera turns to each target at its computed position and a round eyepiece opens where it sits, showing the crescent Moon, Saturn's rings at their tilt for the night, Albireo split into a gold and a blue star, and Andromeda with its two companions. Below the story, three tours each come with a strip of the night showing twilight, the Moon's hours and the tour's hours; six telescopes are drawn to scale as rings around the eye's pupil; each room's roof hatch shows the sky overhead at its hour; and a Moon calendar covers the eight weeks from the day the page is opened, with the darkest nights marked. Picking a date in the booking form turns a star-wheel planisphere to that night. The booking and newsletter forms validate and confirm in the browser only, so connect them to your own system before launch.
A Red light switch in the header turns the whole page and the sky deep red, the way an observing field is lit after dark, and remembers the choice; otherwise the page keeps one dark theme by design. The download is a ZIP with the page as index.html and RECREATE.md, a build prompt for an AI coding agent. It sets out the concept, palette, type and copy rules, explains how the motion system works and what the accessibility pass covers, and ends with the full page source; that source links its fonts from Google Fonts, where index.html has them built in. The computed figures follow the place and date you set, while the written copy for each stop describes the default night and needs rewriting for another. Names, prices 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 sky of catalogue stars, with the Moon, planets and twilight computed for a set place and date
– Scroll story that turns the camera to four targets and opens an eyepiece view of each
– Pointer star finder and a guide's laser that name stars, planets and the Moon with magnitude and distance
– Moon calendar for the next eight weeks and a planisphere that turns to the date picked in the booking form
– Red light mode remembered per visitor, reduced-motion stills and star wheels where WebGL is unavailable
– Native dialog menu, skip link, header links to each stop and labelled forms with inline errors
Ideal For
Observatories, dark-sky reserves and astronomy tour operators.
Remote lodges, glamping sites and stargazing retreats.
Studios pitching a science-led travel site with no photography to license.
