// ====== Hooks ======
function useReveal() {
React.useEffect(() => {
let io;
const observe = () => {
const els = document.querySelectorAll(".rv:not(.in)");
if (!els.length) return;
io && io.disconnect();
io = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) { e.target.classList.add("in"); io.unobserve(e.target); }
});
}, { threshold: 0.05, rootMargin: "0px 0px -4% 0px" });
els.forEach((el) => io.observe(el));
};
// Run after layout settles; re-run on resize and scroll (cheap, observer is the gatekeeper).
const t1 = setTimeout(observe, 50);
const t2 = setTimeout(observe, 400);
window.addEventListener("scroll", observe, { passive: true });
window.addEventListener("resize", observe);
// Safety net: after 1.2s, force everything visible so the page never has invisible content.
const failsafe = setTimeout(() => {
document.querySelectorAll(".rv:not(.in)").forEach((el) => el.classList.add("in"));
}, 1200);
return () => {
clearTimeout(t1); clearTimeout(t2); clearTimeout(failsafe);
window.removeEventListener("scroll", observe);
window.removeEventListener("resize", observe);
io && io.disconnect();
};
}, []);
}
function useParallax(ref, factor = 0.25) {
React.useEffect(() => {
if (!ref.current) return;
let raf = 0;
const onScroll = () => {
cancelAnimationFrame(raf);
raf = requestAnimationFrame(() => {
if (!ref.current) return;
const r = ref.current.getBoundingClientRect();
const vh = window.innerHeight || 800;
const t = (vh - r.top) / (vh + r.height);
const y = (t - 0.5) * 100 * factor;
ref.current.style.transform = `translate3d(0, ${y.toFixed(2)}px, 0)`;
});
};
onScroll();
window.addEventListener("scroll", onScroll, { passive: true });
return () => { window.removeEventListener("scroll", onScroll); cancelAnimationFrame(raf); };
}, [ref, factor]);
}
// ====== Skymotion wordmark (real logo) ======
function Wordmark({ size = 18, invert = false }) {
// The real logo is "Sky" in blue + "motion" in white/grey with "AERIAL CINEMATOGRAPHY AMSTERDAM" tagline.
// Aspect ratio of the source PNG is 1500×562 ≈ 2.67.
const h = size * 2.4;
const w = h * (1500 / 562);
return (
);
}
// ====== Top nav ======
function TopBar({ lang, setLang }) {
const c = window.COPY[lang];
return (
);
}
function LangSwitch({ lang, setLang }) {
const Btn = ({ k, label }) => (
);
return (
);
}
// ====== Section header used across the page ======
function SectionHead({ kicker, title, lead, align = "left" }) {
return (
{kicker}
{title}
{lead && (
{lead}
)}
);
}
// ====== Scroll-cue arrow ======
function ScrollCue({ label = "Scroll" }) {
return (
{label}
);
}
// ====== Sound / mute toggle for the hero ======
function SoundToggle({ muted, onToggle, onLabel, offLabel }) {
return (
);
}
function SpeakerIcon({ muted }) {
return (
);
}
// ====== Image frame — real photo if `src` present, striped placeholder otherwise ======
function ImagePlaceholder({ label, ratio = "16/9", strong = false, children, code, src, objectPosition = "center" }) {
return (
{src && (
)}
{!src && (
<>
{code || "PLACEHOLDER"}
{label}
↗ DROP STILL
)}
{children}