# Hit Layer Interactivity

```ts
import { createGlyphPerspectiveCamera, createGlyphScene, createGlyphOrbitControls } from "glyphcss";
import { resolveGeometry } from "@glyphcss/core";

const host = document.getElementById("scene");
const camera = createGlyphPerspectiveCamera({ rotX: 65, rotY: 0, zoom: 0.3, distance: 0, perspective: 32000, stretch: 1 });
const scene = createGlyphScene(host, { camera, autoSize: true, mode: "solid", colorEncoding: "spans" });
scene.output.style.fontSize = "10px";
scene.output.style.lineHeight = "1";
scene.fit();
const polygons = resolveGeometry("cube", { size: 100 });
scene.add(polygons);
const anchor = scene.addHotspot({ id: "anchor", at: [50, 50, 50], size: [14, 3] });
const button = document.createElement("button");
button.type = "button";
button.textContent = "Select anchor";
button.setAttribute("aria-pressed", "false");
button.addEventListener("pointerdown", event => event.stopPropagation());
button.addEventListener("click", () => {
  const selected = button.getAttribute("aria-pressed") !== "true";
  button.setAttribute("aria-pressed", String(selected));
  button.textContent = selected ? "Selected" : "Select anchor";
});
anchor.el.append(button);
createGlyphOrbitControls(scene, { drag: true, wheel: true });
```



Hover the anchor to highlight it; click or press Enter/Space to toggle selection. Drag elsewhere to orbit. Open Code for the same button with `GlyphHotspot` in React/Vue or `scene.addHotspot` in JavaScript.

## Anchors and sizing

- `at` is a world-space `[x, y, z]`; string vertex IDs are unsupported.
- `size: [width, height]` uses character cells; default `[1, 1]`.
- Hotspots are centered on their projected cell and hidden outside the view, without surface-depth occlusion.
- Put a real button inside the hotspot for focus, keyboard activation, and an accessible label. Its DOM can carry your hover/focus styles.

## Move or remove

```ts
const anchor = scene.addHotspot({ id: "door", at: [50, 50, 50], size: [4, 2] });
anchor.setAt([1, 0, 0]);
anchor.remove();
```

`setAt` preserves the element and its listeners. Only registered hotspots add DOM nodes; the mesh remains one text grid. `scene.destroy()` removes the hit layer.