I created alttre.os, a modern, premium Web OS mockup built from scratch using React, Vite, and Framer Motion.
🚀 What did you make?
- Fully functional draggable and resizable window manager.
- Customizable Taskbar styles (Classic and Dock Layout) with a live Setup Screen.
- Premium glassmorphism UI with interactive live wallpaper engines (3D Particles & Fluid physics).
- A collection of built-in apps: A 3D STL File Viewer, 3D Studio Editor, Python IDE, Notepad, terminal, Lofi music player, Live Weather, Paint, games (Snake, Memory, TicTacToe), and a simulated InstaClone.
⚡️ What was challenging?
- Implementing smooth, absolute window dragging and custom resizing overlays without breaking embedded iframe components (like the 3D canvas and terminal).
- Handling viewport height scaling (dvh resets) in nested iframe environments (especially preventing bottom Dock cutoff in dashboard previews).
- Building the virtual file system (VFS) to share data state smoothly between apps like Notepad and Devlog.
🌟 What are you proud of?
- The premium, fluid, and highly polished glassmorphism design system.
- Designing a separate, completely modular preview system for the setup screen layout options.
- The ultra-responsive desktop feel and smooth custom cursor effects.
🔍 How to test it:
1. Complete the setup screen to customize your OS username, wallpaper, cursor, and taskbar style (Classic or Dock).
2. Use the menu on the top-left to launch applications.
3. Open the "Stardance Devlog" app to see the progress log, and try resizing/dragging the windows to test out the multitasking window manager!
- 3 devlogs
- 1h
- WebOS 1