Spatial windowPro

A floating spatial computing window: frosted glass hanging in a room, leaning toward the pointer, with a grabber, a close control and tab and toolbar ornaments.

Markdown

On this page

ProA glass window in a room, with ornaments

Installation

$ pnpm dlx shadcn@latest add @chatcn-pro/spatial-window

Usage

tsx

import { SpatialWindow } from "@/components/ui/chatcn/pro/spatial-window"

<SpatialWindow label="Assistant" environment="/rooms/cafe.webp" onClose={close}>
  <YourApp />
</SpatialWindow>

The window is a platform material: dark frosted glass with a specular top edge and a soft shadow, and light text on it at all times (the kit tokens are set for it inside, so components render correctly on the glass). Ornaments float off its edges as their own glass. Drag the grabber to move the window; it settles back a little while held.

Examples

Every state

ProThinking, inactive, failed, fixed

Props

Prop	Type	Notes
`label`	`string`	The window's accessible name
`environment`	`string \| ReactNode`	The room behind. Image URL or node
`windowWidth`, `windowHeight`	`number`	Default 560 x 360
`width`, `height`	`number \| string`	The stage. Height default 560
`tilt`	`boolean`	Lean toward the pointer. Default true
`movable`	`boolean`	Show the grabber. Default true
`offset`, `defaultOffset`, `onOffsetChange`	`{ x, y }`	Position from the center
`onClose`	`() => void`	Shows the close control
`active`	`boolean`	Inactive windows recede. Default true
`tabs`, `toolbar`	`ReactNode`	Ornaments. Style buttons with `spatialOrnamentButton`

Keyboard

Key	Action
Arrow keys on the grabber	Move the window 8 px, 32 px with `Shift`
`Home` on the grabber	Center the window
`Enter`, `Space` on close	Close

Accessibility

The window is a named group with aria-roledescription=window; ornaments are a named navigation and toolbar.
The grabber and close controls are labelled buttons with 44 px targets on touch.
In RTL the tab ornament moves to the other edge and arrow keys follow the reading direction.

Motion

The lean is at most 7 degrees and eases over 300 ms; it stops while dragging, on touch and on inactive windows.
Under reduced motion there is no lean and no settle, only fades.