wavyjs
Version:
Reusable React + TypeScript component and hooks library with Tailwind, Framer Motion, and GSAP.
1,567 lines • 171 kB
JavaScript
import W, { useState as R, useEffect as B, useRef as b, useCallback as H } from "react";
import { jsx as e, jsxs as n } from "react/jsx-runtime";
import $ from "gsap";
import { motion as N } from "framer-motion";
const ie = () => {
const [i, t] = R({ x: 0, y: 0 });
return B(() => {
const l = (o) => {
t({ x: o.clientX, y: o.clientY });
};
return window.addEventListener("mousemove", l), () => {
window.removeEventListener("mousemove", l);
};
}, []), i;
}, ne = (i) => {
const [t, l] = R(null), [o, c] = R(!0), [d, s] = R(null);
return B(() => {
let u = !1;
async function h() {
try {
c(!0);
const a = await fetch(i);
if (!a.ok) throw new Error("Failed to fetch");
const g = await a.json();
u || l(g);
} catch (a) {
u || s(a);
} finally {
u || c(!1);
}
}
return h(), () => {
u = !0;
};
}, [i]), { data: t, loading: o, error: d };
}, ae = () => {
const [i, t] = R(!1);
return [i, {
onMouseEnter: () => t(!0),
onMouseLeave: () => t(!1)
}];
};
function oe({
timeout: i,
onTimeout: t,
warningTime: l = 0,
onWarning: o
}) {
const c = b(null), d = b(null), s = () => {
c.current && clearTimeout(c.current), d.current && clearTimeout(d.current), l > 0 && o && (d.current = setTimeout(o, i - l)), c.current = setTimeout(t, i);
};
B(() => {
const u = ["mousemove", "keydown", "click", "touchstart"], h = () => s();
for (const a of u)
window.addEventListener(a, h);
return s(), () => {
for (const a of u)
window.removeEventListener(a, h);
c.current && clearTimeout(c.current), d.current && clearTimeout(d.current);
};
}, [i, t, l, o]);
}
const le = () => {
const i = window.speechSynthesis, t = b(null), l = H((c, d = {}) => {
if (!i) return;
i.cancel();
const s = new SpeechSynthesisUtterance(c);
Object.assign(s, d), i.speak(s), t.current = s;
}, [i]), o = H(() => {
i == null || i.cancel();
}, [i]);
return { speak: l, stop: o };
};
function se(i = !1) {
const [t, l] = R(i), o = H(() => {
l((c) => !c);
}, []);
return [t, o];
}
const E = "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background", D = {
primary: "bg-blue-600 text-white hover:bg-blue-700 focus-visible:ring-blue-400 px-4 py-2",
secondary: "bg-slate-200 text-slate-900 hover:bg-slate-300 focus-visible:ring-slate-400 px-4 py-2",
ghost: "bg-transparent text-slate-900 hover:bg-slate-100 focus-visible:ring-slate-300 px-3 py-2"
}, L = W.forwardRef((i, t) => {
if (i.asMotion) {
const { asMotion: h, className: a = "", variant: g = "primary", children: x, ...M } = i, v = `${E} ${D[g]} ${a}`.trim();
return /* @__PURE__ */ e(
N.button,
{
ref: t,
className: v,
whileTap: { scale: 0.98 },
whileHover: { y: -1 },
...M,
children: x
}
);
}
const { asMotion: l, className: o = "", variant: c = "primary", children: d, ...s } = i, u = `${E} ${D[c]} ${o}`.trim();
return /* @__PURE__ */ e("button", { ref: t, className: u, ...s, children: d });
});
L.displayName = "Button";
const P = () => {
const i = b(null), t = 18, l = 16, o = t * l;
return B(() => {
if (!i.current) return;
const c = $.context(() => {
const d = $.timeline({ repeat: -1, repeatDelay: 0.6 });
d.from(".box", {
scale: 0,
yoyo: !0,
repeat: 1,
ease: "power1.inOut",
stagger: {
amount: 1.5,
grid: [t, l],
axis: "x",
ease: "back.out(1.7)",
from: "center"
}
}), d.to(".box", {
yoyo: !0,
scale: 1,
repeat: 1,
ease: "power1.inOut",
stagger: {
amount: 1.5,
grid: [t, l],
axis: "y",
ease: "back.out(1.7)",
from: "center"
}
});
}, i);
return () => c.revert();
}, [t, l]), /* @__PURE__ */ e(
"div",
{
ref: i,
style: {
width: "100%",
height: "100%",
zIndex: 0,
// keep visible by default
backgroundColor: "black",
overflow: "hidden",
pointerEvents: "none",
userSelect: "none"
},
children: /* @__PURE__ */ e(
"div",
{
style: {
position: "relative",
width: "100%",
height: "100%",
display: "grid",
gridTemplateColumns: `repeat(${t}, minmax(0, 1fr))`,
gridTemplateRows: `repeat(${l}, minmax(0, 1fr))`
},
children: Array.from({ length: o }).map((c, d) => /* @__PURE__ */ e(
"div",
{
className: "box",
style: {
width: 2,
height: 2,
backgroundColor: "rgba(255,255,255,0.5)",
borderRadius: 9999,
justifySelf: "center",
alignSelf: "center"
}
},
d
))
}
)
}
);
};
P.displayName = "FadingBG";
const T = () => {
const [i, t] = R(0), l = b([]);
B(() => {
function d() {
if (!c.current) return;
const { clientWidth: s, clientHeight: u } = c.current, h = 16, a = Math.floor(s / h), g = Math.floor(u / h);
t(a * g);
}
return d(), window.addEventListener("resize", d), () => window.removeEventListener("resize", d);
}, []), B(() => {
if (i > 0) {
const d = setInterval(() => {
const s = Math.floor(Math.random() * i), u = l.current[s];
u && $.fromTo(
u,
{ opacity: 0.2 },
{ opacity: 1, duration: 0.3, yoyo: !0, repeat: 1, ease: "power1.inOut" }
);
}, 100);
return () => clearInterval(d);
}
}, [i]);
const o = () => {
const d = [
"rgba(0, 0, 0, 0.5)",
"rgba(155, 233, 168, 0.5)",
"rgba(64, 196, 99, 0.5)",
"rgba(48, 161, 78, 0.5)",
"rgba(33, 110, 57, 0.5)"
];
return d[Math.floor(Math.random() * d.length)];
}, c = b(null);
return /* @__PURE__ */ n(
"div",
{
ref: c,
style: {
width: "100%",
height: "100%",
backgroundColor: "black",
overflow: "hidden",
position: "relative"
// important so inner grid is relative to parent
},
children: [
/* @__PURE__ */ e(
"div",
{
style: {
position: "absolute",
inset: 0,
background: "radial-gradient(circle at center, transparent 80%, black 100%)",
pointerEvents: "none"
}
}
),
/* @__PURE__ */ e(
"div",
{
style: {
width: "100%",
height: "100%",
display: "grid",
gridTemplateColumns: "repeat(auto-fill, 16px)",
gridAutoRows: "16px",
gap: 8,
padding: 24,
alignContent: "end"
},
children: Array.from({ length: i }).map((d, s) => /* @__PURE__ */ e(
"div",
{
ref: (u) => l.current[s] = u,
style: {
width: 16,
height: 16,
backgroundColor: o(),
borderRadius: 6
}
},
s
))
}
)
]
}
);
};
T.displayName = "GithubBG";
const O = ({
title: i = "WAVY JS",
shadowSize: t = "lg",
shadowColor: l = "white/80",
textColor: o = "black/30",
numberOfRows: c = 6,
baseDuration: d = 12,
className: s = ""
}) => {
const u = b([]), h = (v) => {
if (v.includes("/")) {
const [f, w] = v.split("/");
return { color: f, opacity: parseFloat(w) / 100 };
}
return { color: v, opacity: 1 };
}, a = (v, f) => {
const { color: w, opacity: r } = h(f), p = {
sm: "0 1px 2px 0",
md: "0 4px 6px -1px",
lg: "0 10px 15px -3px",
xl: "0 20px 25px -5px",
"2xl": "0 25px 50px -12px"
}, m = {
black: "0, 0, 0",
white: "255, 255, 255",
red: "239, 68, 68",
blue: "59, 130, 246",
green: "34, 197, 94",
yellow: "234, 179, 8",
purple: "147, 51, 234",
pink: "236, 72, 153",
gray: "107, 114, 128",
indigo: "99, 102, 241",
teal: "20, 184, 166",
orange: "249, 115, 22",
cyan: "6, 182, 212",
lime: "132, 204, 22",
emerald: "16, 185, 129",
amber: "245, 158, 11",
rose: "244, 63, 94",
violet: "139, 92, 246",
fuchsia: "217, 70, 239",
sky: "14, 165, 233",
slate: "100, 116, 139",
zinc: "113, 113, 122",
neutral: "115, 115, 115",
stone: "120, 113, 108"
}, y = p[v];
let C = "0, 0, 0";
if (w.includes("-")) {
const [G, k] = w.split("-"), S = m[G];
S && (C = S);
} else if (m[w])
C = m[w];
else if (w.startsWith("#")) {
const G = w.replace("#", ""), k = parseInt(G.substr(0, 2), 16), S = parseInt(G.substr(2, 2), 16), I = parseInt(G.substr(4, 2), 16);
C = `${k}, ${S}, ${I}`;
} else w.startsWith("rgb") && (C = w.replace("rgb", "").replace("rgba", "").replace("(", "").replace(")", ""));
return `${y} rgba(${C}, ${r})`;
}, g = (v) => {
const { color: f, opacity: w } = h(v), r = {
black: "0, 0, 0",
white: "255, 255, 255",
red: "239, 68, 68",
blue: "59, 130, 246",
green: "34, 197, 94",
yellow: "234, 179, 8",
purple: "147, 51, 234",
pink: "236, 72, 153",
gray: "107, 114, 128",
indigo: "99, 102, 241",
teal: "20, 184, 166",
orange: "249, 115, 22",
cyan: "6, 182, 212",
lime: "132, 204, 22",
emerald: "16, 185, 129",
amber: "245, 158, 11",
rose: "244, 63, 94",
violet: "139, 92, 246",
fuchsia: "217, 70, 239",
sky: "14, 165, 233",
slate: "100, 116, 139",
zinc: "113, 113, 122",
neutral: "115, 115, 115",
stone: "120, 113, 108"
};
if (f.includes("-")) {
const [p, m] = f.split("-"), y = r[p];
if (y)
return `rgba(${y}, ${w})`;
}
if (r[f])
return `rgba(${r[f]}, ${w})`;
if (f.startsWith("#")) {
const p = f.replace("#", ""), m = parseInt(p.substr(0, 2), 16), y = parseInt(p.substr(2, 2), 16), C = parseInt(p.substr(4, 2), 16);
return `rgba(${m}, ${y}, ${C}, ${w})`;
}
return f.startsWith("rgb"), f;
};
B(() => {
u.current.forEach((v, f) => {
if (!v) return;
const w = v.scrollWidth / 2, p = f % 2 === 0 ? d : d * 1.8;
$.fromTo(
v,
{ x: 0 },
{
x: -w,
duration: p,
ease: "linear",
repeat: -1,
modifiers: {
x: (m) => `${(parseFloat(m) % -w - w) % -w}px`
}
}
);
});
}, [d]);
const x = Array.from({ length: 8 }).map((v, f) => /* @__PURE__ */ e(
"h1",
{
className: "text-8xl md:text-9xl font-bold mx-6 md:mx-8 whitespace-nowrap",
style: {
color: g(o),
textShadow: a(t, l)
},
children: i
},
f
)), M = Array.from({ length: c }).map((v, f) => /* @__PURE__ */ n(
"div",
{
ref: (w) => {
w && (u.current[f] = w);
},
className: "flex whitespace-nowrap",
style: { willChange: "transform" },
children: [
x,
x,
" "
]
},
f
));
return /* @__PURE__ */ e(
"div",
{
className: s,
"aria-hidden": !0,
style: {
position: "fixed",
inset: 0,
zIndex: 0,
backgroundColor: "black",
overflow: "hidden",
display: "flex",
flexDirection: "column",
justifyContent: "center",
gap: 24,
pointerEvents: "none",
userSelect: "none"
},
children: M
}
);
};
O.displayName = "NameScroller";
const F = () => (B(() => {
const i = $.utils.random(100, 100), t = $.utils.random(100, 100);
$.to(".green", {
x: i,
y: t,
scale: 1,
opacity: 1,
duration: $.utils.random(2, 10),
// slow speed
repeat: -1,
yoyo: !0,
ease: "power1.inOut"
}), $.to(".red", {
x: i,
y: t,
scale: 1,
opacity: 1,
duration: $.utils.random(2, 8),
// slow speed
repeat: -1,
yoyo: !0,
ease: "power1.inOut"
}), $.to(".pink", {
x: i,
y: t,
scale: 1,
opacity: 1,
duration: $.utils.random(2, 4),
// slow speed
repeat: -1,
yoyo: !0,
ease: "power1.inOut"
});
}, []), /* @__PURE__ */ e(
"div",
{
"aria-hidden": !0,
style: {
height: "100%",
width: "100%",
zIndex: 0,
backgroundColor: "black",
overflow: "hidden",
pointerEvents: "none",
userSelect: "none"
},
children: /* @__PURE__ */ n("div", { style: { position: "relative", width: "100%", height: "100%" }, children: [
/* @__PURE__ */ e(
"div",
{
className: "green",
style: {
position: "absolute",
backgroundColor: "rgba(34, 197, 94, 0.4)",
borderRadius: 9999,
width: 128,
height: 128,
left: "10%",
top: "2%"
}
}
),
/* @__PURE__ */ e(
"div",
{
className: "green",
style: {
position: "absolute",
backgroundColor: "rgba(59, 130, 246, 0.4)",
borderRadius: 9999,
width: 128,
height: 128,
left: "10%",
top: "60%"
}
}
),
/* @__PURE__ */ e(
"div",
{
className: "red",
style: {
position: "absolute",
backgroundColor: "rgba(239, 68, 68, 0.4)",
borderRadius: 9999,
width: 128,
height: 128,
left: "60%",
top: "2%"
}
}
),
/* @__PURE__ */ e(
"div",
{
className: "pink",
style: {
position: "absolute",
backgroundColor: "rgba(236, 72, 153, 0.4)",
borderRadius: 9999,
width: 128,
height: 128,
left: "40%",
top: "50%"
}
}
),
/* @__PURE__ */ e(
"div",
{
className: "pink",
style: {
position: "absolute",
backgroundColor: "rgba(234, 179, 8, 0.4)",
borderRadius: 9999,
width: 128,
height: 128,
left: "80%",
top: "40%"
}
}
),
/* @__PURE__ */ e(
"div",
{
style: {
position: "absolute",
inset: 0,
backgroundColor: "rgba(0,0,0,0.3)",
backdropFilter: "blur(24px)"
}
}
)
] })
}
));
F.displayName = "AnimatedBG";
const j = () => (B(() => {
const i = document.querySelector("#masked-bg-container");
i && ($.fromTo(
"#circle1",
{
y: 50,
x: 0
},
{
y: 200,
x: 100,
duration: 5,
ease: "power2.inOut",
repeat: -1,
yoyo: !0,
onUpdate: function() {
const t = document.querySelector("#circle1");
if (!t) return;
const l = t.getBoundingClientRect(), o = (l.left + l.width / 2) / window.innerWidth * 100, c = (l.top + l.height / 2) / window.innerHeight * 100;
i.style.setProperty("--circle1-x", `${o}%`), i.style.setProperty("--circle1-y", `${c}%`);
}
}
), $.fromTo(
"#circle2",
{
x: 0,
y: -50
},
{
x: 50,
y: 50,
duration: 3,
ease: "power1.inOut",
repeat: -1,
yoyo: !0,
onUpdate: function() {
const t = document.querySelector("#circle2");
if (!t) return;
const l = t.getBoundingClientRect(), o = (l.left + l.width / 2) / window.innerWidth * 100, c = (l.top + l.height / 2) / window.innerHeight * 100;
i.style.setProperty("--circle2-x", `${o}%`), i.style.setProperty("--circle2-y", `${c}%`);
}
}
), $.fromTo(
"#circle3",
{
x: 0,
y: -50
},
{
x: 60,
y: 50,
duration: 3,
ease: "power1.inOut",
repeat: -1,
yoyo: !0,
onUpdate: function() {
const t = document.querySelector("#circle3");
if (!t) return;
const l = t.getBoundingClientRect(), o = (l.left + l.width / 2) / window.innerWidth * 100, c = (l.top + l.height / 2) / window.innerHeight * 100;
i.style.setProperty("--circle3-x", `${o}%`), i.style.setProperty("--circle3-y", `${c}%`);
}
}
), $.fromTo(
"#circle4",
{
x: 0,
y: -50
},
{
x: 50,
y: 50,
duration: 3,
ease: "power1.inOut",
repeat: -1,
yoyo: !0,
onUpdate: function() {
const t = document.querySelector("#circle4");
if (!t) return;
const l = t.getBoundingClientRect(), o = (l.left + l.width / 2) / window.innerWidth * 100, c = (l.top + l.height / 2) / window.innerHeight * 100;
i.style.setProperty("--circle4-x", `${o}%`), i.style.setProperty("--circle4-y", `${c}%`);
}
}
));
}, []), /* @__PURE__ */ n(
"div",
{
id: "masked-bg-container",
"aria-hidden": !0,
style: {
height: "100%",
width: "100%",
zIndex: 0,
overflow: "hidden",
pointerEvents: "none",
userSelect: "none"
},
children: [
/* @__PURE__ */ e("style", { dangerouslySetInnerHTML: {
__html: `
.background {
position: absolute;
inset: 0;
background: black;
}
.background::before {
content: "";
position: absolute;
inset: 0;
background: repeating-linear-gradient(
to right,
rgba(255, 255, 255, 0.1) 0 2px,
transparent 2px 50px
);
-webkit-mask-image:
radial-gradient(circle 400px at 10% 80%, black 40%, transparent 100%),
radial-gradient(circle 250px at 80% 90%, black 40%, transparent 100%),
radial-gradient(circle 400px at 40% 95%, black 40%, transparent 100%),
radial-gradient(circle 250px at 60% 80%, black 40%, transparent 100%);
-webkit-mask-repeat: no-repeat;
-webkit-mask-composite: destination-out;
mask-composite: exclude;
}
.background::after {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(circle 400px at 40% 95%, rgba(152, 8, 255, 0.6) 0%, transparent 100%),
radial-gradient(circle 250px at 60% 80%, rgba(255, 0, 255, 0.6) 0%, transparent 100%);
pointer-events: none;
}
`
} }),
/* @__PURE__ */ n("div", { style: { position: "relative", width: "100%", height: "100%", overflow: "hidden", zIndex: 0 }, children: [
/* @__PURE__ */ e("div", { className: "background" }),
/* @__PURE__ */ e(
"div",
{
id: "circle1",
className: "absolute",
style: {
width: 300,
height: 300,
borderRadius: 9999,
left: "10%",
top: "80%",
transform: "translate(-50%, -50%)",
filter: "blur(20px)"
}
}
),
/* @__PURE__ */ e(
"div",
{
id: "circle2",
className: "absolute",
style: {
width: 300,
height: 300,
borderRadius: 9999,
left: "80%",
top: "90%",
transform: "translate(-50%, -50%)",
filter: "blur(20px)"
}
}
),
/* @__PURE__ */ e(
"div",
{
id: "circle3",
className: "absolute",
style: {
width: 300,
height: 300,
borderRadius: 9999,
left: "40%",
top: "95%",
transform: "translate(-50%, -50%)",
filter: "blur(20px)"
}
}
),
/* @__PURE__ */ e(
"div",
{
id: "circle4",
className: "absolute",
style: {
width: 300,
height: 300,
borderRadius: 9999,
left: "60%",
top: "80%",
transform: "translate(-50%, -50%)",
filter: "blur(20px)"
}
}
),
/* @__PURE__ */ e("div", { style: { position: "absolute", inset: 0 }, children: /* @__PURE__ */ e(
"div",
{
style: {
position: "absolute",
inset: 0,
display: "flex",
WebkitMaskImage: `
radial-gradient(
circle 400px at var(--circle1-x, 20%) var(--circle1-y, 40%),
rgba(75, 0, 130, 0.6) 0%, /* Dark Indigo inside */
rgba(75, 0, 130, 0) 100%
),
radial-gradient(
circle 250px at var(--circle3-x, 40%) var(--circle3-y, 95%),
rgba(128, 0, 128, 0.6) 0%, /* Dark Purple inside */
rgba(128, 0, 128, 0) 100%
),
radial-gradient(
circle 400px at var(--circle2-x, 70%) var(--circle2-y, 50%),
rgba(75, 0, 130, 0.6) 0%, /* Dark Indigo inside */
rgba(75, 0, 130, 0) 100%
),
radial-gradient(
circle 250px at var(--circle4-x, 60%) var(--circle4-y, 80%),
rgba(128, 0, 128, 0.6) 0%, /* Dark Purple inside */
rgba(128, 0, 128, 0) 100%
)
`,
WebkitMaskRepeat: "no-repeat",
maskComposite: "destination-out"
},
children: Array.from({ length: 24 }).map((i, t) => /* @__PURE__ */ e(
"div",
{
style: { flex: 1, backgroundColor: "#3b82f6" }
},
t
))
}
) })
] })
]
}
));
j.displayName = "MaskedBG";
const V = ({
diamondSize: i = 8,
diamondSpacing: t = 60,
rotationSpeed: l = 2,
className: o = ""
}) => {
const c = b(null), d = b(), s = b(0);
return B(() => {
const u = c.current;
if (!u) return;
const h = u.getContext("2d");
if (!h) return;
const a = [
"#ef4444",
"#f97316",
"#eab308",
"#22c55e",
"#06b6d4",
"#3b82f6",
"#8b5cf6",
"#ec4899"
], g = () => {
if (!u.parentElement) return;
const v = u.parentElement.getBoundingClientRect(), f = window.devicePixelRatio || 1;
u.width = v.width * f, u.height = v.height * f, h.setTransform(1, 0, 0, 1, 0, 0), h.scale(f, f), u.style.width = v.width + "px", u.style.height = v.height + "px";
}, x = (v, f, w, r, p) => {
h.save(), h.translate(v, f), h.rotate(r), h.beginPath(), h.moveTo(0, -w), h.lineTo(w, 0), h.lineTo(0, w), h.lineTo(-w, 0), h.closePath(), h.shadowColor = p, h.shadowBlur = 8, h.fillStyle = p, h.fill(), h.restore();
}, M = () => {
if (!u.parentElement) return;
const v = u.parentElement.getBoundingClientRect();
h.clearRect(0, 0, v.width, v.height), s.current += l * 0.02;
const f = Math.ceil(v.width / t) + 1, w = Math.ceil(v.height / t) + 1;
for (let r = 0; r < w; r++)
for (let p = 0; p < f; p++) {
const m = p * t, y = r * t, C = a[(r + p) % a.length];
x(m, y, i, s.current, C);
}
d.current = requestAnimationFrame(M);
};
return g(), M(), window.addEventListener("resize", g), () => {
window.removeEventListener("resize", g), d.current && cancelAnimationFrame(d.current);
};
}, [i, t, l]), /* @__PURE__ */ e(
"canvas",
{
ref: c,
className: `w-full h-full ${o}`,
style: { display: "block", background: "#000000" }
}
);
};
V.displayName = "AnimatedDiamondGrid";
const Z = ({
lineCount: i = 15,
lineSpeed: t = 1,
lineLength: l = 100,
className: o = ""
}) => {
const c = b(null), d = b([]), s = b(), u = [
"#ff0080",
// Hot pink
"#00ff80",
// Neon green
"#0080ff",
// Electric blue
"#ff8000",
// Neon orange
"#8000ff",
// Electric purple
"#00ffff",
// Cyan
"#ffff00",
// Electric yellow
"#ff0040",
// Neon red
"#40ff00",
// Lime green
"#ff4080"
// Pink
];
return B(() => {
const h = c.current;
if (!h) return;
const a = h.getContext("2d");
if (!a) return;
const g = () => {
var r;
const f = (r = h.parentElement) == null ? void 0 : r.getBoundingClientRect();
if (!f) return;
const w = window.devicePixelRatio || 1;
h.width = f.width * w, h.height = f.height * w, a.setTransform(1, 0, 0, 1, 0, 0), a.scale(w, w), h.style.width = f.width + "px", h.style.height = f.height + "px";
}, x = () => {
var w;
d.current = [];
const f = (w = h.parentElement) == null ? void 0 : w.getBoundingClientRect();
if (f)
for (let r = 0; r < i; r++) {
const p = Math.random() * f.width, m = Math.random() * f.height, y = Math.random() * Math.PI * 2, C = Math.cos(y) * t, G = Math.sin(y) * t;
d.current.push({
x: p,
y: m,
dx: C,
dy: G,
color: u[Math.floor(Math.random() * u.length)],
length: l + Math.random() * 50,
opacity: 0.7 + Math.random() * 0.3
});
}
}, M = () => {
var w;
const f = (w = h.parentElement) == null ? void 0 : w.getBoundingClientRect();
f && (a.fillStyle = "#000000", a.fillRect(0, 0, f.width, f.height), d.current.forEach((r) => {
r.x += r.dx, r.y += r.dy, r.x < -r.length && (r.x = f.width + r.length), r.x > f.width + r.length && (r.x = -r.length), r.y < -r.length && (r.y = f.height + r.length), r.y > f.height + r.length && (r.y = -r.length);
const p = r.x + Math.cos(Math.atan2(r.dy, r.dx)) * r.length, m = r.y + Math.sin(Math.atan2(r.dy, r.dx)) * r.length;
a.save(), a.strokeStyle = r.color, a.globalAlpha = r.opacity * 0.1, a.lineWidth = 8, a.shadowColor = r.color, a.shadowBlur = 20, a.beginPath(), a.moveTo(r.x, r.y), a.lineTo(p, m), a.stroke(), a.globalAlpha = r.opacity * 0.3, a.lineWidth = 4, a.shadowBlur = 10, a.beginPath(), a.moveTo(r.x, r.y), a.lineTo(p, m), a.stroke(), a.globalAlpha = r.opacity, a.lineWidth = 2, a.shadowBlur = 5, a.beginPath(), a.moveTo(r.x, r.y), a.lineTo(p, m), a.stroke(), a.globalAlpha = 1, a.lineWidth = 1, a.shadowBlur = 0, a.strokeStyle = "#ffffff", a.beginPath(), a.moveTo(r.x, r.y), a.lineTo(p, m), a.stroke(), a.restore();
}), s.current = requestAnimationFrame(M));
};
g(), x(), M();
const v = () => {
g(), x();
};
return window.addEventListener("resize", v), () => {
window.removeEventListener("resize", v), s.current && cancelAnimationFrame(s.current);
};
}, [i, t, l]), /* @__PURE__ */ e(
"canvas",
{
ref: c,
className: `w-full h-full ${o}`,
style: { display: "block", background: "#000000" }
}
);
};
Z.displayName = "AnimatedNeonLines";
const Y = ({
chevronSize: i = 16,
spacing: t = 60,
strokeWidth: l = 2,
colors: o = [
"#ef4444",
// red-500
"#f97316",
// orange-500
"#eab308",
// yellow-500
"#22c55e",
// green-500
"#06b6d4",
// cyan-500
"#3b82f6",
// blue-500
"#8b5cf6",
// violet-500
"#ec4899"
// pink-500
],
rotationSpeed: c = 2,
className: d = ""
}) => {
const s = b(null), u = b(), h = b([]);
return B(() => {
const a = s.current;
if (!a) return;
const g = a.getContext("2d");
if (!g) return;
const x = () => {
var y;
const w = (y = a.parentElement) == null ? void 0 : y.getBoundingClientRect();
if (!w) return;
const r = window.devicePixelRatio || 1;
a.width = w.width * r, a.height = w.height * r, g.setTransform(1, 0, 0, 1, 0, 0), g.scale(r, r), a.style.width = w.width + "px", a.style.height = w.height + "px", h.current = [];
const p = Math.ceil(w.width / t) + 1, m = Math.ceil(w.height / t) + 1;
for (let C = 0; C < m; C++)
for (let G = 0; G < p; G++)
h.current.push({
x: G * t,
y: C * t,
color: o[Math.floor(Math.random() * o.length)],
rotation: Math.random() * 360
});
}, M = (w, r, p, m, y) => {
g.save(), g.translate(w, r), g.rotate(m * Math.PI / 180), g.strokeStyle = y, g.lineWidth = l, g.lineCap = "round", g.lineJoin = "round", g.beginPath(), g.moveTo(-p / 2, p / 4), g.lineTo(0, -p / 4), g.lineTo(p / 2, p / 4), g.stroke(), g.restore();
}, v = () => {
const w = a.getBoundingClientRect();
g.fillStyle = "#000000", g.fillRect(0, 0, w.width, w.height), h.current.forEach((r) => {
r.rotation += c, r.rotation >= 360 && (r.rotation = 0), M(r.x, r.y, i, r.rotation, r.color);
}), u.current = requestAnimationFrame(v);
};
x(), v();
const f = () => x();
return window.addEventListener("resize", f), () => {
window.removeEventListener("resize", f), u.current && cancelAnimationFrame(u.current);
};
}, [i, t, l, o, c]), /* @__PURE__ */ e(
"canvas",
{
ref: s,
className: d,
style: { display: "block", background: "#000000" }
}
);
};
Y.displayName = "AnimatedChevronGrid";
function ce({
shapeCount: i = 25,
colors: t = ["#3b82f6", "#10b981", "#f59e0b", "#ef4444", "#8b5cf6", "#06b6d4", "#f97316"],
minSize: l = 20,
maxSize: o = 80,
minSpeed: c = 0.3,
maxSpeed: d = 1.2,
backgroundColor: s = "#0f172a"
}) {
const u = b(null), h = b([]), a = b();
return B(() => {
const g = u.current;
if (!g) return;
const x = g.getContext("2d");
if (!x) return;
const M = () => {
const r = window.devicePixelRatio || 1, p = window.innerWidth, m = window.innerHeight;
g.width = p * r, g.height = m * r, x.setTransform(1, 0, 0, 1, 0, 0), x.scale(r, r), g.style.width = p + "px", g.style.height = m + "px";
}, v = () => {
const r = [], p = ["circle", "triangle", "square"];
for (let m = 0; m < i; m++)
r.push({
x: Math.random() * window.innerWidth,
y: Math.random() * window.innerHeight,
size: Math.random() * (o - l) + l,
type: p[Math.floor(Math.random() * p.length)],
color: t[Math.floor(Math.random() * t.length)],
speedX: (Math.random() - 0.5) * (d - c) + c,
speedY: (Math.random() - 0.5) * (d - c) + c,
rotation: Math.random() * Math.PI * 2,
rotationSpeed: (Math.random() - 0.5) * 0.02,
opacity: Math.random() * 0.6 + 0.2
});
h.current = r;
}, f = (r) => {
switch (x.save(), x.globalAlpha = r.opacity, x.fillStyle = r.color, x.translate(r.x, r.y), x.rotate(r.rotation), r.type) {
case "circle":
x.beginPath(), x.arc(0, 0, r.size / 2, 0, Math.PI * 2), x.fill();
break;
case "triangle":
x.beginPath(), x.moveTo(0, -r.size / 2), x.lineTo(-r.size / 2, r.size / 2), x.lineTo(r.size / 2, r.size / 2), x.closePath(), x.fill();
break;
case "square":
x.fillRect(-r.size / 2, -r.size / 2, r.size, r.size);
break;
}
x.restore();
}, w = () => {
x.fillStyle = s, x.fillRect(0, 0, window.innerWidth, window.innerHeight), h.current.forEach((r) => {
r.x += r.speedX, r.y += r.speedY, r.rotation += r.rotationSpeed, r.x > window.innerWidth + r.size && (r.x = -r.size), r.x < -r.size && (r.x = window.innerWidth + r.size), r.y > window.innerHeight + r.size && (r.y = -r.size), r.y < -r.size && (r.y = window.innerHeight + r.size), f(r);
}), a.current = requestAnimationFrame(w);
};
return M(), v(), w(), window.addEventListener("resize", () => {
M(), v();
}), () => {
window.removeEventListener("resize", M), a.current && cancelAnimationFrame(a.current);
};
}, [i, t, l, o, c, d, s]), /* @__PURE__ */ e(
"canvas",
{
ref: u,
className: "fixed inset-0 w-full h-full",
style: { background: s }
}
);
}
function de({
particleCount: i = 50,
primaryColor: t = "#e2e8f0",
secondaryColor: l = "#cbd5e1",
backgroundColor: o = "#f8fafc",
speed: c = 0.5,
opacity: d = 1
}) {
const s = b(null), u = b(), h = b([]);
return B(() => {
const a = s.current;
if (!a) return;
const g = a.getContext("2d");
if (!g) return;
const x = () => {
const r = a.getBoundingClientRect(), p = window.devicePixelRatio || 1;
a.width = r.width * p, a.height = r.height * p, g.resetTransform(), g.scale(p, p), a.style.width = `${r.width}px`, a.style.height = `${r.height}px`;
}, M = () => {
const r = [t, l];
h.current = Array.from({ length: i }, () => ({
x: Math.random() * a.offsetWidth,
y: Math.random() * a.offsetHeight,
vx: (Math.random() - 0.5) * c,
vy: (Math.random() - 0.5) * c,
size: Math.random() * 3 + 1,
color: r[Math.floor(Math.random() * r.length)],
opacity: Math.random() * d + 0.2
}));
}, v = () => {
const r = h.current, p = 120;
for (let m = 0; m < r.length; m++)
for (let y = m + 1; y < r.length; y++) {
const C = r[m].x - r[y].x, G = r[m].y - r[y].y, k = Math.sqrt(C * C + G * G);
if (k < p) {
const S = (1 - k / p) * 0.3;
g.strokeStyle = `rgba(0, 0, 0, ${S})`, g.lineWidth = 0.5, g.beginPath(), g.moveTo(r[m].x, r[m].y), g.lineTo(r[y].x, r[y].y), g.stroke();
}
}
}, f = () => {
g.fillStyle = o, g.fillRect(0, 0, a.offsetWidth, a.offsetHeight), v(), h.current.forEach((r) => {
r.x += r.vx, r.y += r.vy, (r.x <= 0 || r.x >= a.offsetWidth) && (r.vx *= -1), (r.y <= 0 || r.y >= a.offsetHeight) && (r.vy *= -1), r.x = Math.max(0, Math.min(a.offsetWidth, r.x)), r.y = Math.max(0, Math.min(a.offsetHeight, r.y)), g.fillStyle = r.color, g.globalAlpha = r.opacity, g.beginPath(), g.arc(r.x, r.y, r.size, 0, Math.PI * 2), g.fill(), g.globalAlpha = 1;
}), u.current = requestAnimationFrame(f);
};
x(), M(), f();
const w = () => {
x(), M();
};
return window.addEventListener("resize", w), () => {
window.removeEventListener("resize", w), u.current && cancelAnimationFrame(u.current);
};
}, [i, t, l, o, c, d]), /* @__PURE__ */ e("canvas", { ref: s, className: "absolute inset-0 w-full h-full", style: { background: o } });
}
function he({
className: i = "",
colors: t,
angle: l = 45,
duration: o = 14,
opacity: c = 1,
variant: d = "linear",
baseColor: s
}) {
const u = (t && t.length > 0 ? t : ["#3b82f6", "#06b6d4", "#22c55e"]).slice(0, 5), h = d === "radial" ? `radial-gradient(circle at 50% 50%, ${u.join(", ")})` : d === "conic" ? `conic-gradient(from ${l}deg, ${u.join(", ")})` : `linear-gradient(${l}deg, ${u.join(", ")})`, a = {
backgroundColor: s,
backgroundImage: h,
backgroundSize: d === "linear" ? "400% 400%" : "200% 200%",
backgroundPosition: "0% 50%",
opacity: c,
animation: `ag-shift ${Math.max(4, o)}s ease-in-out infinite`
};
return /* @__PURE__ */ e(
"div",
{
"aria-hidden": "true",
className: `pointer-events-none absolute inset-0 -z-10 ${i}`,
style: a,
children: /* @__PURE__ */ e("style", { children: `
@keyframes ag-shift {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@media (prefers-reduced-motion: reduce) {
.animated-gradient-bg {
animation: none !important;
}
}
` })
}
);
}
const q = ({
starSize: i = 18,
spacing: t = 60,
rotationSpeed: l = 1,
colors: o = ["#ffffff", "#facc15", "#60a5fa", "#a78bfa"],
// white, yellow, blue, violet
className: c = ""
}) => {
const d = b(null), s = b(), u = b([]);
return B(() => {
const h = d.current;
if (!h) return;
const a = h.getContext("2d");
if (!a) return;
const g = () => {
var p;
const v = (p = h.parentElement) == null ? void 0 : p.getBoundingClientRect();
if (!v) return;
const f = window.devicePixelRatio || 1;
h.width = v.width * f, h.height = v.height * f, a.setTransform(1, 0, 0, 1, 0, 0), a.scale(f, f), h.style.width = v.width + "px", h.style.height = v.height + "px", u.current = [];
const w = Math.ceil(v.width / t) + 1, r = Math.ceil(v.height / t) + 1;
for (let m = 0; m < r; m++)
for (let y = 0; y < w; y++)
u.current.push({
x: y * t,
y: m * t,
color: o[Math.floor(Math.random() * o.length)],
rotation: Math.random() * 360
});
}, x = (v, f, w, r, p) => {
a.save(), a.translate(v, f), a.rotate(r * Math.PI / 180), a.fillStyle = p, a.font = `${w}px Arial`, a.textAlign = "center", a.textBaseline = "middle", a.fillText("*", 0, 0), a.restore();
}, M = () => {
const v = h.getBoundingClientRect();
a.fillStyle = "#000000", a.fillRect(0, 0, v.width, v.height), u.current.forEach((f) => {
f.rotation += l, f.rotation >= 360 && (f.rotation = 0), x(f.x, f.y, i, f.rotation, f.color);
}), s.current = requestAnimationFrame(M);
};
return g(), M(), window.addEventListener("resize", g), () => {
window.removeEventListener("resize", g), s.current && cancelAnimationFrame(s.current);
};
}, [i, t, o, l]), /* @__PURE__ */ n("div", { className: "relative w-full h-full", children: [
/* @__PURE__ */ e(
"canvas",
{
ref: d,
className: c,
style: { display: "block", width: "100%", height: "100%", background: "#000000" }
}
),
/* @__PURE__ */ e(
"div",
{
className: "absolute inset-0 pointer-events-none",
style: {
background: "radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.6) 90%, rgba(0,0,0,1) 100%)"
}
}
)
] });
};
q.displayName = "AnimatedStarGrid";
const X = ({
plusSize: i = 18,
spacing: t = 60,
rotationSpeed: l = 1,
colors: o = ["#ffffff", "#facc15", "#60a5fa", "#a78bfa"],
// white, yellow, blue, violet
className: c = ""
}) => {
const d = b(null), s = b(), u = b([]);
return B(() => {
const h = d.current;
if (!h) return;
const a = h.getContext("2d");
if (!a) return;
const g = () => {
var p;
const v = (p = h.parentElement) == null ? void 0 : p.getBoundingClientRect();
if (!v) return;
const f = window.devicePixelRatio || 1;
h.width = v.width * f, h.height = v.height * f, a.setTransform(1, 0, 0, 1, 0, 0), a.scale(f, f), h.style.width = v.width + "px", h.style.height = v.height + "px", u.current = [];
const w = Math.ceil(v.width / t) + 1, r = Math.ceil(v.height / t) + 1;
for (let m = 0; m < r; m++)
for (let y = 0; y < w; y++)
u.current.push({
x: y * t,
y: m * t,
color: o[Math.floor(Math.random() * o.length)],
rotation: Math.random() * 360
});
}, x = (v, f, w, r, p) => {
a.save(), a.translate(v, f), a.rotate(r * Math.PI / 180), a.fillStyle = p, a.font = `${w}px Arial`, a.textAlign = "center", a.textBaseline = "middle", a.fillText("+", 0, 0), a.restore();
}, M = () => {
const v = h.getBoundingClientRect();
a.fillStyle = "#000000", a.fillRect(0, 0, v.width, v.height), u.current.forEach((f) => {
f.rotation += l, f.rotation >= 360 && (f.rotation = 0), x(f.x, f.y, i, f.rotation, f.color);
}), s.current = requestAnimationFrame(M);
};
return g(), M(), window.addEventListener("resize", g), () => {
window.removeEventListener("resize", g), s.current && cancelAnimationFrame(s.current);
};
}, [i, t, o, l]), /* @__PURE__ */ n("div", { className: "relative w-full h-full", children: [
/* @__PURE__ */ e(
"canvas",
{
ref: d,
className: c,
style: { display: "block", width: "100%", height: "100%", background: "#000000" }
}
),
/* @__PURE__ */ e(
"div",
{
className: "absolute inset-0 pointer-events-none",
style: {
background: "radial-gradient(circle at center, transparent 40%, rgba(0,0,0,0.6) 90%, rgba(0,0,0,1) 100%)"
}
}
)
] });
};
X.displayName = "AnimatedPlusGrid";
const U = ({
gridSize: i = 20,
strokeWidth: t = 1,
strokeColor: l = "#e5e7eb",
// Tailwind gray-200
backgroundColor: o = "#000000",
// dark bg
vignetteColor: c = "rgba(0,0,0,0.6)",
className: d = "",
speed: s = 30
// scroll speed
}) => {
const u = i / s;
return /* @__PURE__ */ n("div", { className: `absolute inset-0 w-full h-full overflow-hidden ${d}`, children: [
/* @__PURE__ */ e(
"div",
{
className: "absolute inset-0 w-full h-full animate-scroll-smooth",
style: {
backgroundColor: o,
backgroundImage: `
linear-gradient(${l} ${t}px, transparent ${t}px),
linear-gradient(90deg, ${l} ${t}px, transparent ${t}px)
`,
backgroundSize: `${i}px ${i}px`,
backgroundRepeat: "repeat"
}
}
),
/* @__PURE__ */ e(
"div",
{
className: "absolute inset-0 pointer-events-none",
style: {
background: `radial-gradient(circle at center, transparent 40%, ${c} 90%, ${c} 100%)`
}
}
),
/* @__PURE__ */ e("style", { children: `
@keyframes scroll-smooth {
from {
background-position: 0 0, 0 0;
}
to {
background-position: -${i}px 0, -${i}px 0;
}
}
.animate-scroll-smooth {
animation: scroll-smooth ${u}s linear infinite;
will-change: background-position;
}
` })
] });
};
U.displayName = "AnimatedGraphBG";
const ue = ({
size: i = 200,
color: t = "cyan",
className: l
}) => {
const o = b(null);
return B(() => {
o.current && $.to(o.current, {
rotate: 360,
repeat: -1,
duration: 6
});
}, []), /* @__PURE__ */ n(
"svg",
{
ref: o,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 841.9 595.3",
width: i,
height: i,
fill: "none",
preserveAspectRatio: "xMidYMid meet",
className: ["svg", l].filter(Boolean).join(" "),
style: { width: "100%", height: "auto", maxWidth: i },
children: [
/* @__PURE__ */ n(
"g",
{
stroke: t,
strokeWidth: "20",
opacity: "0.5",
filter: "url(#glowSoft)",
children: [
/* @__PURE__ */ e("ellipse", { cx: "420.9", cy: "296.5", rx: "300", ry: "120" }),
/* @__PURE__ */ e(
"ellipse",
{
cx: "420.9",
cy: "296.5",
rx: "300",
ry: "120",
transform: "rotate(60 420.9 296.5)"
}
),
/* @__PURE__ */ e(
"ellipse",
{
cx: "420.9",
cy: "296.5",
rx: "300",
ry: "120",
transform: "rotate(120 420.9 296.5)"
}
)
]
}
),
/* @__PURE__ */ e(
N.circle,
{
r: "14",
fill: t,
filter: "url(#circleGlow)",
animate: { scale: [1, 1.2, 1] },
transition: {
duration: 1.2,
repeat: 1 / 0,
ease: "easeInOut"
},
children: /* @__PURE__ */ e(
"animateMotion",
{
dur: "5s",
repeatCount: "indefinite",
rotate: "auto",
path: "M 120,296.5 A 300,120 0 1,1 721,296.5 A 300,120 0 1,1 120,296.5 Z"
}
)
}
),
/* @__PURE__ */ n("defs", { children: [
/* @__PURE__ */ n("filter", { id: "glowSoft", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
/* @__PURE__ */ e("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "4", result: "blur" }),
/* @__PURE__ */ e(
"feColorMatrix",
{
in: "blur",
type: "matrix",
values: `0 0 0 0 0\r
0 0 0 0 1\r
0 0 0 0 1\r
0 0 0 0.7 0`,
result: "glowColor"
}
),
/* @__PURE__ */ n("feMerge", { children: [
/* @__PURE__ */ e("feMergeNode", { in: "glowColor" }),
/* @__PURE__ */ e("feMergeNode", { in: "SourceGraphic" })
] })
] }),
/* @__PURE__ */ n("filter", { id: "circleGlow", x: "-50%", y: "-50%", width: "300%", height: "300%", children: [
/* @__PURE__ */ e("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "12", result: "blur" }),
/* @__PURE__ */ e(
"feColorMatrix",
{
in: "blur",
type: "matrix",
values: `0 0 0 0 0\r
0 0 0 0 1\r
0 0 0 0 1\r
0 0 0 1 0`,
result: "glowColor"
}
),
/* @__PURE__ */ n("feMerge", { children: [
/* @__PURE__ */ e("feMergeNode", { in: "glowColor" }),
/* @__PURE__ */ e("feMergeNode", { in: "glowColor" }),
/* @__PURE__ */ e("feMergeNode", { in: "glowColor" }),
/* @__PURE__ */ e("feMergeNode", { in: "SourceGraphic" })
] })
] })
] })
]
}
);
}, fe = ({
size: i = 200,
color: t = "#f7df1e",
className: l
}) => {
const o = b(null);
return /* @__PURE__ */ n(
"svg",
{
ref: o,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 630 630",
width: i,
height: i,
preserveAspectRatio: "xMidYMid meet",
className: ["js-svg", l].filter(Boolean).join(" "),
style: { width: "100%", height: "auto", maxWidth: i },
overflow: "visible",
children: [
/* @__PURE__ */ e(
"rect",
{
width: "630",
height: "630",
fill: t,
filter: "url(#glowSoft)",
rx: "30"
}
),
/* @__PURE__ */ e(
"text",
{
x: "50%",
y: "60%",
textAnchor: "middle",
fontSize: "280",
fontWeight: "bold",
fill: "black",
fontFamily: "Arial, sans-serif",
children: "JS"
}
),
/* @__PURE__ */ e(
N.circle,
{
r: "18",
fill: t,
filter: "url(#circleGlow)",
animate: { scale: [1, 1.2, 1] },
transition: {
duration: 1.2,
repeat: 1 / 0,
ease: "easeInOut"
},
children: /* @__PURE__ */ e(
"animateMotion",
{
dur: "6s",
repeatCount: "indefinite",
rotate: "auto",
path: "M 0,0 H 630 V 630 H 0 Z"
}
)
}
),
/* @__PURE__ */ n("defs", { children: [
/* @__PURE__ */ n("filter", { id: "glowSoft", x: "-50%", y: "-50%", width: "200%", height: "200%", children: [
/* @__PURE__ */ e("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "6", result: "blur" }),
/* @__PURE__ */ e(
"feColorMatrix",
{
in: "blur",
type: "matrix",
values: `1 1 0 0 0\r
1 1 0 0 0\r
0 0 0 0 0\r
0 0 0 0.6 0`,
result: "glowColor"
}
),
/* @__PURE__ */ n("feMerge", { children: [
/* @__PURE__ */ e("feMergeNode", { in: "glowColor" }),
/* @__PURE__ */ e("feMergeNode", { in: "SourceGraphic" })
] })
] }),
/* @__PURE__ */ n("filter", { id: "circleGlow", x: "-50%", y: "-50%"