{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "staggered-letter-text-swap",
  "title": "Staggered Letter Text Swap",
  "author": "henriquegpb <https://github.com/henriquegpb>",
  "description": "A surface-free text interaction with a staggered per-letter upward replacement.",
  "files": [
    {
      "path": "registry/microkit/staggered-letter-text-swap.tsx",
      "content": "import type { CSSProperties } from \"react\";\n\nconst LABEL = \"MICROKIT\";\n\nexport function StaggeredLetterTextSwap() {\n  return (\n    <button type=\"button\" aria-label={LABEL} className=\"group inline-flex cursor-pointer appearance-none items-center justify-center border-0 bg-transparent p-0 font-[Arial,Helvetica,sans-serif] text-[light-dark(#14181e,#f7f7fa)] focus-visible:rounded-[3px] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[5px] focus-visible:outline-[#f97316]\">\n      <span className=\"inline-flex items-center\" aria-hidden=\"true\">\n        {LABEL.split(\"\").map((letter, index) => (\n          <span key={`${letter}-${index}`} style={{ \"--letter-delay\": `${index * 34}ms` } as CSSProperties} className=\"relative inline-grid h-[18px] place-items-center overflow-hidden text-[16px] font-semibold leading-[18px] tracking-[-.35px]\">\n            <span className=\"col-start-1 row-start-1 [transition:transform_.45s_cubic-bezier(.16,1,.3,1)] [transition-delay:var(--letter-delay)] group-hover:-translate-y-[125%] group-focus-visible:-translate-y-[125%] motion-reduce:transition-none\">{letter}</span>\n            <span className=\"col-start-1 row-start-1 translate-y-[125%] [transition:transform_.45s_cubic-bezier(.16,1,.3,1)] [transition-delay:var(--letter-delay)] group-hover:translate-y-0 group-focus-visible:translate-y-0 motion-reduce:transition-none\">{letter}</span>\n          </span>\n        ))}\n      </span>\n    </button>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/microkit/staggered-letter-text-swap.tsx"
    }
  ],
  "docs": "Live preview and the CSS, JavaScript and Tailwind variants: https://microkit.co/components/staggered-letter-text-swap",
  "categories": [
    "button",
    "hover"
  ],
  "type": "registry:component"
}