Floating Window Stack
`FloatingWindowStack` presents a few overlapping product or content windows with one focused surface. Use it for SaaS previews, dashboard stories and portfolio process sections.
Live example
Try the interaction before reading the recipe.
real component · keyboard-safe
Purpose
FloatingWindowStack presents a few overlapping product or content windows with one focused surface. Use it for SaaS previews, dashboard stories and portfolio process sections.
Two to four windows is the useful range. Avoid building a fake operating system, hiding essential content behind overlap or placing active forms in receded windows. Focus movement should remain subtle and predictable.
Window selectors are real buttons with pressed state and the content follows stable DOM order. Mobile and reduced motion flatten the stack. Keep each window lightweight and avoid multiple backdrop-filter layers; combine with calm copy rather than another spatial gallery.
Source: packages/skills/spatial/floating-window-stack.md