/* Bespoke SVG illustrations, diagrams, and abstract graphics for Auctera */ /* 1. Hero architecture — flowing unified engine */ function HeroArchitecture() { // central node + orbit rings const cx = 300, cy = 300; const coreR = 72; // central node radius const haloR = 90; // dashed halo around the core const innerOrbit = 150; // orbit the nodes sit on const midOrbit = 210; const outerOrbit = 270; const nodeR = 18; // 6 nodes evenly distributed on the inner orbit const nodes = [ { angle: -90, label: "DSP" }, { angle: -30, label: "Affiliate" }, { angle: 30, label: "Retarget" }, { angle: 90, label: "Measure" }, { angle: 150, label: "Fraud" }, { angle: 210, label: "Reporting" }, ].map(n => { const rad = (n.angle * Math.PI) / 180; return { ...n, x: cx + innerOrbit * Math.cos(rad), y: cy + innerOrbit * Math.sin(rad), rad }; }); return ( {/* orbit grid — concentric on (cx, cy) */} {/* crosshair through the center */} {/* radial connectors — from edge of central halo to edge of each node */} {nodes.map((n, i) => { const x1 = cx + haloR * Math.cos(n.rad); const y1 = cy + haloR * Math.sin(n.rad); const x2 = n.x - nodeR * Math.cos(n.rad); const y2 = n.y - nodeR * Math.sin(n.rad); return ; })} {/* travelling pulses along the same radial lines */} {nodes.map((n, i) => { const x1 = cx + haloR * Math.cos(n.rad); const y1 = cy + haloR * Math.sin(n.rad); const x2 = n.x - nodeR * Math.cos(n.rad); const y2 = n.y - nodeR * Math.sin(n.rad); return ( ); })} {/* node constellation — sits exactly on the inner orbit */} {nodes.map((n, i) => { // label radial offset, outside the node, away from center const lx = n.x + (nodeR + 18) * Math.cos(n.rad); const ly = n.y + (nodeR + 18) * Math.sin(n.rad) + 3; const anchor = Math.cos(n.rad) > 0.3 ? "start" : Math.cos(n.rad) < -0.3 ? "end" : "middle"; return ( {n.label.toUpperCase()} ); })} {/* central core */} Auctera D-REVX ENGINE {/* corner annotations */} LAT · 40.7128° N LONG · 74.0060° W NODES · 247 LATENCY · <10MS ); } /* 2. Fragmented vs Unified diagram */ function FragmentedVsUnified() { return ( {/* LEFT — fragmented */} FRAGMENTED STACK {[ [60, 100, "DSP_API"], [230, 100, "Tracker.js"], [60, 200, "AffiliateNet"], [230, 200, "DMP_Sync"], [140, 310, "DATA LOSS"], ].map(([x,y,l], i) => ( {l} ))} {/* broken connectors */} {/* arrow */} {/* RIGHT — unified */} UNIFIED PLATFORM One data layer ONE TRUTH · ONE ENGINE {/* unified spokes */} {[ [500, 100],[720, 100],[500, 352],[720, 352] ].map(([x,y], i) => ( ))} {/* node labels */} DSP AFFILIATE RETARGET MEASURE ); } /* 3. Latency / sub-50ms visualization */ function LatencyViz() { return ( {[40,80,120,160,200].map((y,i)=>())} {[[60,160],[140,110],[220,90],[300,80],[400,40]].map(([x,y], i)=>())} T+0 T+25MS T+50MS — BID WON ); } /* 4. Globe/liquidity — arcs over world */ function LiquidityGlobe() { return ( {/* meridians */} {[-60,-30,0,30,60].map((a,i)=>( ))} {[-60,-30,0,30,60].map((a,i)=>( ))} {/* arcs */} {/* nodes */} {[[130,240],[470,240],[110,340],[490,340],[300,60],[300,540],[160,180],[480,420]].map(([x,y],i)=>( ))} 247 nodes ROUTING ACTIVE ); } /* 5. Flow diagram (6 steps) */ function FlowSix() { const labels = ["Connect","Goals","Audience","Launch","AI","Measure"]; return ( {labels.map((l,i)=>{ const x = 60 + i * 156; return ( {i+1} {l.toUpperCase()} ); })} ); } /* 6. Abstract product panel — used as hero aside */ function BidNodePanel() { return (
BID_NODE · ALPHA OPTIMIZED
<50ms
avg execution · pre-bid filter · IVT scored
Target CPA
$45.00
Signal
1P Verified
Requests/s
1.7M
IVT Rate
0.01%
); } /* 7. Dashboard tile */ function DashboardTile() { return (
Unified performance · wk 17
LIVE
{[["$2.14M","Spend"],["7.4x","Blended ROAS"],["12,840","Conversions"]].map(([v,l],i)=>(
{v}
{l}
))}
{[30,60,90].map((y,i)=>())} {/* second series */}
Unified Legacy stack
); } /* 8. Retarget ring */ function RetargetRing() { return ( {[ [210, 40, "Display"], [370, 140, "Native"], [340, 320, "CTV"], [210, 380, "Video"], [80, 320, "Social"], [50, 140, "Email"], ].map(([x,y,l],i)=>( {l.toUpperCase()} ))} ); } /* 9. Marketplace two-sided */ function TwoSidedDiagram() { return ( ADVERTISERS PUBLISHERS {[0,1,2,3].map(i=>{ const y = 80 + i*56; return ; })} {[0,1,2,3].map(i=>{ const y = 80 + i*56; return ; })} {/* center hub */} Auctera MATCHING LAYER {/* crossing lines */} {[0,1,2,3].map(i=>())} {[0,1,2,3].map(i=>())} {/* dots on lines */} {[0,1,2,3].map(i=>())} ); } /* 10. Journey timeline */ function JourneyTimeline({ points }) { return ( {points.map((p, i) => { const x = 40 + i*160; return ( {p.top} {p.bottom?.toUpperCase()} ); })} ); } /* Expose */ /* Aliases used by platform pages */ const RetargetGraphPanel = RetargetRing; const NetworkPanel = TwoSidedDiagram; const FlowPanel = FlowSix; /* ============================================================= * ADDITIONAL ILLUSTRATIONS — Solutions / Capabilities / About * Each renders a distinct abstract diagram to keep the library * visually varied across the new pages. * ============================================================= */ /* Targeting — concentric audience rings with nested precision dot */ function AudiencePrecision() { return ( {[80,140,200,260].map((r,i)=>())} {/* scattered audience dots */} {[ [120,140,3],[180,110,2],[320,150,3],[400,200,2.5],[140,360,2.5],[200,400,3],[370,380,3],[410,330,2], [220,180,2],[290,200,2.5],[180,270,2],[330,280,2.5],[230,340,2.5],[100,220,2] ].map(([x,y,r],i)=>())} {/* target cluster */} {[[240,240],[260,245],[245,260],[265,265],[250,250]].map(([x,y],i)=>( ))} {/* annotations */} FIRST-PARTY · DEVICE GRAPH LOOKALIKES · CONTEXTUAL MATCH RATE 60–80% SEED ); } /* Fraud shield — layered shield with filter gates */ function FraudShield() { return ( {/* traffic column */} INCOMING TRAFFIC {[40,70,100,130,160].map((y,i)=>( ))} {/* shield */} IVT FILTER BOT DETECTION DEVICE GRAPH BEHAVIORAL ML <0.5% IVT RATE {/* blocked stream */} BLOCKED {[0,20,40,60].map((dy,i)=>( ))} {/* clean stream */} CLEAN DELIVERY {[0,20,40,60,80].map((dy,i)=>( ))} ); } /* Creative grid — dynamic creative optimization */ function CreativeGrid() { const palette = ["#0E1410","#C98B3A","#F6F2EC","#A7701F","#1A2520"]; return ( {[...Array(16)].map((_, i) => { const col = i % 4, row = Math.floor(i / 4); const x = 30 + col * 100, y = 30 + row * 100; const fill = palette[(i * 3) % palette.length]; const best = i === 9; return ( {/* tiny headline bars */} {/* image zone */} {/* CTA */} {best && } ); })} 16 VARIANTS · AUTO-TESTED WINNER ↑ 3.2× CTR ); } /* Conversion funnel — step pyramid with drop-offs */ function ConversionFunnel() { const rows = [ ["IMPRESSION","1,200,000",460], ["CLICK","84,000",360], ["VISIT","62,000",280], ["ADD TO CART","9,800",180], ["CONVERT","2,340",100], ]; return ( {rows.map(([label,val,w],i)=>{ const y = 30 + i * 70; const x = (520 - w) / 2; return ( {label} {val} {i < rows.length - 1 && ( )} ); })} ); } /* Brand safety — layered "stack" of protection barriers */ function BrandSafetyStack() { const layers = [ { label: "PRE-BID FILTERING", sub: "Category & URL exclusion" }, { label: "CONTEXTUAL ANALYSIS", sub: "NLP content classification" }, { label: "VERIFICATION PARTNERS", sub: "IAS · DoubleVerify" }, { label: "POST-BID MONITORING", sub: "Continuous brand audits" }, ]; return ( {layers.map((l,i)=>{ const y = 40 + i * 90; return ( 0{i+1} {l.label} {l.sub} ); })} SAFETY STACK 4 LAYERS ); } /* Attribution diagram — multi-touch journey collapsing to a single outcome */ function AttributionFlow() { const touches = [ { t: "Display", x: 40 }, { t: "Search", x: 130 }, { t: "Email", x: 220 }, { t: "Retarget", x: 310 }, { t: "Affiliate", x: 400 }, ]; return ( {/* timeline */} {touches.map((t,i)=>( {t.t.toUpperCase()} t{i+1} {/* paths to conversion */} ))} {/* conversion */} conversion $127 AOV {/* credit split */} MULTI-TOUCH CREDIT DATA-DRIVEN MODEL 8% 18% 12% 34% 28% ); } /* Marketplace mesh — interconnected exchange grid */ function MarketplaceMesh() { const buyers = [[60,80],[60,180],[60,280],[60,380]]; const sellers = [[420,80],[420,180],[420,280],[420,380]]; const hub = [240, 230]; return ( {/* connections */} {buyers.map((b,i)=> sellers.map((s,j)=>( )))} {/* hub overlay */} marketplace D-REVX {/* nodes */} {buyers.map((b,i)=>( BUYER ))} {sellers.map((s,i)=>( PUBLISHER ))} OPEN EXCHANGE 247 NODES ); } /* Retention cycle — looping return arrows */ function RetentionLoop() { return ( {/* outer ring */} {/* inner ring arc */} {/* stages */} {[ {a:-90, t:"FIRST PURCHASE"}, {a:0, t:"REPEAT"}, {a:90, t:"LOYALTY"}, {a:180, t:"ADVOCATE"}, ].map((s,i)=>{ const r = 130; const rad = s.a * Math.PI / 180; const x = 230 + Math.cos(rad) * r; const y = 230 + Math.sin(rad) * r; return ( 0{i+1} {s.t} ); })} {/* center */} LTV 3.2× {/* arrows between */} ); } /* Answer engine — citation block */ function AnswerEngine() { return ( {/* query bar */} best performance marketing platform for ecommerce? {/* answer block */} AI ANSWER {/* text lines */} {[148,168,188,208,228].map((y,i)=>( ))} {/* citation chip */} [1] AUCTERA [2] SOURCE ANSWER ENGINE · AEO CITATION +1 INDEXED · LLM-READY RANK / 1 ); } /* Offer ladder — tier blocks with performance deltas */ function OfferLadder() { const tiers = [ ["TIER A · HERO", "$50 CPA", 100, "#0E1410"], ["TIER B · FAST", "$38 CPA", 80, "rgba(14,20,16,0.8)"], ["TIER C · LONG-TAIL", "$22 CPA", 60, "#C98B3A"], ["TIER D · TEST", "—", 40, "rgba(201,139,58,0.5)"], ]; return ( {tiers.map(([t,c,w,fill],i)=>{ const y = 60 + i * 80; return ( 1 ? "#0E1410" : "#F6F2EC"} letterSpacing="1.4">{t} 1 ? "#0E1410" : "#F6F2EC"}>{c} {w}% traffic ); })} OFFER PERFORMANCE AUTO-REDIRECT ); } /* ROI index — upward slope graph */ function RoiSlope() { return ( {[60,120,180,240].map((y,i)=>())} {[[30,240],[90,220],[150,200],[210,170],[270,140],[330,100],[390,70],[460,40]].map(([x,y],i)=>())} ROAS INDEX · 12 MONTHS +58% M1M12 ); } /* Agency multi-account panel */ function AgencyAccounts() { const rows = [ ["Beacon Retail","ACTIVE","$42k","+12%"], ["Northwind DTC","ACTIVE","$28k","+8%"], ["Atlas Sport","PAUSED","—","—"], ["Luma Beauty","ACTIVE","$61k","+22%"], ["Pinehurst","ACTIVE","$18k","+4%"], ]; return ( AGENCY · 5 CLIENTS Q1 2026 CLIENTSTATUSMTD SPENDΔ ROAS {rows.map(([name, status, spend, delta], i) => { const y = 120 + i * 56; return ( {name} {status} {spend} {delta} ); })} ); } /* Brand awareness — reach ripple */ function BrandRipple() { return ( {[40,90,140,190].map((r,i)=>( ))} brand {/* scattered impressions */} {[ [80,120],[380,100],[90,320],[380,330],[170,60],[300,60], [60,230],[400,230],[160,400],[300,400],[130,200],[330,260] ].map(([x,y],i)=>( ))} REACH · 180+ MARKETS FREQUENCY CAPPED TOP-OF-FUNNEL BRAND LIFT +14pt ); } /* Publisher yield — rate card */ function PublisherYield() { const cells = [ ["DISPLAY","$4.20"],["VIDEO","$12.50"],["NATIVE","$6.80"], ["CTV","$22.00"],["MOBILE","$3.90"],["HOUSE","—"], ]; return ( YIELD · ECPM +34% vs Q4 {cells.map(([label, rate], i) => { const col = i % 3, row = Math.floor(i / 3); const x = 30 + col * 150, y = 60 + row * 150; const high = label === "CTV"; return ( {label} {rate} eCPM · 7D ); })} ); } /* Team / about — abstract constellation of contributor nodes */ function TeamConstellation() { const nodes = [ [100, 140],[180, 80],[260, 140],[340, 100],[420, 150], [80, 240],[200, 260],[320, 240],[400, 260], [140, 360],[240, 380],[340, 360],[420, 350] ]; return ( {nodes.map((n,i)=>nodes.slice(i+1).map((m,j)=>{ const d = Math.hypot(n[0]-m[0], n[1]-m[1]); if (d > 160) return null; return ; }))} {nodes.map((n,i)=>( ))} DISTRIBUTED · 3 REGIONS ASYNC-FIRST AMERICAS · EMEA · APAC BUILT, NOT BOUGHT ); } /* === New illustrations for replacing reused FragmentedVsUnified instances === */ /* DataLeakDiagram — pipes with leaking droplets (for solutions-advertisers) */ function DataLeakDiagram() { return ( FRAGMENTED PIPELINE · DATA LOSS ~20% LEAK {/* horizontal pipes (broken) */} {[80, 160, 240, 320].map((y,i)=>( {/* gap markers */} {/* labels inside pipe */} {["DSP","AFFILIATE","RETARGET","ANALYTICS"][i]} PIXEL REPORT {/* leak droplets */} ))} {/* puddle at bottom */} CONVERSIONS LOST IN HANDOFF ); } /* SixProductsConstellation — for platform-overview (one engine, six orbits) */ function SixProductsConstellation() { const products = [ { a: -90, label: "DSP" }, { a: -30, label: "AFFILIATE" }, { a: 30, label: "RETARGET" }, { a: 90, label: "MEASURE" }, { a: 150, label: "REPORTING" }, { a: 210, label: "FRAUD" }, ]; const cx = 400, cy = 230, r = 150; return ( {/* orbit rings */} {/* spokes */} {products.map((p,i)=>{ const x = cx + Math.cos(p.a*Math.PI/180)*r; const y = cy + Math.sin(p.a*Math.PI/180)*r; return ( ); })} {/* core */} one engine SHARED DATA LAYER {/* product nodes */} {products.map((p,i)=>{ const x = cx + Math.cos(p.a*Math.PI/180)*r; const y = cy + Math.sin(p.a*Math.PI/180)*r; const lx = cx + Math.cos(p.a*Math.PI/180)*(r+40); const ly = cy + Math.sin(p.a*Math.PI/180)*(r+40); return ( 0{i+1} {p.label} ); })} {/* corner labels */} SIX PRODUCTS · ONE PLATFORM ZERO HANDOFFS ); } /* TruthLedger — for blog (rows of conflicting numbers reconciling to one) */ function TruthLedger() { const rows = [ ["DSP","12,840","13,201","12,710"], ["AFFILIATE","2,118","1,944","2,205"], ["RETARGET","6,402","6,800","6,200"], ["TOTAL","21,360","21,945","21,115"], ]; return ( CONFLICTING SOURCES → ONE TRUTH {/* left ledger - 3 sources disagreeing */} CHANNEL PLATFORM A PLATFORM B PLATFORM C {rows.map((r,i)=>{ const y = 130 + i*50; const isTotal = i === rows.length - 1; return ( {isTotal && } {r[0]} {r[1]} {r[2]} {r[3]} {!isTotal && } ); })} {/* arrow */} {/* right unified */} UNIFIED LEDGER {[["DSP","12,840"],["AFFILIATE","2,118"],["RETARGET","6,402"],["TOTAL","21,360"]].map(([k,v],i)=>{ const y = 140 + i*52; const isTotal = i === 3; return ( {isTotal && } {k} {v} ); })} ); } /* StackBlocks — for platform-how-it-works "Integrates with your stack" */ function StackBlocks({ tools }) { const items = tools || ["Google Analytics","Segment","Shopify","Salesforce","Snowflake","BigQuery","HubSpot","Marketo"]; return ( YOUR STACK · 50+ INTEGRATIONS PIXEL · API · SDK · S2S {/* central engine */} Auctera D-REVX ENGINE {/* tool blocks orbiting */} {items.map((label,i)=>{ const a = (i / items.length) * Math.PI * 2 - Math.PI/2; const r = 170; const cx = 460 + Math.cos(a)*r; const cy = 220 + Math.sin(a)*r; return ( {label} ); })} ); } /* StackPlugin — for platform-measurement (more "data flowing in" feel) */ function StackPlugin() { const tools = ["Google Analytics","Segment","Snowflake","BigQuery","Tableau","Looker","dbt","Fivetran"]; return ( WAREHOUSE · BI · ANALYTICS BIDIRECTIONAL · REAL-TIME {/* left: tool list */} {tools.map((t,i)=>{ const col = i % 2; const row = Math.floor(i/2); const x = 40 + col*150; const y = 80 + row*80; return ( SOURCE 0{i+1} {t} {/* connector line */} ); })} {/* central convergence */} UNIFIED MEASUREMENT One source. All channels. ATTRIBUTION · INCREMENTALITY · LIFT REAL-TIME · QUERYABLE · API {/* output beam */} → DASHBOARDS · WAREHOUSE EXPORT ); } /* ChannelOrbit — for retargeting "Reach Users Everywhere" (dark bg) */ function ChannelOrbit() { const channels = ["Display","Native","Social","Video","CTV","Email"]; const cx = 400, cy = 230, r = 165; return ( {/* user core */} one user ID: u_8472 {/* channel nodes */} {channels.map((label,i)=>{ const a = (i/channels.length)*Math.PI*2 - Math.PI/2; const x = cx + Math.cos(a)*r; const y = cy + Math.sin(a)*r; return ( {label} {/* pulse */} ); })} {/* corner annotations */} CROSS-CHANNEL FREQUENCY · CAPPED SAME AUDIENCE DETERMINISTIC + PROBABILISTIC ID 6 SURFACES · 1 USER ); } /* AffiliateNetworkPanel — for affiliate hero (richer than TwoSidedDiagram) */ function AffiliateNetworkPanel() { return (
PARTNER LEDGER · LIVE SETTLING
{[ ["beacon.media","CONTENT · US","$8,420","+12%"], ["northwave.io","COUPONS · EU","$5,108","+4%"], ["pulseaff.co","INFLUENCER","$11,240","+18%"], ["lumen-traffic","CASHBACK · APAC","$2,910","+6%"], ].map(([n,t,v,d],i)=>(
{n}
{t}
{v}
{d}
))}
{[["Net-7","Payout"],["<0.3%","Fraud"],["180+","GEOs"]].map(([v,l],i)=>(
{v}
{l}
))}
); } /* VerticalsMatrix — affiliate "Active Verticals" replacement */ function VerticalsMatrix() { const cells = [ { label:"E-commerce", offers:412, payout:"$28" }, { label:"Finance", offers:186, payout:"$140", hot:true }, { label:"Gaming", offers:298, payout:"$45" }, { label:"Health & Wellness", offers:204, payout:"$62" }, { label:"Technology", offers:172, payout:"$95" }, { label:"Travel", offers:118, payout:"$78" }, { label:"Insurance", offers:96, payout:"$220", hot:true }, { label:"Education", offers:144, payout:"$88" }, { label:"Subscriptions", offers:268, payout:"$48" }, { label:"Lifestyle", offers:156, payout:"$36" }, ]; return ( VERTICAL · OFFERS LIVE · AVG PAYOUT ◆ HIGH-DEMAND {cells.map((c,i)=>{ const col = i % 5, row = Math.floor(i/5); const x = 20 + col*215; const y = 70 + row*220; return ( VERTICAL · {String(i+1).padStart(2,"0")} {c.label} OFFERS {c.offers} AVG CPA {c.payout} {c.hot && } ); })} ); } /* HowItWorksHero — replacement for FlowSix on platform-how-it-works hero */ function HowItWorksHero() { return (
ROLLOUT TIMELINE 30 DAYS · END-TO-END
{[ ["DAY 1","Connect tracking","DONE"], ["DAY 3","Configure goals","DONE"], ["DAY 5","Audience built","DONE"], ["DAY 7","Campaigns live","ACTIVE"], ["DAY 14","AI optimizing","ACTIVE"], ["DAY 30","Full attribution","→"], ].map(([d,t,s],i)=>{ const isActive = s === "ACTIVE"; const isDone = s === "DONE"; return (
{d}
{isActive && }
{t}
{s}
); })}
1 wk
To live campaigns
30 d
To AI-optimized
); } /* ============================================================ NEW HERO ILLUSTRATIONS — added April 2026 - PlatformProductMosaic — replaces SixProductsConstellation as platform-overview hero. Larger, mosaic of six product tiles wired to a shared data spine. - AcquisitionEngine — replaces DataLeakDiagram as solutions- advertisers hero. A unified acquisition engine with three channel feeds and a conversion meter. - PremiumReachLift — replaces BrandRipple as solutions-brand- awareness hero. Premium reach panels + brand-lift index curve. ============================================================ */ function PlatformProductMosaic() { const products = [ { code:"01", name:"DSP", sub:"Programmatic media" }, { code:"02", name:"Affiliate", sub:"Performance partners" }, { code:"03", name:"Retarget", sub:"Cross-device cloud" }, { code:"04", name:"Measure", sub:"Multi-touch attribution" }, { code:"05", name:"Reporting", sub:"Real-time dashboards" }, { code:"06", name:"Fraud", sub:"Pre-bid IVT shield" }, ]; const cols = 3; const tileW = 196, tileH = 130, gap = 16; const startX = 30, startY = 86; return ( {/* top mono header */} ONE PLATFORM · SIX PRODUCTS SHARED DATA LAYER {/* product tiles */} {products.map((p, i) => { const col = i % cols, row = Math.floor(i / cols); const x = startX + col * (tileW + gap); const y = startY + row * (tileH + gap); return ( {/* product code top-right */} PRODUCT · {p.code} {/* serif italic name */} {p.name} {/* subtitle */} {p.sub.toUpperCase()} {/* status row */} SYNCED v4.{i+1} {/* short descender into spine */} ); })} {/* shared spine bar */} {(() => { const spineY = startY + 2*tileH + gap + 36; return ( Auctera D-REVX data layer ONE LOGIN · ONE LEDGER · ONE TRUTH {/* connector dots where descenders meet the spine */} {Array.from({length: 6}).map((_, i) => { const col = i % cols; const x = startX + col * (tileW + gap) + tileW/2; return ; })} ); })()} {/* bottom audit row */} UNIFIED ATTRIBUTION · CROSS-CHANNEL FREQUENCY · GLOBAL EXCLUSIONS 0 DUPLICATE CONVERSIONS ); } function AcquisitionEngine() { const channels = [ { code:"01", name:"DSP", label:"Programmatic prospecting" }, { code:"02", name:"Affiliate", label:"Performance partners" }, { code:"03", name:"Retarget", label:"Cross-device return" }, ]; const cx = 470, cy = 270; // engine center return ( {/* top header */} ACQUISITION ENGINE · UNIFIED DSP + AFFILIATE + RETARGETING {/* three channel feeders on the left */} {channels.map((c, i) => { const y = 110 + i * 110; return ( {/* channel card */} CHANNEL · {c.code} {c.name} {c.label.toUpperCase()} {/* feed line into engine */} {/* travelling pulse along feed */} ); })} {/* central engine */} acquisition D-REVX ENGINE SHARED ATTRIBUTION {/* output: conversion meter */} REAL CAC −34% NEW CUSTOMERS 2.4× {/* bottom audit row */} CROSS-CHANNEL FREQUENCY · UNIFIED EXCLUSIONS · ONE BUDGET SHARED IDENTITY GRAPH ATTRIBUTION · MULTI-TOUCH FRAUD · PRE-BID FILTERED ); } function PremiumReachLift() { // brand-lift curve points (pre → post) const curve = [ {x:50, y:230, label:"PRE"}, {x:130, y:222}, {x:210, y:206}, {x:300, y:178}, {x:390, y:140}, {x:470, y:104}, {x:540, y:80, label:"POST"}, ]; const path = curve.reduce((acc, p, i) => acc + (i===0?`M${p.x} ${p.y}`:` L${p.x} ${p.y}`), ""); return ( {/* top header */} PREMIUM REACH · MEASURED LIFT UPPER FUNNEL {/* === LEFT: premium inventory tiles === */} PREMIUM INVENTORY MIX {/* CTV (large dark) */} CTV $22 eCPM · 7D {/* play glyph */} {/* Online video */} ONLINE VIDEO $12.50 {/* Display */} DISPLAY $4.20 {/* Native */} NATIVE $6.80 {/* === RIGHT: brand-lift chart === */} {/* labels */} BRAND-LIFT INDEX · 90D +14 PT {/* axis y */} 100 75 50 25 0 {/* gridlines */} {[60,124,184,244].map((y,i)=>())} {/* axis x */} WK 0 WK 6 WK 12 {/* chart shifted */} {/* fill under curve */} {/* curve */} {/* points */} {curve.map((p,i)=>( {p.label && ( {p.label} )} ))} {/* delta callout */} +14 {/* === BOTTOM: signal row (SOV + frequency + safety) === */} SHARE OF VOICE 38% {/* mini bars */} {[12,22,8,18].map((h,i)=>())} FREQUENCY · CAPPED 3.2 /wk BRAND SAFETY 99.6% {/* foot mono row */} REACH · 180+ MARKETS LIFT · MEASURED, NOT CLAIMED ); } Object.assign(window, { AudiencePrecision, FraudShield, CreativeGrid, ConversionFunnel, BrandSafetyStack, AttributionFlow, MarketplaceMesh, RetentionLoop, AnswerEngine, OfferLadder, RoiSlope, AgencyAccounts, BrandRipple, PublisherYield, TeamConstellation, DataLeakDiagram, SixProductsConstellation, TruthLedger, StackBlocks, StackPlugin, ChannelOrbit, AffiliateNetworkPanel, VerticalsMatrix, HowItWorksHero, PlatformProductMosaic, AcquisitionEngine, PremiumReachLift }); Object.assign(window, { HeroArchitecture, FragmentedVsUnified, LatencyViz, LiquidityGlobe, FlowSix, BidNodePanel, DashboardTile, RetargetRing, TwoSidedDiagram, JourneyTimeline, RetargetGraphPanel, NetworkPanel, FlowPanel });