Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/dev-os/llms.txt

Use this file to discover all available pages before exploring further.

BootScreen is the first thing a visitor sees when they load DevOS. It simulates a terminal boot sequence by streaming log lines one at a time, then transitions to a clean login screen with a Framer Motion spring animation. The effect takes roughly four seconds from page load to the “Login to Desktop” button — long enough to set the aesthetic tone without testing a visitor’s patience.

​
Props

PropTypeDescription
onComplete() => voidCallback fired when the user clicks the “Login to Desktop” button. Use this to swap BootScreen out and render the desktop.

​
Boot sequence

The component holds two pieces of local state: displayedMessages (the subset of messages shown so far) and showLogin (whether to render the login screen instead of the terminal). On mount, a setInterval fires every 400 ms: 
useEffect(() => {
  let index = 0;
  const interval = setInterval(() => {
    if (index < bootMessages.length) {
      setDisplayedMessages((prev) => [...prev, bootMessages[index]]);
      index++;
    } else {
      clearInterval(interval);
      setTimeout(() => setShowLogin(true), 500); // brief pause before login screen
    }
  }, 400);

  return () => clearInterval(interval); // cleanup on unmount
}, []);
After the final message is appended, the interval is cleared and a 500 ms delay runs before showLogin is set to true. This gives the last message a moment to be read before the terminal dissolves into the login screen. Each message line is rendered as an individual Framer Motion div that slides in from the left: 
initial={{ opacity: 0, x: -10 }}
animate={{ opacity: 1, x: 0 }}
A blinking underscore cursor _ is shown at the bottom of the message list while the boot sequence is in progress.

​
Boot messages

The bootMessages array in BootScreen.js controls what appears in the terminal. The defaults are: 
const bootMessages = [
  'DEVOS booting...',
  'Initializing core components...',
  'starting caffeine.service... [OK]',
  'loading impostor-syndrome.dll... [FAILED - continuing anyway]',
  'mounting filesystem...',
  'resolving dependencies...',
  'compiling sarcasm module... [OK]',
  'System ready.',
];
To customise the sequence, edit this array directly in components/system/BootScreen.js. The component automatically adapts to any number of messages — each additional entry adds 400 ms to the boot duration.

​
Login screen

Once showLogin is true, a Framer Motion div replaces the terminal output with a centred login card: 
<motion.div
  initial={{ opacity: 0, scale: 0.9 }}
  animate={{ opacity: 1, scale: 1 }}
>
  <TerminalIcon size={64} className="text-os-cyan mb-8" />
  <h1>DevOS</h1>
  <p>Version 1.0.0</p>
  <button onClick={onComplete}>Login to Desktop</button>
</motion.div>
The spring scale-up from 90 % → 100 % creates a gentle “pop in” effect. The entire screen background remains bg-black with text-os-accent green for the terminal font — the login card inherits this palette. Clicking Login to Desktop calls the onComplete prop immediately, with no additional delay or animation from within BootScreen itself.

​
Integration in main.js

BootScreen is rendered inside WindowManagerProvider alongside the desktop. A single booted boolean in App gates which view is active: 
function App() {
  const [booted, setBooted] = useState(false);

  return (
    <WindowManagerProvider>
      <div className="h-screen w-screen overflow-hidden bg-black text-os-dark font-ui relative">
        {booted ? (
          <>
            <Desktop />
            <Taskbar />
          </>
        ) : (
          <BootScreen onComplete={() => setBooted(true)} />
        )}
      </div>
    </WindowManagerProvider>
  );
}
booted starts as false, so the first render always shows BootScreen. When onComplete fires, setBooted(true) triggers a re-render that unmounts BootScreen and mounts the desktop and taskbar in its place. Because WindowManagerProvider wraps both branches, window state is already initialised before the desktop becomes visible.
To skip the boot screen during development and jump straight to the desktop, initialise the booted state to true:
const [booted, setBooted] = useState(true);
Remember to revert this before deploying.

Build docs developers (and LLMs) love

Get started for freeTalk to us