{
  "name": "hyper-text",
  "title": "Hyper Text",
  "description": "An intercepted signal resolving: characters flicker through scramble glyphs, then lock into place left to right, like a callsign clearing on the uplink.",
  "category": "text",
  "install": {
    "command": "npx shadcn@latest add @clow/hyper-text",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "duration": {
      "type": "number",
      "default": 1100,
      "min": 300,
      "max": 4000,
      "step": 100,
      "description": "Total resolve time in ms, first character to last."
    },
    "scrambleOnHover": {
      "type": "boolean",
      "default": true,
      "description": "Re-run the scramble when the pointer enters the text."
    },
    "children": {
      "type": "text",
      "default": "KX-7 // UPLINK LOCKED"
    }
  },
  "agent": {
    "prompt": "Use HyperText for short technical strings that should arrive like a decoded transmission: callsigns, status lines, terminal headings. It waits for the viewport, flickers each character through scramble glyphs, and locks them in left to right. children must be a plain string, kept short (a callsign, not a sentence). Each character sits in a 1ch cell so the line never jitters; it reads best in font-mono. Do NOT use it on prose, form labels, or anything the reader must parse instantly: it is a signal moment. The full text is exposed via aria-label and rendered instantly under prefers-reduced-motion.",
    "examples": [
      "<h2 className=\"font-mono text-2xl font-semibold tracking-tight\"><HyperText>KX-7 // UPLINK LOCKED</HyperText></h2>"
    ]
  },
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/hyper-text",
    "markdown": "https://clow.cards/llms/hyper-text.md",
    "registryItem": "https://clow.cards/r/hyper-text.json"
  }
}

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