// js/lib.jsx — shared motion + utility components (exported to window)
const { useState, useEffect, useRef } = React;
/* Scroll reveal fallback for browsers without animation-timeline: view() */
function useRevealObserver() {
useEffect(() => {
if (CSS.supports && CSS.supports("animation-timeline: view()")) return;
const els = [...document.querySelectorAll(".reveal, .line-mask")];
let raf;
const sweep = () => els.forEach((el) => {
if (el.classList.contains("in")) return;
if (el.getBoundingClientRect().top < innerHeight * 0.9) {
el.classList.add("in");
el.style.animation = el.classList.contains("line-mask") ? "" : "revealIn .9s var(--ease) both";
if (el.classList.contains("line-mask")) { const s = el.querySelector("span"); if (s) s.style.animation = "maskIn 1s var(--ease) both"; }
else el.style.opacity = 1, el.style.transform = "none";
}
});
const onScroll = () => { cancelAnimationFrame(raf); raf = requestAnimationFrame(sweep); };
sweep(); addEventListener("scroll", onScroll, { passive: true }); addEventListener("resize", onScroll);
return () => { removeEventListener("scroll", onScroll); removeEventListener("resize", onScroll); cancelAnimationFrame(raf); };
}, []);
}
/* Parallax drift on the ambient orbs (mouse + scroll) */
function useParallaxOrbs() {
useEffect(() => {
if (window.matchMedia("(hover: none)").matches) return;
let raf, mx = 0, my = 0, tx = 0, ty = 0;
const move = (e) => { mx = (e.clientX / innerWidth - 0.5); my = (e.clientY / innerHeight - 0.5); };
const loop = () => {
tx += (mx - tx) * 0.06; ty += (my - ty) * 0.06;
const sy = window.scrollY;
const o1 = document.getElementById("orb1"), o2 = document.getElementById("orb2"), o3 = document.getElementById("orb3");
if (o1) o1.style.transform = `translate(${tx * 50}px, ${ty * 40 + sy * 0.04}px)`;
if (o2) o2.style.transform = `translate(${tx * -40}px, ${ty * -30 - sy * 0.03}px)`;
if (o3) o3.style.transform = `translate(${tx * 70}px, ${ty * 60}px)`;
raf = requestAnimationFrame(loop);
};
addEventListener("mousemove", move); loop();
return () => { removeEventListener("mousemove", move); cancelAnimationFrame(raf); };
}, []);
}
/* Custom cursor with hover-grow on [data-cursor] */
function Cursor() {
const dot = useRef(null), ring = useRef(null);
useEffect(() => {
if (window.matchMedia("(hover: none)").matches) return;
let mx = innerWidth / 2, my = innerHeight / 2, rx = mx, ry = my, raf;
const move = (e) => {
mx = e.clientX; my = e.clientY;
if (dot.current) dot.current.style.transform = `translate(${mx}px,${my}px) translate(-50%,-50%)`;
const t = e.target.closest("[data-cursor]"); const r = ring.current; if (!r) return;
if (t) { r.classList.add("hot"); const l = t.getAttribute("data-cursor"); if (l) { r.classList.add("lbl"); r.setAttribute("data-label", l); } else r.classList.remove("lbl"); }
else r.classList.remove("hot", "lbl");
};
const loop = () => { rx += (mx - rx) * 0.2; ry += (my - ry) * 0.2; if (ring.current) ring.current.style.transform = `translate(${rx}px,${ry}px) translate(-50%,-50%)`; raf = requestAnimationFrame(loop); };
addEventListener("mousemove", move); loop();
return () => { removeEventListener("mousemove", move); cancelAnimationFrame(raf); };
}, []);
return (<>
);
}
/* Magnetic wrapper */
function Magnetic({ children, strength = 0.35, className, style }) {
const ref = useRef(null);
const onMove = (e) => {
const el = ref.current; if (!el) return;
const r = el.getBoundingClientRect();
el.style.transform = `translate(${(e.clientX - (r.left + r.width / 2)) * strength}px, ${(e.clientY - (r.top + r.height / 2)) * strength}px)`;
};
const reset = () => { if (ref.current) ref.current.style.transform = "translate(0,0)"; };
return ({children});
}
/* Count-up number when scrolled into view */
function CountUp({ value, suffix = "", dur = 1700 }) {
const ref = useRef(null);
const [n, setN] = useState(0);
useEffect(() => {
let done = false, raf;
const io = new IntersectionObserver((es) => es.forEach((e) => {
if (e.isIntersecting && !done) {
done = true; const t0 = performance.now();
const tick = (t) => { const p = Math.min(1, (t - t0) / dur); setN(Math.round((1 - Math.pow(1 - p, 3)) * value)); if (p < 1) raf = requestAnimationFrame(tick); };
raf = requestAnimationFrame(tick);
}
}), { threshold: 0.5 });
if (ref.current) io.observe(ref.current);
return () => { io.disconnect(); cancelAnimationFrame(raf); };
}, [value]);
return {n}{suffix};
}
/* glowing status-dot bloom */
function Bloom({ color, style }) {
return ;
}
/* Rotating circular badge */
function RotatingBadge({ text = "OPEN TO WORK · ", size = 116, speed = 18 }) {
const id = useRef("p" + Math.random().toString(36).slice(2, 8)).current;
return (
);
}
/* Infinite marquee row */
function Marquee({ items, sep = "✦", style }) {
const row = items.map((it, i) => (
{it}
{sep}
));
return ;
}
const Icon = {
arrow: (p) => (),
arrowUR: (p) => (),
lock: (p) => (),
scan: (p) => (),
pin: (p) => (),
};
Object.assign(window, { useRevealObserver, useParallaxOrbs, Cursor, Magnetic, CountUp, Bloom, RotatingBadge, Marquee, Icon });