{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "doodle-portrait",
  "title": "Doodle portrait",
  "description": "A portrait framed by the original animated doodle in the top left and its rotated copy in the bottom right.",
  "dependencies": [
    "motion"
  ],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/items/doodle-portrait/doodle-portrait.tsx",
      "content": "/* eslint-disable @next/next/no-img-element -- Portable registry component; original artwork is passed as image props. */\n\"use client\";\n\nimport { useReducedMotion, useReducedMotionConfig } from \"motion/react\";\nimport { cn } from \"@/lib/utils\";\n\nexport function DoodlePortrait({ src, alt, doodleSrc, doodleStillSrc, width = 240, height = 300, doodleSize = 200, showDoodles = true, className }: {\n  src: string;\n  alt: string;\n  doodleSrc: string;\n  /** A static frame for reduced motion. Animated decorations are hidden if omitted. */\n  doodleStillSrc?: string;\n  width?: number;\n  height?: number;\n  doodleSize?: number;\n  showDoodles?: boolean;\n  className?: string;\n}) {\n  const preference = useReducedMotion();\n  const configured = useReducedMotionConfig();\n  const reduced = preference || configured;\n  const decoration = reduced ? doodleStillSrc : doodleSrc;\n  return (\n    <div className={cn(\"inline-block max-w-full px-9 py-12\", className)} style={{ width: width + 72 }}>\n      <div className=\"relative w-full\" style={{ aspectRatio: `${width} / ${height}` }}>\n        <img src={src} alt={alt} width={width} height={height} className=\"h-full w-full object-cover\" />\n        {showDoodles && decoration ? <>\n          <picture className={cn(\"pointer-events-none absolute -top-[8%] -left-[30%] max-w-none dark:invert\", !doodleStillSrc && \"motion-reduce:hidden\")} style={{ width: `${doodleSize / width * 100}%` }}>\n            {doodleStillSrc ? <source media=\"(prefers-reduced-motion: reduce)\" srcSet={doodleStillSrc} /> : null}\n            <img src={decoration} alt=\"\" aria-hidden=\"true\" width={doodleSize} height={doodleSize} className=\"block w-full object-contain\" />\n          </picture>\n          <picture className={cn(\"pointer-events-none absolute -right-[30%] -bottom-[8%] max-w-none rotate-180 dark:invert\", !doodleStillSrc && \"motion-reduce:hidden\")} style={{ width: `${doodleSize / width * 100}%` }}>\n            {doodleStillSrc ? <source media=\"(prefers-reduced-motion: reduce)\" srcSet={doodleStillSrc} /> : null}\n            <img src={decoration} alt=\"\" aria-hidden=\"true\" width={doodleSize} height={doodleSize} className=\"block w-full object-contain\" />\n          </picture>\n        </> : null}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "meta": {
    "kind": "widget",
    "whenToUse": "Use for a personal introduction. Supply a portrait and decorative artwork; include a static doodle frame for reduced motion.",
    "origin": {
      "project": "Portfolio",
      "path": "src/app/page.tsx (hero portrait)"
    },
    "credits": []
  },
  "type": "registry:component"
}