GalactrexAccountChrome
CreativeHUD Frame
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.
Install
Included with Creative: needs your API key. Initialize and log in once.
npx @galactrex/ui add hud-frameUsage
import { HUDFrame } from "@/components/galactrex/hud-frame";
<HUDFrame label="Telemetry">
<p>Frame time 8.2 ms</p>
</HUDFrame>Source
Installs to components/galactrex/hud-frame.tsx, with the shared motion primitives beside it.
Source for this component comes with its plan. Install it with the command above, or open your licensed copy here.
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 and reduced 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.