Skip to main content

​
Overview

The Web XP boot sequence mimics Windows XP’s startup process with five distinct screens:
  1. Boot Screen - Animated loading with Windows XP logo
  2. Login Screen - User selection and authentication
  3. Welcome Screen - Transition animation
  4. Desktop - Main operating environment
  5. Shutdown Screen - Graceful shutdown sequence
Additionally, the BSOD (Blue Screen of Death) handles catastrophic errors.

​
Screen Flow

The screen sequence is managed by the main App component: 
function AppLogic() {
  const [screen, setScreen] = useState('boot');
  const [skillzSessionStatus, setSkillzSessionStatus] = useState('loggedOut');
  
  // Automatic transitions
  useEffect(() => {
    let timer;
    if (screen === 'boot') {
      timer = setTimeout(() => {
        setScreen('login');
        setSkillzSessionStatus('loggedOut');
      }, 4500);  // 4.5 seconds
    } else if (screen === 'welcome') {
      timer = setTimeout(() => {
        setScreen('desktop');
        setSkillzSessionStatus('activeOnDesktop');
      }, 2500);  // 2.5 seconds
    }
    return () => clearTimeout(timer);
  }, [screen]);
}
Source: src/App.jsx:70-88

​
Boot Screen

The boot screen displays the Windows XP logo with an animated loading bar.

​
Component Structure

const BootScreen = () => {
  return (
    <BootContainer className="boot-screen-root">
      <PixelateStyle />
      <BootLogo
        src={winLogo}
        alt="Windows XP Logo"
        onError={e => (e.target.style.opacity = 0)}
      />
      <LoadingBarContainer>
        <LoadingBarProgress>
          <Chiclet />
          <Chiclet />
          <Chiclet />
        </LoadingBarProgress>
      </LoadingBarContainer>
      <CopyrightText>Copyright &copy; Microsoft Corporation</CopyrightText>
      <MicrosoftLogoBottom src={MicrosoftLogo} alt="Microsoft" />
    </BootContainer>
  );
};
Source: src/components/BootScreen/index.jsx:109-133

​
Loading Animation

The loading bar uses CSS keyframe animation: 
const loadingMove = keyframes`
  0% { left: -40px; }
  100% { left: 100%; }
`;

const LoadingBarProgress = styled.div`
  position: absolute;
  top: 2px;
  left: 0;
  height: 14px;
  display: flex;
  align-items: center;
  gap: 2px;
  animation: ${loadingMove} 2s linear infinite;
`;
Source: src/components/BootScreen/index.jsx:15-66
The boot screen automatically transitions to the login screen after 4.5 seconds.

​
Login Screen

The login screen allows user selection and password authentication.

​
User Selection

<LoginScreen 
  onLogin={handleLogin}
  userStatus={skillzSessionStatus}
  onInitiateShutdown={handleInitiateShutdownFromLogin}
/>

​
Props

PropTypeDescription
onLogin() => voidCallback when user logs in
userStatusstringSession status: loggedOut, loggedInInBackground, activeOnDesktop
onInitiateShutdown() => voidCallback for shutdown button
Source: src/components/LoginScreen/index.jsx:480

​
Password Authentication

The Administrator account requires password authentication: 
const handleAdminPasswordSubmit = e => {
  e.preventDefault();
  if (adminPassword === 'ILoveFemboys') {
    if (onLogin) onLogin();
  } else {
    setAdminPassword('');
    setShowError(true);
  }
};
Source: src/components/LoginScreen/index.jsx:502-510

​
Password Error Tooltip

When an incorrect password is entered, a tooltip appears: 
{showError && (
  <Tooltip onClick={() => setShowError(false)}>
    <img className="tooltip-icon" src={errorIcon} alt="Error" />
    <div className="tooltip-content">
      <strong>Did you forget your password?</strong>
      Please type your password again.
      <br />
      Be sure to use the correct uppercase and lowercase letters.
    </div>
  </Tooltip>
)}
Source: src/components/LoginScreen/index.jsx:586-601
The “Skillz” user account logs in without a password for quick access.

​
Welcome Screen

A simple transition screen displaying “welcome” in stylized text. 
const WelcomeScreen = () => {
  return (
    <WelcomeContainer>
      <HeaderBar />
      <MainArea>
        <WelcomeText>welcome</WelcomeText>
      </MainArea>
      <FooterBar />
    </WelcomeContainer>
  );
};
Source: src/components/WelcomeScreen/index.jsx:120-130

​
Styling

const WelcomeText = styled.div`
  font-size: 3.5em;
  font-weight: normal;
  text-shadow: 3px 3px 0px #2b47ab;
  position: relative;
  z-index: 1;
  font-style: italic;
  letter-spacing: 1px;
`;
Source: src/components/WelcomeScreen/index.jsx:77-89

​
Shutdown Screen

Displays shutdown messages with sequential animation.

​
Component

const ShutdownScreen = ({ messages = ['Windows is shutting down...'] }) => {
  const [currentMessageIndex, setCurrentMessageIndex] = useState(0);

  useEffect(() => {
    if (currentMessageIndex < messages.length - 1) {
      const timer = setTimeout(() => {
        setCurrentMessageIndex(prevIndex => prevIndex + 1);
      }, 1200);  // 1.2 seconds per message
      return () => clearTimeout(timer);
    }
  }, [currentMessageIndex, messages.length]);

  return (
    <Container>
      <HeaderBar />
      <MainContent>
        <Logo src={winLogo} alt="Windows XP" />
        <StatusMessage>{messages[currentMessageIndex]}</StatusMessage>
      </MainContent>
      <FooterBar />
    </Container>
  );
};
Source: src/components/ShutdownScreen/index.jsx:127-153

​
Shutdown Messages

const handleShutdown = useCallback(() => {
  setShutdownMessages([
    'Logging out...',
    'Saving your settings...',
    'Windows is shutting down...',
  ]);
  setScreen('shuttingDown');
  setSkillzSessionStatus('loggedOut');
}, []);

const handleRestart = useCallback(() => {
  setShutdownMessages([
    'Logging out...',
    'Saving your settings...',
    'Windows is restarting...',
  ]);
  setScreen('restarting');
  setSkillzSessionStatus('loggedOut');
}, []);
Source: src/App.jsx:111-129

​
BSOD (Blue Screen of Death)

Handles catastrophic application errors.

​
Error Detection

useEffect(() => {
  const handleGlobalError = (message, source, lineno, colno, error) => {
    if (screen === 'bsod') return;
    setCrashError(message);
    setScreen('bsod');
  };

  const handlePromiseRejection = event => {
    if (screen === 'bsod') return;
    const reason = event.reason?.message || event.reason || 'Unknown Promise Error';
    setCrashError(reason);
    setScreen('bsod');
  };

  window.addEventListener('error', handleGlobalError);
  window.addEventListener('unhandledrejection', handlePromiseRejection);

  return () => {
    window.removeEventListener('error', handleGlobalError);
    window.removeEventListener('unhandledrejection', handlePromiseRejection);
  };
}, [screen]);
Source: src/App.jsx:45-68

​
BSOD Component

const BSOD = ({ error }) => {
  useEffect(() => {
    const handleRestart = () => {
      window.location.reload();
    };

    const timer = setTimeout(() => {
      window.addEventListener('keydown', handleRestart);
      window.addEventListener('click', handleRestart);
    }, 2000);

    return () => {
      clearTimeout(timer);
      window.removeEventListener('keydown', handleRestart);
      window.removeEventListener('click', handleRestart);
    };
  }, []);

  const errorStr = error?.toString() || 'UNKNOWN_ERROR';
  const errorName = errorStr.split(':')[0].toUpperCase().replace(/\s+/g, '_');

  return (
    <Container>
      <Paragraph>{errorName}</Paragraph>
      <Paragraph>Technical information:</Paragraph>
      <Indented>{errorStr}</Indented>
    </Container>
  );
};
Source: src/components/BSOD/index.jsx:50-135
After 2 seconds on the BSOD, any key press or click will reload the page.

​
System Sounds

The boot sequence plays authentic Windows XP sounds: 
import xpStartupSoundSrc from 'assets/sounds/xp_startup.wav';
import xpLogonSoundSrc from 'assets/sounds/xp_logon.wav';
import xpLogoffSoundSrc from 'assets/sounds/xp_logoff.wav';
import xpShutdownSoundSrc from 'assets/sounds/xp_shutdown.wav';

const playSound = useCallback(
  soundSrc => {
    if (!soundSrc) return;
    try {
      const audio = new Audio(soundSrc);
      if (typeof applyVolume === 'function') {
        applyVolume(audio);  // Apply user volume settings
      }
      audio.play().catch(() => {});
    } catch (error) {
      // Failed to play sound
    }
  },
  [applyVolume],
);
Source: src/App.jsx:10-43

​
Sound Triggers

EventSoundTrigger
First loginxp_startup.wavBoot → Welcome transition
Subsequent loginxp_logon.wavSwitching back to desktop
Log offxp_logoff.wavLog off action
Shutdownxp_shutdown.wavTurn off/restart

​
Session Management

The system tracks user session state: 
const [skillzSessionStatus, setSkillzSessionStatus] = useState('loggedOut');

// States:
// 'loggedOut' - No active session
// 'loggedInInBackground' - User logged in but switched away
// 'activeOnDesktop' - User actively using desktop
Source: src/App.jsx:19

​
Switch User

When switching users, the session remains active: 
const handleSwitchUser = useCallback(() => {
  setScreen('login');
  setSkillzSessionStatus('loggedInInBackground');
}, []);
Source: src/App.jsx:106-109
The login screen shows “Logged on” indicator for background sessions.

​
Next Steps

Desktop Overview

Return to desktop architecture overview

Windows

Learn about window management

Build docs developers (and LLMs) love

Get started for freeTalk to us