{/* IDEA header */}

IDEA · {String(ideaNum || 1).padStart(2, '0')}

Status · {status}

{/* Title */}

30 ? 64 : 84, fontWeight: Tokens.weight.black, color: scheme.text, letterSpacing: '-0.025em', textTransform: 'uppercase', lineHeight: 0.94, }}>{renderTitle(title)}

{/* Hypothesis */} {hypothesis && (

HYPOTHESIS

"{hypothesis}"

)} {/* Quantification card (centered between hypothesis and evidence) */} {quantification && (

QUANTIFICATION

{quantification.value}

{quantification.label}

)} {/* Evidence grid */}

{/* PROOF */}

✓ PROOF · {proof.length}

{proof.map((p, i) => (

• {p}

))}

{/* CHALLENGE */}

⚠ CHALLENGE · {chl.length}

{chl.map((p, i) => (

• {p}

))}

{source && (

{source}

)} ); } // ═══════════════════════════════════════════════════════════════════════════ // TEMPLATE EVIDENCE — CHL vs SUPPORT stack // • For tail areas / shift slides with strong evidence base // • 2 columns: SUPPORT cards on left (green), CHALLENGE cards on right (red) // • Each card: tier badge (A/B/C), source, snippet // ═══════════════════════════════════════════════════════════════════════════ function TemplateEvidence({ slide, scheme }) { const { kicker, title, subtitle, support = [], challenge = [], source, } = slide; return ( {/* Heading */}

{kicker && (

{kicker}

)}

28 ? 56 : 72, fontWeight: Tokens.weight.black, color: scheme.text, letterSpacing: '-0.025em', textTransform: 'uppercase', lineHeight: 0.95, }}>{renderTitle(title)}

{subtitle && (

{subtitle}

)}

{/* 2-col evidence */}

{source && (

{source}

)} ); } function EvidenceColumn({ title, color, items }) { return (

{title === 'SUPPORT' ? '✓' : '⚠'} {title}

· {items.length} ITEMS

{items.map((it, i) => (

TIER {it.tier || 'B'} {it.source}

{it.text}

))}

); } Object.assign(window, { TemplateNav, TemplateIdea, TemplateEvidence, EvidenceColumn }); // ═══════════════════════════════════════════════════════════════════════════ // TEMPLATE GLOBE — Earth + arcing cards (signature, à la Netflix Effect) // • Europe-focused earth-from-space at center bottom (CSS sphere) // • Fan of N thumbnails arcing across the top of the earth // • Each card is tangentially rotated to the arc // • Below: STORY 0X label + huge title + paragraph // • Corner brackets frame the image area // • Use for: bucket intros, where N thumbnails tell the bucket story // ═══════════════════════════════════════════════════════════════════════════ function TemplateGlobe({ slide, scheme, onJump }) { const { kicker, storyNum, title, subtitle, thumbs = [], source } = slide; // ── Geometry ──────────────────────────────────────────────────────────── const stageW = 1920; const boxLeft = 220, boxRight = 220, boxTop = 130, boxHeight = 460; const boxW = stageW - boxLeft - boxRight; // Earth center — below the image box so only the curved top is visible. const earthCx = stageW / 2; const earthCy = boxTop + boxHeight + 100; // = 690 const earthR = 340; const arcR = earthR + 40; // = 380 const N = thumbs.length; // Narrower 90° arc keeps every card inside the box bounds, even at the ends. const arcSpanDeg = 90; const arcStartDeg = -135; // ── Animation state machine ───────────────────────────────────────────── // "entering" → cards spin into place (≈1.4s) // "orbiting" → cards drift gently around the earth (forever) // (We skip the "playing" phase now that the video is removed.) const [phase, setPhase] = React.useState('entering'); const phaseStartRef = React.useRef(performance.now()); const [now, setNow] = React.useState(performance.now()); // RAF clock React.useEffect(() => { let raf; const tick = () => { setNow(performance.now()); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, []); // Transition entering → orbiting const ENTRY_MS = 1400; React.useEffect(() => { if (phase !== 'entering') return; const id = setTimeout(() => { phaseStartRef.current = performance.now(); setPhase('orbiting'); }, ENTRY_MS); return () => clearTimeout(id); }, [phase]); const elapsedSec = (now - phaseStartRef.current) / 1000; let cardOpacity = 0; let cardScale = 0.4; let arcDriftDeg = 0; let cardSpinDeg = 0; if (phase === 'entering') { const t = Math.min(1, elapsedSec / (ENTRY_MS / 1000)); const eased = 1 - Math.pow(1 - t, 3); cardOpacity = eased; cardScale = 0.4 + 0.6 * eased; arcDriftDeg = -45 * (1 - eased); cardSpinDeg = -90 * (1 - eased); } else if (phase === 'orbiting') { cardOpacity = 1; cardScale = 1; // Static at base angles — the orbital wobble made the arc midpoint // drift ±20px off the earth's vertical axis, which read as "not // centered". Locked to 0 keeps the arc symmetric around the earth. arcDriftDeg = 0; } // ── Compute card positions ────────────────────────────────────────────── const cardData = thumbs.map((t, i) => { const u = N === 1 ? 0.5 : i / (N - 1); const baseAngDeg = arcStartDeg + u * arcSpanDeg; const angDeg = baseAngDeg + arcDriftDeg; const angRad = angDeg * Math.PI / 180; const cx = earthCx + Math.cos(angRad) * arcR; const cy = earthCy + Math.sin(angRad) * arcR; const rot = angDeg + 90 + cardSpinDeg; return { ...t, cx, cy, rot }; }); return ( {/* Image box ────────────────────────────────────────────────────── */}

{/* Earth — CSS sphere (clean, no video for now) */} {/* Arcing cards — two-layer outer/inner so hover scale-up doesn't collide with the RAF-driven rotation+scale on the outer ─────── */} {cardData.map((c, i) => { const w = c.w || 112; const h = c.h || 156; const clickable = !!c.slideIdx; return (

{ if (clickable) onJump && onJump(c.slideIdx); }} style={{ position: 'absolute', left: c.cx - boxLeft, top: c.cy - boxTop, width: w, height: h, transform: `translate(-50%, -50%) rotate(${c.rot}deg) scale(${cardScale})`, transformOrigin: 'center', opacity: cardOpacity, willChange: 'transform, opacity', cursor: clickable ? 'pointer' : 'default', }}>

{ if (!clickable) return; e.currentTarget.style.boxShadow = `0 30px 80px rgba(0,0,0,0.8), 0 0 0 2px ${scheme.accent}`; }} onMouseLeave={(e) => { if (!clickable) return; e.currentTarget.style.boxShadow = '0 20px 60px rgba(0,0,0,0.7)'; }} > {c.label

{c.channelLogo ?

: (c.channel || 'CHANNEL')}

); })}

{/* Corner brackets framing the image area */}

{/* STORY 0X label */} {storyNum != null && (

)} {kicker && storyNum == null && (

{kicker}

)} {/* Title */}

28 ? 44 : title.length > 18 ? 56 : 68, fontWeight: Tokens.weight.black, color: scheme.text, letterSpacing: '-0.025em', textTransform: 'uppercase', lineHeight: 0.95, }}>{renderTitle(title)}

{subtitle && (

{subtitle}

)}

{source && (

{source}

)} ); } // ── Earth (CSS sphere with Europe-focus styling) ───────────────────────── function Earth({ cx, cy, r, scheme }) { return ( <> {/* Outer atmospheric glow */}

{/* Earth sphere — brighter so it reads against the dark box */}

{/* Subtle land mass hint via faint city-light pattern (SVG dots) */} {/* Top rim light — brighter atmospheric glow */}

); } // ═══════════════════════════════════════════════════════════════════════════ // TEMPLATE CLAIM — Statement-led slide with optional killer number // • Big bold statement (centered or left-aligned) // • Optional killer number that pops below or to the side // • Source footer // • Use for: thesis/claim slides like "MFE non è più broadcaster italiano" // ═══════════════════════════════════════════════════════════════════════════ function TemplateClaim({ slide, scheme }) { const { kicker, statement, body, killerNumber, killerLabel, killerPrefix, killerSuffix, quote, quoteAuthor, source, align = 'left', } = slide; // Auto-shrink statement when there's a lot of other content on the slide, // so a 3-line statement + body + killer card + quote can all fit without // overlapping the source line at the bottom. const heavyContent = !!killerNumber && !!quote; const statementSize = heavyContent ? 46 : statement.length > 60 ? 52 : 60; return (

{kicker && (

{kicker}

)} {/* Statement */}

{renderTitle(statement)}

{/* Body paragraph */} {body && (

{body}

)} {/* Killer number card — number + label vertically centered, card horizontally centered on the slide (more punch for the single anchor stat). alignItems:center instead of baseline so the small label doesn't sink to the bottom of the big number. */} {killerNumber && (

{killerPrefix && {killerPrefix}} {killerNumber} {killerSuffix && {killerSuffix}}

{killerLabel && (

{killerLabel}

)}

)} {/* Quote */} {quote && (

"{quote}" {quoteAuthor && (

— {quoteAuthor}

)}

{source && (

{source}

)} ); } Object.assign(window, { TemplateGlobe, TemplateClaim, Earth }); // ═══════════════════════════════════════════════════════════════════════════ // TEMPLATE LONG-SCROLL — Scroll-driven editorial story page // • The slide BECOMES a scrollable canvas: scroll-wheel inside the slide // scrolls vertically through stacked sections. // • Layout: small hero photo at top → big title → N "ContentHighlight" // sections (each: stat + scattered thumbs + paragraph) → "More stories" // • Right-side pagination bullets reflect which section is in view. // • Thumbnails per section reveal with stagger on scroll-into-view. // • Use for: deep-dive stories where you want the Netflix-Effect feel of // scrolling through a long editorial page on the same "slide". // // Slide data shape: // { // template: 'LongScroll', // scheme: 'purpleDeep', // kicker: 'STORY 01', // title: 'GROWING THE\\nEUROPEAN PLATFORM', // subtitle: 'short claim under title', // image: __a('show-drama', 'jpg'), // small hero photo at top // imagePos: 'center 30%', // sections: [ // { stat: '€325B', label: 'GLOBAL GVA', // body: 'paragraph of context', // thumbs: [{ src, x, y, w, h, rotate }, ...] }, // ... // ], // moreStories: [{ shortLabel, thumb, slideIdx }, ...] // } // ═══════════════════════════════════════════════════════════════════════════ function TemplateLongScroll({ slide, scheme, onJump }) { const { kicker, storyNum, title, subtitle, image, imagePos = 'center 30%', sections = [], moreStories = [], source, } = slide; const scrollRef = React.useRef(null); const [activeSection, setActiveSection] = React.useState(0); const [scrollY, setScrollY] = React.useState(0); React.useEffect(() => { const el = scrollRef.current; if (!el) return; const onScroll = () => { setScrollY(el.scrollTop); // find the section closest to the viewport center const sectionEls = el.querySelectorAll('[data-section-idx]'); const viewCenter = el.scrollTop + el.clientHeight / 2; let bestIdx = 0; let bestDist = Infinity; sectionEls.forEach((s) => { const idx = parseInt(s.getAttribute('data-section-idx'), 10); const r = s.getBoundingClientRect(); const elR = el.getBoundingClientRect(); const center = r.top - elR.top + el.scrollTop + r.height / 2; const d = Math.abs(center - viewCenter); if (d < bestDist) { bestDist = d; bestIdx = idx; } }); setActiveSection(bestIdx); }; el.addEventListener('scroll', onScroll, { passive: true }); return () => el.removeEventListener('scroll', onScroll); }, [sections.length]); // Helper: scroll to a section by index const jumpToSection = (idx) => { const el = scrollRef.current; if (!el) return; const target = el.querySelector(`[data-section-idx="${idx}"]`); if (target) target.scrollIntoView({ behavior: 'smooth', block: 'center' }); }; return ( {/* Scrollable canvas — the whole slide body becomes a scroll container */}

{/* ── REDUCED HERO ────────────────────────────────────────────── */}

{/* Back to overview pill */}

‹ Back to overview

{/* Corner brackets framing the hero photo */}

{/* ── BIG TITLE BLOCK ─────────────────────────────────────────── */}

{kicker && (

{kicker}

)} {storyNum != null && (

)}

26 ? 72 : 92, fontWeight: Tokens.weight.black, color: scheme.text, letterSpacing: '-0.025em', textTransform: 'uppercase', lineHeight: 0.94, }}>{renderTitle(title)}

{subtitle && (

{subtitle}

)} {/* Scroll affordance */}

50 ? 0 : 0.85, transition: 'opacity 200ms', }}> Scroll ↓

{/* ── CONTENT HIGHLIGHT SECTIONS ──────────────────────────────── */} {sections.map((s, i) => ( ))} {/* ── MORE STORIES (footer) ───────────────────────────────────── */} {moreStories.length > 0 && (

More stories for you

= 4 ? 'repeat(4, 1fr)' : 'repeat(2, 1fr)', gap: 16, }}> {moreStories.map((ms, mi) => ( ))}

)} {source && (

{source}

)}

{/* ── PAGINATION BULLETS (vertical, right side) ────────────────── */} {sections.length > 1 && (

{sections.map((_, i) => (

)} ); } // ── ContentHighlight: one section of the LongScroll template ────────────── // Animates in when its top enters the viewport. Renders big stat + thumb // cards (clickable, with #XX/label captions) + a paragraph below. // // Two layouts: // • 'scatter' (default) — thumbs scattered around the stat at x/y coords // • 'row' — thumbs arranged as a horizontal grid below the stat block // (better for filling horizontal viewport space; ignores x/y on thumbs) // // Thumbs sit on TOP (z-index) so their clicks land; the stat block has // pointer-events:none so clicks pass through to overlapping cards. function ContentHighlight({ idx, section, scheme, scrollEl, onJump }) { const { stat, prefix, suffix, label, body, thumbs = [], layout = 'scatter' } = section; const ref = React.useRef(null); const [visible, setVisible] = React.useState(false); const [progress, setProgress] = React.useState(0); const [floatT, setFloatT] = React.useState(0); React.useEffect(() => { if (!ref.current) return; const obs = new IntersectionObserver( (entries) => { for (const e of entries) { if (e.isIntersecting) setVisible(true); } }, { threshold: 0.15, root: scrollEl || null } ); obs.observe(ref.current); return () => obs.disconnect(); }, [scrollEl]); // Smooth ramp progress 0→1 after visible; keep ticking afterwards for // the idle thumb float and continuous bob. React.useEffect(() => { if (!visible) return; let raf, t0 = performance.now(); const tick = () => { const elapsed = (performance.now() - t0) / 1000; setFloatT(elapsed); setProgress(Math.min(1, elapsed / 1.4)); raf = requestAnimationFrame(tick); }; raf = requestAnimationFrame(tick); return () => cancelAnimationFrame(raf); }, [visible]); const easeOutCubic = (t) => 1 - Math.pow(1 - t, 3); const easeOutBack = (t) => { const c1 = 1.70158, c3 = c1 + 1; return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2); }; // Number animation — bouncy easeOutBack, scale 0.45→1, slide-up 80px const numScale = 0.45 + 0.55 * easeOutBack(progress); const numOpacity = Math.min(1, progress * 1.6); const numTY = (1 - easeOutCubic(progress)) * 80; // Reusable thumb-card renderer (animated, clickable) const renderThumb = (t, i, opts = {}) => { const { positionMode = 'absolute', cardW = t.w || 240, cardH = t.h || 300 } = opts; const delay = 0.18 + i * 0.10; const localP = Math.max(0, Math.min(1, (floatT - delay) / 0.85)); const ease = easeOutBack(localP); const op = Math.min(1, localP * 1.4); const idleY = localP >= 1 ? Math.sin(floatT * 0.7 + i * 1.3) * 4 : 0; const clickable = !!t.slideIdx; const handleClick = () => { if (clickable && onJump) onJump(t.slideIdx); }; const baseStyle = positionMode === 'absolute' ? { position: 'absolute', left: `${(t.x ?? 0.5) * 100}%`, top: `${(t.y ?? 0.5) * 100}%`, transform: `translate(-50%, calc(-50% + ${idleY}px)) rotate(${(t.rotate || 0) * ease}deg) scale(${0.55 + 0.45 * ease})`, } : { position: 'relative', transform: `translateY(${idleY}px) rotate(${(t.rotate || 0) * ease * 0.4}deg) scale(${0.55 + 0.45 * ease})`, }; return (

{/* Inner layer carries hover scale + outline (CSS-driven, doesn't fight the RAF transform on the outer layer) */}

= 1 ? '0 18px 50px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35)' : '0 14px 40px rgba(0,0,0,0.55)', border: `1px solid ${Tokens.inkLine}`, filter: t.blur ? `blur(${t.blur}px)` : 'none', position: 'relative', }} onMouseEnter={(e) => { if (!clickable) return; e.currentTarget.style.boxShadow = `0 28px 80px rgba(0,0,0,0.75), 0 0 0 2px ${scheme.accent}`; }} onMouseLeave={(e) => { if (!clickable) return; e.currentTarget.style.boxShadow = '0 18px 50px rgba(0,0,0,0.55), 0 2px 6px rgba(0,0,0,0.35)'; }} >

{t.actionId && (

{t.actionId}

)} {t.label && (

{t.label}

)}

); }; // ── ROW layout — used by the cover bucket sections to fill horizontal space ── if (layout === 'row') { return (

{/* Stat + label + body stacked at top */}

{prefix && {prefix}} {stat} {suffix && {suffix}}

{label && (

{label}

)} {body && (

{body}

)}

{/* Row of cards — fills horizontal space, equal flex */}

{thumbs.map((t, i) => renderThumb(t, i, { positionMode: 'row', cardW: '100%', cardH: 320 }))}

); } // ── SCATTER layout (default) — thumbs at absolute x/y around the stat ── return (

{thumbs.map((t, i) => renderThumb(t, i, { positionMode: 'absolute' }))}

{prefix && {prefix}} {stat} {suffix && {suffix}}

{label && (

{label}

)} {body && (

{body}

)}

); } Object.assign(window, { TemplateLongScroll, ContentHighlight });