Chrome
CreativeTech Frame
Its segmented border lights up in sequence on arrival. For dashboards, HUD panels and spec sheets.
Install
Included with Creative: needs your API key. Initialize and log in once.
npx @galactrex/ui add tech-frameUsage
import { TechFrame } from "@/components/galactrex/tech-frame";
<TechFrame title="Reactor" code="RX-07" status="blink">…</TechFrame>Source
Installs to components/galactrex/tech-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 | — | Content. |
title | ReactNode | — | Tab label. |
code | string | — | Serial in the corner. |
status | "on" | "off" | "blink" | "on" | Status light. |
segments | number | 10 | Border segments. |
className | string | — | Extra classes for the outer element. |
Variants
- Panel. Title, status and a serial.
Accessibility
- Title is real text; the light is decorative, so state it in words too.
Motion and reduced motion
- Opacity sequence on arrival.
- Reduced motion: settled.