Desktop windows

Use it for

• Playful product sites that present features as apps
• Showing several small panels without a fixed layout
• Portfolio and about pages with a desktop theme

Avoid

• Real work surfaces, where people expect a proper window manager
• Small phones as the main target, where windows cover each other

How it works

Each window stores its position as a 0 to 1 fraction of the free space, so left is calc((100% minus width) times x) and windows stay inside the desktop at any size. Dragging a title bar uses pointer capture and writes the fraction straight to a CSS variable, committing it to state on release. Minimise measures the window and its dock icon and runs a Web Animations keyframe that narrows the window faster than it shrinks while it falls into the icon; restoring plays that same animation in reverse.

Accessibility

Each window title is a focusable handle that moves its window with the arrow keys, minimise and the dock icons are real buttons named after their window, and a minimised window leaves the tab order. Touch drags work through pointer events, with touch-action none on the title bars only. Reduced motion skips the pop in and the genie, so windows simply hide and show.