/* App shell โ smooth scroll, scroll progress rail, magnetic cursor,
theme wipe, section composition. */
/* Inline BODE wordmark โ uses currentColor so it themes with surrounding text. */
function BodeLogo({ className, ariaLabel = "BODE" }) {
return (
);
}
window.BodeLogo = BodeLogo;
const SECTION_MARKERS = [
{ id: 'hero', label: '01' },
{ id: 'blueprint', label: '02' },
{ id: 'problem', label: '03' },
{ id: 'capabilities', label: '04' },
{ id: 'position', label: '05' },
{ id: 'contact', label: '06' },
];
/* ----------------------------- Lenis smooth scroll ----------------------- */
function useLenis() {
React.useEffect(() => {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
// Slightly snappier easing + shorter duration than the default โ keeps the
// page from feeling rubbery and reduces double-lerp jitter against any
// ScrollTrigger scrub: true triggers below.
const lenis = new window.Lenis({
duration: 0.9,
easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
smoothWheel: true,
wheelMultiplier: 1,
touchMultiplier: 1.6,
});
const tickerCb = (time) => lenis.raf(time * 1000);
gsap.ticker.add(tickerCb);
gsap.ticker.lagSmoothing(0);
lenis.on('scroll', window.ScrollTrigger.update);
window.__bodeLenis = lenis;
// Pinned ScrollTriggers measure layout at refresh time. Wait one frame so
// initial layout (logo image load, hero ambient masks) has settled.
requestAnimationFrame(() => window.ScrollTrigger.refresh());
return () => {
gsap.ticker.remove(tickerCb);
lenis.destroy();
window.__bodeLenis = null;
};
}, []);
}
/* ----------------------------- Magnetic cursor brackets ----------------- */
function CursorBrackets() {
const ref = React.useRef(null);
React.useEffect(() => {
const el = ref.current;
if (!el) return;
if (window.matchMedia('(pointer: coarse)').matches) return;
let raf = null;
let target = { x: -100, y: -100 };
let pos = { x: -100, y: -100 };
let scale = 1;
let scaleTarget = 1;
let active = false;
function onMove(e) {
const t = e.target;
const interactive = t && t.closest && t.closest('a, button, input, textarea, .sector, .cap, .opt, .submit-btn, .founder, [data-magnetic]');
const magnet = t && t.closest && t.closest('[data-magnetic]');
if (interactive) {
const rect = interactive.getBoundingClientRect();
const cx = rect.left + rect.width / 2;
const cy = rect.top + rect.height / 2;
const pull = magnet ? 0.55 : 0.18;
target.x = e.clientX + (cx - e.clientX) * pull;
target.y = e.clientY + (cy - e.clientY) * pull;
scaleTarget = magnet ? 2.4 : 1.4;
el.classList.add('show');
el.classList.toggle('lock', !!magnet);
} else {
target.x = e.clientX;
target.y = e.clientY;
scaleTarget = 1;
el.classList.add('show');
el.classList.remove('lock');
}
if (!active) { active = true; tick(); }
}
function tick() {
pos.x += (target.x - pos.x) * 0.28;
pos.y += (target.y - pos.y) * 0.28;
scale += (scaleTarget - scale) * 0.18;
el.style.transform = `translate(${pos.x}px, ${pos.y}px) translate(-50%, -50%) scale(${scale})`;
raf = requestAnimationFrame(tick);
}
function onLeave() { el.classList.remove('show'); }
window.addEventListener('mousemove', onMove);
window.addEventListener('mouseleave', onLeave);
return () => {
window.removeEventListener('mousemove', onMove);
window.removeEventListener('mouseleave', onLeave);
cancelAnimationFrame(raf);
};
}, []);
return (
);
}
/* ----------------------------- Scroll progress rail --------------------- */
function ScrollProgress() {
const fillRef = React.useRef(null);
const [active, setActive] = React.useState('hero');
React.useEffect(() => {
const fill = fillRef.current;
let raf = null;
function tick() {
const max = document.documentElement.scrollHeight - window.innerHeight;
const p = max > 0 ? window.scrollY / max : 0;
if (fill) fill.style.transform = `scaleY(${p})`;
let bestId = 'hero';
let bestDist = Infinity;
for (const m of SECTION_MARKERS) {
const node = document.getElementById(m.id);
if (!node) continue;
const r = node.getBoundingClientRect();
const d = Math.abs(r.top - 80);
if (r.top < window.innerHeight * 0.6 && d < bestDist) {
bestDist = d; bestId = m.id;
}
}
setActive(bestId);
raf = requestAnimationFrame(tick);
}
raf = requestAnimationFrame(tick);
return () => cancelAnimationFrame(raf);
}, []);
function jumpTo(id) {
const node = document.getElementById(id);
if (!node) return;
if (window.__bodeLenis) {
window.__bodeLenis.scrollTo(node, { offset: -40, duration: 1.4 });
} else {
node.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
return (
);
}
/* ----------------------------- Theme toggle (with coral wipe) ----------- */
function ThemeToggle() {
const [dark, setDark] = React.useState(() => {
try {
const v = localStorage.getItem('bode-theme-v3');
if (v === 'dark') return true;
if (v === 'light') return false;
return false; // light-led by default; dark is opt-in
} catch (e) { return false; }
});
function toggle() {
const next = !dark;
const wipe = document.getElementById('themeWipe');
if (wipe && !window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
gsap.fromTo(wipe,
{ scaleX: 0, transformOrigin: 'left center', opacity: 1 },
{ scaleX: 1, duration: 0.45, ease: 'expo.in',
onComplete: () => {
setDark(next);
gsap.to(wipe, { scaleX: 0, transformOrigin: 'right center', duration: 0.45, ease: 'expo.out', delay: 0.05 });
}
}
);
} else {
setDark(next);
}
}
React.useEffect(() => {
document.body.classList.toggle('dark', dark);
try { localStorage.setItem('bode-theme-v3', dark ? 'dark' : 'light'); } catch (e) {}
}, [dark]);
return (
);
}
/* ----------------------------- Nav -------------------------------------- */
function Nav() {
return (
);
}
/* ----------------------------- Section transitions --------------------- */
function useSectionCuts() {
React.useEffect(() => {
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
const sweep = document.getElementById('cutSweep');
if (!sweep) return;
const ids = ['blueprint', 'problem', 'capabilities', 'position', 'contact'];
const triggers = ids.map((id) => {
const el = document.getElementById(id);
if (!el) return null;
return ScrollTrigger.create({
trigger: el,
start: 'top 88%',
onEnter: () => {
gsap.fromTo(sweep,
{ scaleX: 0, transformOrigin: 'left center', opacity: 0.85 },
{ scaleX: 1, duration: 0.32, ease: 'expo.in',
onComplete: () => {
gsap.to(sweep, { scaleX: 0, transformOrigin: 'right center', duration: 0.32, ease: 'expo.out' });
}
}
);
},
once: true,
});
});
return () => triggers.forEach((t) => t && t.kill());
}, []);
}
/* ----------------------------- Reveal observer ------------------------- */
function useReveal() {
React.useEffect(() => {
const els = document.querySelectorAll('.reveal');
const obs = new IntersectionObserver((entries) => {
entries.forEach((e) => {
if (e.isIntersecting) {
e.target.classList.add('in');
obs.unobserve(e.target);
}
});
}, { threshold: 0.12, rootMargin: '0px 0px -60px 0px' });
els.forEach((el) => obs.observe(el));
return () => obs.disconnect();
});
}
/* ----------------------------- App -------------------------------------- */
function App() {
useLenis();
useReveal();
useSectionCuts();
return (
);
}
window.App = App;