{
  "name": "morphing-text",
  "title": "Morphing Text",
  "description": "One thought becoming the next: a word blurs, loosens into light, and re-condenses as the following word, like ink evaporating and re-settling on the paper.",
  "category": "text",
  "install": {
    "command": "npx shadcn@latest add @clow/morphing-text",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "interval": {
      "type": "number",
      "default": 2600,
      "min": 1200,
      "max": 6000,
      "step": 200,
      "description": "Ms each word holds before morphing into the next. Give readers time to actually read."
    }
  },
  "agent": {
    "prompt": "Use MorphingText for the one variable word in a fixed headline: pass words as an array of short strings and it cycles them forever, each one blurring out as the next condenses in. Drop it inline inside your own heading ('Every <MorphingText/> finds its relay'); it inherits the surrounding font and reserves the width of the longest word so the line never reflows. Keep the words short, parallel in meaning, and 3 to 5 in number. Do NOT use it for critical information, navigation, or more than one per view. The current word is exposed via aria-label; under prefers-reduced-motion it hard-swaps with no blur.",
    "examples": [
      "<h2 className=\"font-display text-4xl font-semibold tracking-tight\">Every <MorphingText words={[\"signal\", \"schedule\", \"station\", \"story\"]} /> finds its relay</h2>"
    ]
  },
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/morphing-text",
    "markdown": "https://clow.cards/llms/morphing-text.md",
    "registryItem": "https://clow.cards/r/morphing-text.json"
  }
}
Draw

Playground

Examples

Props
