@arolariu/components/dist/cjs/components/ui/bubble-background.cjs.map

🎨 60+ beautiful, accessible React components built on Radix UI. TypeScript-first, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡

{"version":3,"file":"components\\ui\\bubble-background.cjs","sources":["webpack://@arolariu/components/webpack/runtime/define_property_getters","webpack://@arolariu/components/webpack/runtime/has_own_property","webpack://@arolariu/components/webpack/runtime/make_namespace_object","webpack://@arolariu/components/./src/components/ui/bubble-background.tsx"],"sourcesContent":["__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n        if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n            Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n        }\n    }\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// define __esModule on exports\n__webpack_require__.r = (exports) => {\n\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n\t}\n\tObject.defineProperty(exports, '__esModule', { value: true });\n};","\r\n\r\nimport * as React from \"react\";\r\nimport {\r\n  motion,\r\n  type SpringOptions,\r\n  Transition,\r\n  useMotionValue,\r\n  useSpring,\r\n} from \"motion/react\";\r\n\r\nimport { cn } from \"@/lib/utils\";\r\n\r\ninterface BubbleBackgroundProps extends React.HTMLAttributes<HTMLDivElement> {\r\n  interactive?: boolean;\r\n  transition?: SpringOptions;\r\n  colors?: {\r\n    first: string;\r\n    second: string;\r\n    third: string;\r\n    fourth: string;\r\n    fifth: string;\r\n    sixth: string;\r\n  };\r\n}\r\n\r\nconst BubbleBackground = React.forwardRef<\r\n  HTMLDivElement,\r\n  BubbleBackgroundProps\r\n>(\r\n  (\r\n    {\r\n      className,\r\n      children,\r\n      interactive = false,\r\n      transition = { stiffness: 100, damping: 20 },\r\n      colors = {\r\n        first: \"18,113,255\",\r\n        second: \"221,74,255\",\r\n        third: \"0,220,255\",\r\n        fourth: \"200,50,50\",\r\n        fifth: \"180,180,50\",\r\n        sixth: \"140,100,255\",\r\n      },\r\n      ...props\r\n    },\r\n    ref,\r\n  ) => {\r\n    const containerRef = React.useRef<HTMLDivElement>(null);\r\n    React.useImperativeHandle(\r\n      ref,\r\n      () => containerRef.current as HTMLDivElement,\r\n    );\r\n\r\n    const mouseX = useMotionValue(0);\r\n    const mouseY = useMotionValue(0);\r\n    const springX = useSpring(mouseX, transition);\r\n    const springY = useSpring(mouseY, transition);\r\n\r\n    React.useEffect(() => {\r\n      if (!interactive) return;\r\n\r\n      const currentContainer = containerRef.current;\r\n      if (!currentContainer) return;\r\n\r\n      const handleMouseMove = (e: MouseEvent) => {\r\n        const rect = currentContainer.getBoundingClientRect();\r\n        const centerX = rect.left + rect.width / 2;\r\n        const centerY = rect.top + rect.height / 2;\r\n        mouseX.set(e.clientX - centerX);\r\n        mouseY.set(e.clientY - centerY);\r\n      };\r\n\r\n      currentContainer?.addEventListener(\"mousemove\", handleMouseMove);\r\n      return () =>\r\n        currentContainer?.removeEventListener(\"mousemove\", handleMouseMove);\r\n    }, [interactive, mouseX, mouseY]);\r\n\r\n    return (\r\n      <div\r\n        ref={containerRef}\r\n        className={cn(\r\n          \"relative size-full overflow-hidden bg-gradient-to-br from-violet-900 to-blue-900\",\r\n          className,\r\n        )}\r\n        {...props}\r\n      >\r\n        <style>\r\n          {`\r\n            :root {\r\n              --first-color: ${colors.first};\r\n              --second-color: ${colors.second};\r\n              --third-color: ${colors.third};\r\n              --fourth-color: ${colors.fourth};\r\n              --fifth-color: ${colors.fifth};\r\n              --sixth-color: ${colors.sixth};\r\n            }\r\n          `}\r\n        </style>\r\n\r\n        <svg\r\n          xmlns=\"http://www.w3.org/2000/svg\"\r\n          className=\"absolute top-0 left-0 w-0 h-0\"\r\n        >\r\n          <defs>\r\n            <filter id=\"goo\">\r\n              <feGaussianBlur\r\n                in=\"SourceGraphic\"\r\n                stdDeviation=\"10\"\r\n                result=\"blur\"\r\n              />\r\n              <feColorMatrix\r\n                in=\"blur\"\r\n                mode=\"matrix\"\r\n                values=\"1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 18 -8\"\r\n                result=\"goo\"\r\n              />\r\n              <feBlend in=\"SourceGraphic\" in2=\"goo\" />\r\n            </filter>\r\n          </defs>\r\n        </svg>\r\n\r\n        <div\r\n          className=\"absolute inset-0\"\r\n          style={{ filter: \"url(#goo) blur(40px)\" }}\r\n        >\r\n          <motion.div\r\n            className=\"absolute rounded-full size-[80%] top-[10%] left-[10%] mix-blend-hard-light bg-[radial-gradient(circle_at_center,rgba(var(--first-color),0.8)_0%,rgba(var(--first-color),0)_50%)]\"\r\n            animate={{ y: [-50, 50, -50] }}\r\n            transition={{ duration: 30, ease: \"easeInOut\", repeat: Infinity }}\r\n          />\r\n\r\n          <motion.div\r\n            className=\"absolute inset-0 flex justify-center items-center origin-[calc(50%-400px)]\"\r\n            animate={{ rotate: 360 }}\r\n            transition={\r\n              {\r\n                duration: 20,\r\n                ease: \"linear\",\r\n                repeat: Infinity,\r\n                repeatType: \"reverse\",\r\n              } satisfies Transition\r\n            }\r\n          >\r\n            <div className=\"rounded-full size-[80%] top-[10%] left-[10%] mix-blend-hard-light bg-[radial-gradient(circle_at_center,rgba(var(--second-color),0.8)_0%,rgba(var(--second-color),0)_50%)]\" />\r\n          </motion.div>\r\n\r\n          <motion.div\r\n            className=\"absolute inset-0 flex justify-center items-center origin-[calc(50%+400px)]\"\r\n            animate={{ rotate: 360 }}\r\n            transition={{ duration: 40, ease: \"linear\", repeat: Infinity }}\r\n          >\r\n            <div className=\"absolute rounded-full size-[80%] bg-[radial-gradient(circle_at_center,rgba(var(--third-color),0.8)_0%,rgba(var(--third-color),0)_50%)] mix-blend-hard-light top-[calc(50%+200px)] left-[calc(50%-500px)]\" />\r\n          </motion.div>\r\n\r\n          <motion.div\r\n            className=\"absolute rounded-full size-[80%] top-[10%] left-[10%] mix-blend-hard-light bg-[radial-gradient(circle_at_center,rgba(var(--fourth-color),0.8)_0%,rgba(var(--fourth-color),0)_50%)] opacity-70\"\r\n            animate={{ x: [-50, 50, -50] }}\r\n            transition={{ duration: 40, ease: \"easeInOut\", repeat: Infinity }}\r\n          />\r\n\r\n          <motion.div\r\n            className=\"absolute inset-0 flex justify-center items-center origin-[calc(50%_-_800px)_calc(50%_+_200px)]\"\r\n            animate={{ rotate: 360 }}\r\n            transition={{ duration: 20, ease: \"linear\", repeat: Infinity }}\r\n          >\r\n            <div className=\"absolute rounded-full size-[160%] mix-blend-hard-light bg-[radial-gradient(circle_at_center,rgba(var(--fifth-color),0.8)_0%,rgba(var(--fifth-color),0)_50%)] top-[calc(50%-80%)] left-[calc(50%-80%)]\" />\r\n          </motion.div>\r\n\r\n          {interactive && (\r\n            <motion.div\r\n              className=\"absolute rounded-full size-full mix-blend-hard-light bg-[radial-gradient(circle_at_center,rgba(var(--sixth-color),0.8)_0%,rgba(var(--sixth-color),0)_50%)] opacity-70\"\r\n              style={{\r\n                x: springX,\r\n                y: springY,\r\n              }}\r\n            />\r\n          )}\r\n        </div>\r\n\r\n        {children}\r\n      </div>\r\n    );\r\n  },\r\n);\r\n\r\nBubbleBackground.displayName = \"BubbleBackground\";\r\n\r\nexport { BubbleBackground, type BubbleBackgroundProps };\r\n"],"names":["__webpack_require__","definition","key","Object","obj","prop","Symbol","BubbleBackground","React","className","children","interactive","transition","colors","props","ref","containerRef","mouseX","useMotionValue","mouseY","springX","useSpring","springY","currentContainer","handleMouseMove","e","rect","centerX","centerY","cn","motion","Infinity"],"mappings":"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"}