// technology.jsx — Pinned scroll-driven Technology section // Three slides advance horizontally as the user scrolls a tall pinned container. const { useState: useTechState, useEffect: useTechEffect, useRef: useTechRef } = React; function SlideAnatomy() { return (

Cross-section comparison: Li-ion (graphite anode, separator, cathode in liquid electrolyte) vs solid-state (Li metal anode, solid electrolyte cathode).

); } // function SlideChallenge() { // return ( // // ); // } function SlideChallenge() { return (

Cross-section of a slurry-coated solid-state electrode with residual voids.

); } function SlideUSP() { return (

Photograph of Ternon's dry-coating production line.

); } const TECH_SLIDES = [ { n: '01', figCaption: 'Battery anatomy', eyebrow: 'The promise', title: 'Solid-state vs Li-ion.', body: "Solid-state batteries will be foundational to the technologies shaping the coming decades: robotics, drones, sustainable transport, advanced medical devices. Their promise is a step-change in energy density and operational safety. \n\nThis is not a distant prospect. The science is mature. Manufacturing at scale is the remaining frontier. ", bullets: [ ['Energy density', 'up to 2x over Li-ion'], ['Safety', 'safe at extreme temperatures/charging conditions'], ], layout: 'image-left', Diagram: SlideAnatomy, }, { n: '02', figCaption: 'The Swiss cheese problem: voids that block ion flow', eyebrow: 'The challenge', title: 'Manufacturing solid-state electrodes.', body: 'Today\'s lithium-ion electrode production technologies fail to deliver the key attributes solid-state batteries require. \n\nWhere lithium-ion electrodes are manufactured porous — electrolyte infiltrated as a later step — solid-state electrodes must remain virtually void-free and integrate the electrolyte during the coating process itself. \nWhere lithium-ion electrode production relies on solvent-based coating, solid-state materials degrade on solvent contact and demand ultra-low moisture environments. \n\nThe process gap is not incremental. Solid-state electrode manufacturing requires a fundamentally different approach.', bullets: [ ['Material stability', 'Solvents can degrade sensitive solid electrolytes'], ['Porosity', 'Residual voids after manufacturing reduce performance'], ], layout: 'image-left', Diagram: SlideChallenge, }, { n: '03', figCaption: 'Ternon\'s dry-coating line', eyebrow: 'The solution', title: "Ternon's dry-coating technology.", body: 'Ternon has developed a dry-coating process purpose-built for solid-state electrode production — no solvents, no moisture, no compromises on material integrity. We transform free-flowing powders into dense, cohesive electrode sheets, with the microstructure precision that solid-state performance demands. \n\nWe are a team of materials scientists and engineers obsessed with electrode microstructure. We handle the electrode so you can focus on the cell. ', bullets: [ ['Materials integrity', 'No solvents and <0.1 ppm moisture in production \nto preserve sensitive solid-state materials'], ['Maximized performance', 'Ultra-low binder and residual void fractions \nfor peak ionic conductivity'], ['Scale', 'Continuous dry-coating line \ndesigned for volume production from day one'], ['Sustainability', 'Dramatically reduced energy consumption \nand elimination of toxic solvents'], ], layout: 'image-left', Diagram: SlideUSP, }, ]; function Technology() { const wrapRef = useTechRef(null); const [progress, setProgress] = useTechState(0); const [isMobile, setIsMobile] = useTechState( typeof window !== 'undefined' && window.matchMedia('(max-width: 760px)').matches ); const slideCount = TECH_SLIDES.length; useTechEffect(() => { const mq = window.matchMedia('(max-width: 760px)'); const update = () => setIsMobile(mq.matches); update(); mq.addEventListener('change', update); return () => mq.removeEventListener('change', update); }, []); useTechEffect(() => { if (isMobile) return; const wrap = wrapRef.current; if (!wrap) return; const onScroll = () => { const rect = wrap.getBoundingClientRect(); const total = wrap.offsetHeight - window.innerHeight; const scrolled = -rect.top; const p = Math.max(0, Math.min(1, total > 0 ? scrolled / total : 0)); setProgress(p); }; onScroll(); window.addEventListener('scroll', onScroll, { passive: true }); window.addEventListener('resize', onScroll); return () => { window.removeEventListener('scroll', onScroll); window.removeEventListener('resize', onScroll); }; }, [isMobile]); if (isMobile) { return (

Technology

{TECH_SLIDES.map((s) => { const Diagram = s.Diagram; return (

Fig. {s.n}{s.figCaption ? ` · ${s.figCaption}` : ''}

{s.eyebrow}

{s.title}

{s.body}

{k} {v}

); })}

); } const continuous = progress * (slideCount - 1); const currentIndex = Math.max(0, Math.min(slideCount - 1, Math.round(continuous))); return (

Technology {String(currentIndex + 1).padStart(2, '0')} / {String(slideCount).padStart(2, '0')}

{TECH_SLIDES.map((s, i) => { const local = continuous - i; const DWELL = 0.25; const ease = (t) => { const c = Math.max(0, Math.min(1, t)); return c < 0.5 ? 4 * c * c * c : 1 - Math.pow(-2 * c + 2, 3) / 2; }; let translateX, opacity, scale; if (Math.abs(local) <= DWELL) { translateX = 0; opacity = 1; scale = 1; } else if (local < -DWELL) { const t = ease(Math.min(1, (Math.abs(local) - DWELL) / (1 - DWELL))); translateX = 60 * t; opacity = 1 - t; scale = 1 - 0.04 * t; } else { const t = ease(Math.min(1, (local - DWELL) / (1 - DWELL))); translateX = -40 * t; opacity = 1 - t; scale = 1 - 0.02 * t; } const Diagram = s.Diagram; return (

Fig. {s.n}{s.figCaption ? ` · ${s.figCaption}` : ''}

{s.eyebrow}

{s.title}

{s.body}

{k} {v}

); })}

); } Object.assign(window, { Technology });