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.

AquaPanel is the core layout card of the Windows XP Developer Portfolio. It applies the Frutiger Aero glassmorphism treatment — translucent background, frosted backdrop-filter blur, and a soft white border — to any block of content you place inside it. On mount, each panel glides in with a smooth fade-and-upward-slide animation driven by Framer Motion. A delay prop lets you stagger multiple panels in a grid so they cascade into view one after another rather than all appearing simultaneously.

​
Import

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

​
Props

​
children
ReactNode
required
The content rendered inside the panel. Displayed within a rounded-2xl p-6 container with the glass surface behind it.
​
className
string
default:"''"
Extra CSS classes appended to the root motion.div. Use this to control dimensions, grid placement, or additional visual overrides — for example w-full, h-64, or col-span-2.
​
heavy
boolean
default:"false"
Switches between the two glass CSS variants. When false (default), the aqua-glass class is applied; when true, the heavier aqua-glass-heavy class is used instead. See Glass variants below for the exact CSS differences.
​
delay
number
default:"0"
Framer Motion entrance animation delay in seconds. Passed directly to the transition.delay field. Use a staggered multiple (e.g., i * 0.1) when rendering a list of panels so each card enters slightly after the previous one.

​
Usage

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

<AquaPanel>
  <h2>About Me</h2>
  <p>Frontend developer specializing in nostalgic UIs.</p>
</AquaPanel>

​
Entrance animation

AquaPanel uses a Framer Motion motion.div with the following animation configuration, sourced directly from the compiled component: 
initial:    { opacity: 0, y: 20 }
animate:    { opacity: 1, y: 0 }
transition: { duration: 0.5, delay: delay, ease: 'easeOut' }
The panel fades in while translating upward 20 px over 500 ms with an easeOut curve — a gentle deceleration that feels natural and avoids an abrupt stop. The delay prop maps 1-to-1 onto transition.delay, so delay={0.3} makes the panel wait 300 ms before starting its entrance.

​
Glass variants

The heavy prop selects between two CSS utility classes that define the glassmorphism appearance. The aqua-glass class (default, heavy={false}) uses a background of rgba(255, 255, 255, 0.3), a backdrop-filter: blur(12px), and a 1px solid rgba(255, 255, 255, 0.5) border. The aqua-glass-heavy class (heavy={true}) increases the background to rgba(255, 255, 255, 0.5), the blur to blur(16px), and the border to 1px solid rgba(255, 255, 255, 0.6). Use aqua-glass (the default) for panels that sit in front of a busy background and should stay relatively transparent, preserving the layered desktop composition effect. Use aqua-glass-heavy (heavy) for hero or featured panels where you want stronger contrast between the card surface and its contents — for example, a skills summary or a pinned project card.
The delay prop is designed for use in staggered grids. When mapping over an array, pass delay={index * 0.1} (or any step size) to each AquaPanel so the cards cascade into view sequentially rather than all animating at once. Keeping the step between 0.05 s and 0.15 s produces the most natural stagger — too large a gap and the animation feels sluggish; too small and it’s indistinguishable from no stagger at all.

Build docs developers (and LLMs) love

Get started for freeTalk to us