Text that appears like an instrument readout: letters flip through glyphs before settling, corner brackets and a tick scale draw in, and small mono labels fade up around it.
npx shadcn@latest add https://hyperblur.dev/r/text-tech-readout.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/text-tech-readout.tsx.
import { TechReadout } from "@/components/hyperblur/text-tech-readout"
<TechReadout text="ORBIT LOCK" meta={["UPLINK", "98.2%", "ALT 412 KM", "T+00:14"]} />| Prop | Type | Default | Description |
|---|---|---|---|
| text | string | "TELEMETRY 04" | The main readout text. |
| meta | string[] | ["SYS / NOMINAL", "98.2%", "LAT 37.77", "T+00:14"] | Up to four small labels: top left, top right, bottom left, bottom right. |
| glyphs | string | "01<>/\\|#%+=[]" | Characters the letters flip through before they resolve. |
| duration | number | 1100 | Time in milliseconds for the whole readout to resolve. |
| size | number | 30 | Font size of the main text in pixels. |
| accent | string | "#2f7bff" | Color of the brackets, ticks and unresolved glyphs. |
| replayEvery | number | 0 | Replay the readout every N milliseconds (minimum 1200). 0 disables the loop. Hovering also replays it. |