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.

Bubbles is a purely decorative background component that brings the Windows XP Bliss/Frutiger Aero era to life. On mount it generates twenty translucent spheres, each with a randomised size, horizontal position, animation duration, and delay. The bubbles float upward continuously, drifting slightly left and right as they rise, then loop seamlessly — creating an ever-moving, atmospheric depth layer that evokes the soft dreamy quality of early 2000s desktop aesthetics.

​
Behaviour

When the component mounts a single useEffect call populates a state array with twenty bubble descriptors. Each descriptor is computed once and never changes: 
Array.from({ length: 20 }).map((_, i) => ({
  id:       i,
  x:        Math.random() * 100,          // horizontal start position (0–100 vw %)
  size:     Math.random() * 40 + 10,      // diameter in px (10–50 px)
  duration: Math.random() * 10 + 10,      // animation duration in seconds (10–20 s)
  delay:    Math.random() * 5,            // stagger delay in seconds (0–5 s)
}));
Each bubble is a Framer Motion motion.div that animates along the Y axis from 0vh to -120vh (fully off-screen above the viewport) while simultaneously drifting up to 50 px left or right along the X axis. The animation repeats infinitely with ease: "linear" for a smooth, constant-velocity float.

​
Visual appearance

Every bubble is styled as a rounded-full circle with:
  • border border-white/40 — a faint white outline
  • bg-white/10 — near-transparent white fill
  • backdrop-blur-[2px] — a subtle frosted-glass effect
  • shadow-[inset_0_0_10px_rgba(255,255,255,0.5)] — an inner glow that reinforces the glass sphere look
A small child div (top-[15%] left-[15%], w-[30%] h-[30%], bg-white/60, blur-[1px]) provides a bright highlight spot in the upper-left of each bubble, simulating a spherical specular reflection — the hallmark of the Frutiger Aero glass aesthetic.

​
Positioning

The component renders as a fixed inset-0 container with pointer-events-none, overflow-hidden, and z-0, placing it:
  • Fixed to the viewport so it doesn’t scroll with page content
  • Behind all content via z-0 (Layout’s <main> sits at z-10)
  • Non-interactive — no clicks, hovers, or focus events are captured
// Inside Layout component
<div className="h-screen w-screen frutiger-bg flex flex-col relative overflow-hidden">
  <Bubbles />        {/* Fixed background layer — z-0 */}
  <main>{children}</main>
  <Taskbar />
</div>
Bubbles uses Framer Motion’s motion.div with animate and transition props to drive each bubble’s vertical and horizontal movement. Because each bubble’s random drift value (Math.random() * 100 - 50) is evaluated inline on every render of the parent, the bubbles are fixed to a single set of descriptors generated once in useEffect — preventing drift recalculation on re-renders.

​
Props

Bubbles accepts no props. The bubble count, size range, duration range, and delay range are all hardcoded constants. To adjust the visual density or speed, edit the constants directly in the component source.

​
Customisation reference

ConstantCurrent valueEffect
Array length20Total number of bubbles on screen
Size rangeMath.random() * 40 + 10Min 10 px, max 50 px diameter
Duration rangeMath.random() * 10 + 10Min 10 s, max 20 s float cycle
Delay rangeMath.random() * 50–5 s stagger so bubbles don’t all start at once
Drift rangeMath.random() * 100 - 50±50 px horizontal drift during ascent

Build docs developers (and LLMs) love

Get started for freeTalk to us