r3f-xr-widgets / HorizonWindow

Function: HorizonWindow()

HorizonWindow(props): Element

Defined in: src/components/HorizonWindow.tsx:341

Advanced resizable and movable window component using UIKit and Horizon Panel

A feature-rich 3D window with:

• Four corner resize handles with arc-shaped visual indicators
• Four edge handles for repositioning the window
• Title bar for dragging/moving
• Border visibility during interactions
• Proximity-based edge fade effects (optional)
• Haptic feedback on XR controllers
• Positional audio feedback via HandleWithAudio

Unlike ResizableWindow which uses basic Three.js meshes, HorizonWindow integrates with @react-three/uikit and @react-three/uikit-horizon for advanced 2D UI rendering in 3D space.

Parameters

props

HorizonWindowProps

Returns

Element

Examples

import { HorizonWindow, HorizonWindowTitleBar, AudioEffects } from 'r3f-xr-widgets'
import { signal } from '@preact/signals-core'
import { Container, Text } from '@react-three/uikit'

const width = signal(800)
const height = signal(600)

function Scene() {
  return (
    <>
      <AudioEffects />
      <HorizonWindow
        width={width}
        height={height}
        minWidth={400}
        maxWidth={1200}
        titleBar={<HorizonWindowTitleBar>My Window</HorizonWindowTitleBar>}
        onResize={(w, h) => console.log('Resized to', w, h)}
      >
        <Container padding={20}>
          <Text>Window content here</Text>
        </Container>
      </HorizonWindow>
    </>
  )
}

<HorizonWindow
  width={800}
  height={600}
  titleBar={<HorizonWindowTitleBar>Static Window</HorizonWindowTitleBar>}
>
  {/* content */}
</HorizonWindow>

See

• HorizonWindowTitleBar for title bar component
• AudioEffects for required audio feedback setup