// Shared UI bits for the Alternative Assets page
const { useState, useEffect, useRef, useMemo, useCallback } = React;
// Observe when an element scrolls into view
function useInView(ref, opts = { threshold: 0.25 }) {
const [inView, setInView] = useState(false);
useEffect(() => {
if (!ref.current) return;
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { setInView(true); io.disconnect(); }
}, opts);
io.observe(ref.current);
return () => io.disconnect();
}, []);
return inView;
}
// Small label that reveals character-by-character when in view
function RevealText({ children, as: Tag = 'div', style, delay = 0 }) {
const ref = useRef(null);
const inView = useInView(ref);
return (
{children}
);
}
// Nav bar matching site
function AltNav({ theme }) {
return (
);
}
// Section label (eyebrow)
function Eyebrow({ children, theme }) {
return {children}
;
}
// Big display title
function Display({ children, theme, style }) {
return {children}
;
}
function Rule({ theme, style }) {
return ;
}
Object.assign(window, { useInView, RevealText, AltNav, Eyebrow, Display, Rule });