{
  "name": "ink-text",
  "title": "Ink Text",
  "description": "Text that arrives the way ink meets paper: each word lands wet and blurred, then absorbs into a sharp line, cascading as the reader scrolls it into view.",
  "category": "text",
  "install": {
    "command": "npx shadcn@latest add @clow/ink-text",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "by": {
      "type": "select",
      "options": [
        "word",
        "char"
      ],
      "default": "word",
      "description": "word reads calm and editorial; char is sharper, save it for short headings."
    },
    "delay": {
      "type": "number",
      "default": 0,
      "min": 0,
      "max": 2000,
      "step": 50,
      "description": "Initial wait in ms before the first unit lands."
    },
    "stagger": {
      "type": "number",
      "default": 70,
      "min": 0,
      "max": 300,
      "step": 10,
      "description": "Ms between one unit and the next."
    },
    "children": {
      "type": "text",
      "default": "Every packet settles into the ledger like ink into paper."
    }
  },
  "agent": {
    "prompt": "Use InkText to reveal a headline or one short paragraph on a landing or hero section: it waits for the viewport, then absorbs each word from blur into sharp ink with a stagger. children must be a plain string; wrap InkText inside your own heading or paragraph element for sizing. by='char' only for short headings (a few words), never full sentences. Do NOT use it in forms, tables, navigation, or long body copy: it is an entrance moment, not a text style. The full text is exposed via aria-label and shown statically under prefers-reduced-motion.",
    "examples": [
      "<p className=\"text-lg\"><InkText>Every packet settles into the ledger like ink into paper.</InkText></p>",
      "<h2 className=\"text-3xl font-semibold\"><InkText by=\"char\" stagger={26}>Relay online</InkText></h2>",
      "<InkText delay={400}>Second line, after the headline.</InkText>"
    ]
  },
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/ink-text",
    "markdown": "https://clow.cards/llms/ink-text.md",
    "registryItem": "https://clow.cards/r/ink-text.json"
  }
}
prop	type	default
by	word \| char	word
delay	number	0
stagger	number	70
children	text	Every packet settles into the ledger like ink into paper.
Draw

Playground

Examples

Props
