{
  "name": "sakura-text",
  "title": "Sakura Text",
  "description": "A word in the petal wind: the whole fill breathes with living warm light while a whirlwind of soft pink sakura petals rides across the word from left to right, each petal spinning on itself, some passing in front of the letters and some behind.",
  "category": "text",
  "install": {
    "command": "npx shadcn@latest add @clow/sakura-text",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "props": {
    "speed": {
      "type": "select",
      "options": [
        "slow",
        "base",
        "fast"
      ],
      "default": "base",
      "description": "How fast the light lives: the fill drift and the petal cadence together. slow suits big heroes."
    },
    "petals": {
      "type": "number",
      "default": 6,
      "min": 0,
      "max": 12,
      "step": 1,
      "description": "Petals riding the wind at once. 0 keeps only the living fill."
    },
    "wind": {
      "type": "number",
      "default": 6,
      "min": 1,
      "max": 20,
      "step": 0.5,
      "description": "Seconds a petal takes to cross the word. Overrides the speed preset for the petals only."
    },
    "children": {
      "type": "text",
      "default": "Release"
    }
  },
  "agent": {
    "prompt": "Use SakuraText for the single brand moment on a page: one hero word or short phrase whose fill is alive with slow warm light while a whirlwind of soft pink sakura petals crosses it from left to right, each petal spinning, alternating in front of and behind the letters. Unlike LitText (a band of light passing over resting ink), SakuraText keeps the whole word lit and inhabited. children must be a plain string; wrap it inside your own heading element and size with the heading's classes (petals scale in em with the font). petals sets how many ride the wind at once and wind sets the seconds one takes to cross (overriding the speed preset for petals only). The wind travels past the word's edges on both sides, so keep clipping ancestors away. Never use it on body copy, UI labels, or more than once per view: a page has one wind at most. Falls back to plain foreground text with no petals under prefers-reduced-motion.",
    "examples": [
      "<h1 className=\"font-display text-6xl font-semibold tracking-tight\"><SakuraText speed=\"slow\">Release</SakuraText></h1>",
      "<SakuraText petals={0}>The quiet variant</SakuraText>"
    ]
  },
  "registryDependencies": [
    "utils"
  ],
  "links": {
    "docs": "https://clow.cards/docs/sakura-text",
    "markdown": "https://clow.cards/llms/sakura-text.md",
    "registryItem": "https://clow.cards/r/sakura-text.json"
  }
}
prop	type	default
speed	slow \| base \| fast	base
petals	number	6
wind	number	6
children	text	Release
Draw

Playground

Examples

Props
