{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "bucket",
  "title": "Bucket",
  "description": "An interactive card component that simulates a bucket where chips are tossed and replaced with smooth physics-inspired animations.",
  "dependencies": [
    "motion",
    "@hugeicons/core-free-icons",
    "@hugeicons/react",
    "clsx",
    "tailwind-merge"
  ],
  "files": [
    {
      "path": "registry/default/example/bucket.tsx",
      "content": "\"use client\";\nimport { AnimatePresence, motion } from \"motion/react\";\nimport React, { useEffect, useState } from \"react\";\nimport { Sparkles, ShieldCheck, Zap, Users } from \"lucide-react\";\nimport {\n  SecurityCheckIcon,\n  ZapIcon,\n  UserStoryIcon,\n  SparklesIcon,\n} from \"@hugeicons/core-free-icons\";\nimport { HugeiconsIcon } from \"@hugeicons/react\";\nimport { useIsMobile } from \"@/hooks/use-mobile\";\nconst INITIAL_CHIPS = [\n  {\n    id: 1,\n    title: \"Production Ready\",\n    description: \"Fully type-safe and tested\",\n    icon: SecurityCheckIcon,\n  },\n  {\n    id: 2,\n    title: \"Fluid Motion\",\n    description: \"60fps optimizations built-in\",\n    icon: ZapIcon,\n  },\n  {\n    id: 3,\n    title: \"Accessible\",\n    description: \"Works perfectly for everyone\",\n    icon: UserStoryIcon,\n  },\n  {\n    id: 4,\n    title: \"Modern Design\",\n    description: \"Crafted for high-end feel\",\n    icon: SparklesIcon,\n  },\n];\n\nconst Bucket = () => {\n  const [items, setItems] = useState(INITIAL_CHIPS);\n\n  const isMobile = useIsMobile();\n  useEffect(() => {\n    const interval = setInterval(() => {\n      setItems((prev) => {\n        const [first, ...rest] = prev;\n        return [...rest, first];\n      });\n    }, 2000);\n\n    return () => clearInterval(interval);\n  }, []);\n\n  return (\n    <div className=\"flex flex-col gap-4 items-center justify-center h-fit relative w-full\">\n      <div\n        className=\"relative isolate w-full max-w-[655px]\"\n        style={{ aspectRatio: \"655/352\" }}\n      >\n        <svg\n          width=\"100%\"\n          height=\"100%\"\n          viewBox=\"0 0 655 352\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          className=\"absolute inset-0 z-0\"\n        >\n          <foreignObject\n            x=\"443.561\"\n            y=\"-10.5141\"\n            width=\"211.24\"\n            height=\"166.977\"\n          >\n            <div\n              style={{\n                backdropFilter: \"blur(11.03px)\",\n                clipPath: \"url(#bgblur_0_51_65_clip_path)\",\n                height: \"100%\",\n                width: \"100%\",\n              }}\n            ></div>\n          </foreignObject>\n          <g\n            filter=\"url(#filter1_dddi_51_65)\"\n            data-figma-bg-blur-radius=\"22.0545\"\n          >\n            <path\n              d=\"M535.59 78.7427L487.973 42.8776L558.738 13.9516C562.902 12.2494 564.984 11.3984 567.143 11.5597C569.301 11.7211 571.233 12.8723 575.098 15.1747L590.22 24.1832C603.923 32.347 610.775 36.4289 610.372 42.0779C609.97 47.7269 602.609 50.7964 587.887 56.9354L535.59 78.7427Z\"\n              fill=\"white\"\n              fillOpacity=\"0.42\"\n              shapeRendering=\"crispEdges\"\n            />\n          </g>\n          <foreignObject\n            x=\"-3.43323e-05\"\n            y=\"-10.9516\"\n            width=\"215.96\"\n            height=\"167.786\"\n          >\n            <div\n              style={{\n                backdropFilter: \"blur(11.03px)\",\n                clipPath: \"url(#bgblur_1_51_65_clip_path)\",\n                height: \"100%\",\n                width: \"100%\",\n              }}\n            ></div>\n          </foreignObject>\n          <g\n            filter=\"url(#filter2_dddi_51_65)\"\n            data-figma-bg-blur-radius=\"22.0545\"\n          >\n            <path\n              d=\"M123.116 79.1145L171.548 42.8776L97.2715 12.5164C94.8305 11.5186 93.61 11.0197 92.3446 11.1143C91.0793 11.2089 89.9465 11.8837 87.681 13.2334L56.155 32.0149C48.1832 36.7641 44.1973 39.1386 44.4205 42.4378C44.6438 45.737 48.9132 47.553 57.4522 51.1849L123.116 79.1145Z\"\n              fill=\"white\"\n              fillOpacity=\"0.42\"\n              shapeRendering=\"crispEdges\"\n            />\n          </g>\n          <foreignObject\n            x=\"78.7048\"\n            y=\"20.823\"\n            width=\"501.297\"\n            height=\"136.012\"\n          >\n            <div\n              style={{\n                backdropFilter: \"blur(11.03px)\",\n                clipPath: \"url(#bgblur_2_51_65_clip_path)\",\n                height: \"100%\",\n                width: \"100%\",\n              }}\n            ></div>\n          </foreignObject>\n          <g\n            filter=\"url(#filter3_dddi_51_65)\"\n            data-figma-bg-blur-radius=\"22.0545\"\n          >\n            <path\n              d=\"M487.973 42.8774L171.548 42.8775L123.116 79.1144L535.59 78.7424L487.973 42.8774Z\"\n              fill=\"url(#paint0_linear_51_65)\"\n              fillOpacity=\"0.72\"\n              shapeRendering=\"crispEdges\"\n            />\n          </g>\n          <foreignObject\n            x=\"78.7048\"\n            y=\"20.823\"\n            width=\"137.255\"\n            height=\"136.012\"\n          >\n            <div\n              style={{\n                backdropFilter: \"blur(11.03px)\",\n                clipPath: \"url(#bgblur_3_51_65_clip_path)\",\n                height: \"100%\",\n                width: \"100%\",\n              }}\n            ></div>\n          </foreignObject>\n          <g\n            filter=\"url(#filter4_dddi_51_65)\"\n            data-figma-bg-blur-radius=\"22.0545\"\n          >\n            <path\n              d=\"M171.548 78.9088V42.8774L123.116 79.1144L171.548 78.9088Z\"\n              fill=\"white\"\n              fillOpacity=\"0.32\"\n              shapeRendering=\"crispEdges\"\n            />\n          </g>\n\n          <g\n            filter=\"url(#filter5_dddi_51_65)\"\n            data-figma-bg-blur-radius=\"22.0545\"\n          >\n            <path\n              d=\"M487.973 78.9088V42.8774L536.404 79.1144L487.973 78.9088Z\"\n              fill=\"white\"\n              fillOpacity=\"0.32\"\n              shapeRendering=\"crispEdges\"\n            />\n          </g>\n\n          <defs>\n            <filter\n              id=\"filter0_i_51_65\"\n              x=\"123.766\"\n              y=\"79.1595\"\n              width=\"413\"\n              height=\"275.676\"\n              filterUnits=\"userSpaceOnUse\"\n              colorInterpolationFilters=\"sRGB\"\n            >\n              <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n              <feBlend\n                mode=\"normal\"\n                in=\"SourceGraphic\"\n                in2=\"BackgroundImageFix\"\n                result=\"shape\"\n              />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"5.51362\" />\n              <feGaussianBlur stdDeviation=\"1.83787\" />\n              <feComposite\n                in2=\"hardAlpha\"\n                operator=\"arithmetic\"\n                k2=\"-1\"\n                k3=\"1\"\n              />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.36 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"shape\"\n                result=\"effect1_innerShadow_51_65\"\n              />\n            </filter>\n            <filter\n              id=\"filter1_dddi_51_65\"\n              x=\"443.561\"\n              y=\"-10.5141\"\n              width=\"211.24\"\n              height=\"166.977\"\n              filterUnits=\"userSpaceOnUse\"\n              colorInterpolationFilters=\"sRGB\"\n            >\n              <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"33.3087\" />\n              <feGaussianBlur stdDeviation=\"22.2058\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"BackgroundImageFix\"\n                result=\"effect1_dropShadow_51_65\"\n              />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"1.27808\" />\n              <feGaussianBlur stdDeviation=\"1.27808\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 0.0431373 0 0 0 0 0.12549 0 0 0 0 0.403922 0 0 0 0.14 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"effect1_dropShadow_51_65\"\n                result=\"effect2_dropShadow_51_65\"\n              />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"8.94656\" />\n              <feGaussianBlur stdDeviation=\"4.47328\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 0.0431373 0 0 0 0 0.12549 0 0 0 0 0.403922 0 0 0 0.05 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"effect2_dropShadow_51_65\"\n                result=\"effect3_dropShadow_51_65\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in=\"SourceGraphic\"\n                in2=\"effect3_dropShadow_51_65\"\n                result=\"shape\"\n              />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"5.51362\" />\n              <feGaussianBlur stdDeviation=\"1.83787\" />\n              <feComposite\n                in2=\"hardAlpha\"\n                operator=\"arithmetic\"\n                k2=\"-1\"\n                k3=\"1\"\n              />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.36 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"shape\"\n                result=\"effect4_innerShadow_51_65\"\n              />\n            </filter>\n            <clipPath\n              id=\"bgblur_0_51_65_clip_path\"\n              transform=\"translate(-443.561 10.5141)\"\n            >\n              <path d=\"M535.59 78.7427L487.973 42.8776L558.738 13.9516C562.902 12.2494 564.984 11.3984 567.143 11.5597C569.301 11.7211 571.233 12.8723 575.098 15.1747L590.22 24.1832C603.923 32.347 610.775 36.4289 610.372 42.0779C609.97 47.7269 602.609 50.7964 587.887 56.9354L535.59 78.7427Z\" />\n            </clipPath>\n            <filter\n              id=\"filter2_dddi_51_65\"\n              x=\"-3.43323e-05\"\n              y=\"-10.9516\"\n              width=\"215.96\"\n              height=\"167.786\"\n              filterUnits=\"userSpaceOnUse\"\n              colorInterpolationFilters=\"sRGB\"\n            >\n              <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"33.3087\" />\n              <feGaussianBlur stdDeviation=\"22.2058\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"BackgroundImageFix\"\n                result=\"effect1_dropShadow_51_65\"\n              />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"1.27808\" />\n              <feGaussianBlur stdDeviation=\"1.27808\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 0.0431373 0 0 0 0 0.12549 0 0 0 0 0.403922 0 0 0 0.14 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"effect1_dropShadow_51_65\"\n                result=\"effect2_dropShadow_51_65\"\n              />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"8.94656\" />\n              <feGaussianBlur stdDeviation=\"4.47328\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 0.0431373 0 0 0 0 0.12549 0 0 0 0 0.403922 0 0 0 0.05 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"effect2_dropShadow_51_65\"\n                result=\"effect3_dropShadow_51_65\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in=\"SourceGraphic\"\n                in2=\"effect3_dropShadow_51_65\"\n                result=\"shape\"\n              />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"5.51362\" />\n              <feGaussianBlur stdDeviation=\"1.83787\" />\n              <feComposite\n                in2=\"hardAlpha\"\n                operator=\"arithmetic\"\n                k2=\"-1\"\n                k3=\"1\"\n              />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.36 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"shape\"\n                result=\"effect4_innerShadow_51_65\"\n              />\n            </filter>\n            <clipPath\n              id=\"bgblur_1_51_65_clip_path\"\n              transform=\"translate(3.43323e-05 10.9516)\"\n            >\n              <path d=\"M123.116 79.1145L171.548 42.8776L97.2715 12.5164C94.8305 11.5186 93.61 11.0197 92.3446 11.1143C91.0793 11.2089 89.9465 11.8837 87.681 13.2334L56.155 32.0149C48.1832 36.7641 44.1973 39.1386 44.4205 42.4378C44.6438 45.737 48.9132 47.553 57.4522 51.1849L123.116 79.1145Z\" />\n            </clipPath>\n            <filter\n              id=\"filter3_dddi_51_65\"\n              x=\"78.7048\"\n              y=\"20.823\"\n              width=\"501.297\"\n              height=\"136.012\"\n              filterUnits=\"userSpaceOnUse\"\n              colorInterpolationFilters=\"sRGB\"\n            >\n              <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"33.3087\" />\n              <feGaussianBlur stdDeviation=\"22.2058\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"BackgroundImageFix\"\n                result=\"effect1_dropShadow_51_65\"\n              />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"1.27808\" />\n              <feGaussianBlur stdDeviation=\"1.27808\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 0.0431373 0 0 0 0 0.12549 0 0 0 0 0.403922 0 0 0 0.14 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"effect1_dropShadow_51_65\"\n                result=\"effect2_dropShadow_51_65\"\n              />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"8.94656\" />\n              <feGaussianBlur stdDeviation=\"4.47328\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 0.0431373 0 0 0 0 0.12549 0 0 0 0 0.403922 0 0 0 0.05 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"effect2_dropShadow_51_65\"\n                result=\"effect3_dropShadow_51_65\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in=\"SourceGraphic\"\n                in2=\"effect3_dropShadow_51_65\"\n                result=\"shape\"\n              />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"5.51362\" />\n              <feGaussianBlur stdDeviation=\"1.83787\" />\n              <feComposite\n                in2=\"hardAlpha\"\n                operator=\"arithmetic\"\n                k2=\"-1\"\n                k3=\"1\"\n              />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.36 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"shape\"\n                result=\"effect4_innerShadow_51_65\"\n              />\n            </filter>\n            <clipPath\n              id=\"bgblur_2_51_65_clip_path\"\n              transform=\"translate(-78.7048 -20.823)\"\n            >\n              <path d=\"M487.973 42.8774L171.548 42.8775L123.116 79.1144L535.59 78.7424L487.973 42.8774Z\" />\n            </clipPath>\n            <filter\n              id=\"filter4_dddi_51_65\"\n              x=\"78.7048\"\n              y=\"20.823\"\n              width=\"137.255\"\n              height=\"136.012\"\n              filterUnits=\"userSpaceOnUse\"\n              colorInterpolationFilters=\"sRGB\"\n            >\n              <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"33.3087\" />\n              <feGaussianBlur stdDeviation=\"22.2058\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"BackgroundImageFix\"\n                result=\"effect1_dropShadow_51_65\"\n              />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"1.27808\" />\n              <feGaussianBlur stdDeviation=\"1.27808\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 0.0431373 0 0 0 0 0.12549 0 0 0 0 0.403922 0 0 0 0.14 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"effect1_dropShadow_51_65\"\n                result=\"effect2_dropShadow_51_65\"\n              />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"8.94656\" />\n              <feGaussianBlur stdDeviation=\"4.47328\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 0.0431373 0 0 0 0 0.12549 0 0 0 0 0.403922 0 0 0 0.05 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"effect2_dropShadow_51_65\"\n                result=\"effect3_dropShadow_51_65\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in=\"SourceGraphic\"\n                in2=\"effect3_dropShadow_51_65\"\n                result=\"shape\"\n              />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"5.51362\" />\n              <feGaussianBlur stdDeviation=\"1.83787\" />\n              <feComposite\n                in2=\"hardAlpha\"\n                operator=\"arithmetic\"\n                k2=\"-1\"\n                k3=\"1\"\n              />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.36 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"shape\"\n                result=\"effect4_innerShadow_51_65\"\n              />\n            </filter>\n            <clipPath\n              id=\"bgblur_3_51_65_clip_path\"\n              transform=\"translate(-78.7048 -20.823)\"\n            >\n              <path d=\"M171.548 78.9088V42.8774L123.116 79.1144L171.548 78.9088Z\" />\n            </clipPath>\n            <filter\n              id=\"filter5_dddi_51_65\"\n              x=\"443.561\"\n              y=\"20.823\"\n              width=\"137.255\"\n              height=\"136.012\"\n              filterUnits=\"userSpaceOnUse\"\n              colorInterpolationFilters=\"sRGB\"\n            >\n              <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"33.3087\" />\n              <feGaussianBlur stdDeviation=\"22.2058\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"BackgroundImageFix\"\n                result=\"effect1_dropShadow_51_65\"\n              />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"1.27808\" />\n              <feGaussianBlur stdDeviation=\"1.27808\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 0.0431373 0 0 0 0 0.12549 0 0 0 0 0.403922 0 0 0 0.14 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"effect1_dropShadow_51_65\"\n                result=\"effect2_dropShadow_51_65\"\n              />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"8.94656\" />\n              <feGaussianBlur stdDeviation=\"4.47328\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 0.0431373 0 0 0 0 0.12549 0 0 0 0 0.403922 0 0 0 0.05 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"effect2_dropShadow_51_65\"\n                result=\"effect3_dropShadow_51_65\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in=\"SourceGraphic\"\n                in2=\"effect3_dropShadow_51_65\"\n                result=\"shape\"\n              />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"5.51362\" />\n              <feGaussianBlur stdDeviation=\"1.83787\" />\n              <feComposite\n                in2=\"hardAlpha\"\n                operator=\"arithmetic\"\n                k2=\"-1\"\n                k3=\"1\"\n              />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.36 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"shape\"\n                result=\"effect4_innerShadow_51_65\"\n              />\n            </filter>\n            <filter\n              id=\"filter6_dddi_51_65\"\n              x=\"21.477\"\n              y=\"56.6875\"\n              width=\"612.444\"\n              height=\"212.562\"\n              filterUnits=\"userSpaceOnUse\"\n              colorInterpolationFilters=\"sRGB\"\n            >\n              <feFlood floodOpacity=\"0\" result=\"BackgroundImageFix\" />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"33.3087\" />\n              <feGaussianBlur stdDeviation=\"22.2058\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.03 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"BackgroundImageFix\"\n                result=\"effect1_dropShadow_51_65\"\n              />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"1.27808\" />\n              <feGaussianBlur stdDeviation=\"1.27808\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 0.0431373 0 0 0 0 0.12549 0 0 0 0 0.403922 0 0 0 0.14 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"effect1_dropShadow_51_65\"\n                result=\"effect2_dropShadow_51_65\"\n              />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"8.94656\" />\n              <feGaussianBlur stdDeviation=\"4.47328\" />\n              <feComposite in2=\"hardAlpha\" operator=\"out\" />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 0.0431373 0 0 0 0 0.12549 0 0 0 0 0.403922 0 0 0 0.05 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"effect2_dropShadow_51_65\"\n                result=\"effect3_dropShadow_51_65\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in=\"SourceGraphic\"\n                in2=\"effect3_dropShadow_51_65\"\n                result=\"shape\"\n              />\n              <feColorMatrix\n                in=\"SourceAlpha\"\n                type=\"matrix\"\n                values=\"0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0\"\n                result=\"hardAlpha\"\n              />\n              <feOffset dy=\"5.51362\" />\n              <feGaussianBlur stdDeviation=\"1.83787\" />\n              <feComposite\n                in2=\"hardAlpha\"\n                operator=\"arithmetic\"\n                k2=\"-1\"\n                k3=\"1\"\n              />\n              <feColorMatrix\n                type=\"matrix\"\n                values=\"0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.36 0\"\n              />\n              <feBlend\n                mode=\"normal\"\n                in2=\"shape\"\n                result=\"effect4_innerShadow_51_65\"\n              />\n            </filter>\n            <clipPath id=\"bgblur_5_51_65_clip_path\">\n              <path d=\"M74.6011 164.033L123.116 79.1138L535.59 78.7419L581.532 164.469C588.006 176.55 591.243 182.59 588.568 187.06C585.892 191.529 579.039 191.529 565.333 191.529H90.5591C76.4759 191.529 69.4343 191.529 66.7781 186.953C64.1219 182.376 67.615 176.262 74.6011 164.033Z\" />\n            </clipPath>\n            <clipPath id=\"center_box_clip\">\n              <rect x=\"123.766\" y=\"0\" width=\"413\" height=\"352\" />\n            </clipPath>\n            <linearGradient\n              id=\"paint0_linear_51_65\"\n              x1=\"329.353\"\n              y1=\"42.8774\"\n              x2=\"329.353\"\n              y2=\"79.1144\"\n              gradientUnits=\"userSpaceOnUse\"\n            >\n              <stop stopColor=\"white\" stopOpacity=\"0.4\" />\n              <stop offset=\"1\" stopColor=\"white\" stopOpacity=\"0.2\" />\n            </linearGradient>\n          </defs>\n        </svg>\n\n        <div className=\"absolute inset-0 z-10 flex items-center justify-center pointer-events-none\">\n          <div\n            className=\"relative w-full h-full flex justify-center items-center\"\n            style={{ paddingBottom: \"65%\" }}\n          >\n            <AnimatePresence mode=\"popLayout\">\n              {items.map((chip, index) => {\n                if (index !== 0) return null;\n\n                return (\n                  <motion.div\n                    key={chip.id}\n                    initial={{\n                      y: isMobile ? -70 : -100,\n                      opacity: 0,\n                      scale: 0.8,\n                      transition: {\n                        duration: 2,\n                        delay: 0.5,\n                        ease: [0.455, 0.03, 0.515, 0.955],\n                      },\n                    }}\n                    animate={{ y: 0, opacity: 1, scale: isMobile ? 1 : 1.25 }}\n                    exit={{\n                      y: isMobile ? 100 : 130,\n                      scale: 0.8,\n                      transition: {\n                        duration: 0.8,\n                      },\n                    }}\n                    transition={{\n                      duration: 0.5,\n                      ease: [0.455, 0.03, 0.515, 0.955],\n                    }}\n                    className=\"bg-card border border-border z-10 rounded-full p-2 w-[240px] shadow-sm absolute pointer-events-auto flex items-center gap-2 origin-bottom\"\n                  >\n                    {/* <div className=\"size-8 rounded-full bg-emerald-500 shrink-0\" />\n                    <div className=\"flex flex-col gap-1.5 w-full\">\n                      <div className=\"h-2 w-3/4 bg-muted rounded-full\" />\n                      <div className=\"h-2 w-1/2 bg-muted rounded-full\" />\n                    </div> */}\n                    <div className=\"flex size-10 shrink-0 items-center justify-center rounded-full bg-muted-foreground/10 text-muted-foreground\">\n                      <HugeiconsIcon icon={chip.icon} className=\"size-5\" />\n                    </div>\n                    <div className=\"flex flex-col gap-0.5\">\n                      <span className=\"text-sm font-medium text-foreground leading-none\">\n                        {chip.title}\n                      </span>\n                      <span className=\"text-xs text-muted-foreground \">\n                        {chip.description}\n                      </span>\n                    </div>\n                  </motion.div>\n                );\n              })}\n            </AnimatePresence>\n          </div>\n        </div>\n\n        <svg\n          width=\"100%\"\n          height=\"100%\"\n          viewBox=\"0 0 655 352\"\n          fill=\"none\"\n          xmlns=\"http://www.w3.org/2000/svg\"\n          className=\"absolute inset-0 z-20 pointer-events-none overflow-hidden\"\n          style={{\n            transform: \"translate3d(0, 0, 0)\",\n          }}\n        >\n          {/* Top Layer Part 1: filter0 */}\n          <g filter=\"url(#filter0_i_51_65)\">\n            <path\n              d=\"M512.766 79.1595L147.766 79.1624C136.453 79.1625 130.796 79.1626 127.281 82.6773C123.766 86.192 123.766 91.8488 123.766 103.162V327.159C123.766 338.473 123.766 344.13 127.281 347.645C130.796 351.159 136.453 351.159 147.766 351.159H512.766C524.08 351.159 529.737 351.159 533.252 347.645C536.766 344.13 536.766 338.473 536.766 327.159V103.159C536.766 91.8457 536.766 86.1888 533.252 82.6741C529.737 79.1594 524.08 79.1594 512.766 79.1595Z\"\n              className=\"fill-card\"\n            />\n          </g>\n\n          {/* Top Layer Part 2: filter6 Blur (Clipped to Box Width) */}\n          <g clipPath=\"url(#center_box_clip)\">\n            <foreignObject x=\"0\" y=\"0\" width=\"655\" height=\"352\">\n              <div\n                style={{\n                  backdropFilter: \"blur(60.03px)\",\n                  WebkitBackdropFilter: \"blur(60.03px)\",\n                  height: \"100%\",\n                  width: \"100%\",\n                  background: \"rgba(255, 255, 255, 0.01)\",\n                  clipPath:\n                    \"path('M74.6011 164.033L123.116 79.1138L535.59 78.7419L581.532 164.469C588.006 176.55 591.243 182.59 588.568 187.06C585.892 191.529 579.039 191.529 565.333 191.529H90.5591C76.4759 191.529 69.4343 191.529 66.7781 186.953C64.1219 182.376 67.615 176.262 74.6011 164.033Z')\",\n                }}\n              ></div>\n            </foreignObject>\n          </g>\n\n          {/* Top Layer Part 2: filter6 */}\n          <g\n            filter=\"url(#filter6_dddi_51_65)\"\n            data-figma-bg-blur-radius=\"22.0545\"\n          >\n            <path\n              d=\"M74.6011 164.033L123.116 79.1138L535.59 78.7419L581.532 164.469C588.006 176.55 591.243 182.59 588.568 187.06C585.892 191.529 579.039 191.529 565.333 191.529H90.5591C76.4759 191.529 69.4343 191.529 66.7781 186.953C64.1219 182.376 67.615 176.262 74.6011 164.033Z\"\n              fill=\"white\"\n              fillOpacity=\"0.42\"\n              shapeRendering=\"crispEdges\"\n            />\n          </g>\n        </svg>\n      </div>\n    </div>\n  );\n};\n\nexport default Bucket;\n",
      "type": "registry:component"
    },
    {
      "path": "hooks/use-mobile.ts",
      "content": "import * as React from \"react\";\n\nconst MOBILE_BREAKPOINT = 768;\n\nexport function useIsMobile() {\n  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(\n    undefined\n  );\n\n  React.useEffect(() => {\n    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);\n    const onChange = () => {\n      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    };\n    mql.addEventListener(\"change\", onChange);\n    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);\n    return () => mql.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return !!isMobile;\n}\n",
      "type": "registry:hook"
    }
  ],
  "type": "registry:component"
}