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

aeroOS

  • 5 Devlogs
  • 10 Total hours

A web OS based on frutiger aero design aesthetic, giving 2000s vibes

Ship #2

What did I make?
Picked up where ship #1 left off and turned AeroOS into an actual usable desktop. Added a full boot sequence (shutdown > boot > lock screen > desktop), a top menu bar with working flyouts for battery, wifi, volume, and calendar, and a functional Start menu with search.
Four new apps: Settings (wallpaper, sound, network, accounts), File Explorer, Media Player, and a Games Explorer with 5 playable embedded games. Also added a custom right-click context menu and a Browser app.

What was challenging?
Keeping everything visually consistent as the app count grew. Every new flyout, window, and panel needed the same treatment as the original apps, so I ended up building shared pieces instead of copy pasting styles everywhere. Wiring the boot > lock > desktop flow through session state without it feeling janky took a few tries too.

What am I proud of?
The flyouts. Getting battery, wifi, volume, and the calendar to all feel like they belong to the same OS. The same borders, same shadows, same footer links was fiddly but it's the difference between "a pile of components" and "a coherent system."

How to test it?
Start on the shutdown screen, hit power, and let it boot through to the lock screen. Click "Log on" to reach the desktop.
Try the Start menu (bottom-left) and search for an app by name.
Open File Explorer, double-click an audio/video/image file: it'll launch in Media Player.
Check the top-right flyouts (wifi, volume, battery, calendar).
Right click the desktop for the context menu.

  • 2 devlogs
  • 8h
  • 17.82x multiplier
  • 145 Stardust
  • WebOS 2
Try project → See source code →
Open comments for this post

2h 12m 31s logged

Finally finished polishing up! :yay:

what I did:

  1. Flyouts now have consistent styling.
  2. Updated welcome app.
  3. Start button became more functional.
  4. Created new custom svg icons.
  5. Updated settings app to display system, network and user settings.
  6. Made a new browser app
  7. Made custom hook for volume to sync it across different components.

what we do next: ship :pet-1mon:

0
0
5
Open comments for this post

5h 55m 13s logged

Did so many changes in AeroOS! :huh-blink:

heres explained in detail:

  1. Added boot sequence. shutdownScreen > bootScreen > lockScreen > desktop
  2. Updated top menu bar with flyouts (system tray, battery, volume, wifi and calendar)
  3. Added more apps. (settings, file explorer, media player and games)
  4. Moved wallpaper changing logic to settings
  5. File manager content like audio, video and image opens through media viewer.
  6. Games Explorer currently supports 5 games, all embedded through <iframe>
  7. Added custom right click context menu.
  8. Added windows like start button.

note: several minor issues, such as unconnected links between the Start menu and applications, are currently known and will be resolved in future.

what we do next: polish :ha:

0
0
5
Ship #1

What did I make?
I built AeroOS! It's a fully functional, browser based desktop OS that's basically a love letter to the "Frutiger Aero" the popular aesthetic of mid 2000s (think Windows Vista, Windows 7, and early Mac OS X). I built a custom window manager so you can drag and minimize windows, added a 3D glass dock with that classic magnification effect on hover, and threw in a bunch of skeuomorphic apps. right now, it has a Notepad, a detailed mechanical analog clock, a live weather dashboard, and a Welcome app.

What was challenging?
Honestly, nailing the aesthetic was the hardest part. It is surprisingly difficult to recreate authentic 2000s glass UI using modern CSS. If you aren't careful, it just ends up looking like modern Apple glassmorphism. Getting that true Frutiger Aero vibe meant stacking crazy complex box shadows, using sharp 50% split linear gradients to get those harsh glass cuts, and layering inner white borders so the UI actually looks like thick, physical acrylic glass.

What am I proud of?
As a person who loves designing as much as I love web dev, I'm proud of how I was able to blend those two together. I'm really proud of the details, like the vista pearl CSS orb, the red counterweight on the analog clock’s second hand, and the custom Vista style cyan loading ring. Seeing all those tedious, tiny CSS tweaks finally come together into a desktop that actually feels like a real machine from 2007 is just incredibly satisfying.
How to test it?
Just head over to https://aero-os.vercel.app/ and you'll be on the desktop. Have fun!

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

46m 18s logged

Built 2 more apps for aeroOS! :yay:

notpad: the notes persist and added bold, italic and underline text formatting too
weather: the app supports realtime search using geocoding api and providing weather results using open meteo api

other updates: :yesyes:

  1. added top menu bar, showing the focused app name on left and icons, time on right.
  2. updated dock, removed the time and moved it to top menu bar.
  3. wallpaper switcher now supports links, also the wallpapers persist on reload.

what we do next? :yesyes:
polish and ship :thumbs-up:

0
0
3
Open comments for this post

53m 19s logged

Added a bunch of new features to aeroOS! :yay:

  1. a mini dock (temp right now) on bottom left to change wallpapers
  2. improved dock design and animation
  3. built window component and window manager
  4. built 2 simple apps - clock and welcome

what we do next?
build advance apps

0
0
3
Open comments for this post

26m 50s logged

Js started working on aeroOS! :yay:

based on frutiger aero design aesthetic, which was really popular during the time i was born
anyways

tech stack: next js with tailwind

what we do next?
improve the desktop then we move to apps

0
0
3

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…