@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! ⚡
106 lines (105 loc) • 3.95 kB
JavaScript
"use client";
import { jsx, jsxs } from "react/jsx-runtime";
import { motion } from "motion/react";
import react, { useEffect, useId, useRef, useState } from "react";
import { cn } from "../../lib/utilities.js";
import dot_background_module from "./dot-background.module.js";
const DotBackground = /*#__PURE__*/ react.forwardRef(({ width = 16, height = 16, x = 0, y = 0, cx = 1, cy = 1, cr = 1, className, glow = false, ...props }, ref)=>{
const id = useId();
const containerRef = useRef(null);
const [dimensions, setDimensions] = useState({
width: 0,
height: 0
});
const setRefs = react.useCallback((node)=>{
containerRef.current = node;
if ("function" == typeof ref) return void ref(node);
if (ref) ref.current = node;
}, [
ref
]);
useEffect(()=>{
const updateDimensions = ()=>{
if (!containerRef.current) return;
const rect = containerRef.current.getBoundingClientRect();
setDimensions({
width: rect.width,
height: rect.height
});
};
updateDimensions();
globalThis.window.addEventListener("resize", updateDimensions);
return ()=>globalThis.window.removeEventListener("resize", updateDimensions);
}, []);
const totalColumns = Math.ceil(dimensions.width / width);
const dots = Array.from({
length: totalColumns * Math.ceil(dimensions.height / height)
}, (_, index)=>{
const column = index % Math.max(totalColumns, 1);
const row = Math.floor(index / Math.max(totalColumns, 1));
return {
x: x + column * width + cx,
y: y + row * height + cy,
delay: 5 * Math.random(),
duration: 3 * Math.random() + 2
};
});
return /*#__PURE__*/ jsxs("svg", {
ref: setRefs,
"aria-hidden": "true",
className: cn(dot_background_module.root, className),
...props,
children: [
/*#__PURE__*/ jsx("defs", {
children: /*#__PURE__*/ jsxs("radialGradient", {
id: `${id}-gradient`,
children: [
/*#__PURE__*/ jsx("stop", {
offset: "0%",
stopColor: "currentColor",
stopOpacity: "1"
}),
/*#__PURE__*/ jsx("stop", {
offset: "100%",
stopColor: "currentColor",
stopOpacity: "0"
})
]
})
}),
dots.map((dot)=>/*#__PURE__*/ jsx(motion.circle, {
cx: dot.x,
cy: dot.y,
r: cr,
fill: glow ? `url(#${id}-gradient)` : "currentColor",
className: dot_background_module.dot,
initial: glow ? {
opacity: 0.4,
scale: 1
} : {},
animate: glow ? {
opacity: [
0.4,
1,
0.4
],
scale: [
1,
1.5,
1
]
} : {},
transition: glow ? {
duration: dot.duration,
repeat: 1 / 0,
repeatType: "reverse",
delay: dot.delay,
ease: "easeInOut"
} : {}
}, `${dot.x}-${dot.y}`))
]
});
});
DotBackground.displayName = "DotBackground";
export { DotBackground };
//# sourceMappingURL=dot-background.js.map