@arolariu/components
Version:
A collection of reusable components for React applications, built as ESM & CJS modules with tree shake, minify and bundler optimizations enabled, for the lowest bundle size (import cost)! 😍
180 lines (179 loc) • 10.1 kB
JavaScript
"use client";
import * as __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__ from "react/jsx-runtime";
import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
import * as __WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__ from "motion/react";
import * as __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__ from "../../lib/utils.js";
const BubbleBackground = /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.forwardRef(({ className, children, interactive = false, transition = {
stiffness: 100,
damping: 20
}, colors = {
first: "18,113,255",
second: "221,74,255",
third: "0,220,255",
fourth: "200,50,50",
fifth: "180,180,50",
sixth: "140,100,255"
}, ...props }, ref)=>{
const containerRef = __WEBPACK_EXTERNAL_MODULE_react__.useRef(null);
__WEBPACK_EXTERNAL_MODULE_react__.useImperativeHandle(ref, ()=>containerRef.current);
const mouseX = (0, __WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.useMotionValue)(0);
const mouseY = (0, __WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.useMotionValue)(0);
const springX = (0, __WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.useSpring)(mouseX, transition);
const springY = (0, __WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.useSpring)(mouseY, transition);
__WEBPACK_EXTERNAL_MODULE_react__.useEffect(()=>{
if (!interactive) return;
const currentContainer = containerRef.current;
if (!currentContainer) return;
const handleMouseMove = (e)=>{
const rect = currentContainer.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
mouseX.set(e.clientX - centerX);
mouseY.set(e.clientY - centerY);
};
currentContainer?.addEventListener("mousemove", handleMouseMove);
return ()=>currentContainer?.removeEventListener("mousemove", handleMouseMove);
}, [
interactive,
mouseX,
mouseY
]);
return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
ref: containerRef,
className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("relative size-full overflow-hidden bg-gradient-to-br from-violet-900 to-blue-900", className),
...props,
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("style", {
children: `
:root {
--first-color: ${colors.first};
--second-color: ${colors.second};
--third-color: ${colors.third};
--fourth-color: ${colors.fourth};
--fifth-color: ${colors.fifth};
--sixth-color: ${colors.sixth};
}
`
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
className: "absolute top-0 left-0 w-0 h-0",
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("defs", {
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("filter", {
id: "goo",
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: "10",
result: "blur"
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("feColorMatrix", {
in: "blur",
mode: "matrix",
values: "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -8",
result: "goo"
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("feBlend", {
in: "SourceGraphic",
in2: "goo"
})
]
})
})
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
className: "absolute inset-0",
style: {
filter: "url(#goo) blur(40px)"
},
children: [
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.motion.div, {
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%)]",
animate: {
y: [
-50,
50,
-50
]
},
transition: {
duration: 30,
ease: "easeInOut",
repeat: 1 / 0
}
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.motion.div, {
className: "absolute inset-0 flex justify-center items-center origin-[calc(50%-400px)]",
animate: {
rotate: 360
},
transition: {
duration: 20,
ease: "linear",
repeat: 1 / 0,
repeatType: "loop",
reverse: true
},
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("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%)]"
})
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.motion.div, {
className: "absolute inset-0 flex justify-center items-center origin-[calc(50%+400px)]",
animate: {
rotate: 360
},
transition: {
duration: 40,
ease: "linear",
repeat: 1 / 0
},
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("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)]"
})
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.motion.div, {
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",
animate: {
x: [
-50,
50,
-50
]
},
transition: {
duration: 40,
ease: "easeInOut",
repeat: 1 / 0
}
}),
/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.motion.div, {
className: "absolute inset-0 flex justify-center items-center origin-[calc(50%_-_800px)_calc(50%_+_200px)]",
animate: {
rotate: 360
},
transition: {
duration: 20,
ease: "linear",
repeat: 1 / 0
},
children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("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%)]"
})
}),
interactive && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_motion_react_9decfa63__.motion.div, {
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",
style: {
x: springX,
y: springY
}
})
]
}),
children
]
});
});
BubbleBackground.displayName = "BubbleBackground";
export { BubbleBackground };
//# sourceMappingURL=bubble-background.js.map