View, input, and DPI

LoomView displays your UI as a fullscreen overlay over the Unity scene. LoomInputCapture forwards mouse and keyboard input to the UI.

You do not need to add these components by hand. Run:

Loom -> Setup UI in Current Scene

and Loom creates the right hierarchy.

Input

LoomInputCapture forwards pointer and keyboard input while the Loom view is active. Both Unity’s legacy Input Manager and the new Input System are supported through Player Settings.

If input does not reach the UI, check:

• A LoomInputCapture exists on the active LoomView.
• There is only one active Loom view.
• The game is in Play mode and the UI has finished loading.

Transparency

Loom is designed for transparent overlays. Keep the app background transparent for HUDs, and apply explicit backgrounds only to menus or panels that need one.

html,
body,
#root {
  background: transparent;
}

For full-screen menus, add a backdrop to the screen component instead of the entire app.

DPI and viewport size

Loom reports viewport and DPI through built-in state:

const bridge = useBridge();

bridge.loom.viewportWidth;
bridge.loom.viewportHeight;
bridge.loom.devicePixelRatio;

Use these values when the UI needs to react to actual game viewport size. For pure layout changes, normal CSS media queries are usually enough.

One UI overlay

Most games should use one Loom overlay for the whole game. Keep it alive across scenes and switch screens through bridge state rather than destroying and recreating the UI for every scene.