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.
AquaButton is the primary interactive element of the Windows XP Developer Portfolio UI. It wraps a Framer Motion motion.button to deliver the iconic Windows XP Aqua look — a glassy gradient surface, inset highlight ring, and a silky lens-flare sweep that plays across the button face on hover. A subtle scale(0.95) tap animation completes the tactile feel, making every click feel physical and responsive.
Import
Props
The label or content rendered inside the button. Wrapped in a
relative z-10 drop-shadow-sm span so it always sits above the lens-flare overlay layer.Controls padding, font size, and border radius. Accepts one of four variants:
sm applies px-4 py-1.5 text-sm rounded-full; md applies px-6 py-2 text-base rounded-full; lg applies px-8 py-3 text-lg rounded-full; xl applies px-12 py-4 text-2xl rounded-[2rem].Additional CSS classes merged onto the root
motion.button. Useful for overriding width, margin, or color without subclassing the component.All remaining props are spread directly onto the underlying Framer Motion
motion.button element. This includes standard HTML button attributes (type, disabled, form, aria-*) as well as any Framer Motion-specific props (whileHover, animate, etc.).Usage
Visual behavior
AquaButton layers several CSS and animation effects to recreate the classic Windows XP Aqua aesthetic:
Aqua gradient surface — The button face uses a vertical radial gradient that transitions from near-opaque white at the top, through a translucent mid-point, down to a deep teal/blue at the base. This creates the characteristic “bubble” depth illusion.
Inset highlight ring — A thin box-shadow inset traces the top edge of the button in bright white, simulating a reflection off a curved glassy surface.
Hover lift — On :hover, a translateY(-2px) transform floats the button slightly upward, paired with an elevated box-shadow to reinforce the sense of the button rising toward the cursor.
Active press — On :active, translateY(2px) pushes the button back down into the surface. The shadow collapses to match, giving the impression of a physical press.
Lens-flare sweep — The lens-flare CSS class attaches a ::after pseudo-element containing a diagonal white gradient. On :hover, a CSS @keyframes animation translates this element across the button from left to right in ~0.5 s, mimicking a light glint sweeping across a shiny surface.
Framer Motion tap — The whileTap={{ scale: 0.95 }} prop applies a smooth Framer Motion spring scale-down on pointer-down, reinforcing the press animation from both the CSS and JS layers simultaneously.