Account

Chrome

Creative

Tech 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.

Terminal
npx @galactrex/ui add tech-frame

Usage

Example
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.

See plans

Props

PropTypeDefaultDescription
childrenReactNode—Content.
titleReactNode—Tab label.
codestring—Serial in the corner.
status"on" | "off" | "blink""on"Status light.
segmentsnumber10Border segments.
classNamestring—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.