/* ============== "Em camadas" exploded keycap on scroll ============== */ const useScrollProgress = (ref) => { const [p, setP] = React.useState(0); React.useEffect(() => { const el = ref.current; if (!el) return; const onScroll = () => { const r = el.getBoundingClientRect(); const vh = window.innerHeight; const scrolled = -r.top; const totalScroll = r.height - vh; setP(Math.max(0, Math.min(1, scrolled / totalScroll))); }; onScroll(); window.addEventListener("scroll", onScroll, { passive: true }); window.addEventListener("resize", onScroll); return () => { window.removeEventListener("scroll", onScroll); window.removeEventListener("resize", onScroll); }; }, []); return p; }; const LAYERS = [ { id: "surface", title: "Superfície Lunar", desc: "O primeiro contato. A interface que seu time e seus clientes enxergam todos os dias — limpa, intuitiva, pensada para a operação real.", }, { id: "shell", title: "Crosta Metálica", desc: "Arquitetura sólida, autenticação, criptografia, audit log. Estabilidade e segurança como fundação, não como adendo.", }, { id: "circuits", title: "Circuitos", desc: "Integrações com tudo que sua empresa já usa — ERPs, APIs, calendários, WhatsApp. Os sistemas finalmente conversam.", }, { id: "gears", title: "Engrenagens", desc: "Lógica de negócio modelada com clareza. Automações que devolvem tempo ao time e eliminam retrabalho.", }, { id: "matrix", title: "Fluxo de Dados", desc: "Código, inteligência, dados em tempo real. O motor que faz tudo aqui em cima funcionar, versão por versão, deploy por deploy.", }, { id: "core", title: "O Núcleo", desc: "O resultado: software vivo, gente cuidando, impacto medido no negócio. É onde a Lunar Code mora.", }, ]; // Opacity floor for layers that have been peeled — they remain as faint ghosts const GHOST_OPACITY = 0.10; const ExplodedMoon = ({ progress }) => { const [t, setT] = React.useState(0); React.useEffect(() => { let raf, last = performance.now(); const tick = (now) => { setT((p) => p + (now - last) / 1000); last = now; raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); const N = 6; const R = 160; const ease = (x) => (x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2); const peel = (i) => { const start = i / N; const end = (i + 1) / N; return Math.max(0, Math.min(1, (progress - start) / (end - start))); }; const around = (n, fn, phase = 0) => Array.from({ length: n }, (_, i) => fn(i, ((i + phase) / n) * Math.PI * 2)); // Layers fade from 1.0 to GHOST_OPACITY — creating a transparent echo of past layers const peelStyle = (i) => { const p = ease(peel(i)); return { opacity: GHOST_OPACITY + (1 - GHOST_OPACITY) * (1 - p), transform: `scale(${1 + p * 0.055})`, transformOrigin: "center", transition: "opacity 0.35s linear, transform 0.35s linear", pointerEvents: "none", }; }; const revealStyle = (i) => { if (i === 0) return { transformOrigin: "center" }; const r = ease(peel(i - 1)); return { transform: `scale(${0.96 + r * 0.04})`, transformOrigin: "center", transition: "transform 0.35s linear", }; }; return (
{/* Surface gradients */} {/* Chip / core gradients */} {/* === Background halo + drifting starfield === */} {around(38, (i, a) => { const r = 192 + ((i * 23) % 32); const x = Math.cos(a + i * 0.11) * r; const y = Math.sin(a + i * 0.11) * r; const tw = 0.35 + 0.55 * (0.5 + 0.5 * Math.sin(t * 1.5 + i * 0.7)); return ; })} {/* === Layer 5 · Chip · Lunar Code (always at bottom) === */} {/* PCB disc base */} {/* PCB substrate grid */} {Array.from({ length: 17 }, (_, i) => i * 20 - 160).map(x => ( ))} {Array.from({ length: 17 }, (_, i) => i * 20 - 160).map(y => ( ))} {/* PCB traces from chip pins to disc edge */} {/* Top */} {/* Bottom */} {/* Left */} {/* Right */} {/* Trace end-pads */} {[ [-56,-125],[-92,-88],[-8,-135],[52,-145],[88,-145],[115,-108], [-56,122],[-78,145],[48,145],[-95,118], [-148,-30],[-158,0],[-145,30],[145,-15],[155,0],[128,58], ].map(([x, y], i) => ( ))} {/* Passive SMD components on PCB */} {[ { x: -115, y: -44 },{ x: 108, y: -50 }, { x: -108, y: 50 }, { x: 112, y: 54 }, { x: -30, y: -102 },{ x: 36, y: -100 }, { x: -36, y: 98 }, { x: 22, y: 102 }, ].map(({ x, y }, i) => { const horiz = Math.abs(y) > 90; const w = horiz ? 7 : 12, h = horiz ? 12 : 7; return ( ); })} {/* Chip drop shadow */} {/* ── Chip body ── */} {/* Chip edge highlight */} {/* Pin 1 corner notch + marker */} {/* ── Pins · top (8) ── */} {[-56,-40,-24,-8,8,24,40,56].map((x, i) => ( ))} {/* ── Pins · bottom (8) ── */} {[-56,-40,-24,-8,8,24,40,56].map((x, i) => ( ))} {/* ── Pins · left (5) ── */} {[-30,-15,0,15,30].map((y, i) => ( ))} {/* ── Pins · right (5) ── */} {[-30,-15,0,15,30].map((y, i) => ( ))} {/* ── Die area ── */} {/* Die internal grid */} {[-37,0,37].map(x => )} {[-25,0,25].map(y => )} {/* Die sub-blocks */} {[ [-54,-35,22,20],[-54,15,22,20], [32,-35,22,20],[32,15,22,20], ].map(([x,y,w,h], i) => ( ))} {/* ── LUNAR CODE text ── */} LUNAR CODE {/* Model / part number */} LC‑01 · CUSTOM {/* Pin 1 label */} 1 {/* Status LEDs */} {[{ x:75, y:-43, c:"#22ee88"}, {x:-75, y:-43, c:"#5b8def"}].map(({x,y,c},i)=>{ const on = Math.sin(t * (2.2 + i * 1.5)) > 0.15; return ( ); })} {/* Data-packet pulses orbiting the chip */} {around(6, (i, a) => { const speed = 0.65 + i * 0.12; const phase = (t * speed + i * (1/6)) % 1; const ri = 100, ro = 150; const rr = ri + (ro - ri) * phase; return ( ); })} {/* Rim */} {/* === Layer 4 · Matrix · data rain (ghost persists after peel) === */} {Array.from({ length: 13 }).map((_, col) => { const x = -150 + col * 25; const speed = 32 + (col % 3) * 14; const offset = (t * speed + col * 31) % 320; return Array.from({ length: 14 }).map((_, row) => { const y = -160 + ((row * 22) + offset) % 320; const fade = 1 - row / 14; const ch = row === 0 ? "1" : (col * 7 + row * 11) % 2; return ( {ch} ); }); })} {/* === Layer 3 · Gears === */} {/* === Layer 2 · Circuits · neon traces === */} {[ [-65,-78],[65,-78],[-78,68],[78,68], [-55,-160],[55,-160],[-78,160],[90,160], [-160,-55],[160,-55],[-160,45],[160,45], [0,0], ].map(([x, y], i) => { const isPulse = Math.floor(t * 1.5) % 13 === i; return ( ); })} {/* === Layer 1 · Shell · titanium panels + rivets === */} {around(12, (i, a) => ( ))} {around(28, (i, a) => ( ))} LUNAR · 02 {/* === Layer 0 · Surface · lunar crust (topmost) === */} {[ [-46,-58,26],[38,24,36],[-70,72,22],[70,-94,17], [96,82,12],[-108,-22,10],[22,118,11],[-22,-128,8], [-128,46,9],[118,-34,7],[60,130,6],[-58,0,5], ].map(([x, y, s], i) => ( ))}
); }; const Gear = ({ cx, cy, r, teeth, rotation, fill }) => { const inner = r * 0.78; const path = []; const step = (Math.PI * 2) / (teeth * 2); for (let i = 0; i < teeth * 2; i++) { const a = i * step; const rad = i % 2 === 0 ? r : inner; path.push((i === 0 ? "M" : "L") + (Math.cos(a) * rad).toFixed(2) + "," + (Math.sin(a) * rad).toFixed(2)); } path.push("Z"); return ( {Array.from({ length: 5 }).map((_, i) => { const a = (i / 5) * Math.PI * 2; return ; })} ); }; const Anatomia = () => { const sectionRef = React.useRef(null); const rightRef = React.useRef(null); const itemRefs = React.useRef([]); const progress = useScrollProgress(sectionRef); const activeIdx = Math.min( LAYERS.length - 1, Math.max(0, Math.floor(progress * LAYERS.length * 1.05)) ); React.useEffect(() => { const el = itemRefs.current[activeIdx]; const container = rightRef.current; if (!el || !container) return; const containerRect = container.getBoundingClientRect(); const elRect = el.getBoundingClientRect(); const relativeTop = elRect.top - containerRect.top + container.scrollTop; container.scrollTop = Math.max(0, relativeTop - containerRect.height / 2 + elRect.height / 2); }, [activeIdx]); return (
Anatomia · 04

Software em camadas.

Cada sistema que entregamos é desmontável — pensado em camadas que conversam entre si, mas evoluem independentemente. Role para ver o que tem dentro.

    {LAYERS.map((l, i) => (
  1. { itemRefs.current[i] = el; }} className={`anatomia-item ${i === activeIdx ? "active" : ""} ${i < activeIdx ? "passed" : ""}`}>
    {String(i + 1).padStart(2, "0")}

    {l.title}

    {l.desc}

    2. ))}
); }; const anatomiaStyles = ` .anatomia { height: 300vh; position: relative; background: linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 50%, var(--bg) 100%); padding: 0; } .anatomia-sticky { position: sticky; top: 0; height: 100vh; display: flex; align-items: flex-start; padding-top: clamp(48px, 7vh, 84px); overflow: hidden; z-index: 1; } .anatomia-sticky::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 50% 40% at 30% 50%, rgba(var(--accent-glow), 0.12), transparent 70%); pointer-events: none; } .anatomia-inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; width: 100%; } @media (max-width: 980px) { .anatomia { height: auto; padding: 120px 0; } .anatomia-sticky { position: relative; height: auto; padding-top: 0; } .anatomia-inner { grid-template-columns: 1fr; gap: 80px; } } .anatomia-left { position: relative; height: 90vh; display: flex; align-items: center; justify-content: center; } @media (max-width: 980px) { .anatomia-left { height: 80vh; min-height: 600px; } } .anatomia-progress { position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px; background: var(--border); } .anatomia-progress-bar { width: 100%; background: linear-gradient(180deg, var(--accent-2), var(--accent)); transition: height 0.1s linear; } @media (max-width: 980px) { .anatomia-progress { display: none; } } @media (max-height: 750px) { .anatomia-sticky { padding-top: 40px; } .anatomia-item { padding: 6px 0; } .anatomia-item h3 { font-size: clamp(18px, 1.8vh, 24px); } .anatomia-right .lead { display: none; } } .anatomia-right { padding-left: 20px; overflow-y: auto; max-height: calc(100vh - clamp(48px, 7vh, 84px) - 20px); -ms-overflow-style: none; scrollbar-width: none; } .anatomia-right::-webkit-scrollbar { display: none; } .anatomia-list { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-top: 16px; } .anatomia-item { display: grid; grid-template-columns: 28px 1fr; gap: 16px; padding: clamp(8px, 1.4vh, 14px) 0; opacity: 0.35; transform: translateX(0px); transition: opacity 0.55s var(--ease-out), transform 0.55s var(--ease-out); } .anatomia-item.passed { opacity: 0.5; } .anatomia-item.active { opacity: 1; transform: translateX(5px); } .ai-marker { display: flex; flex-direction: column; align-items: center; } .ai-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--text-faint); margin-top: 8px; transition: all 0.45s var(--ease-out); } .anatomia-item.active .ai-dot { background: var(--accent-2); box-shadow: 0 0 0 4px rgba(91,141,239,0.18), 0 0 18px var(--accent-2); transform: scale(1.5); } .anatomia-item.passed .ai-dot { background: var(--accent-deep); } .ai-line { flex: 1; width: 1px; background: var(--border); margin-top: 6px; } .anatomia-item:last-child .ai-line { display: none; } .ai-body { padding-bottom: 8px; } .ai-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.15em; color: var(--text-faint); margin-bottom: 4px; transition: color 0.4s; } .anatomia-item.active .ai-num { color: var(--accent-2); } .anatomia-item h3 { font-family: var(--font-display); font-size: clamp(22px, 2.2vw, 28px); font-weight: 400; letter-spacing: -0.01em; color: var(--text); margin-bottom: 6px; transition: color 0.4s; } .anatomia-item.active h3 { color: var(--text); } .anatomia-item p { font-size: 14px; color: var(--text-dim); line-height: 1.6; max-width: 400px; opacity: 0; max-height: 0; overflow: hidden; margin-top: 0; margin-bottom: 0; transition: opacity 0.5s var(--ease-out), max-height 0.5s var(--ease-out); } .anatomia-item.active p { opacity: 1; max-height: 120px; } .anatomia-item.passed p { opacity: 0.52; max-height: 120px; } `; const moonStyles = ` .moon-stage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; position: relative; } .moon-stage svg { width: min(100%, 560px); height: auto; filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55)); } .moon-stage svg g { transition: opacity 0.45s var(--ease-out); } @media (max-width: 980px) { .moon-stage svg { width: min(86%, 420px); } } `; window.Anatomia = Anatomia;