{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatars-threed",
  "title": "3D avatars",
  "description": "Styled avatars: the 3D set. 5 decorative avatars variations (CoinAvatar, CardTiltAvatar, LayeredAvatar, ShadowLiftAvatar, CubeAvatar) on the ai2 token system, powered by framer-motion, reduced-motion aware and sized sm to xl. Part of the free styled layer.",
  "dependencies": [
    "motion@^12.42.2"
  ],
  "registryDependencies": [
    "@ai2/tokens"
  ],
  "files": [
    {
      "path": "registry/ai2/styled/avatars-threed.tsx",
      "content": "\"use client\"\n\nimport type * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\n/* 3D avatar family: 5 decorative avatars built on depth and perspective. Initials-based (no external image) - a consumer can put an <img> in place of the initials. Colour comes ONLY from tokens, size = the box scale. transformPerspective provides the 3D. Under reduced-motion the rotation and hover motion stop; the static depth (box-shadow layers) remains. */\n\nexport type StyledSize = \"sm\" | \"md\" | \"lg\" | \"xl\"\n\nconst box: Record<StyledSize, string> = {\n  sm: \"size-8 text-xs\",\n  md: \"size-10 text-sm\",\n  lg: \"size-12 text-base\",\n  xl: \"size-16 text-lg\",\n}\n\nconst face =\n  \"flex size-full items-center justify-center rounded-full bg-secondary font-medium text-secondary-foreground select-none\"\n\ntype Props = React.ComponentProps<\"div\"> & { size?: StyledSize; initials?: string }\n\n/* Coin: a continuously spinning coin (rotateY loop). Static under reduced. */\nexport function CoinAvatar({ className, size = \"md\", initials = \"AI\", ...props }: Props) {\n  const reduce = useReducedMotion()\n  return (\n    <div data-slot=\"styled-avatar\" className={cn(\"relative inline-flex\", box[size], className)} {...props}>\n      <motion.span\n        className={cn(face, \"border-2 border-surface-3\")}\n        style={{ transformPerspective: 600 }}\n        animate={reduce ? undefined : { rotateY: 360 }}\n        transition={reduce ? undefined : { duration: 3.2, ease: \"linear\", repeat: Infinity }}\n      >\n        {initials}\n      </motion.span>\n    </div>\n  )\n}\n\n/* CardTilt: a fixed 3D perspective tilt on hover. */\nexport function CardTiltAvatar({ className, size = \"md\", initials = \"AI\", ...props }: Props) {\n  const reduce = useReducedMotion()\n  return (\n    <div data-slot=\"styled-avatar\" className={cn(\"relative inline-flex\", box[size], className)} {...props}>\n      <motion.span\n        className={cn(face, \"shadow-[0_6px_16px_-8px_color-mix(in_oklab,var(--foreground)_45%,transparent)]\")}\n        style={{ transformPerspective: 500 }}\n        whileHover={reduce ? undefined : { rotateX: 18, rotateY: -18 }}\n        transition={{ type: \"spring\", stiffness: 300, damping: 18 }}\n      >\n        {initials}\n      </motion.span>\n    </div>\n  )\n}\n\n/* Layered: arkada kaydirilmis token katmanlar (statik derinlik). */\nexport function LayeredAvatar({ className, size = \"md\", initials = \"AI\", ...props }: Props) {\n  return (\n    <div data-slot=\"styled-avatar\" className={cn(\"relative inline-flex\", box[size], className)} {...props}>\n      <span aria-hidden=\"true\" className=\"absolute inset-0 translate-x-1.5 translate-y-1.5 rounded-full bg-brand/25\" />\n      <span aria-hidden=\"true\" className=\"absolute inset-0 translate-x-0.5 translate-y-0.5 rounded-full bg-brand/40\" />\n      <span className={cn(face, \"relative\")}>{initials}</span>\n    </div>\n  )\n}\n\n/* ShadowLift: rises on hover and its shadow grows. */\nexport function ShadowLiftAvatar({ className, size = \"md\", initials = \"AI\", ...props }: Props) {\n  const reduce = useReducedMotion()\n  return (\n    <div data-slot=\"styled-avatar\" className={cn(\"group relative inline-flex\", box[size], className)} {...props}>\n      <motion.span\n        className={cn(\n          face,\n          \"shadow-[0_2px_6px_-2px_color-mix(in_oklab,var(--foreground)_35%,transparent)] transition-shadow duration-(--motion-base) group-hover:shadow-[0_14px_28px_-8px_color-mix(in_oklab,var(--foreground)_50%,transparent)]\"\n        )}\n        whileHover={reduce ? undefined : { y: -6 }}\n        transition={{ type: \"spring\", stiffness: 300, damping: 18 }}\n      >\n        {initials}\n      </motion.span>\n    </div>\n  )\n}\n\n/* Cube: box-shadow katmanlariyla ince 3B derinlik (statik). */\nexport function CubeAvatar({ className, size = \"md\", initials = \"AI\", ...props }: Props) {\n  return (\n    <div data-slot=\"styled-avatar\" className={cn(\"relative inline-flex\", box[size], className)} {...props}>\n      <span\n        className={cn(\n          face,\n          \"shadow-[2px_2px_0_color-mix(in_oklab,var(--foreground)_16%,transparent),4px_4px_0_color-mix(in_oklab,var(--foreground)_12%,transparent),6px_6px_0_color-mix(in_oklab,var(--foreground)_8%,transparent)]\"\n        )}\n      >\n        {initials}\n      </span>\n    </div>\n  )\n}\n",
      "type": "registry:component",
      "target": "components/ui/avatars-threed.tsx"
    }
  ],
  "categories": [
    "styled",
    "avatars"
  ],
  "type": "registry:component"
}