// Shopify Front — primitives, cursor, nav
const { useEffect, useRef, useState, useMemo } = React;
/* ---------- Marks ---------- */
const TagMark = ({ size = 36, accentMint = true }) =>
;
/* ---------- Custom cursor ---------- */
const Cursor = ({ enabled }) => {
const dotRef = useRef(null);
const ringRef = useRef(null);
useEffect(() => {
if (!enabled) return;
document.body.classList.remove('no-cursor');
let mx = innerWidth / 2,my = innerHeight / 2;
let rx = mx,ry = my;
let raf;
const onMove = (e) => {
mx = e.clientX;my = e.clientY;
if (dotRef.current) dotRef.current.style.transform = `translate(${mx}px, ${my}px) translate(-50%, -50%)`;
};
const tick = () => {
rx += (mx - rx) * 0.18;
ry += (my - ry) * 0.18;
if (ringRef.current) ringRef.current.style.transform = `translate(${rx}px, ${ry}px) translate(-50%, -50%)`;
raf = requestAnimationFrame(tick);
};
tick();
const onOver = (e) => {
const t = e.target.closest('[data-cursor]');
if (!t || !ringRef.current) return;
ringRef.current.classList.add('is-hover');
const label = t.getAttribute('data-cursor-label');
if (label) {ringRef.current.classList.add('label');ringRef.current.setAttribute('data-label', label);}
};
const onOut = (e) => {
const t = e.target.closest('[data-cursor]');
if (!t || !ringRef.current) return;
ringRef.current.classList.remove('is-hover', 'label');
};
window.addEventListener('mousemove', onMove);
document.addEventListener('mouseover', onOver);
document.addEventListener('mouseout', onOut);
return () => {
cancelAnimationFrame(raf);
window.removeEventListener('mousemove', onMove);
document.removeEventListener('mouseover', onOver);
document.removeEventListener('mouseout', onOut);
document.body.classList.add('no-cursor');
};
}, [enabled]);
if (!enabled) return null;
return <>;
};
/* ---------- Magnetic hover ---------- */
const Magnetic = ({ children, strength = 0.35 }) => {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;if (!el) return;
const onMove = (e) => {
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 * strength}px, ${y * strength}px)`;
};
const onLeave = () => {el.style.transform = '';};
el.addEventListener('mousemove', onMove);
el.addEventListener('mouseleave', onLeave);
return () => {el.removeEventListener('mousemove', onMove);el.removeEventListener('mouseleave', onLeave);};
}, [strength]);
return {children};
};
/* ---------- Reveal on scroll ---------- */
const useReveal = () => {
useEffect(() => {
const els = document.querySelectorAll('.reveal, .reveal-line');
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {e.target.classList.add('in');io.unobserve(e.target);}
});
}, { threshold: 0.18, rootMargin: '0px 0px -8% 0px' });
els.forEach((el) => io.observe(el));
return () => io.disconnect();
}, []);
};
/* ---------- Smooth section progress ---------- */
const useScrollProgress = () => {
const [p, setP] = useState(0);
useEffect(() => {
const onScroll = () => {
const h = document.documentElement;
const max = h.scrollHeight - h.clientHeight;
setP(max > 0 ? h.scrollTop / max : 0);
};
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
return p;
};
/* ---------- NAV ---------- */
const Nav = () => {
const p = useScrollProgress();
return (
);
};
/* ---------- Section eyebrow ---------- */
const Eyebrow = ({ num, children, dark }) =>
{num && {num}}
{children}
;
Object.assign(window, { TagMark, Cursor, Magnetic, useReveal, useScrollProgress, Nav, Eyebrow });