Lunar

On-call SaaS, cosmic orb hero

by Owais

Repo Live site

Description

Lunar is a one-page marketing site for a made-up on-call tool that sorts alerts and only wakes someone when something is really on fire. The hero is a starfield with a huge blue planet rising from the bottom and "LUNAR" arcing over it in bubble letters. Below, the page makes its case with numbers: an alert breakdown, a live incident console, an orbit of integrations and a chart of a quiet night. There are no images at all.

Use it for:

a landing page for a developer tool, monitoring or DevOps product
a dark SaaS site that loads fast with no images
a reference for an illustrated hero built only from CSS and SVG

Workflow

Open Claude Code
Install Claude Code, open a terminal in an empty folder and run claude. Pick Claude Opus 5 with the /model command.
Paste the prompt
Copy the prompt on this page and send it as your first message. There is nothing to download: the planet, stars and charts are all code.
Preview and fix
Ask Claude to start a local preview. Check that the LUNAR letters follow the planet's curve on desktop and phone, then ask for one fix per message.
Publish on GitHub Pages
Ask Claude to push the folder to a new GitHub repository. Then open the repository's Settings, choose Pages and deploy from the main branch.

Main prompt

Build a one-page marketing site for Lunar, an on-call and incident response tool that sorts alerts automatically and only wakes a person when something really needs one. Tagline: "On-call that lets you actually sleep."

Use plain HTML, CSS and JavaScript in three files. No framework, no libraries and no images: draw everything with CSS, inline SVG and canvas.

Design: near-black navy (#02040f), periwinkle accent (#A9C7FF), light text (#E8EEFF), muted blue-grey for secondary text, green for resolved and amber for on fire. Bagel Fat One only for the logo word, Inter for text, JetBrains Mono for times and code.

Hero: a starfield with a huge glowing blue planet rising from the bottom edge, lit from above. The word "LUNAR" in fat, slightly wobbly bubble letters arcs over the planet, following its curve. One line of copy and one button.

Sections:
1. A logo strip.
2. The 3am problem: a bar that fills to 68% duplicates, 23% self-resolving and 9% on fire.
3. How it works: three steps and a live incident console where 47 alerts at 02:14 resolve with nobody woken.
4. Features: an uneven bento grid with a real runbook snippet and a postmortem preview.
5. Stats that count up: 94%, 11s, 4.2h and 99.99%.
6. Integrations: two rings of tool chips orbiting in opposite directions.
7. A testimonial, pricing (Free, Team $18, Enterprise) and an FAQ.
8. A final call to action with an hour by hour chart of a quiet night, one amber spike at 02:00, then the footer.

Add gentle parallax in the hero and fade-ins on scroll. Write plain, specific copy with numbers instead of hype. Respect reduced motion and make it work on phones.