Hyperion OS

Ship #1 Changes requested

@harry_ on Hyperion OS · about 14 hours ago

What did you make?
I created HyperionOS, a web-based desktop environment simulator built entirely from scratch using raw HTML5, CSS3, and JavaScript. It features a high-fidelity glassmorphism user interface with draggable, resizable application windows, a fully functional client-side text editor, a virtual file explorer system that processes local uploads using the HTML5 FileReader API, an automatically syncing taskbar clock module, and an integrated interface mode engine that seamlessly switches between Light Mode and a deep, high-contrast Dark Mode.

What was challenging?
The most significant engineering challenge was implementing the horizontal centering of the taskbar app icons while keeping the system clock anchored to the far-right edge of the screen. Initially, Flexbox alignment rules caused the clock to conflict with the icon cluster's positioning. I resolved this by taking the clock out of the standard Flexbox layout flow using absolute positioning (position: absolute; right: 20px;), allowing the core taskbar icon array to utilize justify-content: center; without layout disruption. Another major hurdle was translating spatial desktop window positioning logic from Python concepts over to the browser DOM using mouse event tracking handlers (mousedown, mousemove, mouseup).

What are you proud of?
I am incredibly proud of the clean visual design and the performance optimization of the UI engine. Achieving a smooth, realistic glassmorphism effect using hardware-accelerated CSS filters (backdrop-filter: blur(16px);) combined with complex window layer management (dynamically tracking and incrementing zIndex on click) means the windows stack and drag with absolute zero lag. I am also proud of successfully pushing the repository live into a production environment via cloud deployment on Render.

What should people know so they can test your project?
Live Link: Access the project directly via my production deployment URL on Render.

Testing Interface Modes: Open the System Settings window to switch the global style profile fluidly between Light Mode and Dark Mode.

Testing Window Management: You can click and drag any window by its top header bar, click the action buttons to minimize/maximize/close them, or click corresponding taskbar icons to toggle windows open or closed.

Testing File Operations: Open the File Explorer window, click "Upload File," and upload a local text asset (.txt). Once uploaded, click its icon in the explorer window, and the custom virtual drive layer will automatically inject the contents into the Text Editor application workspace for reading.

3 devlogs
6h
WebOS 1

Try project → See source code →

Open comments for this post

@harry_ on Hyperion OS · about 14 hours ago

1h 39m 32s logged

Devlog #3 - Most Likely the Final Update - 6/12/2026

HyperionOS is officially finished and live on the internet! After hours of grinding through coordinates, layouts, and layout engines, I wrapped up the entire workspace tonight and pushed the code straight to production on Render. The project went from a static concept to a fully operational, beautiful desktop simulator, and I am hyped to call this a finished win.

I spent tonight locking down the final system architecture and polishing the visual aesthetics:

The Translucent Glass Engine: Ditched the overly complex, messy layout code and restored the premium glassmorphism theme, keeping the exact sleek rounded-corner borders and 16px dynamic background blur filters completely intact.

Master Interface Mode Switcher: Scrapped the multi-color accent settings and replaced it with a streamlined Light Mode and a deep, high-contrast Dark Mode optimized to match a pure black canvas background file.

The Centered Taskbar Engine: Completely overhauled the bottom navigation dock to horizontally align the app button cluster dead-center in the screen (Windows 11 / macOS style) while using absolute layout mapping to lock the dynamic system clock module perfectly to the right edge.

Render Production Deployment: Connected the repository to a cloud host environment, configured the root and publish directory structures, and launched the site live to the web.

This final stretch taught me a ton about writing clean, maintainable web architecture. I learned how absolute positioning can be used to take a layout element (like the clock) completely out of the standard Flexbox equation so other elements can center flawlessly, how to manage global design properties efficiently by writing master CSS variables that JavaScript can rewrite on the fly, and how hosting engines like Render track file assets directly from a root repository directory.

It feels amazing to step back, ship a polished project, and get it out into the wild. Up next, I’m looking into pivoting toward on-device machine learning—specifically diving into MediaPipe and TensorFlow.js to build a 60 FPS webcam face and object tracker HUD layer.

Onwards to the next build!

Open comments for this post

@harry_ on Hyperion OS · 1 day ago

2h 19m 16s logged

Devlog #2 - 6/11/2026

The windows are officially moving! After laying down the layout framework, I spent tonight diving straight into user interaction and window manipulation. Translating my Python logic over to JavaScript and the browser DOM was a massive mental puzzle, but the interface is finally starting to respond like a real desktop environment!

I spent tonight expanding the OS capabilities and bringing the window control interface to life:

Built a sleek top header bar for the app window equipped with operational minimize, maximize, and close buttons.

Implemented mouse event listeners (mousedown, mousemove, and mouseup) to make the window fully draggable around the workspace canvas.

Created an element tag safety check inside the dragging function to prevent the window buttons from triggering accidental window drags.

Built a responsive fullscreenToggle() state manager that snaps the window to the exact dimensions of the screen while perfectly clearing the taskbar.

Today was a massive learning curve for me regarding how JavaScript interacts with live styling. I learned that JavaScript can’t read values directly from an external CSS file (which is why checking layout strings directly fails), how accidentally mixing up assignment (=) and comparison (==) operators can completely stall your function, and how to use the CSS calc() function to flawlessly mix viewport units with pixel units (100vh - 47px) so the layout scales perfectly!

Hopefully next time I can work on starting the multi-window feature after I finish studying for my finals tmrw, which means looking into updating my query selectors and implementing a dynamic z-index layering system so windows can stack without getting confused.

Onwards!

Open comments for this post

@harry_ on Hyperion OS · 4 days ago

2h 4m 38s logged

Devlog #1 - 6/9/2026

My project HyperionOS is starting to take a bit more shape!

My project is a web-based operating system simulation (like the name suggests). I have barely any prior experience in HTML, CSS, or JavaScript, so I am diving headfirst into this super ambitious project while learning the basics as I go!

I spent tonight laying down the digital foundation of the OS and successfully connected my visual layouts with functional code:

Built a black desktop canvas locked to the screen size.

Designed a centered taskbar using CSS Flexbox layout engine and z-index.

Created a circular, application launcher button inside the taskbar.

Built a responsive application window frame that uses position: absolute so it floats over the background canvas.

Today was a massive learning curve for me since I had to debug some really weird layout traps. I learned how box-sizing: border-box keeps padding from breaking element sizes, how browser loading timing affects JavaScript code execution, and how to write a functional toggleWindow() state check to squash a stubborn double-click bug on the launcher button!

Hopefully next time I can work on designing a polished top header bar for the app window with control icons, and dive into mouse event listeners to make the window fully draggable around the workspace.

Wish me luck!