# HUD Frame

> Corner brackets, ticks and a caption around real content.

Instrument-panel chrome for dashboards, game tools and technical product pages. Monochrome, quiet at rest, and it scales from a stat to a full panel.

- Family: Chrome
- Plan: Creative. Included with Creative.
- Requires: React, Tailwind CSS v4 and the motion package
- Page with a live preview: https://galactrex.com/ui/hud-frame/
- Licence: https://galactrex.com/ui/license/

## Install

```sh
npx @galactrex/ui login   # once, with an API key from https://galactrex.com/account/
npx @galactrex/ui add hud-frame
```

It installs to `components/galactrex/hud-frame.tsx`, with the shared motion helpers beside it. First time in a project: `npx @galactrex/ui init` (setup guide: https://galactrex.com/docs/ui-components-setup/).

## Usage

```tsx
import { HUDFrame } from "@/components/galactrex/hud-frame";

<HUDFrame label="Telemetry">
  <p>Frame time 8.2 ms</p>
</HUDFrame>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children` | `ReactNode` | — | The framed content. |
| `label` | `ReactNode` | — | Caption on the top edge. |
| `corner` | `number` | `18` | Corner bracket length in px. |
| `ticks` | `boolean` | `true` | Tick marks on the top and bottom edges. |
| `responsive` | `boolean` | `true` | Corners open while the content is in use. |
| `className` | `string` | — | Extra classes for the outer element. |

## Variants

- **Panel.** Label plus ticks around a block of controls or data.
- **Bare.** `ticks={false}` and no label: just the corners.

## Accessibility

- Brackets and ticks are aria-hidden; the label is real text.
- Keyboard focus inside opens the corners like hover does.

## Motion

- Corners arrive from the inside with a staggered spring when the frame enters view.
- Reduced motion: corners are simply present and do not react.