@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
177 lines (176 loc) • 7.49 kB
JavaScript
"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { motion, useMotionValue, useSpring } from "motion/react";
import { cn } from "../../lib/utilities.js";
import bubble_background_module from "./bubble-background.module.js";
import * as __rspack_external_react from "react";
const BubbleBackground = /*#__PURE__*/ __rspack_external_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 = __rspack_external_react.useRef(null);
__rspack_external_react.useImperativeHandle(ref, ()=>containerRef.current, []);
const mouseX = useMotionValue(0);
const mouseY = useMotionValue(0);
const springX = useSpring(mouseX, transition);
const springY = useSpring(mouseY, transition);
__rspack_external_react.useEffect(()=>{
if (!interactive) return;
const currentContainer = containerRef.current;
if (!currentContainer) return;
const handleMouseMove = (event)=>{
const rect = currentContainer.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
mouseX.set(event.clientX - centerX);
mouseY.set(event.clientY - centerY);
};
currentContainer.addEventListener("mousemove", handleMouseMove);
return ()=>{
currentContainer.removeEventListener("mousemove", handleMouseMove);
};
}, [
interactive,
mouseX,
mouseY
]);
const style = {
"--ac-bubble-first-color": colors.first,
"--ac-bubble-second-color": colors.second,
"--ac-bubble-third-color": colors.third,
"--ac-bubble-fourth-color": colors.fourth,
"--ac-bubble-fifth-color": colors.fifth,
"--ac-bubble-sixth-color": colors.sixth
};
return /*#__PURE__*/ jsxs("div", {
ref: containerRef,
className: cn(bubble_background_module.root, className),
style: style,
...props,
children: [
/*#__PURE__*/ jsx("svg", {
xmlns: "http://www.w3.org/2000/svg",
className: bubble_background_module.hiddenSvg,
"aria-hidden": "true",
children: /*#__PURE__*/ jsx("defs", {
children: /*#__PURE__*/ jsxs("filter", {
id: "goo",
children: [
/*#__PURE__*/ jsx("feGaussianBlur", {
in: "SourceGraphic",
stdDeviation: "10",
result: "blur"
}),
/*#__PURE__*/ 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__*/ jsx("feBlend", {
in: "SourceGraphic",
in2: "goo"
})
]
})
})
}),
/*#__PURE__*/ jsxs("div", {
className: bubble_background_module.filterLayer,
children: [
/*#__PURE__*/ jsx(motion.div, {
className: cn(bubble_background_module.bubble, bubble_background_module.bubbleFirst),
animate: {
y: [
-50,
50,
-50
]
},
transition: {
duration: 30,
ease: "easeInOut",
repeat: 1 / 0
}
}),
/*#__PURE__*/ jsx(motion.div, {
className: cn(bubble_background_module.rotator, bubble_background_module.rotatorSecond),
animate: {
rotate: 360
},
transition: {
duration: 20,
ease: "linear",
repeat: 1 / 0,
repeatType: "reverse"
},
children: /*#__PURE__*/ jsx("div", {
className: cn(bubble_background_module.bubble, bubble_background_module.bubbleSecond)
})
}),
/*#__PURE__*/ jsx(motion.div, {
className: cn(bubble_background_module.rotator, bubble_background_module.rotatorThird),
animate: {
rotate: 360
},
transition: {
duration: 40,
ease: "linear",
repeat: 1 / 0
},
children: /*#__PURE__*/ jsx("div", {
className: cn(bubble_background_module.bubble, bubble_background_module.bubbleThird)
})
}),
/*#__PURE__*/ jsx(motion.div, {
className: cn(bubble_background_module.bubble, bubble_background_module.bubbleFourth),
animate: {
x: [
-50,
50,
-50
]
},
transition: {
duration: 40,
ease: "easeInOut",
repeat: 1 / 0
}
}),
/*#__PURE__*/ jsx(motion.div, {
className: cn(bubble_background_module.rotator, bubble_background_module.rotatorFifth),
animate: {
rotate: 360
},
transition: {
duration: 20,
ease: "linear",
repeat: 1 / 0
},
children: /*#__PURE__*/ jsx("div", {
className: cn(bubble_background_module.bubble, bubble_background_module.bubbleFifth)
})
}),
interactive ? /*#__PURE__*/ jsx(motion.div, {
className: cn(bubble_background_module.bubble, bubble_background_module.bubbleInteractive),
style: {
x: springX,
y: springY
}
}) : null
]
}),
children
]
});
});
BubbleBackground.displayName = "BubbleBackground";
export { BubbleBackground };
//# sourceMappingURL=bubble-background.js.map