@arolariu/components
Version:
🎨 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! ⚡
213 lines (212 loc) • 10.3 kB
JavaScript
"use client";
;
var __webpack_require__ = {};
(()=>{
__webpack_require__.d = (exports1, definition)=>{
for(var key in definition)if (__webpack_require__.o(definition, key) && !__webpack_require__.o(exports1, key)) Object.defineProperty(exports1, key, {
enumerable: true,
get: definition[key]
});
};
})();
(()=>{
__webpack_require__.o = (obj, prop)=>Object.prototype.hasOwnProperty.call(obj, prop);
})();
(()=>{
__webpack_require__.r = (exports1)=>{
if ('undefined' != typeof Symbol && Symbol.toStringTag) Object.defineProperty(exports1, Symbol.toStringTag, {
value: 'Module'
});
Object.defineProperty(exports1, '__esModule', {
value: true
});
};
})();
var __webpack_exports__ = {};
__webpack_require__.r(__webpack_exports__);
__webpack_require__.d(__webpack_exports__, {
BubbleBackground: ()=>BubbleBackground
});
const jsx_runtime_namespaceObject = require("react/jsx-runtime");
const external_react_namespaceObject = require("react");
const react_namespaceObject = require("motion/react");
const utils_cjs_namespaceObject = require("../../lib/utils.cjs");
const BubbleBackground = /*#__PURE__*/ external_react_namespaceObject.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 = external_react_namespaceObject.useRef(null);
external_react_namespaceObject.useImperativeHandle(ref, ()=>containerRef.current);
const mouseX = (0, react_namespaceObject.useMotionValue)(0);
const mouseY = (0, react_namespaceObject.useMotionValue)(0);
const springX = (0, react_namespaceObject.useSpring)(mouseX, transition);
const springY = (0, react_namespaceObject.useSpring)(mouseY, transition);
external_react_namespaceObject.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, jsx_runtime_namespaceObject.jsxs)("div", {
ref: containerRef,
className: (0, utils_cjs_namespaceObject.cn)("relative size-full overflow-hidden bg-gradient-to-br from-violet-900 to-blue-900", className),
...props,
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.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, jsx_runtime_namespaceObject.jsx)("svg", {
xmlns: "http://www.w3.org/2000/svg",
className: "absolute top-0 left-0 w-0 h-0",
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("defs", {
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("filter", {
id: "goo",
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: "10",
result: "blur"
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.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, jsx_runtime_namespaceObject.jsx)("feBlend", {
in: "SourceGraphic",
in2: "goo"
})
]
})
})
}),
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)("div", {
className: "absolute inset-0",
style: {
filter: "url(#goo) blur(40px)"
},
children: [
/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.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, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.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: "reverse"
},
children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.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, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.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, jsx_runtime_namespaceObject.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, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.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, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.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, jsx_runtime_namespaceObject.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, jsx_runtime_namespaceObject.jsx)(react_namespaceObject.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";
exports.BubbleBackground = __webpack_exports__.BubbleBackground;
for(var __webpack_i__ in __webpack_exports__)if (-1 === [
"BubbleBackground"
].indexOf(__webpack_i__)) exports[__webpack_i__] = __webpack_exports__[__webpack_i__];
Object.defineProperty(exports, '__esModule', {
value: true
});
//# sourceMappingURL=bubble-background.cjs.map