KingOS 95
By
@Wirenux
- 43 Devlogs
- 31 Total hours
An webOS that is inspired by the computer in The Amazing Digitial Circus and by Windows 95 and 98.
Ship #2
# KingOS 95
The C&A certified 32-bit workstation built for trapped souls
⎛⎝( ` ᢍ ´ )⎠⎞ᵐᵘʰᵃʰᵃ
# What did you make?
For my second ship, I’ve massively expanded KingOS 95!
If you missed the first one, it’s a web-based OS built entirely with vanilla HTML, CSS, and JS, inspired by Windows 95 and the lore of The Amazing Digital Circus (I recommend you to go see the 1st Ship).
In this update, I've mainly add customization option. Here is what's new:
- AMI-Like BIOS & Boot Sequence: The OS now actually "boots up." You can interrupt the startup to enter a fully functional, keyboard-navigated BIOS screen before loading the desktop.
- Control Panel & Settings App: A centralized hub to manage the OS.
- Wallpaper: Added a Display Properties menu with hand-redrawn, classic tiled wallpapers (16x16, 32x32, etc.) and a live, perfectly scaled preview window.
- Accessibility (CRT Toggle): The CRT shader looks really good, but I added a global setting to turn it off so people with photosensitivity or eye strain can still play around safely.
UI Polish: I've added new tools bar to the File Explorer and the CaineApp terminal.
# What was challenging?
Without a heavy framework like React or Vue, global state management is hard !
When a user toggles the CRT effect or changes the wallpaper, that state needs to instantly update across the entire DOM and persist correctly. Also, building the live-preview monitor inside the Display Properties getting those tiny 16x16 pixel patterns to scale and tile exactly how they will look on the massive desktop required a lot of tricky CSS and JavaScript math.
# What are you proud of?
I'm incredibly proud of the accessibility and the "feel" of the OS. Adding the CRT toggle means more people can explore the project comfortably. But mostly, I'm proud that I managed to add an entire BIOS environment and a global settings architecture while keeping the codebase 100% vanilla and very fast.
What should people know so they can test your project?
To fully test the workstation, use the official Digital Circus credentials to unlock the computer:
- Username: kinger
- Password: queenie123 (or leave it empty!)
# Things to try:
1. Classic Scenario : Go to My Computer -> Characters -> AI -> CAINE, then spam your keys or Enter to trigger the animation loop!
2. Open the Settings app from the Start Menu to change your wallpaper and toggle the CRT effect.
3. Open the Start Menu, hit Shut Down, and reset the machine so you can catch the brand-new BIOS boot sequence!
4. Explore the project ! ᕙ( •̀ ᗜ •́ )ᕗ
I guess i’ll make a Devlogs ! (other wise I’ll lost ✨31min✨) So here is the final readme for the 2nd ship
Yay the 30 Hours have been reached 🎉 Otherwise I’ve added a popup when you press ESC to confirm you want to exit.
I’ve add a BUNCH of CSS & JS so right now i’ve this result ! (this can be use fully with the keyboard)
I’m building the BIOS (when you press anythings on the boot menu)
I’ve drawn Caine but for a desktop icon !
I’ve done some invisible fix (like bugs etc…) AND draw every icon for the tools bar in the Caine App and add the tools bar itself !
I’ve draw all the icon for the toolbar in the File Explorer ! and put them in with some CSS and JS so when you press the Up folder button you go….. ✨UP✨
I’ve done various fixes and add the Netscape Logo Animation !
Now the CRT On/Off switch work ! (This was not that difficult, just add or remove an attribute to a div). The 1st screenshot is without and the 2nd is with the CRT effect
Wow it’s been 2hours 😶. There now is a lot of things who have change ! There now a full Display Properties app (1st screenshot). And when you select a wallpaper there is a preview who fit perfectly into the screen and there is the ability to change the real background (2st screen shot) I’ve also redraw every wallpaper (for the most is just 32x32, 128x128, 64x64 or 16x16 repeated through the whole screen)
I’ve finally finished the screen (the inside is blank so i could put so texture in it with some code)
I’m recreating the screen in Display Management in Aseprite because I can’t find any resource for this online. This is so loonnnnggg I’ve just done the frame :,) (Also I’m pixel perfect)
I’m adding the Control Panel with the Display Settings, because a review say to me : You should add a flashing warning and a settings to disable the CRT effect
Ship #1
What did you make?
KingOS 95 is a web-based OS (webOS) that use the style of Windows 95/98 and is based on the universe of The Amazing Digital Circus. Built entirely with vanilla HTML,JS,CSS.
Project features:
- Custom Vector Window Manager: A lightweight window manager supporting zIndex layering, minimizing, maximizing, dragging and resizing window
- Virtual JSON Filesystem: Dynamic folder and document structure using only a JSON file
- CRT Display Shader: Scanline and aesthetic from retro display. Overlays optimized for web performance
- Start Menu: Handles application spawns, external link, and direct OS state toggles (Log Off / Shut Down).
- Bespoke Circus Applications: Interactive apps matching the show's lore, including CaineApp (a custom command terminal) and the PurgeAIProgram.
What was challenging?
The biggest problem came from trying to create a retro look on modern development tools:
- The Windowing Engine: Writing a fluid and stable window manager in pure vanilla JS without heavy UI frameworks is kinda hard and need building a good state architecture for tracking DOM coordinates, drag states, and layered sorting order on the fly.
- The Build Pipeline Battle: During deployment, Vite 8's ultra-modern strict compiler (LightningCSS) repeatedly crashed over a legacy media query (@media (not(hover))) hidden inside the 98.css stylesheet.
What are you proud of?
Building a fully responsive, visually complex webOS completely from scratch without leaning on bulky frontend frameworks. Achieving a high level of performance with native HTML, CSS, and JavaScript means the entire simulation loads instantly and stays incredibly responsive.
What should people know so they can test your project?
To fully use the workstation, testers need to know the official credentials (there are the same in the show !) to unlock the "computer"
Username: kinger
Password: quennie123
Stardance said to me : "You will lost 2h33 if you ship right now without a devlog" so here is it. Yay the 20h bar have been reached !!! In the last 2h i’ve add a lot of things like: hosting the website on vercel, make the whole readme, update project detail on Stardance and add the C&A Favicon, (i’ve also fix some bugs). So now I’m ready to Ship ! Wish me luck !
It was hard but i now have resizable window ! With a window handle in the bottom right corner
There is now Netscape ! I’ve used my other project KlassicOS to implement Netscape in this one. Because i’ve already done the code ! I’ve also fix some bug related to button and CSS because on this project I use 98.css but on KlassicOS i was making every 3d effect on the button by hand
There now is a Window Error with custom error text
I’ve added the Recycle Bin window !
I’ve added boot sound and restart when Purge AI Program have finished
Now there is a Window 95 boot image
The BIOS Loading screen is finished ! (+ i’ve fix the crt on effect on Safari / Chrome)
Just draw the little blue man (i don’t know his name)
There now is a BIOS boot animation !!
Now there is a New CRT effect (the boot one is so beautiful) https://www.youtube.com/watch?v=M90K87DTchw
Now there is some custom and responsive position for Bubble and CAINE’s heads & Bubble and CAINE’s heads can expand or contract depending on window size (i’ve also add a new C&A white icon)
CAINE & Bubble are now on screen !
Just finished bubble and assemble CAINE + Animation
I’ve finished CAINE’s part : And start Bubble
I’ve just finished the lower part of his mouth
I’ve just draw the hat!
I’m drawing the eyes of CAINE ‘cause i’havent found the pixel art online
Add an invisible change but I now have a function to spawn window that I can use every where
I’ve just finished the CAINE App ! When you open the app You get the exact same text as in the episode. In the app you you type anythings (you can litteraly smash your keyboard) it will write the same input as in the episode ! Or you could just spam enter to get to the end ! (The text is from the fandom of The Amazing Digital Circus : https://tadc.fandom.com/wiki/Computer )
now have caine app
More files !!
There now is all the file like in the episode
Now have the File explorer with pseudo File System using JSON File :
Now able to create fully customizable windows, with custom icons, size, title, titlebar button
I now have clickable icon on the desktop !
Now have a proper Start Menu
Just add the clock (+ sound icon) and the start menu button
Finished the login phase
Hi ! I’m adding the login phase of the webOS
