Devlog 1 — “Boot”

Day 1 of Hack Club Stardance. The cosmic medium takes its first breath.

I’ve been sketching this idea for weeks: a full-fledged WebOS that feels like diving into deep space. Today I finally wrote the first line of code.

The commit log will be my captain’s log. Stardance only ships if you document the voyage, so here goes.

What even is ÆTHER OS?

ÆTHER (pronounced “ay-ther”) is the Greek personification of the upper sky—the pure, glowing air above the mortal atmosphere. Later, physics borrowed the name for the theoretical medium that fills space and carries light.

ÆTHER OS is a desktop environment running entirely in a browser tab: a window manager, menu bar, dock, virtual filesystem, and 12 built-in apps. No backend, no framework, no build step—just HTML, CSS, and JavaScript.

Its design blends glassmorphism with cosmic depth: frosted panels over a parallax starfield with slowly morphing nebulae, using Void Black, Nebula Purple, and Cosmic Cyan.

What I built today

1. The stellar scaffold

The project consists of one index.html, one styles.css, and four JavaScript modules:

• core.js — boot, lock screen, menu bar, dock, notifications, sounds, shortcuts
• wm.js — window manager
• fs.js — virtual filesystem and desktop
• apps.js — all 12 apps

No npm, bundler, or framework. Just globals and the DOM.

2. The cosmic background

The desktop uses two animated layers: a <canvas> starfield rendered with requestAnimationFrame and a morphing nebula made from blurred radial gradients.

Stars belong to near and far layers (parallax factors 18 and 6). Mouse movement is smoothed with:

tmx += (mx - tmx) * 0.06;

Near stars receive a cyan halo and subtle twinkle, while the nebula morphs over ~24-second cycles using filter: blur(80px).

3. Boot sequence

The boot log is typed line-by-line using await sleep(...), alongside a progress bar and ASCII logo.

The system announces NEBULA KERNEL v1.0.0 before printing fake kernel logs like:

• Spawning process init (PID 1)
• Calibrating cosmic background radiation… 2.725 K.

4. Lock screen

A live clock, date, user avatar, decorative password field (any password works), and click-anywhere-to-unlock.

5. Menu bar

A macOS-style menu bar with the ÆTHER menu, active app name, Wi-Fi, battery, notifications, volume, and live clock. Context menus include working actions like New Window (Ctrl+N), Close (Ctrl+W), and Fullscreen (F11).

6. Sound engine

All UI sounds are synthesized with the Web Audio API through a single helper:

beep(freq, duration, type, vol, slide)

Current sounds include boot, open, close, click, notification, and error.

Bugs fixed

# Problem Fix 1 Boot text blurred because it lived inside the nebula with filter: blur(80px). Moved the boot overlay above the nebula layer using z-index. 2 Window z-order never updated. el.style.zIndex = ++zTop on focus. 3 Starfield broke after resize. Added a resize listener that updates and reseeds the canvas.

Up next

Next comes the window manager: dragging, resizing, minimizing, maximizing, snapping, z-order, spring animations, double-click maximize, triple-click zoom, and finally the dock with magnification.

That’s when ÆTHER starts feeling like an operating system instead of a website.

✦ breathe the void