Browse components
Tech Text
HUD-style lettering that flickers on inside bracket frames, with a scan line, live readouts and a blinking caret.
Installation
npx shadcn@latest add @glint-ui/tech-textFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/tech-text.json
Usage
import { TechText } from "@/components/ui/tech-text";
<TechText text="Node online" label="SYS.07 // UPLINK" className="font-mono text-5xl" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "Node online" | Main text. |
| label | string | "SYS.07 // UPLINK" | Readout above the frame. |
| sublabel | string | "SIGNAL LOCK" | Readout below the frame; a live % is appended. |
| color | string | "#a3e635" | Accent for brackets, labels and glow. |
| speed | number | 45 | Ms between characters flickering on. |
| caret | boolean | true | Blinking block caret after the text. |
| replayOnHover | boolean | true | Replay the boot sequence on hover. |
| className | string | — | Extra classes for the root element. |