Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/apursley2012/windows-xp-developer/llms.txt

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

AquaWindow is the signature chrome container of the Windows XP Developer Portfolio. It faithfully recreates the iconic XP window frame — complete with a deep-blue gradient title bar, bold display-font title text with a drop shadow, and a trio of window control buttons — then wraps it all in a Framer Motion spring animation that bounces the window into view on mount. Use it anywhere you want to present a section of content as a “running application” on the XP desktop.

​
Import

import { A as AquaWindow } from '../components/AquaWindow.js';

​
Props

​
title
string
required
The text displayed in the window’s title bar. Rendered in a bold font-display typeface with wide letter-spacing to match the XP system font style.
​
children
ReactNode
required
The content rendered inside the window body. Placed in a scrollable flex-1 overflow-auto p-4 relative container below the title bar, so any amount of content will scroll rather than overflow the window frame.
​
onClose
function
Callback invoked when the red close button (✕) in the title bar is clicked. If omitted, the close button renders but does nothing. Pass a state setter (e.g., () => setOpen(false)) to control window visibility from the parent.
​
className
string
default:"''"
Additional CSS classes applied to the root motion.div wrapper. Use this to control the window’s width, height, position, or z-index from the outside.
​
icon
ReactNode
An optional icon element rendered to the left of the title text inside the title bar. Displayed at w-4 h-4 with text-white drop-shadow-md applied. Any Lucide icon or small SVG works well here.

​
Usage

import { A as AquaWindow } from '../components/AquaWindow.js';

<AquaWindow title="My Document">
  <p>Window content goes here.</p>
</AquaWindow>

​
Spring entrance animation

AquaWindow uses a Framer Motion motion.div for its root element. The animation configuration sourced directly from the component is: 
initial:    { scale: 0.9, opacity: 0 }
animate:    { scale: 1,   opacity: 1 }
exit:       { scale: 0.9, opacity: 0 }
transition: { type: 'spring', damping: 25, stiffness: 300 }
The spring parameters produce a crisp, snappy pop-in with very little overshoot — consistent with the XP aesthetic of fast, confident UI motion. Wrap AquaWindow in an AnimatePresence block from Framer Motion to enable the exit animation when unmounting: 
import { AnimatePresence } from 'framer-motion';
import { A as AquaWindow } from '../components/AquaWindow.js';

<AnimatePresence>
  {isOpen && (
    <AquaWindow title="Projects" onClose={() => setIsOpen(false)}>
      <ProjectList />
    </AquaWindow>
  )}
</AnimatePresence>

​
Title bar anatomy

The title bar is controlled by the xp-titlebar CSS class and is divided into two flex regions. Left side — icon + title: The optional icon prop renders inside a w-4 h-4 text-white drop-shadow-md wrapper, followed immediately by the title string in a text-sm font-display font-bold tracking-wider span. Both sit inside a flex items-center gap-2 row. Right side — window controls: Three buttons are rendered in a flex items-center gap-1 group, each sized w-6 h-6 rounded. The Minimize button uses a Minus Lucide icon with bg-blue-600 hover:bg-blue-500 border border-blue-400/50 and is decorative only. The Maximize button uses a Square Lucide icon with the same blue styling and is also decorative only. The Close button uses an X Lucide icon with bg-red-500 hover:bg-red-400 border border-red-300/50 and calls onClose when clicked. All three share shadow-inner transition-colors styles. xp-titlebar CSS applies the signature XP title bar appearance: a left-to-right linear gradient from a rich royal blue (#1b5fe4) through a brighter blue highlight (#4a9eff) and back to the royal blue, plus white bold text with a 1 px dark text-shadow for readability against the gradient.
The minimize and maximize buttons are purely decorative — they render correctly and respond to hover styles, but neither has a wired-up onClick handler in the component. Only onClose drives real behavior. If you need functional minimize/maximize, pass onClick handlers via a wrapper or extend the component directly.

Build docs developers (and LLMs) love

Get started for freeTalk to us