{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "dithering-frame-card",
  "title": "Dithering Frame Card",
  "description": "A card set in a thick frame of animated dithering, like a bezel around the content.",
  "dependencies": [
    "@paper-design/shaders-react"
  ],
  "files": [
    {
      "path": "registry/shaders/dithering-frame-card/dithering-frame-card.tsx",
      "content": "import { Dithering, type DitheringProps } from \"@paper-design/shaders-react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype DitheringFrameCardProps = React.ComponentProps<\"div\"> & {\n  eyebrow?: string\n  title?: string\n  description?: string\n  action?: { label: string; href: string }\n  /** Width of the dithered frame around the card, in px. */\n  frame?: number\n  colorBack?: string\n  colorFront?: string\n  shape?: DitheringProps[\"shape\"]\n  type?: DitheringProps[\"type\"]\n  /** Size of a dither pixel. */\n  size?: number\n  speed?: number\n}\n\nfunction DitheringFrameCard({\n  eyebrow = \"New in 2.0\",\n  title = \"Realtime collaboration\",\n  description = \"See who's editing, follow their cursor and leave comments right where the work happens.\",\n  action = { label: \"Read the announcement\", href: \"#\" },\n  frame = 12,\n  colorBack = \"#0a0a0a\",\n  colorFront = \"#ff5f1f\",\n  shape = \"warp\",\n  type = \"4x4\",\n  size = 2,\n  speed = 0.6,\n  className,\n  style,\n  children,\n  ...props\n}: DitheringFrameCardProps) {\n  return (\n    <div\n      data-slot=\"dithering-frame-card\"\n      className={cn(\"relative isolate w-full max-w-sm\", className)}\n      // The frame is just padding, so the shader shows through around the card.\n      style={{ padding: frame, backgroundColor: colorBack, ...style }}\n      {...props}\n    >\n      <Dithering\n        aria-hidden\n        className=\"absolute inset-0 -z-10 size-full\"\n        colorBack={colorBack}\n        colorFront={colorFront}\n        shape={shape}\n        type={type}\n        size={size}\n        scale={0.6}\n        speed={speed}\n      />\n      <div className=\"flex h-full flex-col gap-4 bg-card p-6 text-card-foreground\">\n        {children ?? (\n          <>\n            <span className=\"font-mono text-[10px] tracking-widest text-muted-foreground uppercase\">\n              {eyebrow}\n            </span>\n            <div className=\"flex flex-col gap-2\">\n              <h3 className=\"font-heading text-xl leading-tight\">{title}</h3>\n              <p className=\"text-sm text-muted-foreground\">{description}</p>\n            </div>\n            <a\n              href={action.href}\n              className=\"mt-2 w-fit text-sm font-medium underline-offset-4 hover:underline\"\n            >\n              {action.label} →\n            </a>\n          </>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport { DitheringFrameCard }\n",
      "type": "registry:component"
    }
  ],
  "categories": [
    "components",
    "cards"
  ],
  "type": "registry:component"
}