const { useState, useEffect, useRef, useCallback } = React;
// ─── Reveal on scroll ──────────────────────────────────────────────────────
function Reveal({ children, delay = 0, as: Tag = 'div', className = '', ...rest }) {
const ref = useRef(null);
const [shown, setShown] = useState(false);
useEffect(() => {
const el = ref.current;
if (!el) return;
const io = new IntersectionObserver(
(entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
setTimeout(() => setShown(true), delay);
io.disconnect();
}
});
},
{ threshold: 0.08, rootMargin: '0px 0px -60px 0px' }
);
io.observe(el);
return () => io.disconnect();
}, [delay]);
return (
{children}
);
}
// ─── Logo mark ─────────────────────────────────────────────────────────────
function LogoMark({ size = 28, color = 'var(--bone)', accent = 'var(--signal)', dot = 'var(--ember)' }) {
return (
);
}
// ─── Metadata row — JetBrains Mono segments separated by // ─────────────
function MetaRow({ items, className = '' }) {
return (
{items.map((it, i) => (
{it}
{i < items.length - 1 && //}
))}
);
}
// ─── Section heading — caption + display headline + optional sub ────────
function SectionHead({ caption, title, sub, align = 'left' }) {
return (
▸ {caption}
{title}
{sub && (
{sub}
)}
);
}
// ─── Cinematic placeholder plate — 1:1 / 16:9 etc. ─────────────────────
function Plate({ aspect = '16/9', label, project, children, style = {} }) {
return (
{children}
{label &&
{label}}
{project && (
●
{project}
)}
);
}
// ─── Header (sticky) ───────────────────────────────────────────────────
function Header({ onNav }) {
const [scrolled, setScrolled] = useState(false);
const [open, setOpen] = useState(false);
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 40);
onScroll();
window.addEventListener('scroll', onScroll, { passive: true });
return () => window.removeEventListener('scroll', onScroll);
}, []);
const links = [
['Work', 'work'],
['Services', 'services'],
['Process', 'process'],
['Studio', 'studio'],
['Journal', 'journal'],
];
return (
{ e.preventDefault(); onNav('top'); }} aria-label="Ansel — home" style={{ display: 'flex', alignItems: 'center' }}>
{open && (
)}
);
}
Object.assign(window, { Reveal, LogoMark, MetaRow, SectionHead, Plate, Header });