{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "inset-circle-button",
  "title": "Inset Circle Button",
  "author": "henriquegpb <https://github.com/henriquegpb>",
  "description": "A circular project CTA that reveals its dark base as the inset surface collapses.",
  "files": [
    {
      "path": "registry/microkit/inset-circle-button.tsx",
      "content": "export function InsetCircleButton() {\n  return <button type=\"button\" className=\"group relative grid size-32 cursor-pointer place-items-center overflow-hidden rounded-full border border-[light-dark(#d2d7de,#f0f0f0)] bg-[light-dark(#14181e,#1f1f1f)] p-3 text-[13px] font-bold text-[light-dark(#14181e,#111)] focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[#f97316]\"><span className=\"relative z-10 transition-colors duration-[420ms] group-hover:text-[light-dark(#ffffff,#f0f0f0)] group-focus-visible:text-[light-dark(#ffffff,#f0f0f0)]\">View Project</span><span className=\"absolute inset-1 rounded-full bg-[light-dark(#ffffff,#f0f0f0)] [clip-path:circle(75%_at_50%_50%)] [transition:clip-path_.52s_cubic-bezier(.16,1,.3,1)] [will-change:clip-path] group-hover:[clip-path:circle(0%_at_50%_50%)] group-focus-visible:[clip-path:circle(0%_at_50%_50%)]\" aria-hidden=\"true\" /></button>;\n}\n",
      "type": "registry:component",
      "target": "@components/microkit/inset-circle-button.tsx"
    }
  ],
  "docs": "Live preview and the CSS, JavaScript and Tailwind variants: https://microkit.co/components/inset-circle-button",
  "categories": [
    "button",
    "hover"
  ],
  "type": "registry:component"
}