Desktop Window System

Installation

Usage

import { DesktopEnvironment, DraggableWindow } from "@/components/creative/desktop-window";

export default function Page() {
  return (
    <div className="h-screen w-full">
      <DesktopEnvironment backgroundUrl="/wallpapers/macos-ventura.jpg">
        
        <DraggableWindow 
          id="term1" 
          title="Terminal - zsh"
          defaultPosition={{ x: 100, y: 100 }}
          defaultSize={{ width: 600, height: 400 }}
        >
          <div className="p-4 font-mono text-green-400">
            $ npm run dev
          </div>
        </DraggableWindow>

      </DesktopEnvironment>
    </div>
  );
}

How it works

This component builds a robust "Operating System" layer inside the browser using React Context and Framer Motion.

1. DesktopContext Z-Index Management: The DesktopEnvironment acts as a context provider tracking the highestZ variable. Whenever a user clicks on any DraggableWindow, that window calls bringToFront(), which increments highestZ by 1 and assigns it to itself, instantly popping it above all other windows.
2. useDragControls: By attaching Framer Motion's drag controls specifically to the top title bar of the window, we prevent the user from accidentally dragging the window when they try to highlight text inside the window body.
3. dragConstraints: The DesktopEnvironment passes its ref down through the context, so windows are strictly constrained to the desktop boundaries and cannot be dragged off-screen.
4. Window State: Supports minimize (hides the component), maximize (animates width/height to 100%), and close (calls the onClose prop to unmount it).

Usage Guide

1. Import the Component

Import the component into your React or Next.js page:

import { DesktopWindow } from "@/components/creative/desktop-window";

2. Implementation Example

Render the component and customize its behavior by passing props:

import { DesktopWindow } from "@/components/creative/desktop-window";

export default function Example() {
  return (
    <div className="w-full flex items-center justify-center p-8">
      <DesktopWindow
      >
        <div>Content goes here</div>
      </DesktopWindow>
    </div>
  );
}