spatial
Floating Window Stack
A selectable stack of overlapping product windows with quiet focus depth.
- spatial
- windows
- product-preview
- stack
Quick usage
import { FloatingWindowStack } from "@pinky-ui/experiences";
<FloatingWindowStack windows={screens} activeId={active} onActiveChange={setActive} />Presets
Default
The restrained Pinky production default.
Default behaviour
Quiet
A flatter or lower-intensity treatment for dense pages.
disabled={true}
Install
Add @pinky-ui/experiences as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.
npm install @pinky-ui/experiencespnpm add @pinky-ui/experiencesyarn add @pinky-ui/experiencesnpx pinky-ui add floating-window-stackPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devProps
| Prop | Type | Default | Description |
|---|---|---|---|
| windows | FloatingWindow[] | — | Two to four labeled product surfaces. |
| className | string | — | Styles the outer composition without changing its behaviour. |
| disabled | boolean | false | Uses the static, readable composition. |
Accessibility
- Window selectors are labeled buttons with pressed state.
- Content order remains stable regardless of visual z-index.
Performance
- A small fixed surface stack uses transforms and opacity.
- Mobile and reduced motion remove overlap.
Reduced motion
Spatial or continuous movement is removed while content, selection and controls remain available.
When to use
- SaaS or portfolio product previews
When not to use
- Interactive fake desktops or essential hidden forms
Skill
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.