Free planetarium website template

Live demo Download ZIP Build without code GitHub

Edit it by hand: it is one index.html with no build step, so you can open it in any text editor, change the words and photos, and upload it to any static host. Not a coder? Describe your business in one sentence to 8B's AI website builder and it designs a new site for you, with more pages when you need them. Designing is free; publishing with hosting is $9 a month, billed yearly. It also works inside Claude and ChatGPT.

MIT license · Made by 8B, an AI website builder · Plain text: zenith.md, data: zenith.json

Planetarium website template: first screen on a phone

About this planetarium website template

Planetarium website template: one free HTML file for a dome or observatory that runs timed, live-narrated shows. It has a sideways space journey, a show programme with time buttons, a rooftop telescope evening, school trips, late events and a box-office form, set on night violet with orange and magenta. AGENTS.md lets Claude Code, Cursor or Codex adapt it.

At a glance, October 2026. One 90 KB index.html with its CSS and JavaScript inside, 12 sections, 13 Unsplash photos credited in CREDITS.md, Geist from Google Fonts, GSAP 3.13.0 (ScrollTrigger); Lenis 1.3.4 smooth scroll loaded from jsDelivr.

A planetarium has to show what is on tonight and let people book a seat, so every show row carries its own time buttons. An astronomy club, a science centre with a dome or a star-gazing tour company can keep the programme and cut the rest. If you are looking for an astronomy website template, the flagship journey, the rooftop telescope evening and the school offer are what set this one apart from a plain events page.

Replace the venue name first, in any letter case, then the dome figures, show names, lengths, ages, times and prices, which the demo invents. Ask the owner for opening hours, astronomers, school rates, event dates and the telescope policy. Keep the section ids, the data-8b-section, data-8b-motion and data-8b-part attributes and the classes AGENTS.md lists, and set the footer wordmark's --len to the new name's length. As a planetarium website template for Claude Code or Cursor, vibe coding goes fastest when these facts arrive in one message.

Choose this when the venue sells timed sessions and wants one scroll that explains the room, the shows and the visit. A museum with a permanent collection fits better when objects, not sessions, are the product, and a site with many pages or a member login needs more than one file. The weak spot is booking: every time button jumps to the form, which sends nothing, so link a ticket shop. Without code, 8B's builder designs a new site instead.

Good for:

Planetarium or observatoryScience centre or museum with shows and school visitsAstronomy club or star-gazing tour companyAny venue with a timed programme, events and a school offer

Turn the planetarium website template into your site with an AI agent

With an AI coding agent

Files (PowerShell: curl.exe):

curl -LO https://raw.githubusercontent.com/8bsite/planetarium-website-template/main/index.html
curl -LO https://raw.githubusercontent.com/8bsite/planetarium-website-template/main/AGENTS.md
curl -LO https://raw.githubusercontent.com/8bsite/planetarium-website-template/main/LICENSE
curl -LO https://raw.githubusercontent.com/8bsite/planetarium-website-template/main/CREDITS.md

Prompt for the agent:

Read AGENTS.md, then edit index.html. Make this the site for <my venue: name, address, what I show or teach, the programme with lengths, ages, times and prices, dome or telescope figures, astronomers, events, school offer, opening hours and how people book>. Replace first the venue name, the five shows, the journey stops, the astronomers and the prices. Keep the section ids, the classes AGENTS.md lists and the footer wordmark's len. Ask me for any missing fact and never invent prices, times, figures, names, dates or contacts.

In a terminal

npx degit 8bsite/planetarium-website-template my-site

Planetarium website design prompt for any AI tool

Use this to build a planetarium or astronomy venue site from scratch in Claude Code, Codex, Cursor, Lovable, v0 or Bolt, or to brief a designer. It writes this template's design as decisions. With the template itself, the short prompt above is enough.

Build a single-page website for a planetarium that sells timed shows. Audience: families, school groups and astronomy fans deciding what to see tonight. Sections in order: navigation, a first screen with one large statement, a journey of five stops, the dome, a show list where each row has its own time buttons, a live presenter quote, the rooftop telescope, schools, four upcoming nights, FAQ, box-office contact, footer. Type: Geist only, weights 300 to 600; medium headings with tight negative tracking, light numerals, a semibold uppercase wordmark. Colours: #140a31 night ground, #4c27b8 blue-violet slabs, #eb5d16 orange for the shows, #ee55b6 magenta accent, #ffffff type on dark, #ffc9ee for captions and dates. Motion: one idea, a pinned strip of stops sliding sideways while headings split into words that gather and spread; switch it off under prefers-reduced-motion. Layout: twelve-column grids, split headings in opposite corners, hairline rules, flat colour slabs against night. No purple gradient wash, no three icon cards, no centred hero with two buttons. Copy: short and concrete; ask for show names, times, prices, opening hours and the telescope policy; never invent them; leave visible placeholders. One primary action, book a show time, repeated in every show row and the contact form. Mobile: check 390 px width, tap targets of 44 px, a full-screen menu. Acceptance: no console errors, visible keyboard focus, a list of every placeholder.

Planetarium website design and motion

Palette

#eb5d16 flat orange ground of the shows section and the footer, and the warm end of the contact gradient#140a31 main night ground: body, first screen, journey, nights, the logo's pill once you scroll and the start of the live and contact gradients#4c27b8 blue-violet ground of the dome and schools sections and of the full-screen phone menu#ee55b6 magenta: the roof's right panel, the journey runner, the event dots, text selection and the glow in the live and contact gradients#ffffff type on dark grounds, the white nav pill, filled buttons, the question section ground and the stars#0f0822 type on orange, white and magenta grounds, button text, dark buttons and the rules in the shows list and questions#ffc9ee pale pink for captions, stop distances, event dates and meta lines, contact labels and the thank-you line#a3300c rust: the roof's left panel and the colour bands of the first and fifth shows

Fonts

Geist: the only typeface, weights 300 to 600: medium-weight headings with tight negative tracking, light numerals and dates, regular body text, medium buttons and a semibold uppercase wordmark in the bar

Twelve-column grids carry most sections, and several headings are split into words or halves that sit apart, in opposite corners of the dome, either side of the roof photo, staggered over the questions. The first screen is one large statement on a night field with a ring and a fan of rays. A held strip of five stops, a five-column show list, a three-part roof frame and a four-event line follow. Hairline rules separate rows.

The page alternates night violet with flat colour slabs: orange for the shows, blue-violet for the dome and schools, rust and magenta for the roof panels, white for the questions. Each show row has a gradient pill as its colour band. The pinned journey plays as you scroll.

Every value of this planetarium website design, with the type scale, spacing and the motion rules, is in its DESIGN.md file (Google's format), ready for a coding agent or Stitch.

What is on the planetarium website page

Navigation
Round mark and wordmark top-left, five links, a Book seats button and a Menu button that opens a full-screen overlay
The bar slides up out of view while you scroll down and returns when you scroll up; the phone menu is a full-screen overlay.
When the lights go down, the ceiling goes too.
A night field with a thin ring, rays and a small glowing dot orbiting it behind one big statement, a paragraph and two actions
On load the statement rises in and the paragraph and buttons lift in a beat later, while a dot circles the ring in a 42 second loop that pauses off screen.
Outward
A held section where five space stops slide sideways as a road, with a glowing runner on a progress line
Pinned while the strip of five stops slides sideways, each photo drifting into its frame and a glowing runner travelling along the progress line.
A ceiling that isn’t there
The dome in words: a porthole of star trails that turns and widens to fill the screen behind a heading split over a grid
A small circle of star-trail photo rotates from minus 80 degrees to level and opens to fill the screen over about 1.3 screens of held scroll, as a ring grows and fades.
This season’s shows
Five shows as rows with a colour band, description, length and age, and time buttons
The heading words gather toward the middle and move out to place as you scroll, the intro sharpens in once, and each row's rule draws across once.
“Nothing here is recorded. Ask the sky anything.”
A large quote in scattered words over a presenter photo, with a line about the astronomers
The quote words start packed toward the middle and spread out to place while the presenter photo drifts in from the side and fades up, losing a blur on large screens.
When it’s clear, the roof opens
Two panels carrying halves of the heading part like a sliding roof to reveal a telescope photo
The two panels start closed over the telescope photo and slide apart, sideways on wide screens and vertically on phones, as the section arrives.
School trips to the edge
A photo of pupils and the school offer in three age stages on a line
The heading words spread, the intro and the photo fade in once, and the thin vertical line beside the stages appears.
After dark
Four late events with dates, photos and prices, settling onto one line
The four events start scattered at different heights and slightly tilted, then settle onto a line that draws out across the page; on phones they slide in from alternate sides beside a vertical line.
Before you lie back
Five questions and answers (native details)
The heading words spread and a rule draws above each question; opening one turns its plus sign through 45 degrees.
Come and lie down
A heading in a closing ring that lifts out of the night, four details and a message form
A night layer fades out while the ring closes from far outside the screen back around the heading.
Visit
The wordmark across the width, four link columns and a legal line
The wordmark across the width sharpens in once from a blur on large hover screens.

Before you publish the planetarium website site

Replace social preview image, favicon, phone number, email address, contact form (sends nothing yet) and social media links and the invented demo facts (prices, dates, addresses). AGENTS.md lists them.
Book seats button in the header lead to #shows now; point them to your online ticket shop, or keep it on the programme.
See tonight’s shows button in the first screen lead to #shows now; point them to your ticketing or programme page, or keep it on the programme.
The ten time buttons in the shows list (12:00, 16:30, 20:30 and so on) lead to #contact now; point them to the booking page for that show and time on your ticket system.
Plan a class visit button in the schools section lead to #contact now; point them to your school booking form or an email link.
Send to the box office button of the contact form lead to action="#" with method post; a script checks the fields, clears the form and shows the thank-you line, nothing is sent now; point them to your form endpoint (Formspree, Netlify Forms) or your own handler; drop the preventDefault in section-script:contact when you do.
Monthly sky notes and Private hire links in the footer lead to mailto links with a subject now; point them to your newsletter sign-up page and private hire page, or keep the mailto.
The contact form is a demo: with JavaScript it only clears itself and shows the thank-you line; without it the form posts to #.
The journey section is pinned for the width the five stops overflow, which is long on wide screens, and the dome holds for about 1.3 screens.
Small pale pink text (stop distances, school prices, event dates and meta lines, contact labels) sits on night and violet grounds; check its contrast after changing colours.
gsap, ScrollTrigger and Lenis load from a CDN before the motion scripts; offline they are missing and the motion does not run.

Questions about this planetarium website template

Is this astronomy website template free for a club or a client site?

Yes. It is one index.html under the MIT license, with no build step and no CMS, so it runs on any github.io site, and a club, a planetarium or a freelancer building for them can use it at no cost. GSAP, ScrollTrigger and Lenis load from jsDelivr, Geist loads from Google Fonts, and CREDITS.md lists the 13 Unsplash photos.

Where does the box-office form send its messages?

Nowhere yet. Name, email and message are all required, and a valid submit clears the form and shows a thank-you line without sending anything. Connect Formspree or Netlify Forms with the steps in AGENTS.md, or delete the form and keep the email link. Edit the thank-you line, which promises an answer within a day.

How do I hand it to Claude Code, or use a planetarium website design prompt?

Put index.html and AGENTS.md in an empty folder with the curl lines in AGENTS.md and tell the agent to read AGENTS.md first. Lovable, v0 and Bolt write their own code, so paste the planetarium website design prompt into them instead. Gemini users have a separate route through AI Studio.

Which parts must stay when I change the text?

Keep every id and the data-8b-section, data-8b-motion and data-8b-part attributes, plus the classes AGENTS.md lists for each script. Keep the header comment and the 8B meta tag in the head. Keep the Design: 8B footer link unless the site owner asks to remove it.

Can I get a site like this without editing code?

Yes, with a different tool. 8B's AI website builder designs a new site from a one-sentence description, in its own design, not this template. Designing and restyling are free; hosting with SSL, full HTML export and AI edits in chat are on Pro at $9 a month billed yearly. It also runs inside Claude and ChatGPT through the 8B connector.

What happens with reduced motion, on a phone or without scripts?

With reduced motion on, entrance and scroll animations and smooth scrolling are off, so the journey shows its five stops as a plain grid and nothing is pinned, while the bar's hide on scroll and the button hovers still run. Without JavaScript the Menu button cannot open its overlay, but the questions still open and the footer links work.

Not a planetarium website? More free templates