,
document.body
)}
);
}
// Split-flap counter — counts up to `value` (string of digits or includes suffix glyphs).
// Triggers on viewport-enter via IntersectionObserver. Each digit cell rolls 0→9 then settles
// on the target. Static glyphs (+, em-dash, etc.) are rendered without animation.
function Splitflap({ value, className = "" }) {
const target = String(value);
const ref = useRef(null);
const [armed, setArmed] = useState(false);
const [displayValues, setDisplayValues] = useState(() => target.split("").map(() => 0));
// Trigger when scrolled into view (only once)
useEffect(() => {
if (!ref.current) return;
const io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
setArmed(true);
io.disconnect();
}
});
}, { threshold: 0.4 });
io.observe(ref.current);
return () => io.disconnect();
}, []);
// Reduced-motion: snap straight to final value
useEffect(() => {
if (!armed) return;
if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
setDisplayValues(target.split("").map((c) => (/\d/.test(c) ? Number(c) : c)));
return;
}
// Roll each digit cell to its target index. The CSS transition handles the visual.
// Stagger per cell for that mechanical chain feel.
const finals = target.split("").map((c) => (/\d/.test(c) ? Number(c) : c));
finals.forEach((v, i) => {
// Add full revolutions so a cell rolls past 0..9 even if final == 0
if (typeof v === "number") {
const revs = 2 + i; // outer cells spin longer for satisfying cascade
setTimeout(() => {
setDisplayValues((prev) => {
const next = [...prev];
next[i] = v + revs * 10;
return next;
});
}, i * 90);
} else {
setDisplayValues((prev) => {
const next = [...prev];
next[i] = v;
return next;
});
}
});
}, [armed, target]);
return (
{target.split("").map((ch, i) => {
const isDigit = /\d/.test(ch);
if (!isDigit) {
// Static glyph (+, —, em-dash). Green if +.
return (
{ch}
);
}
const targetVal = displayValues[i];
// Strip is 0..9 repeated enough times that any revolution count lands on a real digit
const strip = [];
const repeats = 6;
for (let r = 0; r < repeats; r++) for (let d = 0; d < 10; d++) strip.push(d);
return (
{strip.map((d, k) => {d})}
);
})}
);
}
// Live REC timecode — pulsing red REC chip + ticking HH:MM:SS. Renders inside a
// .photo overlay; sells the field-camera personality of the brand.
function RecTimestamp({ className = "", style = {} }) {
const [time, setTime] = useState(() => formatNow());
useEffect(() => {
const id = setInterval(() => setTime(formatNow()), 1000);
return () => clearInterval(id);
}, []);
return (
REC
{time}
);
}
function formatNow() {
const t = new Date();
const pad = (n) => String(n).padStart(2, "0");
return `${pad(t.getHours())}:${pad(t.getMinutes())}:${pad(t.getSeconds())}`;
}
// Resource resolver — supports both dev (relative paths) and inline-bundled standalone
// where window.__resources maps original path → blob URL.
function img(path) {
if (typeof window !== "undefined" && window.__resources) {
// Try several lookups: full path, basename, and various id variants
const direct = window.__resources[path];
if (direct) return direct;
const base = path.split("/").pop();
if (window.__resources[base]) return window.__resources[base];
const id = base.replace(/\.[^.]+$/, "").replace(/[^a-z0-9]/gi, "");
if (window.__resources[id]) return window.__resources[id];
}
return path;
}
function Chip({ children, amber, mono }) {
return (
{children}
);
}
function Tag({ children }) {
return {children};
}
function MetaLine({ label, value, mono }) {
return (
{label}{value}
);
}
// Nav
function Nav({ onLaunch, palette, onTogglePalette }) {
const [scrolled, setScrolled] = useState(false);
const [menuOpen, setMenuOpen] = useState(false);
const [logoSpin, setLogoSpin] = useState(0);
const triggerLogo = (ev) => {
// Easter egg — only fire when already at top of page (so animation isn't
// wasted while the page is scrolling away). Doesn't block the anchor jump.
if (window.scrollY < 100) setLogoSpin((n) => n + 1);
};
useEffect(() => {
const onScroll = () => setScrolled(window.scrollY > 30);
window.addEventListener("scroll", onScroll, { passive: true });
return () => window.removeEventListener("scroll", onScroll);
}, []);
// Lock body scroll when menu is open + close on Esc
useEffect(() => {
if (!menuOpen) return;
const prev = document.body.style.overflow;
document.body.style.overflow = "hidden";
const onKey = (e) => { if (e.key === "Escape") setMenuOpen(false); };
document.addEventListener("keydown", onKey);
return () => {
document.body.style.overflow = prev;
document.removeEventListener("keydown", onKey);
};
}, [menuOpen]);
const closeMenu = () => setMenuOpen(false);
const isDark = palette !== "kraft";
const navLinks = [
["Home", "/"],
["Litepaper", "/litepaper"],
["Tokenomics", "/tokenomics"],
["Theory of Change", "/toc"],
["SDG", "/sdg"],
["Investors", "/investors"],
];
return (
);
}
// Modal — "Where do you want to start?"
function StartModal({ open, onClose }) {
useEffect(() => {
if (!open) return;
const onKey = (e) => { if (e.key === "Escape") onClose(); };
document.addEventListener("keydown", onKey);
return () => document.removeEventListener("keydown", onKey);
}, [open, onClose]);
if (!open) return null;
return (