Astro eclipse-window coming-soon page with an orbital countdown
A calmer kind of coming-soon page: one orbital launch window, one real countdown, and a restrained release surface that still feels premium before launch.
- Unique
Eclipse Windowhero instead of a standard landing page or countdown board - Orbital countdown scene with four floating time markers arranged around a central eclipse
- Production-safe countdown that stops at zero
- Local loop preview via
?loop=1 - Machine-readable launch metadata at
/launch-status.json - Minimal visible structure by design: header, hero, footer
/- eclipse window coming-soon homepage/launch-status.json- machine-readable launch status feed/robots.txt- crawler rules generated by Astro
| Layer | Technology |
|---|---|
| Framework | Astro 6 |
| Language | TypeScript |
| Styling | Tailwind CSS 4 + small custom motion utilities |
| Motion | Native CSS orbit animation + TypeScript countdown script |
| SEO | @astrojs/sitemap, canonical metadata, JSON-LD, robots.txt |
| Hosting | Static deployment ready |
npm installnpm run devnpm run build- Production behavior: the timer stops at
000 : 00 : 00 : 00 - Local preview: add
?loop=1to the URL - Loop mode moves the target forward by the original countdown interval every time it reaches zero
astro-eclipse-window-coming-soon/
├── public/
│ ├── favicon.svg
│ └── og-umbra.svg
├── src/
│ ├── components/
│ │ ├── Footer.astro
│ │ ├── Header.astro
│ │ └── OrbitalCountdown.astro
│ ├── data/
│ │ └── site.ts
│ ├── layouts/
│ │ └── MainLayout.astro
│ ├── pages/
│ │ ├── index.astro
│ │ ├── launch-status.json.ts
│ │ └── robots.txt.ts
│ ├── scripts/
│ │ └── orbitalCountdown.ts
│ └── styles/
│ └── global.css
├── LICENSE
├── netlify.toml
├── package.json
└── README.md
- Push your code to GitHub
- Connect repository to Netlify
- Build settings are auto-configured via
netlify.toml - Deploy
MIT License. See LICENSE.