Skip to main content
Web XP is a fully interactive Windows XP desktop simulation with authentic visuals, sounds, and functionality. Explore all the features below.

Desktop environment

The core desktop environment recreates the classic Windows XP experience with pixel-perfect accuracy.

Window management

Draggable and resizable windows with minimize, maximize, and close buttons. Click any window to bring it to front with proper z-index ordering.

Start menu

Classic XP Start menu with nested submenus mirroring the real Windows XP structure. Launch any application from the menu.

Taskbar

Active taskbar showing running applications, system tray clock, and volume control. Click taskbar buttons to minimize/restore windows.

Desktop icons

Click-to-select and drag-to-select (rubber band) functionality. Double-click icons to launch applications.

Window interactions

Every window in Web XP supports the full set of XP window operations:
  • Dragging — Click and drag the title bar to move windows
  • Resizing — Drag window edges or corners to resize
  • Minimize — Minimize to taskbar (window remains running)
  • Maximize — Expand to full screen
  • Focus — Click to bring window to front
  • Close — Terminate the application
Windows maintain their z-index order. The most recently clicked window always appears on top.

Applications

Web XP includes 13 fully functional applications that recreate classic Windows programs and add unique portfolio content.

Internet Explorer

A working in-app browser with address bar, navigation history, back/forward buttons, and toolbar.Features:
  • Load any URL in an embedded iframe
  • Back and forward navigation
  • Address bar with URL input
  • Classic IE toolbar interface
// Open from Start menu → Internet → Internet Explorer
dispatch({ type: ADD_APP, payload: appSettings['Internet Explorer'] });

Minesweeper

The classic Minesweeper game, fully playable with authentic XP visuals.Features:
  • Three difficulty levels: Beginner, Intermediate, Expert
  • Flag and question mark modes
  • Chord clicking (reveal multiple cells)
  • Live timer and mine counter
  • Win/loss detection
All game logic is implemented from scratch using React hooks and state management.

My Computer

A navigable mock file explorer with folders and classic XP styling.Features:
  • Folder navigation with back/forward/up buttons
  • Sidebar with folder details
  • Address bar showing current path
  • Mimics real XP file explorer layout

Notepad

A basic text editor with menu options.Features:
  • File menu: New, Open, Save
  • Edit menu: Insert Time/Date
  • Format menu: Word Wrap toggle
  • Cursor position tracking (line and column)
  • Multi-line text editing

Winamp

Real Winamp 2.x player using the webamp library.Features:
  • Authentic Winamp 2.x interface
  • 5-track playlist included
  • Classic Winamp visualizations
  • Fully functional playback controls
Winamp integrates with the global volume control system.

Paint

Full Microsoft Paint experience via jspaint.app.Features:
  • Complete MS Paint toolset
  • Drawing, shapes, text, and colors
  • Embedded in an iframe
  • Authentic Paint interface

Media Player

Custom audio/video/image player with advanced features.Features:
  • Real-time frequency visualizer
  • Drag-and-drop file import
  • Sortable playlist
  • Seek bar with time display
  • Loop toggle
  • Supports audio, video, and images
// Media Player supports volume control
const { applyVolume } = useVolume();
applyVolume(audioElement);

3D Pinball: Space Cadet

The iconic Space Cadet pinball game.Features:
  • Full 3D Pinball Space Cadet game
  • WebAssembly port from 98.js.org
  • Classic physics and gameplay
  • High score tracking

Voltorb Flip

The Pokemon HeartGold/SoulSilver card game.Features:
  • Complete Voltorb Flip game
  • Hosted locally with iframe
  • Volume sync with global system volume
  • Original game mechanics

PictoChat

Embedded chat application.Features:

About Me

Portfolio page with XP wizard styling.Features:
  • Personal skills showcase
  • Project portfolio
  • Contact information
  • Classic XP wizard interface

Error Box

System error dialog (used internally).Features:
  • XP-style error messages
  • Custom error text
  • OK button to dismiss
  • Plays system error sound
// Error dialog example from source
dispatch({
  type: ADD_APP,
  payload: {
    ...appSettings.Error,
    injectProps: {
      message: 'C:\\\nApplication not found',
      title: 'Error'
    },
    multiInstance: true
  }
});

???

A hidden easter egg application.
Open it and find out… we won’t spoil the surprise!

System features

Web XP includes authentic Windows XP system behaviors and animations.

Boot sequence

1

Boot screen

Animated boot screen with XP loading bar (4.5 seconds).
// Boot screen automatically transitions to login
useEffect(() => {
  if (screen === 'boot') {
    timer = setTimeout(() => {
      setScreen('login');
    }, 4500);
  }
}, [screen]);
2

Login screen

Login screen with two user accounts:
  • Skillz — Primary user account
  • Administrator — Secondary account
Plays the XP startup sound on first login.
3

Welcome screen

Welcome screen with transition animation (2.5 seconds).Plays the XP logon sound when returning from Switch User.
4

Desktop

Full interactive desktop environment loads.

Shutdown options

Access shutdown options from the Start menu:

Log Off

Returns to login screen. Plays logoff sound. Session state preserved for Switch User.

Switch User

Switches to login without logging off. Session runs in background.

Turn Off

Shutdown animation with grayscale fade. Plays shutdown sound. Reboots after 4 seconds.

Restart

Same as Turn Off but displays “Windows is restarting…” message.
// Shutdown sequence from source
const handleShutdown = useCallback(() => {
  setShutdownMessages([
    'Logging out...',
    'Saving your settings...',
    'Windows is shutting down...'
  ]);
  setScreen('shuttingDown');
  playSound(xpShutdownSoundSrc);
}, []);

Blue Screen of Death (BSOD)

Any unhandled JavaScript error triggers an authentic BSOD with the real error message displayed in the stop code.
BSOD features:
  • Catches all unhandled errors and promise rejections
  • Displays actual error message in stop code
  • Classic XP blue screen styling
  • Prevents further interaction until page reload
// BSOD error handler from source
useEffect(() => {
  const handleGlobalError = (message, source, lineno, colno, error) => {
    if (screen === 'bsod') return;
    setCrashError(message);
    setScreen('bsod');
  };
  
  window.addEventListener('error', handleGlobalError);
  window.addEventListener('unhandledrejection', handlePromiseRejection);
}, [screen]);

Audio system

Web XP includes a complete audio system with global volume control.

System sounds

Authentic XP sounds play throughout the experience:
  • Boot sound — XP startup chime
  • Login sound — Welcome sound on first login
  • Logon sound — Sound when returning from Switch User
  • Logoff sound — Sound when logging off or switching users
  • Shutdown sound — Sound when shutting down or restarting
  • Error sound — System error beep
  • Balloon notification sound — System tray notification

Volume control

Global volume control with persistent state:

Volume slider

Taskbar volume icon opens a slider to adjust volume (0-100).

Mute toggle

Click the speaker icon to mute/unmute all system sounds.

LocalStorage persistence

Volume and mute settings persist across sessions using localStorage.

Universal control

All applications respect the global volume setting.
// Volume context implementation from source
export const VolumeProvider = ({ children }) => {
  const [volume, setVolume] = useState(() => {
    const savedVolume = localStorage.getItem('siteVolume');
    return savedVolume !== null ? JSON.parse(savedVolume) : 50;
  });

  const [isMuted, setIsMuted] = useState(() => {
    const savedMute = localStorage.getItem('siteMuted');
    return savedMute !== null ? JSON.parse(savedMute) : false;
  });

  const applyVolume = audio => {
    if (audio) {
      audio.volume = volume / 100;
      audio.muted = isMuted;
    }
  };

  return (
    <VolumeContext.Provider value={{ volume, setVolume, isMuted, setIsMuted, applyVolume }}>
      {children}
    </VolumeContext.Provider>
  );
};

Design system

Web XP follows the classic Windows XP design language:

Font

Tahoma — Primary system font with ‘Noto Sans’ fallback

Primary color

#c19f13 — XP gold accent color

Button color

#0078d4 — Classic XP blue for buttons
/* Font family from source */
font-family: Tahoma, 'Noto Sans', sans-serif;

Tech stack

Built with modern web technologies:
  • React 18 — Hooks and useReducer for state management
  • styled-components — All styling and animations
  • Vite — Development server and production builds
  • webamp — Winamp player library
  • react-use — Mouse tracking and window size hooks
The entire desktop environment is powered by a single React reducer managing window state, focus, z-index, and desktop icon selection.

Mobile compatibility

Mobile Device Detected: This application is designed for desktop use and may not function correctly on mobile devices or small screens. An error dialog automatically appears when accessing from mobile.
// Mobile detection from source
const isMobile = () => {
  const userAgent = navigator.userAgent || navigator.vendor || window.opera;
  return (
    /android/i.test(userAgent) ||
    (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream)
  );
};

Build docs developers (and LLMs) love