Stardust OS

Devlog #4 **Okay.. This is Getting Out Of Hand!

https://forms.gle/z4STN2WMLspiTk4B7

Before anything… yeah the contest is still on (Check my previous post to see guidelines, i have attached the forms link here too!). I’m actually hyped to see what people submit. If this goes well, StardustOS might lowkey have a whole community vibe, which is kinda insane to think about. Anyway…So today wasn’t one of those “add 20 features” days. It was more like: “make everything feel real.” And somehow… that took more effort than building half the UI. lol
First thing I focused on was interaction. Not just clicking stuff and seeing “coming soon”… but making it feel like something wants to respond. Windows now actually exist. Like… proper floating windows. You click something, it opens, it animates, it feels alive.
And the best part?
You can drag them around.
I literally spent way too long just dragging a window across the screen like “yeah… this is it.”
Yeah so… I added a video as the desktop background. An actual looping video. Of course the browser tried to block autoplay (ofc it did)
So I had to manually trigger play in JS. Now it works and honestly…this should not feel this cool.
Also added the classic three buttons: close, minimize, maximize. And yes, maximize actually works.
Not fake maximize.
REAL maximize.
IG this is the moment where it stopped being “just UI” and started becoming… something else. Then I went a bit deeper. Z-index system. Which sounds boring, but trust me it’s not when your windows start fighting for attention. Now when you click a window, it comes to the front properly. No weird layering bugs. No “why is this behind that” moments. Everything just behaves. And honestly?That alone made it feel 10x more polished. Then…I built my first real app. A calculator. Nothing crazy, but also… not basic either. It actually works like a real one: operations, decimals, percentages, sign toggle…And yeah, I tested dividing by zero. It didn’t explode, so we’re good. Seeing an actual working app inside something I built from scratch? That was a moment! Like… this isn’t just a concept anymore. It’s doing things. Small things, sure. But real things. Also tweaked animations a bit more. Open, minimize, transitions…Everything feels smoother now. Not perfect. But definitely not “school project energy” anymore. More like…“okay wait… this might actually turn into something serious.”

Devlog #3- Wait.. I Built a Desktop!?
Before We start I am hosting a Contest!!
Get your art featured in StardustOS. This includes promoting your Social Media (inside the OS) + Become a part of history as taking part in my new OS.
Fill this Form to take part-
https://forms.gle/EtzNC2EechfDmX3c7

Anyway, Lets Continue with the devlog.

Bruh Moment
So I was coding for like 2+ hours. Then I checked the Hackatime tracker.
It said: 33 minutes.
???
I just stared at it. Ig it’s because of my internet being bad or something. Hopefully it fixes itself because that was unexpected!

I made the Desktop today!
1.Full desktop UI inside the root
2.Clean structure with layers (topbar, icons, dock, etc.)
3.A proper “space OS” vibe.
4.Added basic icons: Files, Notes, Settings
but they’re just placeholders for now. Clicking them shows: “coming soon”
No real apps yet…but later ofc
5.Built a bottom dock: Finder, Browser, Notes, Terminal, Settings. Click = toast popup and honestly? Even THAT feels satisfying.

What I will do next
Now things get serious.
Real apps (not placeholders anymore)
Live wallpaper (animated desktop)
Maybe a desktop pet (like Clippy… but not cursed like BonziBuddy lol).
And according to the guide I will build an advanced app.
At this rate…I might accidentally build an OS.And I’m not even joking anymore.

Devlog #2 — Okay… Now It Actually Feels Real

The Boot Screen Got a MAJOR Upgrade
Yesterday it was just a loading bar.
Today?
I accidentally built something that looks like it belongs in my finest art’s collection
Like… I went from “loading…” to
“Initializing Stardust kernel 6.9.0…”

Also, I took inspiration from @subhansh ’s mewoOS Boot screen. Trying to replicate his boot screen was
a learning experience in its own.

Today I added fade-outs:
Boot fades away
Login fades away

Now it feels smooth instead of like:
“boom. new screen. deal with it.”

Login Screen: Small Glow-Up
Didn’t change the logic much, but visually:

1.Replaced emoji with a proper SVG avatar
2.Made it feel more like a lock screen
3.Better blur, better lighting

AND THEN… THE BIG ONE
It doesn’t stop at login anymore.
It opens a desktop.
Like… an actual desktop.

Desktop (v1)
Nothing crazy yet, but enough to feel real:
Spacey animated background
Top bar like macOS

And the top bar has:
WiFi icon
Volume icon
Battery % ( as per the user’s device)
Date
Time
And yes…
the time updates. I am so proud of myself :)

Yeah, I used:
navigator.getBattery() for battery
setInterval() for time

So now it’s not just UI.
It’s actually reacting to the system.
Which is kinda wild for something running in a browser.

Today I basically attacked the CSS:
More blur
Better gradients
Starfield effect
Depth everywhere

It finally stopped looking like a school project. lol

Devlog #1
Make the system boot. Not instantly appear. Actually boot.
(P.S. it took me 1 hour and 14 minutes to write this 💀)
I used VS Code because it just makes life easier—autocomplete, structure, everything.
Created a folder called:
StardustOS
Inside it:

• index.html
• style.css
• script.js
• assets/icons/pixel-star.svg
  Everything runs inside one element:
  <div id="root"></div>
  Instead of switching pages, I just replace the content inside root using JavaScript.
  So technically…
  The entire OS is just one div having identity crisis.
• Connected Google Fonts (VT323) just in case I want retro vibes later
• Linked CSS and JS normally
• Nothing fancy—just a clean entry point
  I wanted a MacBook-like UI
• Sleek
• Minimal
• Soft
• Not loud

Key Design Choices:

• Black base (#000) → clean boot feel
• White + grey tones → UI structure
• Blur + transparency → glass effect
• Accent colors:
• Blue (#4ea1ff) → highlights / identity
• Orange (#ff9f43) → alias accent

Fonts:

• System fonts (-apple-system, Segoe UI, etc.) for that native feel
  Boot Screen
  First thing you see:
• Black screen
• A space emoji 🌌 as the “logo”
• A thin loading bar

What’s actually happening:

• Progress increases every ~80ms
• Width of bar updates
• At 100% → small delay → login screen
  Fake loading? Yes.
  Feels real? Also yes.

Login System
First time:

• Create password
• Confirm password
• Stored using localStorage
  Returning user:
• Shows login screen (with my name for now)
• Checks password
• Correct then continue
• Wrong then error message

Background & UI Feel

• Login screen uses a space wallpaper
• Overlay blur + dark tint → makes everything soft
• Avatar uses a blue-purple gradient
• Inputs are translucent with blur
  Basically:
  trying to make it look expensive without actually being expensive
  Intro Screen
  After login:
• Dark grey background (#1c1c1e)
• Floating pixel star (from assets)
• Glow effect + animation
• Smooth fade-in
  Text introduces:
• Me (Yuvraj)
• My alias (Singhularity)
  Then a button:
  Continue
  And when you click it?

Continue clicked! (Desktop not built yet and ps this is just a placeholder i am gonna remove this intro screen when my desktop is built)

That’s it.
No fake desktop yet.

What I Learned Toda

• How to simulate screens using one root container
• How to manage flow: boot, login, intro
• How localStorage can act like memory
• How small UI details change the whole feel

The Funny Bug (aka “I Broke My Own OS”)
At one point… nothing worked.Boot screen? Gone. Login? Gone. Just a blank screen staring back at me like I offended it.

Turns out… I wrote:

const root = document.getElementByID("root");

Notice it?
getElementByID
Capital D
Yeah… that one letter.
So JavaScript basically said:
“I have no idea what you’re talking about.”

And since root became null, the next line:

root.innerHTML = ...

Boom. Entire OS refused to exist. For a solid 5 minutes I thought I broke everything. Then I fixed the “D”… and suddenly my OS decided to come back to life like nothing happened.