mikuOS
- 4 Devlogs
- 6 Total hours
this is an epic webOS with the theme of Hatsune Miku
2h 0m 5s logged
epic devlog #4 (i think)
hello everyone! >w<
ever since the last devlog, i’ve only added a few things… but somehow they took way longer than i expected TwT
what did you do?
- browser — i added a browser app! …it’s only partly functional though because most websites refuse to load inside iframes for security reasons. rude.
- message boxes — added a simple message box system. right now it’s mainly used to warn users that around 99% of websites won’t load inside the browser.
- a nice README — self explanatory. the project finally has a proper home page on GitHub!
fixes
- dragging windows no longer selects every piece of text on the page. surprisingly annoying bug… now it’s gone. ^^
- cleaned up a few small things behind the scenes while working on the browser.
what’s next?
i want to keep adding more apps so the desktop actually feels alive. the browser was a pretty big step, but i’d also like to improve the settings app, add more wallpapers, and maybe start working on widgets.
as always, thanks for reading!
see you in the next devlog! >w<
Ship #1
I made mikuOS, a small Hatsune Miku inspired web-based operating system experience built entirely with HTML, CSS, and JavaScript.
The goal was to create a cute desktop-like environment that runs directly in a browser. It includes draggable windows, a dock, a topbar with a live clock, wallpaper themes, settings, and small animations to make it feel more like an actual operating system.
The most challenging part was making the UI behave like a real desktop environment instead of just a static website.
Some of the biggest challenges were:
- making windows draggable while keeping them inside the screen
- managing window focus and z-index so the active window appears on top
- creating smooth opening and closing animations
- making the blur and glass effects look good while keeping the UI readable
- saving user settings like selected wallpapers using localStorage
Another challenge was designing the interface itself. I wanted mikuOS to have its own identity inspired by Vocaloid instead of just copying an existing operating system.
I especially like how the animations, themes, colors, and UI details work together to create a consistent style. Even though it is still a small project, it feels more like an actual desktop environment rather than just a webpage.
I'm also proud that I built it from scratch without using frameworks, which helped me understand how web interfaces work at a deeper level.
mikuOS runs directly in a browser, so no installation is required.
To try it:
1. Open the website:
https://mschiller890.github.io/projects/webos/
2. Open apps from the dock.
3. Drag windows around.
4. Open Settings and change the wallpaper/theme.
40m 10s logged
devlog: the saga continues
finally, the basics are done!
what has changed now?
not as much as before but the OS feels WAY better ^^
- changed the font because the old one was bad to read
- added an about app which is not good since im a pretty bad writer but eh, good enough lol
- added a app opening/closing animations that doesnt get in the way
- polished the windows and made the desktop feel more like a real tiny little operating system :P
how does it feel now?
honestly, this is the first time the project feels less like a prototype and more like an actual OS.
the animations make it feel MUCH more alive
try it out here!:
https://mschiller890.github.io/projects/webos/
whats next?
̄_(ツ)_/ ̄
as always, thank you for reading my devlog!
see you soon again!
1h 53m 35s logged
devlog: the sequel
hello everyone! >w<
since yesterday’s devlog, the webOS has improved quite a lot in both UI
and functionality.
damn! what changed?
honestly… a lot.
- introduced blur effects and a proper color palette for the default
Miku theme - redesigned the topbar with blur and a softer color instead of plain
black - windows and apps are now real!
- added the welcome window
- made the dock work (currently only settings) – clicking the settings
icon now opens the app! …although it’s still pretty empty right now
TwT - added blur effects to the dock as well
- drew custom icons for the apps (as you can probably tell, I’m not
exactly an artist lol)
what now?
first, I want to find more wallpapers and create unique themes for each
member of the Vocaloid family.
I also want to add more animations, widgets, and small details to make
it feel more like an actual operating system.
I’ll probably post another devlog later today and start a webOS 2
project to continue improving this idea.
wow! where can i check it out?
want to try it yourself? ^^
you can check out the current version of the webOS here:
https://mschiller890.github.io/projects/webos/
keep in mind that it’s still a work in progress, so expect some empty
apps and unfinished features for now TwT
thank you for reading my devlog!
hope to see you again soon! >w<
1h 0m 12s logged
my first devlog
hey! i dont really know how to begin, but welcome to my first devlog! ^^
i chose to make a webos type project in the style of Hastune Miku (which
im a huge fan of)
so far i have created basically just the basics:
- a placeholder dock for apps
- a simple rounded top bar with time on the left and some placeholder
buttons on the right (id like to simulate a real OS with real icons like
battery, wifi, power) - and a really barebones desktop.
future
my plans now are to improve the desktop apps and dock apps to make them
look like actual apps and not just a text list anymore qwq
some kind of settings where youll be able to switch wallpapers+colors
with themes inspired by the whole vocaloid family maybe?
but maybe i should look into draggable windows first
theres still a lot to do, but im excited to see how this project ends up.
thank you for reading! :3
