GNOME Shell in the browser

A faithful, pixel accurate recreation of the GNOME desktop shell that runs in the browser. It borrows the real Blobs wallpaper, the Cantarell typeface, and the general "everything is a surface that fades, slides, or springs" feel of an actual GNOME session.

Built from scratch with React, TypeScript, Vite, Tailwind, and Framer Motion.

Running

npm install
npm run dev
npm run build

What's there

• Top bar. Activities button on the left, centered clock, and a right side that opens Quick Settings (theme, Night Light, dock auto hide, brightness) and the calendar and notifications panel.
• Overview. Press Super or click Activities. The wallpaper scales down to the workspace rectangle, the rest blurs behind it, and the app grid slides in. The grid is searchable and pages with a GNOME style slide, with both pages visible mid transition.
• Dock. Pinned apps, running indicators, and the authentic stock launch zoom (a quick scale and settle on click). Auto hide optional. No magnification;
• Windows. Drag to move, drag to edges or corners to snap with a live preview, resize handles, minimize and maximize and close, click to focus and raise. Opening and closing windows animate through AnimatePresence, including the exit animation where a closing window shrinks into the dock.
• Alt+F2 run dialog. Type an app name and hit Enter.
• Persistence. Window positions, sizes, and settings survive reloads.

Controls

• Super toggles the Overview.
• Super or Ctrl with arrow keys snaps the active window to that edge.
• Alt+F2 opens the run dialog.
• Escape closes whatever shell surface is open.

Windows can also be snapped by dragging them to a screen edge or corner.

Credits

Reeyuki - https://github.com/reeyuki