catOS
By
@xerneas
- 4 Devlogs
- 6 Total hours
Custom WebOS
Ship #1
GatOS
A personal operating system that runs in your browser and is, I will be honest, mostly about a cat.
live: xerneas3318.github.io/GatOS
code: github.com/xerneas3318/GatOS
It is a little fake desktop. It has a top bar with a live clock, a background, and windows you can actually drag around, open, and close like a real OS. I built it from scratch over the last few weeks as my Stardance webOS project.
What is on it
- welcome.exe: a short intro window (with a photo of my friend’s cat, obviously)
- dev.log: a notes-style reader with a sidebar of build entries, so you can read how the thing got made
- catnip: a full cookie-clicker game where the cookie is the cat. Tap the cat for treats, buy auto-petters and laser pointers and a “cat loaf mine” that earns treats while you are away. It saves your progress to your browser.
Built with
Plain HTML, CSS, and JavaScript. No framework, no build step. The whole color palette lives in one tiny tokens file thanks to CSS variables, so the entire theme changes from one place. Inter for the UI, Space Mono for the code and clock.
What I learned
Along the way I learned how to make an element draggable, how to keep windows stacking in the right order, how localStorage works, and how to split a project into a file structure a human can actually read instead of two giant cursed files.
The cat, as always, remains. The cat is eternal. The cat now lives on the internet over HTTPS.
the files are files now
opened this project after like a week away and genuinely could not find anything. one style.css, one script.js, both hundreds of lines of everything everywhere. i wrote every line of it and i still had to ctrl+f to find the clock. it was a junk drawer with a cat on top.
so this whole session was cleaning. no new features, nothing shiny, just four hours of moving code around like a little file gremlin.
what got split
styles:
- one file for the top bar
- one for windows
- one for the desktop
- one per app
same deal for the js, the clock, the dragging, the window stacking, the icons all live in their own files now. the two games moved into anapps/folder so catnip stops rubbing up against the core window code (it’s a cat. it rubs on things.)
the one smart thing
the tokens file from last time made this way less painful than it deserved to be, since all the colors were already in one place, nothing broke visually while i shuffled everything. past me did one 1 smart thing and present me is grateful.
weirdest part is opening a file and already knowing what’s in it before it loads. revolutionary technology.🤯
next time
- github pages: this thing needs a real url so it stops living exclusively on my laptop
the cat remains. the cat is eternal. the cat’s code is just alphabetized now.
NEW CAT MINI GAME
first thing i did was get rid of the terminal look. it was cool for about a week, but staring at glowing teal on near-black was starting to feel like my OS was yelling at me. so i rebuilt the entire theme to look like a warm peach background, light grey panels, one orange accent doing all the heavy lifting. it’s calm now. it’s a website you could actually read at 2am without your retinas filing a complaint.
did it the right way this time with CSS variables, so the whole palette lives in like eight lines at the top of the file. want a different accent? change one value. past me would have found-and-replaced forty hex codes and missed six of them.
also swapped the font to Inter for that clean note-app feel, kept Space Mono around for code and the clock because some things are sacred.
oh, and there’s a new app:
catnip.
it’s a cookie-clicker but the cookie is my friend’s cat. you tap the cat, treats go up, you buy auto-petters and laser pointers and eventually a “cat loaf mine” that prints treats while you’re not even looking. it saves your progress. i have lost dozens minutes of my life to it already and i wrote it.
so the cat remains. the cat is eternal.
the window moves now.
you can grab welcome.exe by its title bar and fling it around the desktop, hit the little red dot to close it, and click xerneasOS up top to summon it back. it’s a real window now. it even has a title bar.
spent a while wrestling with the drag math turns out you have to keep track of the cursor’s offset from the window when the drag starts. otherwise the window instantly teleports so its corner snaps to your mouse. not exactly the intended user experience.
also did some housekeeping: ripped all the CSS into style.css and the JavaScript into script.js so my HTML isn’t one giant cursed wall of inline styles anymore. windows are now a reusable .window component, so making future apps should be way easier.oh, and there’s a live clock in the top bar that updates every second. new Date() my beloved.
the cat remains. the cat is eternal.
next time: a real wallpaper, maybe an actual second app, and slowly making this feel less like “one draggable window about a cat” and more like an operating system (that’s still about a cat)
today i learned the difference between margin and padding. profound stuff. life-changing, really.
anyway none of that matters because i put a picture of my friend’s cat on my website and now it’s the best site ever made.
just started webOS development! things i poked at:
- styled everything neon teal because i just can
- google fonts (VT323 my beloved)
- object-fit: cover so the cat doesn’t get crunched into a horror image
- border-radius so the cat has rounded corners now. very important. mission critical some might say
next time: probably a wallpaper, a window, maybe a clock. or more cats. undecided.
