Orrery

Orrery is a free Astro theme for consultants and small B2B service firms, built as a static site with a dark navy-black ground, large light type, a single lime accent, and a home page that animates as you scroll.

What is Orrery?

Orrery is a website template built with Astro 7, Tailwind CSS 4 and TypeScript, aimed at consultants and small B2B service firms. It takes your business details from a single config file plus Markdown service files and produces a fully static site in dist/ that any static host can serve. It is published on GitHub as formgong/orrery-astro-theme under the MIT license, with a live demo at orrery.formgong.com. A no-build HTML version is also downloadable as orrery-html.zip from the latest release.

Key Features

• Astro 7 + Tailwind CSS 4 + TypeScript stack — static output, Node 22.12 or newer, with npm run dev, build, preview and check scripts.
• Thirteen scroll and load effects with no animation library — all in src/styles/effects.css using CSS view timelines plus three small scripts: canvas scenes (under 6 KB minified in total), an entrance trigger, and an orbit lean.
• One-file rebranding — name, contact details, hours, hero counters, accent color and form key live in src/config.ts; services are Markdown files in src/content/services/.
• Honest contact form — the success state appears only when the backend returns success === true; errors show the server message; works without JavaScript as a plain HTML POST.
• Formgong form backend — hosted submissions with a free plan covering 1,000 submissions per month; any standard form POST endpoint also works via PUBLIC_FORMGONG_ENDPOINT.
• Accessibility and speed — labels on every field, visible focus, AA contrast for every text color, one self-hosted font (Questrial), and Lighthouse mobile scores of 99–100 / 100 / 100 / 100.
• Pages included — home (hero, statement, media panel, services, split, process, final CTA), services, about, contact, thanks and 404.
• Grounded sample content — the demo business Quillmoor Analytics is fictional, with 555-01xx phone numbers, example.com links and a team described by role rather than name.

Who is it for?

• Independent consultants: rebrand src/config.ts, edit the Markdown services, and deploy a one-page firm site with working form submissions.
• Small B2B service firms: use the built-in services, about, contact and process sections to describe offerings and capture leads without running a server.
• Developers wanting a plain HTML build: download orrery-html.zip, replace the access key and the example.com placeholders, and upload the files anywhere.

How does Orrery work?

Run npm create astro@latest -- --template formgong/orrery-astro-theme, edit src/config.ts and the Markdown services, then set url to your real domain so canonical links, the sitemap and the form redirect point correctly. Create a free form at formgong.com/new, put the resulting fk_ access key in a .env file as PUBLIC_FORMGONG_ACCESS_KEY, and run npm run build to produce the static site in dist/.

Pros and cons

• Effects are pure CSS plus three tiny scripts, so no animation dependency to maintain.
• Reduced-motion visitors, no-JS visitors and browsers without scroll-driven animations all see every section in its final state.
• Phones under 751px get no entrances or scroll effects, matching the reference design.
• The form backend is required for submissions; without a key the form shows a placeholder reminder in dev.

FAQ

Is Orrery free?

Yes. Orrery is released under the MIT license, and the illustrations, line drawings and icons drawn for the theme are covered by the same license. The only optional cost is the Formgong form backend, whose free plan covers 1,000 submissions a month.

Can I use Orrery without a build step?

Yes. Download orrery-html.zip from the latest release for plain HTML files, replace fk_your_access_key and the example.com placeholders with your own values, and upload the files to any static host.

Does the contact form work without JavaScript?

Yes. Without JavaScript it sends a normal POST to formgong.com/submit, and the hidden _redirect field sends the visitor to /thanks/ on your configured domain. Formgong only follows redirects on the site that sent the form, so on localhost you land on Formgong's own thank-you page.

What happens if I prefer reduced motion?

Reduced-motion visitors see every section in its final state: text filled, cards flat and lit, the panel in place, titles straight. Canvas scenes draw a single still frame instead of animating.

Which form backends can I use?

Any service that accepts a standard form POST works. Set PUBLIC_FORMGONG_ENDPOINT to its URL, rename the hidden fields to what that service expects, and adjust the reply?.success === true check in src/components/ContactForm.astro if its JSON shape differs.