wavyjs
Version:
Reusable React + TypeScript component and hooks library with Tailwind, Framer Motion, and GSAP.
1,544 lines (1,543 loc) • 143 kB
JavaScript
import z, { useState as I, useEffect as G, useRef as x, useCallback as D } from "react";
import { jsx as e, jsxs as r } from "react/jsx-runtime";
import C from "gsap";
import { motion as f } from "framer-motion";
const X = () => {
const [i, t] = I({ x: 0, y: 0 });
return G(() => {
const l = (n) => {
t({ x: n.clientX, y: n.clientY });
};
return window.addEventListener("mousemove", l), () => {
window.removeEventListener("mousemove", l);
};
}, []), i;
}, _ = (i) => {
const [t, l] = I(null), [n, o] = I(!0), [s, a] = I(null);
return G(() => {
let c = !1;
async function d() {
try {
o(!0);
const u = await fetch(i);
if (!u.ok) throw new Error("Failed to fetch");
const p = await u.json();
c || l(p);
} catch (u) {
c || a(u);
} finally {
c || o(!1);
}
}
return d(), () => {
c = !0;
};
}, [i]), { data: t, loading: n, error: s };
}, q = () => {
const [i, t] = I(!1);
return [i, {
onMouseEnter: () => t(!0),
onMouseLeave: () => t(!1)
}];
};
function J({
timeout: i,
onTimeout: t,
warningTime: l = 0,
onWarning: n
}) {
const o = x(null), s = x(null), a = () => {
o.current && clearTimeout(o.current), s.current && clearTimeout(s.current), l > 0 && n && (s.current = setTimeout(n, i - l)), o.current = setTimeout(t, i);
};
G(() => {
const c = ["mousemove", "keydown", "click", "touchstart"], d = () => a();
for (const u of c)
window.addEventListener(u, d);
return a(), () => {
for (const u of c)
window.removeEventListener(u, d);
o.current && clearTimeout(o.current), s.current && clearTimeout(s.current);
};
}, [i, t, l, n]);
}
const K = () => {
const i = window.speechSynthesis, t = x(null), l = D((o, s = {}) => {
if (!i) return;
i.cancel();
const a = new SpeechSynthesisUtterance(o);
Object.assign(a, s), i.speak(a), t.current = a;
}, [i]), n = D(() => {
i == null || i.cancel();
}, [i]);
return { speak: l, stop: n };
};
function Q(i = !1) {
const [t, l] = I(i), n = D(() => {
l((o) => !o);
}, []);
return [t, n];
}
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", O = {
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"
}, V = z.forwardRef((i, t) => {
if (i.asMotion) {
const { asMotion: d, className: u = "", variant: p = "primary", children: B, ...k } = i, b = `${E} ${O[p]} ${u}`.trim();
return /* @__PURE__ */ e(
f.button,
{
ref: t,
className: b,
whileTap: { scale: 0.98 },
whileHover: { y: -1 },
...k,
children: B
}
);
}
const { asMotion: l, className: n = "", variant: o = "primary", children: s, ...a } = i, c = `${E} ${O[o]} ${n}`.trim();
return /* @__PURE__ */ e("button", { ref: t, className: c, ...a, children: s });
});
V.displayName = "Button";
const Z = () => {
const i = x(null), t = 18, l = 16, n = t * l;
return G(() => {
if (!i.current) return;
const o = C.context(() => {
const s = C.timeline({ repeat: -1, repeatDelay: 0.6 });
s.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"
}
}), s.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 () => o.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: n }).map((o, s) => /* @__PURE__ */ e(
"div",
{
className: "box",
style: {
width: 2,
height: 2,
backgroundColor: "rgba(255,255,255,0.5)",
borderRadius: 9999,
justifySelf: "center",
alignSelf: "center"
}
},
s
))
}
)
}
);
};
Z.displayName = "FadingBG";
const j = () => {
const [i, t] = I(0), l = x([]);
G(() => {
function s() {
if (!o.current) return;
const { clientWidth: a, clientHeight: c } = o.current, d = 16, u = Math.floor(a / d), p = Math.floor(c / d);
t(u * p);
}
return s(), window.addEventListener("resize", s), () => window.removeEventListener("resize", s);
}, []), G(() => {
if (i > 0) {
const s = setInterval(() => {
const a = Math.floor(Math.random() * i), c = l.current[a];
c && C.fromTo(
c,
{ opacity: 0.2 },
{ opacity: 1, duration: 0.3, yoyo: !0, repeat: 1, ease: "power1.inOut" }
);
}, 100);
return () => clearInterval(s);
}
}, [i]);
const n = () => {
const s = [
"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 s[Math.floor(Math.random() * s.length)];
}, o = x(null);
return /* @__PURE__ */ r(
"div",
{
ref: o,
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((s, a) => /* @__PURE__ */ e(
"div",
{
ref: (c) => l.current[a] = c,
style: {
width: 16,
height: 16,
backgroundColor: n(),
borderRadius: 6
}
},
a
))
}
)
]
}
);
};
j.displayName = "GithubBG";
const A = ({
title: i = "WAVY JS",
shadowSize: t = "lg",
shadowColor: l = "white/80",
textColor: n = "black/30",
numberOfRows: o = 6,
baseDuration: s = 12,
className: a = ""
}) => {
const c = x([]), d = (b) => {
if (b.includes("/")) {
const [v, m] = b.split("/");
return { color: v, opacity: parseFloat(m) / 100 };
}
return { color: b, opacity: 1 };
}, u = (b, v) => {
const { color: m, opacity: w } = d(v), g = {
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"
}, h = {
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 = g[b];
let M = "0, 0, 0";
if (m.includes("-")) {
const [N, $] = m.split("-"), S = h[N];
S && (M = S);
} else if (h[m])
M = h[m];
else if (m.startsWith("#")) {
const N = m.replace("#", ""), $ = parseInt(N.substr(0, 2), 16), S = parseInt(N.substr(2, 2), 16), H = parseInt(N.substr(4, 2), 16);
M = `${$}, ${S}, ${H}`;
} else m.startsWith("rgb") && (M = m.replace("rgb", "").replace("rgba", "").replace("(", "").replace(")", ""));
return `${y} rgba(${M}, ${w})`;
}, p = (b) => {
const { color: v, opacity: m } = d(b), w = {
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 (v.includes("-")) {
const [g, h] = v.split("-"), y = w[g];
if (y)
return `rgba(${y}, ${m})`;
}
if (w[v])
return `rgba(${w[v]}, ${m})`;
if (v.startsWith("#")) {
const g = v.replace("#", ""), h = parseInt(g.substr(0, 2), 16), y = parseInt(g.substr(2, 2), 16), M = parseInt(g.substr(4, 2), 16);
return `rgba(${h}, ${y}, ${M}, ${m})`;
}
return v.startsWith("rgb"), v;
};
G(() => {
c.current.forEach((b, v) => {
if (!b) return;
const m = b.scrollWidth / 2, g = v % 2 === 0 ? s : s * 1.8;
C.fromTo(
b,
{ x: 0 },
{
x: -m,
duration: g,
ease: "linear",
repeat: -1,
modifiers: {
x: (h) => `${(parseFloat(h) % -m - m) % -m}px`
}
}
);
});
}, [s]);
const B = Array.from({ length: 8 }).map((b, v) => /* @__PURE__ */ e(
"h1",
{
className: "text-8xl md:text-9xl font-bold mx-6 md:mx-8 whitespace-nowrap",
style: {
color: p(n),
textShadow: u(t, l)
},
children: i
},
v
)), k = Array.from({ length: o }).map((b, v) => /* @__PURE__ */ r(
"div",
{
ref: (m) => {
m && (c.current[v] = m);
},
className: "flex whitespace-nowrap",
style: { willChange: "transform" },
children: [
B,
B,
" "
]
},
v
));
return /* @__PURE__ */ e(
"div",
{
className: a,
"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: k
}
);
};
A.displayName = "NameScroller";
const L = () => (G(() => {
const i = C.utils.random(100, 100), t = C.utils.random(100, 100);
C.to(".green", {
x: i,
y: t,
scale: 1,
opacity: 1,
duration: C.utils.random(2, 10),
// slow speed
repeat: -1,
yoyo: !0,
ease: "power1.inOut"
}), C.to(".red", {
x: i,
y: t,
scale: 1,
opacity: 1,
duration: C.utils.random(2, 8),
// slow speed
repeat: -1,
yoyo: !0,
ease: "power1.inOut"
}), C.to(".pink", {
x: i,
y: t,
scale: 1,
opacity: 1,
duration: C.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__ */ r("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)"
}
}
)
] })
}
));
L.displayName = "AnimatedBG";
const Y = () => (G(() => {
const i = document.querySelector("#masked-bg-container");
i && (C.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(), n = (l.left + l.width / 2) / window.innerWidth * 100, o = (l.top + l.height / 2) / window.innerHeight * 100;
i.style.setProperty("--circle1-x", `${n}%`), i.style.setProperty("--circle1-y", `${o}%`);
}
}
), 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(), n = (l.left + l.width / 2) / window.innerWidth * 100, o = (l.top + l.height / 2) / window.innerHeight * 100;
i.style.setProperty("--circle2-x", `${n}%`), i.style.setProperty("--circle2-y", `${o}%`);
}
}
), 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(), n = (l.left + l.width / 2) / window.innerWidth * 100, o = (l.top + l.height / 2) / window.innerHeight * 100;
i.style.setProperty("--circle3-x", `${n}%`), i.style.setProperty("--circle3-y", `${o}%`);
}
}
), 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(), n = (l.left + l.width / 2) / window.innerWidth * 100, o = (l.top + l.height / 2) / window.innerHeight * 100;
i.style.setProperty("--circle4-x", `${n}%`), i.style.setProperty("--circle4-y", `${o}%`);
}
}
));
}, []), /* @__PURE__ */ r(
"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__ */ r("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
))
}
) })
] })
]
}
));
Y.displayName = "MaskedBG";
const ee = ({
size: i = 200,
color: t = "cyan",
className: l
}) => {
const n = x(null);
return G(() => {
n.current && C.to(n.current, {
rotate: 360,
repeat: -1,
duration: 6
});
}, []), /* @__PURE__ */ r(
"svg",
{
ref: n,
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__ */ r(
"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(
f.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__ */ r("defs", { children: [
/* @__PURE__ */ r("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__ */ r("feMerge", { children: [
/* @__PURE__ */ e("feMergeNode", { in: "glowColor" }),
/* @__PURE__ */ e("feMergeNode", { in: "SourceGraphic" })
] })
] }),
/* @__PURE__ */ r("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__ */ r("feMerge", { children: [
/* @__PURE__ */ e("feMergeNode", { in: "glowColor" }),
/* @__PURE__ */ e("feMergeNode", { in: "glowColor" }),
/* @__PURE__ */ e("feMergeNode", { in: "glowColor" }),
/* @__PURE__ */ e("feMergeNode", { in: "SourceGraphic" })
] })
] })
] })
]
}
);
}, te = ({
size: i = 200,
color: t = "#f7df1e",
className: l
}) => {
const n = x(null);
return /* @__PURE__ */ r(
"svg",
{
ref: n,
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(
f.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__ */ r("defs", { children: [
/* @__PURE__ */ r("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__ */ r("feMerge", { children: [
/* @__PURE__ */ e("feMergeNode", { in: "glowColor" }),
/* @__PURE__ */ e("feMergeNode", { in: "SourceGraphic" })
] })
] }),
/* @__PURE__ */ r("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: `1 1 0 0 0\r
1 1 0 0 0\r
0 0 0 0 0\r
0 0 0 1 0`,
result: "glowColor"
}
),
/* @__PURE__ */ r("feMerge", { children: [
/* @__PURE__ */ e("feMergeNode", { in: "glowColor" }),
/* @__PURE__ */ e("feMergeNode", { in: "glowColor" }),
/* @__PURE__ */ e("feMergeNode", { in: "glowColor" }),
/* @__PURE__ */ e("feMergeNode", { in: "SourceGraphic" })
] })
] })
] })
]
}
);
}, re = ({
size: i = 200,
color: t = "#0074BD",
// default blue shade
className: l
}) => {
const n = x(null);
return /* @__PURE__ */ r(
"svg",
{
ref: n,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 128 128",
width: i,
height: i,
preserveAspectRatio: "xMidYMid meet",
className: ["java-svg", l].filter(Boolean).join(" "),
style: { width: "100%", height: "auto", maxWidth: i },
overflow: "visible",
children: [
/* @__PURE__ */ e(
"rect",
{
width: "128",
height: "128",
fill: "white",
filter: "url(#glowSoft)",
rx: "16"
}
),
/* @__PURE__ */ r("g", { transform: "scale(1) translate(0,0)", children: [
/* @__PURE__ */ e(
"path",
{
fill: "#0074BD",
d: "M47.617 98.12s-4.767 2.774 3.397 3.71c9.892 1.13 14.947.968 25.845-1.092 0 0 2.871 1.795 6.873 3.351-24.439 10.47-55.308-.607-36.115-5.969zm-2.988-13.665s-5.348 3.959 2.823 4.805c10.567 1.091 18.91 1.18 33.354-1.6 0 0 1.993 2.025 5.132 3.131-29.542 8.64-62.446.68-41.309-6.336z"
}
),
/* @__PURE__ */ e(
"path",
{
fill: "#EA2D2E",
d: "M69.802 61.271c6.025 6.935-1.58 13.17-1.58 13.17s15.289-7.891 8.269-17.777c-6.559-9.215-11.587-13.792 15.635-29.58 0 .001-42.731 10.67-22.324 34.187z"
}
),
/* @__PURE__ */ e(
"path",
{
fill: "#0074BD",
d: "M102.123 108.229s3.529 2.91-3.888 5.159c-14.102 4.272-58.706 5.56-71.094.171-4.451-1.938 3.899-4.625 6.526-5.192 2.739-.593 4.303-.485 4.303-.485-4.953-3.487-32.013 6.85-13.743 9.815 49.821 8.076 90.817-3.637 77.896-9.468zM49.912 70.294s-22.686 5.389-8.033 7.348c6.188.828 18.518.638 30.011-.326 9.39-.789 18.813-2.474 18.813-2.474s-3.308 1.419-5.704 3.053c-23.042 6.061-67.544 3.238-54.731-2.958 10.832-5.239 19.644-4.643 19.644-4.643zm40.697 22.747c23.421-12.167 12.591-23.86 5.032-22.285-1.848.385-2.677.72-2.677.72s.688-1.079 2-1.543c14.953-5.255 26.451 15.503-4.823 23.725 0-.002.359-.327.468-.617z"
}
),
/* @__PURE__ */ e(
"path",
{
fill: "#EA2D2E",
d: "M76.491 1.587S89.459 14.563 64.188 34.51c-20.266 16.006-4.621 25.13-.007 35.559-11.831-10.673-20.509-20.07-14.688-28.815C58.041 28.42 81.722 22.195 76.491 1.587z"
}
),
/* @__PURE__ */ e(
"path",
{
fill: "#0074BD",
d: "M52.214 126.021c22.476 1.437 57-.8 57.817-11.436 0 0-1.571 4.032-18.577 7.231-19.186 3.612-42.854 3.191-56.887.874 0 .001 2.875 2.381 17.647 3.331z"
}
)
] }),
/* @__PURE__ */ e(
f.circle,
{
r: "6",
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 128 V 128 H 0 Z"
}
)
}
),
/* @__PURE__ */ r("defs", { children: [
/* @__PURE__ */ r("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 1 0 0\r
0 0 1 0 0\r
0 0 1 0 0\r
0 0 0 0.6 0`,
result: "glowColor"
}
),
/* @__PURE__ */ r("feMerge", { children: [
/* @__PURE__ */ e("feMergeNode", { in: "glowColor" }),
/* @__PURE__ */ e("feMergeNode", { in: "SourceGraphic" })
] })
] }),
/* @__PURE__ */ r("filter", { id: "circleGlow", x: "-50%", y: "-50%", width: "300%", height: "300%", children: [
/* @__PURE__ */ e("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "6", result: "blur" }),
/* @__PURE__ */ e(
"feColorMatrix",
{
in: "blur",
type: "matrix",
values: `1 0 0 0 0\r
0 0 1 0 0\r
0 0 1 0 0\r
0 0 0 1 0`,
result: "glowColor"
}
),
/* @__PURE__ */ r("feMerge", { children: [
/* @__PURE__ */ e("feMergeNode", { in: "glowColor" }),
/* @__PURE__ */ e("feMergeNode", { in: "glowColor" }),
/* @__PURE__ */ e("feMergeNode", { in: "SourceGraphic" })
] })
] })
] })
]
}
);
}, ie = ({
size: i = 200,
color: t = "#38BDF8",
// Tailwind default blue
className: l
}) => {
const n = x(null);
return /* @__PURE__ */ r(
"svg",
{
ref: n,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 128 128",
width: i,
height: i,
preserveAspectRatio: "xMidYMid meet",
className: ["tailwind-svg", l].filter(Boolean).join(" "),
style: { width: "100%", height: "auto", maxWidth: i },
overflow: "visible",
children: [
/* @__PURE__ */ e(
"rect",
{
width: "128",
height: "128",
fill: "white",
filter: "url(#glowSoft)",
rx: "16"
}
),
/* @__PURE__ */ e("g", { transform: "scale(4) translate(1,0)", children: /* @__PURE__ */ e(
"path",
{
fill: t,
d: "M16 7.999c-4.267 0-6.933 2.133-8 6.4 1.6-2.134 3.467-2.934 5.6-2.4 1.218.304 2.09 1.19 3.055 2.164C18.187 15.7 19.406 16.933 22.4 16.933c4.267 0 6.933-2.133 8-6.4-1.6 2.134-3.467 2.934-5.6 2.4-1.218-.304-2.09-1.19-3.055-2.164C19.813 9.233 18.594 7.999 16 7.999zM8 16c-4.267 0-6.933 2.133-8 6.4 1.6-2.134 3.467-2.934 5.6-2.4 1.218.304 2.09 1.19 3.055 2.164C10.187 23.7 11.406 24.933 14.4 24.933c4.267 0 6.933-2.133 8-6.4-1.6 2.134-3.467 2.934-5.6 2.4-1.218-.304-2.09-1.19-3.055-2.164C11.813 17.233 10.594 16 8 16z"
}
) }),
/* @__PURE__ */ e(
f.circle,
{
r: "6",
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 128 V 128 H 0 Z"
}
)
}
),
/* @__PURE__ */ r("defs", { children: [
/* @__PURE__ */ r("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 1 0 0\r
0 0 1 0 0\r
0 0 1 0 0\r
0 0 0 0.6 0`,
result: "glowColor"
}
),
/* @__PURE__ */ r("feMerge", { children: [
/* @__PURE__ */ e("feMergeNode", { in: "glowColor" }),
/* @__PURE__ */ e("feMergeNode", { in: "SourceGraphic" })
] })
] }),
/* @__PURE__ */ r("filter", { id: "circleGlow", x: "-50%", y: "-50%", width: "300%", height: "300%", children: [
/* @__PURE__ */ e("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "6", result: "blur" }),
/* @__PURE__ */ e(
"feColorMatrix",
{
in: "blur",
type: "matrix",
values: `1 0 0 0 0\r
0 0 1 0 0\r
0 0 1 0 0\r
0 0 0 1 0`,
result: "glowColor"
}
),
/* @__PURE__ */ r("feMerge", { children: [
/* @__PURE__ */ e("feMergeNode", { in: "glowColor" }),
/* @__PURE__ */ e("feMergeNode", { in: "glowColor" }),
/* @__PURE__ */ e("feMergeNode", { in: "SourceGraphic" })
] })
] })
] })
]
}
);
}, ne = ({
size: i = 200,
color: t = "#E44D26",
// HTML5 Orange
className: l
}) => {
const n = x(null), o = (s) => {
if (t.startsWith("#")) {
const a = parseInt(t.slice(1, 3), 16), c = parseInt(t.slice(3, 5), 16), d = parseInt(t.slice(5, 7), 16);
return `rgba(${a}, ${c}, ${d}, ${s})`;
}
return t;
};
return /* @__PURE__ */ r(
"svg",
{
ref: n,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 128 128",
width: i,
height: i,
preserveAspectRatio: "xMidYMid meet",
className: ["html-svg", l].filter(Boolean).join(" "),
style: { width: "100%", height: "auto", maxWidth: i },
overflow: "visible",
children: [
/* @__PURE__ */ e("rect", { width: "128", height: "128", fill: o(0.5), filter: "url(#glowSoft)", rx: "16" }),
/* @__PURE__ */ r("g", { transform: "translate(20,25) scale(0.7)", children: [
/* @__PURE__ */ e("path", { fill: "#E44D26", d: "M19 3l9 100 36 10 36-10 9-100H19z" }),
/* @__PURE__ */ e("path", { fill: "#F16529", d: "M64 116l29-8 8-92H64v100z" }),
/* @__PURE__ */ e("path", { fill: "#EBEBEB", d: "M64 52H44l-1-12h21V28H31l3 36h30V52zM64 82h-1l-15-4-1-11H35l2 23 27 7h1V82z" }),
/* @__PURE__ */ e("path", { fill: "#fff", d: "M64 52v12h19l-2 14-17 4v13l27-7 3-36H64zM64 28v12h33l1-12H64z" })
] }),
/* @__PURE__ */ e(
f.circle,
{
r: "6",
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 128 V 128 H 0 Z"
}
)
}
),
/* @__PURE__ */ r("defs", { children: [
/* @__PURE__ */ r("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: `1 0.4 0 0 0\r
1 0.2 0 0 0\r
0 0 0 0 0\r
0 0 0 0.6 0`,
result: "glowColor"
}
),
/* @__PURE__ */ r("feMerge", { children: [
/* @__PURE__ */ e("feMergeNode", { in: "glowColor" }),
/* @__PURE__ */ e("feMergeNode", { in: "SourceGraphic" })
] })
] }),
/* @__PURE__ */ r("filter", { id: "circleGlow", x: "-50%", y: "-50%", width: "300%", height: "300%", children: [
/* @__PURE__ */ e("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "6", result: "blur" }),
/* @__PURE__ */ e(
"feColorMatrix",
{
in: "blur",
type: "matrix",
values: `1 0.3 0 0 0\r
1 0.3 0 0 0\r
0 0 0 0 0\r
0 0 0 1 0`,
result: "glowColor"
}
),
/* @__PURE__ */ r("feMerge", { children: [
/* @__PURE__ */ e("feMergeNode", { in: "glowColor" }),
/* @__PURE__ */ e("feMergeNode", { in: "glowColor" }),
/* @__PURE__ */ e("feMergeNode", { in: "SourceGraphic" })
] })
] })
] })
]
}
);
}, le = ({
size: i = 200,
color: t = "#264DE4",
// CSS3 Blue
className: l
}) => {
const n = x(null), o = (s) => {
if (t.startsWith("#")) {
const a = parseInt(t.slice(1, 3), 16), c = parseInt(t.slice(3, 5), 16), d = parseInt(t.slice(5, 7), 16);
return `rgba(${a}, ${c}, ${d}, ${s})`;
}
return t;
};
return /* @__PURE__ */ r(
"svg",
{
ref: n,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 128 128",
width: i,
height: i,
preserveAspectRatio: "xMidYMid meet",
className: ["css-svg", l].filter(Boolean).join(" "),
style: { width: "100%", height: "auto", maxWidth: i },
overflow: "visible",
children: [
/* @__PURE__ */ e("rect", { width: "128", height: "128", fill: o(0.5), filter: "url(#glowSoft)", rx: "16" }),
/* @__PURE__ */ r("g", { transform: "translate(20,25) scale(0.7)", children: [
/* @__PURE__ */ e("path", { fill: "#264DE4", d: "M19 3l9 100 36 10 36-10 9-100H19z" }),
/* @__PURE__ */ e("path", { fill: "#2965F1", d: "M64 116l29-8 8-92H64v100z" }),
/* @__PURE__ */ e("path", { fill: "#EBEBEB", d: "M64 52H44l-1-12h21V28H31l3 36h30V52zM64 82h-1l-15-4-1-11H35l2 23 27 7h1V82z" }),
/* @__PURE__ */ e("path", { fill: "#fff", d: "M64 52v12h19l-2 14-17 4v13l27-7 3-36H64zM64 28v12h33l1-12H64z" })
] }),
/* @__PURE__ */ e(
f.circle,
{
r: "6",
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 128 V 128 H 0 Z" })
}
),
/* @__PURE__ */ r("defs", { children: [
/* @__PURE__ */ r("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 1 0 0\r
0 0.5 1 0 0\r
0 0 1 0 0\r
0 0 0 0.6 0`
}
),
/* @__PURE__ */ r("feMerge", { children: [
/* @__PURE__ */ e("feMergeNode", {}),
/* @__PURE__ */ e("feMergeNode", { in: "SourceGraphic" })
] })
] }),
/* @__PURE__ */ r("filter", { id: "circleGlow", x: "-50%", y: "-50%", width: "300%", height: "300%", children: [
/* @__PURE__ */ e("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "6", result: "blur" }),
/* @__PURE__ */ e(
"feColorMatrix",
{
in: "blur",
type: "matrix",
values: `0 0 1 0 0\r
0 0.5 1 0 0\r
0 0 1 0 0\r
0 0 0 1 0`
}
),
/* @__PURE__ */ r("feMerge", { children: [
/* @__PURE__ */ e("feMergeNode", {}),
/* @__PURE__ */ e("feMergeNode", {}),
/* @__PURE__ */ e("feMergeNode", { in: "SourceGraphic" })
] })
] })
] })
]
}
);
}, ae = ({
size: i = 200,
color: t = "#02569B",
// Flutter blue
className: l
}) => {
const n = x(null), o = (s) => {
if (t.startsWith("#")) {
const a = parseInt(t.slice(1, 3), 16), c = parseInt(t.slice(3, 5), 16), d = parseInt(t.slice(5, 7), 16);
return `rgba(${a}, ${c}, ${d}, ${s})`;
}
return t;
};
return /* @__PURE__ */ r(
"svg",
{
ref: n,
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 128 128",
width: i,
height: i,
preserveAspectRatio: "xMidYMid meet",
className: ["flutter-svg", l].filter(Boolean).join(" "),
style: { width: "100%", height: "auto", maxWidth: i },
overflow: "visible",
children: [
/* @__PURE__ */ e("rect", { width: "128", height: "128", fill: o(0.5), filter: "url(#glowSoft)", rx: "16" }),
/* @__PURE__ */ r("g", { transform: "translate(4,6) scale(0.2)", children: [
/* @__PURE__ */ e("path", { fill: "#5cc8f8", d: "M191.45,342.89,249.11,401,407.75,241.12H292.4Z" }),
/* @__PURE__ */ e("path", { fill: "#5cc8f8", d: "M292.4,66.69H407.75L162.61,313.82l-57.7-58.13Z" }),
/* @__PURE__ */ e("path", { fill: "#075b9d", d: "M249.11,401l43.29,43.59H407.75L306.8,342.89Z" }),
/* @__PURE__ */ e("path", { fill: "url(#f)", d: "M334.67,371.16,306.8,342.89,249.11,401Z" }),
/* @__PURE__ */ e("path", { fill: "#16b9fd", d: "M191.45,342.87l57.69-58.18,57.7,58.15L249.14,401Z" })
] }),
/* @__PURE__ */ e(
f.circle,
{
r: "6",
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 128 V 128 H 0 Z" })
}
),
/* @__PURE__ */ r("defs", { children: [
/* @__PURE__ */ r("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.4 1 0 0\r
0 0.6 1 0 0\r
0 0.9 1 0 0\r
0 0 0 0.6 0`
}
),
/* @__PURE__ */ r("feMerge", { children: [
/* @__PURE__ */ e("feMergeNode", {}),
/* @__PURE__ */ e("feMergeNode", { in: "SourceGraphic" })
] })
] }),
/* @__PURE__ */ r("filter", { id: "circleGlow", x: "-50%", y: "-50%", width: "300%", height: "300%", children: [
/* @__PURE__ */ e("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "6", result: "blur" }),
/* @__PURE__ */ e(
"feColorMatrix",