v12-ui
Version:
A React component library with a focus on utility-first design and accessibility.
146 lines (145 loc) • 4.45 kB
JavaScript
import { jsx as F } from "react/jsx-runtime";
import { forwardRef as O, useRef as b, useState as V, useEffect as j } from "react";
import { cn as P } from "../utils/utils.js";
import { cva as W } from "class-variance-authority";
import { useDataTheme as q } from "../Hooks/useDataTheme.js";
const X = W("overflow-hidden fixed top-0 left-0 pointer-events-none w-full h-screen before:content-[''] before:absolute before:inset-0 before:w-full before:h-full before:bg-black/30", {
variants: {
theme: {
dark: "bg-[#111117]",
light: "bg-[#ddd]",
transparent: "bg-transparent"
}
},
defaultVariants: {
theme: "dark"
}
}), Y = W("absolute inset-0 w-full h-full", {
variants: {
theme: {
dark: "bg-[radial-gradient(circle,_#111117_0%,_rgba(17,17,23,0)_100%)]",
light: "bg-[radial-gradient(circle,_#ddd_0%,_rgba(17,17,23,0)_100%)]",
transparent: "bg-transparent"
}
},
defaultVariants: {
theme: "dark"
}
}), G = O(({
theme: z,
bubbleGradiant1: v = ["#004e92", "#000428"],
bubbleGradiant2: y = ["#00C9FF", "#92FE9D"],
bubbleGradiant3: M = ["#e0f7f4", "#a3e9ff"],
zIndex: C = -9999,
className: H,
...S
}, T) => {
const { theme: R } = q(z), _ = b(null), [x, $] = V({
width: window.innerWidth,
height: window.innerHeight
}), d = b(null), u = b(null);
return j(() => {
const a = _.current, t = a?.getContext("2d");
if (!a || !t) return;
let { width: h, height: o } = x;
h = a.width = a.parentElement?.clientWidth || window.innerWidth, o = a.height = a.parentElement?.clientHeight || window.innerHeight;
const E = [
v,
y,
M
], i = {
colors: [
{ r: 0, g: 201, b: 255, a: 0.7 },
{ r: 0, g: 78, b: 146, a: 0.7 },
{ r: 224, g: 247, b: 244, a: 0.7 }
],
blur: 10,
x: 0,
y: 0
}, B = Array.from({ length: 10 }, () => {
const e = Math.random() * 20 + 50;
return {
x: Math.random() * h,
y: Math.random() * o,
r: 15,
scale: 0,
speed: o / (e * 60),
// speed per frame
duration: e,
colorIndex: Math.floor(Math.random() * E.length)
};
});
function D(e, r, c, m = 0, g, n, l, s, w) {
const f = e.createRadialGradient(r, c, m, g, n, l);
return f.addColorStop(0, s), f.addColorStop(1, w), f;
}
function I(e, r, c, m, g, n, l) {
for (let s = 0; s < 3; s++) {
const w = 0.2 * s, f = 15 * s, L = 4 * s, N = c + L;
n.beginPath(), n.arc(e, r, N, m, g), n.shadowColor = `rgba(
${i.colors[l].r},
${i.colors[l].g},
${i.colors[l].b},
${i.colors[l].a - w})`, n.shadowBlur = i.blur + f, n.shadowOffsetX = i.x, n.shadowOffsetY = i.y, n.fill(), n.closePath();
}
}
function k() {
!t || !h || !o || (t.clearRect(0, 0, h, o), B.forEach((e) => {
e.y -= e.speed, e.scale = Math.max(0, 1 - e.y / o), e.y + e.r < -30 && (e.y = o + Math.random() * 30, e.x = Math.random() * h, e.scale = 0), t.beginPath(), t.arc(e.x, e.y, Math.abs(e.r * e.scale), 0, Math.PI * 2);
const r = E[e.colorIndex];
r && (t.fillStyle = D(
t,
e.x,
e.y,
0,
e.x,
e.y,
e.r,
r[0],
r[1]
), t.fill(), t.closePath(), I(
e.x,
e.y,
Math.abs(e.r * e.scale),
0,
Math.PI * 2,
t,
e.colorIndex
));
}), u.current = requestAnimationFrame(k));
}
k();
const A = () => {
d.current && clearTimeout(d.current), d.current = setTimeout(() => {
$((e) => {
const r = a.width = window.innerWidth, c = a.height = window.innerHeight;
return e.width === r && e.height === c ? e : {
width: r,
height: c
};
});
}, 100);
};
return window.addEventListener("resize", A), () => {
window.removeEventListener("resize", A), u.current && cancelAnimationFrame(u.current), d.current && clearTimeout(d.current);
};
}, [x, v, y, M]), /* @__PURE__ */ F(
"div",
{
ref: T,
style: { zIndex: C },
...S,
className: P(X({ theme: R }), H),
children: /* @__PURE__ */ F(
"canvas",
{
ref: _,
className: P(Y({ theme: R }))
}
)
}
);
});
export {
G as AnimatedBackground
};