stardance has been extended another month! the new deadline is october 31 :)

You are browsing as a guest. Sign up (or log in) to start making projects!

My very own WebOS

By @Delma

  • 2 Devlogs
  • 1 Total hours

AeroOS

AeroOS is a front-end web development project that recreates an interactive and responsive user interface (UI) inspired by a modern operating system desktop, featuring a clean and streamlined design. Built entirely from scratch using standard web technologies, this project focuses on delivering a fluid and dynamic user experience (UX).

Key Features

  • OS-Style Interface: Simulated desktop layout featuring interactive UI components and dynamic elements.
  • Responsive Design: Flexible architecture optimized using modern CSS properties to seamlessly adapt across various screen sizes.
  • Dynamic Logic: Native JavaScript implementation to handle UI state, events, and interactive components efficiently.
  • Clean Architecture: Well-structured, modular folder hierarchy ensuring easy maintenance of styles, scripts, and visual assets
Source
Ship #1 Changes requested

@Delma on My very own WebOS

What did you make?
A full web-based OS called AERO OS, built only with vanilla HTML, CSS and JS — draggable windows, a taskbar with Start Menu, and apps like a Terminal, a live Resource Monitor, and Devlogs.
What was challenging?
Making the window dragging feel smooth and native without any library — getting the pointer events, focus, and z-index logic just right so windows lift and move naturally.
What are you proud of?
The window manager, honestly — it’s all hand-built and it actually feels like a real OS, drag, resize, minimize, maximize and all. The whole glassy HUD look also came together nicer than I expected.
What should people know to test it?
Just open the HTML file in any modern browser, no install needed. Double-click icons to open apps, drag windows around, and try typing help in the Terminal.

Try project → See source code →
Open comments for this post

@Delma on My very own WebOS

17m 40s logged

recently paused adding features to Aero-OS to focus entirely on performance, and rewriting the core code inside js/app.js and css/style.css made a massive difference. First, I threw out heavy third-party dragging libraries and wrote a native window manager in app.js using vanilla JS PointerEvents. By combining requestAnimationFrame() with GPU-accelerated CSS translate3d, window dragging immediately jumped to a buttery-smooth 60 FPS. I also implemented lazy loading: app DOM nodes are now injected only when opened and completely destroyed on close, keeping memory usage totally clean. Finally, I streamlined style.css by stripping out expensive paint-heavy shadows and blur filters to ensure fluid transitions. These tweaks cut my initial load time down to a fast 0.8 seconds and reduced the core bundle by 70%.

0
0
1

Delete project?

Are you sure you want to permanently delete this project? This action cannot be undone.

All devlogs, followers, and associated data will be removed.

Followers

Loading…