// Primitives: Reveal, TiltCard, MagneticButton, useReveal, etc.
const { useEffect, useRef, useState, useCallback, useMemo } = React;
const prefersReducedMotion = () =>
typeof window !== "undefined" &&
window.matchMedia &&
window.matchMedia("(prefers-reduced-motion: reduce)").matches;
function useInView(opts = {}) {
const ref = useRef(null);
const [inView, setInView] = useState(false);
useEffect(() => {
if (!ref.current) return;
const el = ref.current;
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
setInView(true);
io.unobserve(el);
}
});
},
{ threshold: 0.15, rootMargin: "-8% 0px", ...opts }
);
io.observe(el);
return () => io.disconnect();
}, []);
return [ref, inView];
}
function Reveal({ children, delay = 0, className = "", as: Tag = "div" }) {
const [ref, inView] = useInView();
const style = { transitionDelay: `${delay}ms` };
return (
{children}
);
}
function TiltCard({ children, className = "", intensity = 8 }) {
const ref = useRef(null);
const onMove = (e) => {
if (prefersReducedMotion()) return;
const el = ref.current;
if (!el) return;
const r = el.getBoundingClientRect();
const x = (e.clientX - r.left) / r.width;
const y = (e.clientY - r.top) / r.height;
const rx = (0.5 - y) * intensity;
const ry = (x - 0.5) * intensity;
el.style.transform = `perspective(900px) rotateX(${rx}deg) rotateY(${ry}deg) translateZ(0)`;
el.style.setProperty("--mx", `${x * 100}%`);
el.style.setProperty("--my", `${y * 100}%`);
el.style.setProperty("--stroke-angle", `${(x + y) * 180}deg`);
};
const onLeave = () => {
const el = ref.current;
if (!el) return;
el.style.transform = "perspective(900px) rotateX(0deg) rotateY(0deg)";
};
return (
);
}
function MagneticButton({
children,
href,
onClick,
variant = "primary",
className = "",
external = false,
}) {
const ref = useRef(null);
const onMove = (e) => {
if (prefersReducedMotion()) return;
const el = ref.current;
if (!el) return;
const r = el.getBoundingClientRect();
const x = e.clientX - (r.left + r.width / 2);
const y = e.clientY - (r.top + r.height / 2);
el.style.transform = `translate(${x * 0.18}px, ${y * 0.25}px)`;
};
const onLeave = () => {
const el = ref.current;
if (!el) return;
el.style.transform = "translate(0,0)";
};
const base =
"inline-flex items-center gap-2 rounded-xl px-5 py-3 text-sm font-semibold transition relative magnetic";
const styles = {
primary:
"bg-signal text-ink shadow-glow hover:shadow-glow-lg hover:bg-[#2ed8a8]",
ghost:
"border border-white/15 bg-white/5 text-mist backdrop-blur hover:border-signal/45 hover:bg-white/10",
minimal:
"border border-white/10 text-slate hover:border-white/20 hover:text-mist",
};
const cls = `${base} ${styles[variant]} ${className}`;
const props = {
ref,
className: cls,
onMouseMove: onMove,
onMouseLeave: onLeave,
onClick,
};
if (href) {
return (
{children}
);
}
return (
);
}
function SectionShell({
id,
eyebrow,
title,
subtitle,
children,
className = "",
}) {
return (
{eyebrow}
{title}
{subtitle && (
{subtitle}
)}
{children}
);
}
// Inline icon set (matches lucide style — no external deps)
function Icon({ name, className = "h-5 w-5", strokeWidth = 1.6 }) {
const paths = {
shield: ,
arrow: ,
chevronDown: ,
layers: (
),
scale: (
),
workflow: (
),
git: (
),
alert: (
),
sliders: (
),
merge: (
),
radar: (
),
check: (
),
scroll: (
),
file: (
),
book: (
),
badge: (
),
github: (
),
cpu: (
),
zap: ,
target: (
),
sparkles: (
),
rocket: (
),
satellite: (
),
network: (
),
folder: (
),
terminal: (
),
package: (
),
fingerprint: (
),
fileKey: (
),
fileWarn: (
),
pull: (
),
gauge: (
),
scan: (
),
lock: (
),
clipboard: (
),
link: (
),
octagon: (
),
x: ,
menu: ,
check2: ,
code: (
),
book2: (
),
};
return (
);
}
function scrollToId(id) {
const el = document.getElementById(id);
if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
}
const REPO_URL =
"https://github.com/lucashgrifoni/OSS-Security-Policy-as-Code-Starter-Kit";
const DOCS_URL = `${REPO_URL}/tree/master/docs`;
Object.assign(window, {
Reveal,
TiltCard,
MagneticButton,
SectionShell,
Icon,
scrollToId,
prefersReducedMotion,
useInView,
REPO_URL,
DOCS_URL,
});