[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-81454":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":15,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":15,"starSnapshotCount":15,"syncStatus":26,"lastSyncTime":27,"discoverSource":28},81454,"Thanas-OS","Thanas-R\u002FThanas-OS","Thanas-R","ThanasOS is a faithful, fully interactive recreation of macOS, rebuilt from the ground up for the browser.","https:\u002F\u002Fthanasos.vercel.app",null,"TypeScript",35,7,32,0,3,2.71,"MIT License",false,"main",true,[],"2026-06-12 02:04:15","# ThanasOS [macOS - web]\n\n![React](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FReact-18-000000?style=flat-square&logo=react)\n![TypeScript](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FTypeScript-5-3178C6?style=flat-square&logo=typescript&logoColor=white)\n![Vite](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FVite-Build-646CFF?style=flat-square&logo=vite&logoColor=white)\n![TailwindCSS](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FTailwindCSS-Framework-000000?style=flat-square&logo=tailwindcss)\n![FramerMotion](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FFramerMotion-Animations-0055FF?style=flat-square)\n![License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-blue?style=flat-square)\n\n> The best web iteration of macOS online.\n>\n> ThanasOS is a faithful, fully interactive recreation of macOS, rebuilt from the ground up for the browser.\n\nThanasOS started as a portfolio. It grew into something else: a long, deliberate attempt to rebuild the macOS experience inside a single React application, without iframes, without screenshots, and without shortcuts. Every window, dock icon, menu, widget, animation, and keyboard shortcut is a real component running in your browser.\n\n## Live\n\n[![Live Site](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLive-thanas--os.vercel.app-white?style=flat-square)](https:\u002F\u002Fthanas-os.vercel.app)\n\nBuilt and maintained by **Thanas R**.\n\n\u003Ca href=\"https:\u002F\u002Fthanas-os.vercel.app\">\n  \u003Cimg src=\"src\u002Fassets\u002Fdesktop-screenshot.png\" alt=\"ThanasOS preview\" width=\"80%\">\n\u003C\u002Fa>\n\n[GitHub](https:\u002F\u002Fgithub.com\u002Fthanas-r) · [LinkedIn](https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fthanasr\u002F) · [Portfolio](https:\u002F\u002Fthanas.vercel.app\u002F) · [Old-Version](https:\u002F\u002Fthanas-old.vercel.app\u002F) \n\n\n## Table of Contents\n\n1. [What ThanasOS Is](#what-thanasos-is)\n2. [Highlights](#highlights)\n3. [The Apps](#the-apps)\n4. [Custom Widgets, Built From Scratch](#custom-widgets-built-from-scratch)\n5. [System Features](#system-features)\n6. [Tech Stack](#tech-stack)\n7. [Architecture](#architecture)\n8. [File Tree](#file-tree)\n9. [Keyboard Shortcuts](#keyboard-shortcuts)\n10. [Run Locally](#run-locally)\n11. [Roadmap](#roadmap)\n12. [License](#license)\n\n---\n\n## What ThanasOS Is\n\nThanasOS is a complete macOS shell living inside a single page web app. It boots, it has a login screen, it has a desktop, a menu bar, a dock, a launchpad, a control center, a notification center, a spotlight, a lock screen, a sleep screen, a restart screen, and over a dozen apps that actually do real work.\n\nEvery UI surface follows the macOS Tahoe \"liquid glass\" design language. Every interaction has a counterpart in the real OS. The goal was simple: make something that, on a desktop browser, feels like sitting in front of a Mac.\n\n## Highlights\n\n| Area | What we built |\n|------|---------------|\n| Window Manager | Drag, resize from any edge or corner, maximize, minimize, focus stack, z-order, traffic-light controls |\n| Dock | Cosine-curve magnification, live indicators, app launching, minimize-to-dock |\n| Menu Bar | Per-app dynamic menus, Apple menu, Bluetooth, Wi-Fi, Battery, Volume, Control Center, Notification Center, live clock |\n| Spotlight | Cmd plus K to open, fuzzy search across apps, settings, notes, projects |\n| Launchpad | Full-screen blurred grid, launch animations, exit animations |\n| Boot Sequence | Welcome screen, Hello intro, lock screen, sleep, restart, all real screens |\n| Theming | Light and dark with semantic tokens, brightness control, reduced motion |\n| Wallpapers | 18 hand-picked wallpapers, custom upload support, crisp rendering |\n| Cursors | macOS glove cursor system based on the apple_cursor (ful1e5) project |\n| Mobile | Dedicated mobile fallback page since the experience is desktop-first |\n\n## The Apps\n\nEach app is a real React component, not an iframe and not a screenshot. They share state through the `MacOSContext` window manager.\n\n| App | What it does |\n|-----|--------------|\n| Finder | File browser shell with sidebar and grid |\n| Safari | Browser with three-CORS-proxy race, favorites tiles, history |\n| Google (Chrome) | Optional second browser, installable via App Store |\n| Launchpad | Full-screen app grid with morph animations |\n| App Store | Install and uninstall optional apps like Google |\n| Notes | Markdown blog with live rendering, search, sidebar list |\n| Terminal | Command interpreter on a virtual filesystem with `ls`, `cd`, `cat`, `tree`, `grep`, `find`, `open`, `neofetch`, and more |\n| Calendar | Month view with events |\n| Maps | Mapbox-powered map with custom search |\n| Calculator | Standard calculator |\n| Settings | Full preferences panel: wallpaper, theme, dock, brightness, sound, network, default browser |\n| About | About this Mac with live device info |\n| Apple Music | Searchable mixed English\u002FJapanese\u002Fanime library, iTunes preview playback, playlists, synced seek and volume controls |\n| GitHub | Live contribution graph, repos, stats |\n| LinkedIn | Profile, experience, projects |\n| Journey | Personal timeline embed |\n| Technologies | Stack showcase |\n| Contact | Form that posts to a server function |\n\n## Custom Widgets, Built From Scratch\n\nThe desktop widgets are not third-party libraries. Each one was built specifically for ThanasOS.\n\n| Widget | Notes |\n|--------|-------|\n| Utility Clock | Hand-drawn analog clock face with second-hand sweep, custom CSS animation |\n| Calendar Widget | Month grid with today highlight |\n| Bengaluru Weather | Live weather pulled at runtime |\n| Stats Widget | CPU, memory, network and battery readouts |\n| Time Widget | Compact digital clock |\n| Now Playing Pill | Menu-bar player surface |\n| Control Center | Tile grid with Wi-Fi, Bluetooth, AirDrop, Focus, brightness, volume |\n| Notification Center | Stacked notifications with grouping |\n\n## System Features\n\n- Real window stacking with z-index focus changes\n- Drag from title bar or any 28px top strip on integrated apps\n- Resize from all four edges and all four corners\n- Maximize that respects menu bar and dock bounds\n- Auto-hide dock with hover-to-reveal\n- Per-app menu registry: every app publishes its own File, Edit, View, Window menus\n- Open links system: every external `\u003Ca>` opens in a new tab automatically\n- Internal `openUrl` routes through the user's chosen default browser\n- Spotlight search indexed across apps, settings keys, projects, notes\n- Auto-closing menu bar dropdowns when the cursor moves more than 180px away\n- Apple Music streams real 30-second preview audio from the public iTunes catalog, including Crab Rave, English hits, YOASOBI, and anime essentials\n- Music volume stays synchronized between the Apple Music now-playing row and Control Center sound slider\n- Wallpaper preloading and decode for crisp render\n- Battery API integration for real charge level\n- Online and offline events surfaced in the menu bar\n\n## Tech Stack\n\n| Layer | Choice |\n|-------|--------|\n| Framework | React 18 with TypeScript |\n| Build | Vite |\n| Styling | Tailwind CSS with semantic tokens in `src\u002Findex.css` |\n| Animation | Framer Motion plus hand-rolled CSS keyframes |\n| Icons | lucide-react and react-icons |\n| Markdown | react-markdown plus remark-gfm |\n| Maps | Mapbox GL JS |\n| Hosting | Vercel |\n\n## Architecture\n\n```\n+-----------------------------------------------------------+\n|  Apps           Safari, Notes, Terminal, Maps, Settings,  |\n|                 Calendar, Calculator, GitHub, LinkedIn,   |\n|                 AppleMusic, AppStore, Finder, Contact     |\n+-----------------------------------------------------------+\n|  Shell          MenuBar, Dock, Spotlight, Launchpad,      |\n|                 ControlCenter, NotificationCenter, Window |\n+-----------------------------------------------------------+\n|  Context        MacOSContext: windows, settings, dock,    |\n|                 openApp, focusWindow, updateSettings,     |\n|                 openUrl, defaultBrowser routing           |\n+-----------------------------------------------------------+\n|  Lib            spotlightIndex, terminalFs, projects,     |\n|                 blogPosts, bookmarks, installedApps,      |\n|                 nowPlaying, githubContributions           |\n+-----------------------------------------------------------+\n```\n\n## File Tree\n\n```\nsrc\u002F\n  App.tsx                    Root router and providers\n  main.tsx                   ReactDOM bootstrap\n  index.css                  Tailwind layers, design tokens, cursors, animations\n  pages\u002F\n    Index.tsx                Loads the desktop or the mobile fallback\n    NotFound.tsx             Standard 404\n  contexts\u002F\n    MacOSContext.tsx         Window manager, settings, dock, openApp\n  components\u002F\n    MobileFallback.tsx       Dedicated mobile landing page\n    Mac.tsx                  Pure SVG mac frame for the mobile fallback\n    WelcomeScreen.tsx        First-run welcome\n    macos\u002F\n      Desktop.tsx            Mounts wallpaper, menu bar, dock, windows, widgets\n      Window.tsx             Window chrome, drag, resize, traffic lights\n      MenuBar.tsx            Apple menu, app menus, status icons\n      Dock.tsx               Cosine magnification dock\n      Spotlight.tsx          Cmd plus K search\n      ControlCenter.tsx      Tile-based quick settings\n      NotificationCenter.tsx Right-side stacked notifications\n      LockScreen.tsx         Lock screen\n      SleepScreen.tsx        Black sleep state\n      RestartScreen.tsx      Restart progress\n      HelloIntro.tsx         macOS hello intro\n      ShortcutsModal.tsx     Keyboard shortcut sheet\n      HelpModal.tsx          Help sheet\n      FrostedModal.tsx       Reusable frosted panel\n      NowPlayingPill.tsx     Menu-bar music pill\n    apps\u002F\n      AboutApp.tsx           About this Mac\n      AppStoreApp.tsx        Install or uninstall optional apps\n      AppleMusicApp.tsx      Music player\n      CalculatorApp.tsx      Calculator\n      CalendarApp.tsx        Month view calendar\n      ContactApp.tsx         Contact form\n      FinderApp.tsx          Finder browser\n      GitHubApp.tsx          Live GitHub profile\n      GoogleApp.tsx          Optional second browser\n      JourneyApp.tsx         Personal journey embed\n      LaunchpadApp.tsx       Launchpad grid\n      LinkedInApp.tsx        LinkedIn profile\n      MapsApp.tsx            Mapbox map\n      NotesApp.tsx           Markdown notes\n      SafariApp.tsx          Default browser\n      SettingsApp.tsx        System settings\n      TechnologiesApp.tsx    Stack showcase\n      TerminalApp.tsx        Shell with virtual FS\n    widgets\u002F\n      BengaluruWeatherWidget.tsx\n      CalendarWidget.tsx\n      StatsWidget.tsx\n      TimeWidget.tsx\n      UtilityClockWidget.tsx\n      utility-clock.css      Custom analog clock animation\n    effects\u002F\n      AppleHelloEffect.tsx   Hello SVG stroke animation\n    ui\u002F                      shadcn primitives\n  lib\u002F\n    blogPosts.ts             Notes content\n    bookmarks.ts             Safari favorites\n    githubContributions.ts   GitHub API helpers\n    installedApps.ts         Optional-app registry, default browser routing\n    nowPlaying.ts            Music metadata\n    projects.ts              Project list\n    spotlightIndex.ts        Spotlight search corpus\n    terminalFs.ts            Virtual filesystem\n    utils.ts                 cn helper\n  hooks\u002F\n    use-mobile.tsx           Mobile detection\n    useImagePreloader.tsx    Preload critical assets\n    use-toast.ts             Toast hook\n  types\u002F\n    macos.ts                 WindowState, MacOSSettings, AppConfig, MenuItem\n  assets\u002F                    Wallpapers, icons, profile images, screenshots\n  integrations\u002Fsupabase\u002F     Cloud client\npublic\u002F\n  cursors\u002F                   apple_cursor SVGs (default, pointing, open hand, closed hand, help, not-allowed)\n  favicon.png                Turtle logo\n  robots.txt\n  placeholder.svg\nsupabase\u002F\n  functions\u002Fsend-contact-email\u002Findex.ts   Contact-form server function\n```\n\n## Keyboard Shortcuts\n\n| Shortcut | Action |\n|----------|--------|\n| Cmd plus K | Open Spotlight |\n| Cmd plus W | Close window |\n| Cmd plus M | Minimize window |\n| Cmd plus Q | Quit app |\n| Esc | Close focused window |\n| Option Cmd Esc | Force quit all |\n| Ctrl Cmd Q | Lock screen |\n\n## Run Locally\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002Fthanas-r\u002FThanas-OS\ncd Thanas-OS\nnpm install\nnpm run dev\n```\n\nOpen `http:\u002F\u002Flocalhost:5173`.\n\n## Roadmap\n\nThings planned but not yet built. Contributions welcome.\n\n| Idea | Notes |\n|------|-------|\n| Reorderable Dock | Drag-and-drop with persisted ordering |\n| Working Trash Bin | Closed windows land in Trash, can be restored |\n| Mission Control | Expose all open windows with Cmd plus Up |\n| Stage Manager | Side stack of recent windows |\n| More Apps | Photos, Reminders, Stickies, Preview |\n| File System | Real folders inside Finder, with drag-and-drop |\n| Multi-Display | Cmd plus drag to a second virtual display |\n| Live Wallpapers | Animated and dynamic wallpapers |\n| Theme Builder | User-defined accent colors |\n| Profiles | Save and switch user profiles |\n\n## License\n\nMIT. Use it, fork it, learn from it. A credit back is appreciated but not required.\n","ThanasOS 是一个完全交互式的 macOS 重建项目，专为浏览器环境设计。它使用 TypeScript 编写，并集成了 React、Vite、TailwindCSS 和 FramerMotion 等现代前端技术栈，实现了包括窗口管理器、Dock 栏、菜单栏在内的多种核心功能，每一个界面和交互都力求忠实还原 macOS 的体验。用户可以在桌面浏览器中享受到与真实 Mac 相似的操作感受，包括系统启动、登录界面、桌面、菜单栏、Dock 栏以及十几个实际可用的应用程序。此项目适用于需要在网页上模拟 macOS 操作系统的场景，如在线演示、教学或个人作品展示等。",2,"2026-06-11 04:05:06","CREATED_QUERY"]