Museum Website Template
Demo brand: Thrale Field Observatory · Public dark-sky observatory · 7 routes · Astro 7 + Tailwind 4
Live preview
The demo is a full desktop site. Open it in a new tab ↗
About this museum website template
A complete site for a public observatory, science centre or small museum: seven built routes covering what is overhead tonight, the instruments, visiting and booking, and a wired journal of observing sheets.
The whole design is one night’s observing log — sheet 4,118, opened at civil dusk and signed off at nautical dawn. A near-black field, Instrument Serif for display, JetBrains Mono for the apparatus, and a single warm amber. It is loud in the type and quiet in everything else.
The signature move is that the page runs on the clock, not the scrollbar. Star positions are plotted live at the true sidereal rate, because celestial motion does not depend on whether anyone is scrolling. Leave the tab open and the sky moves. Scroll only reveals.
The 7 pages you get
- Home
/ - The live sky plate, what the observatory is, and the visiting close.
- What is overhead
/tonight/ - The observing page — what is visible now, driven by the same live catalogue positions as the home plate.
- The instruments
/instruments/ - Telescopes and equipment, with the specification detail a visiting astronomer actually reads. Rendered from a typed array.
- Visiting and booking
/visit/ - Sessions, slots, access and how to book. Live mailto: and tel: paths, working from day one.
- Sheets, filed
/blog/ - The observing journal as a content collection — add an .mdx sheet and it appears here and in the sitemap.
- One filed sheet
/blog/sheet-4092-m33/ - A worked long-form entry showing the full editorial component set in context.
- 404
/404 - "No such sheet" — designed in the same language, carrying the navigation.
What is in the build
- Star positions computed from catalogue coordinates and plotted at the true sidereal rate — it runs on the wall clock, not on scroll
- A 517-mark static vector plate of the same catalogue as the control state, so the page is complete with JavaScript off and under reduced motion
- Session slots and instruments as typed arrays in
src/data— change the observing programme without opening a layout - Instrument Serif at display scale against JetBrains Mono apparatus type, both self-hosted
- Ships zero photographs by design; the imagery is the plotted catalogue itself, so there is no stock library to license
- Working booking and enquiry paths (mailto:, tel:) with no backend required
- Vitest and Playwright suites included in the repository
The design decision
Every template in this catalog is loud in exactly one channel and deliberately quiet in the other three. That single rule is what stops 65 different worlds reading as one design system in different paint.
- The world
- One night's observing log — sheet 4,118, opened at civil dusk, signed off at nautical dawn.
- The mechanic
- The page turns on the wall clock at the true sidereal rate, not on the scrollbar. Scroll only reveals. Derived from the physical fact that celestial motion does not depend on the observer.
- Loud channel
- Display type
- Imagery. Catalogue positions, plotted live
- Type & palette
- Instrument Serif · JetBrains Mono
-
#070a12#e8ecf5#c8873f - The control case
- Degrades to a 517-mark vector plate of the same catalogue with JS off, and under reduced motion.
Who it is for
Built for observatories, planetariums, science centres, small museums and visitor attractions whose subject is worth more attention than a photo carousel gives it. It suits an institution that wants to look like a research body rather than a tourist stop. If you need a ticketing engine and a gift shop, this is the wrong end of the catalog.
Under the hood
- Astro 7 · static output, zero client framework
- Tailwind 4 · one @theme block holds the palette
- MDX content collections for the blog
- GSAP + Lenis for the scroll work, reduced-motion aware
- Self-hosted woff2 — no Google Fonts request
- Sitemap, canonicals and per-route meta wired
- Vitest + Playwright suites in the repository
- Zero third-party requests · strict CSP-ready
How to get started
- 01 Accept the repository invite and clone it.
- 02 Run
npm install, thennpm run dev. - 03 Replace the content in
src/data/with your own — that is where the brand, the copy and every list live. - 04 Swap the images in
public/images/and the palette in the@themeblock. - 05 Run
npm run buildand deploydist/anywhere static.
Questions
Do the star positions actually update?
Yes. Positions are computed from catalogue coordinates against the current time at the sidereal rate, so the plate drifts as the real sky does. There is no video and no pre-rendered sequence.
What happens with JavaScript disabled?
You get a static 517-mark vector plate of the same catalogue. It is not a blank box or an error state — it is the same drawing, frozen. The same plate is used when prefers-reduced-motion is set.
Can I use this for a museum that has nothing to do with astronomy?
The visiting, instruments and journal structure transfers cleanly to any small institution. The live sky plate does not — it is the whole signature, and without it you are buying a well-built museum site rather than this one. Look at the art gallery build if your subject is objects in a room.
What exactly do I get for $49?
Access to a private GitHub repository holding the complete Astro source of this template — every route you see in the preview, the content model, the images and the tests. Updates arrive in that same repository.
How many sites can I build with one licence?
As many as you like, for yourself or for clients. The licence is per buyer, not per project. The one thing you may not do is resell or redistribute the source as a template, theme or starter kit.
Do I need to know Astro?
It helps, but the common case is editing content and colour. Content lives in typed objects under src/data, colour lives in one @theme block, and npm run dev shows the result. Deploying is a static folder — Cloudflare Pages, Netlify and Vercel all take it as-is.
Is anything loaded from a third party?
No. Fonts are self-hosted woff2, there is no analytics, no tag manager, no CDN script and no external CSS. The build ships static HTML under a strict Content-Security-Policy.
