Observatory Template Template
A complete one-page site for a public observatory or planetarium, built around scroll-drawn constellations: hand-plotted star maps that DrawSVG connects line by line as each section arrives, over a three-layer parallax starfield.
About This Template
A production-ready one-pager for a public observatory, planetarium or science centre. The fictional brand is Hollowfell Observatory, a charity-run public observatory on the North Pennines moor, and the page sells a real evening: a stargazing-night programme laid out as a timeline of tonight's sky, telescope hire priced by the fortnight, visit information with dark-sky etiquette, and membership tiers that fund the dark-sky covenant. The ground is a deep blue-violet night, the type is star-white with one moonlight gold, and there is not a single photograph - the sky itself is the imagery.
The signature is the constellations. Each section carries a hand-plotted SVG star map of a real constellation - Cassiopeia over the hero, Cygnus beside tonight's programme, Lyra with the telescope ledger, Ursa Minor with the directions, the Plough with membership - recognisable to anyone who knows the sky. As a section arrives its stars pop in one by one and DrawSVG draws the connecting lines between them, so every illustration is sketched in front of the reader. Behind everything sits a three-layer parallax starfield: three canvases painted once each, never per frame, moved at different depths by scrubbed tweens.
Everything degrades on purpose. The SVGs ship fully drawn in the markup and are only wound back when motion is allowed, so with JavaScript off or reduced motion on every constellation is simply visible; a CSS star texture keeps the night sky when the canvases never arrive. To make it yours, rename the observatory, rewrite the programme times, repoint the mailto links, and - if your sky differs - plot your own constellations: each one is a handful of SVG line and circle elements with coordinates you can copy from any star chart. Deploy it as static files; there is no build step.
What's Included
- Complete deployable one-page site: nav, full-viewport sky hero, tonight's programme timeline, telescope hire ledger, visit information, membership tiers, footer
- Signature scroll-drawn constellations: five hand-plotted SVG star maps with correct-ish patterns, stars popping in on a stagger before DrawSVG connects them line by line
- Each constellation is that section's illustration - Cygnus flies beside tonight's sky, Ursa Minor navigates the directions, the Plough points members home
- Three-layer parallax starfield: canvases painted once per resize (capped point counts, no per-frame drawing), moved at three depths by scrubbed tweens, with a whisper of pointer drift on fine pointers only
- The programme is a timeline down a drawn spine that grows with the scroll - no card grids anywhere on the page
- Zero photography: the starfield, the constellations and the ledgers are the whole visual identity, so there is nothing to source or license
- Constellations ship fully drawn in the markup and are only wound back when motion is allowed, so no-JS and reduced-motion readers see every star map complete
- Reduced motion keeps the painted starfield but freezes it: no parallax, no drift, no breathing, via both the CSS media query and the matchMedia branch
- Michroma's wide instrument-panel caps do the display work at deliberately small sizes; Nunito Sans does all the reading - a pairing used nowhere else
- Five-colour token block with RGB triples and a measured contrast table in the stylesheet header - a reskin is a five-value edit
- Sections are independent: every selector is guarded, so hire, visit or membership can be deleted and the rest keeps working
- Lenis smooth scrolling wired in and fully optional, sharing one clock with ScrollTrigger
Perfect For
- Public observatories, planetariums and science centres with an evening programme
- Dark-sky parks, reserves and stargazing event organisers
- Astronomy societies and clubs that hire out instruments to members
- Any venue whose programme is a timetable of timed sessions rather than a product grid
- Learning DrawSVG: five real staggered line-draw builds driven by ScrollTrigger
How It Works
Structure
One script initialises everything inside a single gsap.context, with gsap.matchMedia keyed on reduced motion so exactly one branch runs on every device. Every querySelector is guarded, so any section - the programme, the hire ledger, the whole membership block - can be deleted and the rest keeps working. Reveal start states are double-gated behind a has-js class and the motion media query, so a blocked CDN or a reduced-motion preference both leave a complete static page.
The constellation draw
Each constellation is a hand-plotted SVG: line elements for the joins, circles for the stars, plotted from real star charts. The SVGs ship fully drawn; the motion branch winds them back - stars to scale zero, lines to drawSVG 0% - and replays them as the section arrives: stars pop in on a back-eased stagger, then DrawSVG draws each connecting line in sequence, then the star names settle. If the DrawSVG script is missing the lines fade in instead, so nothing depends on it.
The starfield
Three canvases sit in a fixed layer behind the page, each painted exactly once per resize with a capped point count - there is no per-frame canvas work anywhere. Parallax is one scrubbed y-tween per layer, travelling further the nearer the layer, and a single yoyo opacity tween on the middle layer stands in for twinkle. Fine pointers add a whisper of horizontal drift through two quickTo setters; touch devices skip it entirely.
The programme spine
Tonight's timetable runs down a vertical rule that scales with the scroll through a scrubbed fromTo, so the evening literally draws itself down the page as you read it. The rule is a plain div with no CSS start state, which means the no-JS page keeps a complete spine, and each timed stop is a gold star dot placed by the row itself.
Without JavaScript
The page is designed to be complete before the script arrives: constellations render fully drawn, the spine is full height, every reveal target is visible, and a CSS star texture on the sky layer keeps the night ground. JavaScript only adds depth - the parallax canvases, the draws, the glide - and reduced motion gets the painted sky held perfectly still.