{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "avatar-group-mask-bottom-demo",
  "type": "registry:ui",
  "title": "Avatar Group Mask Bottom Demo",
  "description": "Demo showing an animated avatar group mask with bottom translation.",
  "registryDependencies": [
    "https://animate-ui.com/r/avatar-group-mask"
  ],
  "files": [
    {
      "path": "registry/demo/components/avatar-group-mask-bottom/index.tsx",
      "content": "import {\n  Avatar,\n  AvatarFallback,\n  AvatarImage,\n} from '@/components/ui/avatar';\nimport {\n  AvatarGroup,\n  AvatarGroupTooltip,\n} from '@/components/animate-ui/components/avatar-group-mask';\n\nconst AVATARS = [\n  {\n    src: 'https://pbs.twimg.com/profile_images/1909615404789506048/MTqvRsjo_400x400.jpg',\n    fallback: 'SK',\n    tooltip: 'Skyleen',\n  },\n  {\n    src: 'https://pbs.twimg.com/profile_images/1593304942210478080/TUYae5z7_400x400.jpg',\n    fallback: 'CN',\n    tooltip: 'Shadcn',\n  },\n  {\n    src: 'https://pbs.twimg.com/profile_images/1677042510839857154/Kq4tpySA_400x400.jpg',\n    fallback: 'AW',\n    tooltip: 'Adam Wathan',\n  },\n  {\n    src: 'https://pbs.twimg.com/profile_images/1783856060249595904/8TfcCN0r_400x400.jpg',\n    fallback: 'GR',\n    tooltip: 'Guillermo Rauch',\n  },\n  {\n    src: 'https://pbs.twimg.com/profile_images/1534700564810018816/anAuSfkp_400x400.jpg',\n    fallback: 'JH',\n    tooltip: 'Jhey',\n  },\n];\n\nexport const AvatarGroupMaskBottomDemo = () => {\n  return (\n    <div className=\"bg-gradient-to-r from-indigo-500 from-10% via-sky-500 via-30% to-emerald-500 to-90% p-0.5 rounded-full\">\n      <div className=\"bg-gradient-to-r from-indigo-100 dark:from-indigo-950 from-10% via-sky-100 dark:via-sky-950 via-30% to-emerald-100 dark:to-emerald-950 to-90% p-1.5 rounded-full\">\n        <AvatarGroup\n          invertOverlap\n          align=\"start\"\n          translate={50}\n          tooltipProps={{ side: 'bottom', sideOffset: 12 }}\n        >\n          {AVATARS.map((avatar, index) => (\n            <Avatar key={index}>\n              <AvatarImage src={avatar.src} />\n              <AvatarFallback>{avatar.fallback}</AvatarFallback>\n              <AvatarGroupTooltip>\n                <p>{avatar.tooltip}</p>\n              </AvatarGroupTooltip>\n            </Avatar>\n          ))}\n        </AvatarGroup>\n      </div>\n    </div>\n  );\n};\n",
      "type": "registry:ui",
      "target": "components/animate-ui/demo/components/avatar-group-mask-bottom.tsx"
    }
  ]
}