// Shared primitives for Minicorn site
const { useState, useEffect, useRef } = React;
function Reveal({ children, delay = 0, as: Tag = 'div', className = '', style = {} }) {
const ref = useRef(null);
const [shown, setShown] = useState(false);
useEffect(() => {
const el = ref.current; if (!el) return;
// Sync check first — if already in view (above the fold), reveal immediately.
const r = el.getBoundingClientRect();
if (r.top < window.innerHeight && r.bottom > 0) {
setShown(true);
return;
}
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) { setShown(true); io.disconnect(); }
}, { threshold: 0.05 });
io.observe(el);
// Safety fallback: ensure visible after 1.5s no matter what.
const t = setTimeout(() => setShown(true), 1500);
return () => { io.disconnect(); clearTimeout(t); };
}, []);
return (
{children}
);
}
function Arrow({ size = 14 }) {
return (
);
}
// Minicorn horn — twisted unicorn horn used as the logo mark
function Horn({ size = 28 }) {
const s = size * 0.9;
return (
);
}
// Wordmark — using Zain at lowercase per user's note
function Wordmark({ size = 28 }) {
return (
minicorn
);
}
function SectionLabel({ n, children }) {
return (
[ {String(n).padStart(2,'0')} ]{children}
);
}
// Used everywhere — phone shell with glass screen and a slot
function PhoneFrame({ children, width = 280, scale = 1 }) {
const w = width;
const h = w * 2.05;
return (