// shared.jsx — Mary Skinner site: shared chrome + motion helpers
// Globals: Header, Footer, useReveal, RevealOnScroll, CursorFollower, Marquee
const { useEffect, useRef, useState, useCallback } = React;
// ---------- Reveal-on-scroll ----------
function useReveal(opts = {}) {
const ref = useRef(null);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add('in');
io.unobserve(entry.target);
}
});
},
{ threshold: opts.threshold ?? 0.01, rootMargin: opts.rootMargin ?? '0px 0px 12% 0px' }
);
io.observe(el);
// Safety net: force reveal after 2.5s so nothing ever stays hidden
// (covers iOS Safari edge cases where IntersectionObserver can mis-fire).
const fallback = setTimeout(() => {
el.classList.add('in');
io.disconnect();
}, 2500);
return () => { io.disconnect(); clearTimeout(fallback); };
}, []);
return ref;
}
function RevealOnScroll({ as: Tag = 'div', stagger = false, children, className = '', ...rest }) {
const ref = useReveal();
return (
{children}
);
}
// ---------- Split letters wordmark ----------
function SplitWord({ text, delay = 0, className = '' }) {
const ref = useRef(null);
useEffect(() => {
const id = setTimeout(() => {
if (ref.current) ref.current.classList.add('in');
}, delay);
return () => clearTimeout(id);
}, [delay]);
return (
{Array.from(text).map((c, i) => (
{c === ' ' ? '\u00A0' : c}
))}
);
}
// ---------- Header ----------
function Header({ darkPage = false }) {
const [scrolled, setScrolled] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 30);
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
// Lock body scroll while menu is open
useEffect(() => {
document.body.style.overflow = menuOpen ? 'hidden' : '';
return () => { document.body.style.overflow = ''; };
}, [menuOpen]);
const closeMenu = () => setMenuOpen(false);
return (
Mary Skinner Designs
{/* Desktop nav */}
{/* Hamburger — phone only */}
{/* Mobile overlay */}
);
}
// ---------- Footer ----------
function Footer() {
return (
);
}
// ---------- Cursor follower ----------
function CursorFollower() {
const dotRef = useRef(null);
const labelRef = useRef(null);
useEffect(() => {
if (window.matchMedia('(hover: none)').matches) return;
const dot = dotRef.current;
if (!dot) return;
let targetX = window.innerWidth / 2;
let targetY = window.innerHeight / 2;
let curX = targetX, curY = targetY;
let raf;
const onMove = (e) => {
targetX = e.clientX;
targetY = e.clientY;
if (!dot.classList.contains('show')) dot.classList.add('show');
};
const onLeave = () => { dot.classList.remove('show'); };
const tick = () => {
curX += (targetX - curX) * 0.18;
curY += (targetY - curY) * 0.18;
dot.style.transform = `translate(${curX}px, ${curY}px) translate(-50%, -50%)`;
raf = requestAnimationFrame(tick);
};
// hover detection for tiles
const onOver = (e) => {
const tile = e.target.closest && e.target.closest('[data-cursor-tile]');
if (tile) {
dot.classList.add('is-hovering-tile');
const lbl = tile.getAttribute('data-cursor-label') || 'View →';
if (labelRef.current) labelRef.current.textContent = lbl;
} else {
dot.classList.remove('is-hovering-tile');
}
};
document.addEventListener('mousemove', onMove);
document.addEventListener('mouseleave', onLeave);
document.addEventListener('mouseover', onOver);
tick();
return () => {
document.removeEventListener('mousemove', onMove);
document.removeEventListener('mouseleave', onLeave);
document.removeEventListener('mouseover', onOver);
cancelAnimationFrame(raf);
};
}, []);
return (
View →
);
}
// ---------- Marquee ----------
function Marquee({ items, ariaLabel = 'Brand marquee' }) {
// duplicate items so the loop is seamless
const doubled = [...items, ...items];
return (
{doubled.map((it, i) => (
{it}
))}
);
}
// expose globals
Object.assign(window, {
useReveal,
RevealOnScroll,
SplitWord,
Header,
Footer,
CursorFollower,
Marquee,
});