Observatory Template

Quick Start

1. Copy the whole folder to your web server (or any static host). There is no build step.

2. The page works as-is. Open index.html and check the script tags before </body>:

Code snippet omitted: it ships with the download.

Lenis is optional (delete its tag and scrolling goes native). DrawSVG is also guarded: without it, constellation lines fade in instead of drawing.

3. Make it yours:

   • Rename the observatory in the nav wordmark, hero, footer, and <title>.
   • Rewrite tonight's programme in the #tonight timeline (each stop is one li.tl-row).
   • Update the hire ledger and membership tiers (li.ledger-row).
   • Point the three mailto: links (nights@, hire@, friends@) at your addresses, or swap them for your booking system's URLs.
   • Update the conditions strip in the hero (sunset, darkness, moon, sky meter), or delete it.

4. For production, swap assets/script.js for assets/script.min.js.

Sections

Every section is independent: the script guards each selector, so you can delete any of these wholesale and the rest keeps working.

Section	id	What to edit
Hero	-	Headline, lede, conditions dl, both CTA targets
Tonight's programme	#tonight	Timeline rows (time + title + description), cloud policy note, ticket prices
Telescope hire	#telescopes	Ledger rows (instrument, description, price), deck note
Visit	#visit	Opening hours, directions, the etiquette list
Membership	#membership	Tier rows, charity number
Footer	-	Address, contact, small nav

Adding a programme stop is copying one li.tl-row and changing the time; the spine and its star dots come from the rows themselves.

The constellations

Each constellation is a plain inline SVG marked with data-constellation:

Code snippet omitted: it ships with the download.

• Stars are circle.c-star; the radius is the star's brightness (bright stars ~4–5.5, faint ~2.6).
• Joins are line.c-line; each line is one stroke of the draw, and they animate in document order, so order them the way a finger would trace the figure.
• Names are optional text.c-name labels that fade in last.

To plot your own, open any star chart, pick the constellation, and copy its star positions into circle coordinates by eye; the five shipped maps (Cassiopeia, Cygnus, Lyra, Ursa Minor, the Plough) were plotted exactly this way. Keep the aria-label honest: it is what a screen reader gets instead of the figure.

The draw itself is in script.js under "Scroll-drawn constellations": stars pop in on a stagger, then each line draws with drawSVG: '0%' → '100%', triggered once at top 78%. The SVGs ship fully drawn in the markup and are only wound back when motion is allowed. Do not add CSS that hides them, or the no-JS page loses its illustrations.

The starfield

Three canvases are appended into .sky by the script and painted once each (and once per resize). Point counts and parallax travel are the two dials, at the top of the starfield block in script.js:

Code snippet omitted: it ships with the download.

More points cost only a slightly slower one-off paint; there is no per-frame canvas work. The CSS star texture on .sky in style.css is the no-JS sky; if you want a denser or sparser night without JavaScript, edit those radial-gradient layers.

Palette

The whole scheme is five colours in the :root block of assets/style.css, each with an RGB triple beside it:

Code snippet omitted: it ships with the download.

Change a hex, change its triple, and the site reskins; every translucent value (rules, constellation strokes, the nav scrim) derives from the triples, so nothing is left half-repainted.

Two constraints, both measured (the full table is in the stylesheet header):

• Gold buttons carry --night ink, never light type: star-white on gold is 1.38:1.
• --faint is the small-print floor at 6.48:1 on the ground; if you lighten --night, re-check --faint and --dim first.

Type

• Michroma (one weight) does all display work: wordmark, headings, times, captions. It is a very wide face: sizes are deliberately small, and the hero caps at 3.9rem. If you swap it, revisit every letter-spacing.
• Nunito Sans does all reading text.

Both load from Google Fonts in the <head> of index.html and thumbnail.html.

Accessibility

• Respects prefers-reduced-motion via both the CSS media query and a gsap.matchMedia branch: constellations render fully drawn, the starfield is painted but perfectly still, reveals never hide, and Lenis is never created.
• Fully readable with JavaScript disabled; the script only adds depth (parallax, draws, glide); it never gates content.
• Every constellation SVG has role="img" and a descriptive aria-label.
• All interactive elements are real links with visible :focus-visible rings; hover states have keyboard equivalents.
• The pointer-drift on the starfield runs on fine pointers only; touch devices get the same sky without it.

Browser Support

Modern browsers (ES5-compatible script, CSS grid, custom properties). Not compatible with IE11.

Dependencies

• GSAP 3.12+
• ScrollTrigger plugin
• DrawSVGPlugin (optional; constellation lines fade in without it)
• Lenis (optional; smooth scrolling, and the site works without it)