/* global React, ReactDOM, useReveal, Nav, Footer, StatsStrip, TeamImage, IMAGES, JOBS, ArrowRight, ArrowUpRight, MAIL, ScrollSpinner, ApplicationModal, ContactModal, PageBackdrop, Parallax */ const { useEffect, useRef } = React; function openApply(role = '') { window.dispatchEvent(new CustomEvent('open-apply', { detail: { role } })); } // Full-page canvas backdrop — covers entire document height, drawn ONCE. // The same curve flows from top (hero) all the way to the bottom of the page. // Stars/dune fill only the top viewport-height (hero area); below, just the continuing curve. function HeroDark() { const canvasRef = useRef(null); const wrapRef = useRef(null); useEffect(() => { const canvas = canvasRef.current; const wrap = wrapRef.current; if (!canvas || !wrap) return; function draw() { const heroH = window.innerHeight; const W = wrap.clientWidth; const H = Math.max(wrap.clientHeight, heroH); if (W <= 0 || H <= 0) return; const dpr = Math.min(window.devicePixelRatio || 1, 2); canvas.width = W * dpr; canvas.height = H * dpr; canvas.style.width = W + 'px'; canvas.style.height = H + 'px'; const ctx = canvas.getContext('2d'); ctx.setTransform(dpr, 0, 0, dpr, 0, 0); // Pure black fills the whole document ctx.fillStyle = '#040404'; ctx.fillRect(0, 0, W, H); let s = 987654321; const rand = () => { s = (s * 1103515245 + 12345) & 0x7fffffff; return s / 0x7fffffff; }; // Continuous crest: t parametrised so t=0..1 covers the hero height, // and t > 1 continues the SAME curve down through the rest of the page. const samples = Math.max(800, Math.round(H / 3)); const crest = []; for (let i = 0; i < samples; i++) { const y = (i / (samples - 1)) * H; const tGlobal = y / heroH; const x = W * 0.46 + Math.sin(tGlobal * Math.PI * 0.95) * W * 0.10 - Math.sin(tGlobal * Math.PI * 1.9 + 0.4) * W * 0.07; crest.push([x, y]); } // Sparse starfield — only inside the hero viewport, so below the fold stays clean const starCount = Math.round((W * heroH) / 1900); for (let i = 0; i < starCount; i++) { const x = rand() * W; const y = rand() * heroH; const idx = Math.min(samples - 1, Math.max(0, Math.round((y / H) * (samples - 1)))); const crestX = crest[idx][0]; if (x > crestX - 4) continue; const distToEdge = crestX - x; if (distToEdge < 40 && rand() > distToEdge / 40) continue; const r = rand() * 0.7 + 0.22; const op = rand() * 0.35 + 0.10; ctx.fillStyle = `rgba(255,255,255,${op.toFixed(3)})`; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill(); } // Solid dune silhouette — only in the hero portion (right side) ctx.save(); ctx.beginPath(); ctx.rect(0, 0, W, heroH); ctx.clip(); ctx.fillStyle = '#040404'; ctx.beginPath(); ctx.moveTo(crest[0][0], crest[0][1]); for (let i = 1; i < crest.length && crest[i][1] <= heroH; i++) ctx.lineTo(crest[i][0], crest[i][1]); ctx.lineTo(W + 50, heroH); ctx.lineTo(W + 50, 0); ctx.closePath(); ctx.fill(); ctx.restore(); // Rim grain along the WHOLE crest — consistent density top to bottom const RIM_SPREAD = Math.min(180, W * 0.10); for (let i = 0; i < crest.length; i++) { const [cx, cy] = crest[i]; const prev = crest[Math.max(0, i - 1)]; const next = crest[Math.min(crest.length - 1, i + 1)]; const tx = next[0] - prev[0], ty = next[1] - prev[1]; const tlen = Math.hypot(tx, ty) || 1; const nx = -ty / tlen, ny = tx / tlen; const lefting = nx < 0 ? 1 : -1; const cluster = Math.floor(rand() * 6 + 8); for (let j = 0; j < cluster; j++) { const u = rand(); const offset = Math.pow(u, 1.5) * RIM_SPREAD; const x = cx + nx * offset * lefting; const y = cy + ny * offset * lefting + (rand() - 0.5) * 4; const op = (1 - u) * (rand() * 0.5 + 0.45); if (op < 0.04) continue; const r = rand() * 0.55 + 0.22; ctx.fillStyle = `rgba(255,255,255,${op.toFixed(3)})`; ctx.beginPath(); ctx.arc(x, y, r, 0, Math.PI * 2); ctx.fill(); } } // Full-length continuous line — soft halo + crisp highlight all the way down ctx.save(); ctx.filter = 'blur(5px)'; ctx.strokeStyle = 'rgba(255,255,255,0.30)'; ctx.lineWidth = 2.4; ctx.beginPath(); ctx.moveTo(crest[0][0], crest[0][1]); for (let i = 1; i < crest.length; i++) ctx.lineTo(crest[i][0], crest[i][1]); ctx.stroke(); ctx.restore(); ctx.strokeStyle = 'rgba(255,255,255,0.55)'; ctx.lineWidth = 0.8; ctx.beginPath(); ctx.moveTo(crest[0][0], crest[0][1]); for (let i = 1; i < crest.length; i++) ctx.lineTo(crest[i][0], crest[i][1]); ctx.stroke(); } draw(); const onResize = () => draw(); window.addEventListener('resize', onResize); let ro; if (typeof ResizeObserver !== 'undefined') { ro = new ResizeObserver(() => draw()); ro.observe(document.body); } const t1 = setTimeout(draw, 250); const t2 = setTimeout(draw, 900); // Scroll parallax — translate the wrap vertically so the line moves slower than content let raf; const tickScroll = () => { if (wrap) wrap.style.transform = `translate3d(0, ${window.scrollY * 0.18}px, 0)`; raf = requestAnimationFrame(tickScroll); }; raf = requestAnimationFrame(tickScroll); return () => { window.removeEventListener('resize', onResize); if (ro) ro.disconnect(); clearTimeout(t1); clearTimeout(t2); cancelAnimationFrame(raf); }; }, []); return ( <>

Crafting the Future of
Digital Habits and Wellbeing

We create world-class digital wellness, wellbeing, and AI tools for people everywhere

); } // PageLine — no-op now; the hero canvas covers the whole document. function PageLine() { return null; } function ImageTextBlock({ titleRegular, titleBold, body, img, alt, reverse = false }) { return (

{titleRegular} {titleBold}

{body}

); } function CategoriesCard() { const items = [ { label: 'Digital', icon: ( )}, { label: 'Wellness', icon: ( )}, { label: 'Books', icon: ( )}, { label: 'AI Tech', icon: ( )}, ]; return (
{/* 4 category badges */}
{items.map((it, i) => (
{it.icon}
{it.label}
))}
{/* Divider + paragraph + button */}

We offer rare opportunities, drawing top talent to join our rapidly growing team and launching innovative brands in a fast-expanding digital wellness industry. If you're bold, ambitious, and ready to push your limits, let's talk.

); } function JoinMissionCTA() { return (

Join our mission!

Shape the future of digital wellness & wellbeing with us.

See positions
); } function HomePage() { useReveal(); useEffect(() => { document.body.classList.add('home-active'); return () => document.body.classList.remove('home-active'); }, []); return (
); } const root = ReactDOM.createRoot(document.getElementById('root')); root.render();