Hyper Text

An intercepted signal resolving: characters flicker through scramble glyphs, then lock into place left to right, like a callsign clearing on the uplink.

Draw

draw a card

$npx shadcn@latest add @clow/hyper-text

First time? Point @clow at the registry

Once per project, add the registry to your components.json. Then draw any card by name.

"registries": {
  "@clow": "https://clow.cards/r/{name}.json"
}

Full setup →

Playground

props

duration

scrambleOnHover

children

<HyperText>KX-7 // UPLINK LOCKED</HyperText>

Examples

basic

Props

prop	type	default
duration	number	1100
scrambleOnHover	boolean	true
children	text	KX-7 // UPLINK LOCKED

Draw

Playground

Examples

[data-clow="hyper-text"] { display: inline-block; } [data-clow="hyper-text"] [data-clow-part="hyper-cell"] { display: inline-block; width: 1ch; text-align: center; font-variant-numeric: tabular-nums; } KX-7 // UPLINK LOCKED

Props

[data-clow="hyper-text"] { display: inline-block; } [data-clow="hyper-text"] [data-clow-part="hyper-cell"] { display: inline-block; width: 1ch; text-align: center; font-variant-numeric: tabular-nums; } KX-7 // UPLINK LOCKED