SenangStart XR3D Interfaces for WebXR

GUI components for A-Frame — from desktop pointers to VR controllers.

Get Started

View on GitHub

18 A-Frame Components

One HTML primitive per widget — buttons, sliders, toggles and inputs, registered in a single browser bundle.

Flexible Layouts

Arrange widgets in rows and columns with flexbox-style alignment, spacing, rounded panels and inherited styles.

Keyboard & Accessibility

ARIA roles, keyboard activation, arrow-key sliders and radio groups make desktop interaction easier.

Multiple Input Methods

Use desktop pointers, mobile gaze fuse and VR controller lasers with the same widgets.

Live Attribute Updates

Update dimensions, colors, labels and states after initialization; geometry and text rebuild in place.

Design Tokens & Fonts

Style your scenes with shared colors, the bundled Outfit typeface, custom fonts and icon helpers.

Quick Example

html

<a-sxr-flex-container
  flex-direction="column" justify-content="center" align-items="center"
  width="4" height="3" opacity="0" position="0 1.6 -2">
  <a-sxr-button width="2" height="0.6" value="Hello XR"></a-sxr-button>
</a-sxr-flex-container>

Place this panel inside an <a-scene> after loading A-Frame and SenangStart XR. The container centers the button in a column, two units in front of the camera.

See Installation for scene setup and Interaction for cursor and controller wiring.