// Schematic line-art illustrations for pillar cards // 1.5px stroke, ink + orange emphasis, no fills. const SCHEMATIC_STROKE = "currentColor"; const SCHEMATIC_ACCENT = "#F95015"; const SCHEMATIC_MUTED = "#A1A9C3"; const SCHEMATIC_SURFACE = "var(--pillar-surface, #fff)"; // PCB macro illustration — hero art function PCBHero() { return ( {/* traces */} {/* ICs */} MCU ESP32-S3 {Array.from({length:10}).map((_,i)=> )} {Array.from({length:10}).map((_,i)=> )} BUCK USB-C {/* passives */} {[[60,110],[100,110],[240,170],[240,200],[310,310],[80,370],[140,440]].map(([x,y],i)=> )} {/* via pads */} {[[200,300],[300,200],[120,280],[350,360],[60,240],[250,420]].map(([x,y],i)=> )} {/* crosshair overlay */} ); } // Integrate — simple ring link between Altium chip and atopile glyph function IntegrationArt() { return ( {/* single connecting arc */} {/* left: Altium chip (rounded square with pins) */} Altium {/* right: atopile glyph, larger, no ring */} atopile {/* endpoints */} ); } // Version — simple curvy git graph with main + feature branch function VersionArt() { return ( {/* main line */} {/* branch — curvy fork out and merge back */} {/* main dots */} {[20, 80, 140, 200, 260, 300].map((x, i) => ( ))} {/* branch dots */} {[140, 200].map((x, i) => ( ))} {/* release tag */} main feat/power v2.3.0 ); } // Agent / tool-calling function AgentArt() { return ( AGENT {[ {x:30, y:22, label:"build"}, {x:30, y:78, label:"sim"}, {x:260, y:22, label:"parts"}, {x:260, y:78, label:"tests"}, ].map((t,i)=>( {t.label} ))} ); } // Constraint / solver function CheckArt() { return ( {[ {y:16, l:"V_io: 3.3V ± 5%", v:"3.31V", ok:true}, {y:38, l:"I_max < 800mA", v:"620mA", ok:true}, {y:60, l:"bus 0x48 unique", v:"collision", ok:false}, {y:82, l:"R_pullup ≥ 2.2kΩ", v:"4.7kΩ", ok:true}, ].map((r,i)=>( {r.l} {r.ok ? "✓" : "✕"} {r.v} ))} ); } // Parametric — config knob curves into a generated module function ParametricArt() { return ( {/* config knob on left */} {/* tick marks */} {[0, 45, 90, 135, 180, 225, 270, 315].map((a, i) => { const rad = (a * Math.PI) / 180; const x1 = 48 + Math.cos(rad) * 18; const y1 = 50 + Math.sin(rad) * 18; const x2 = 48 + Math.cos(rad) * 22; const y2 = 50 + Math.sin(rad) * 22; return ; })} cfg {/* curvy flow into output */} {/* generated output: stacked rounded cards */} schematic BOM tests ✓ ); } // Part search — clean search field with a single accented result function PartsArt() { return ( {/* search bar */} {/* magnifier */} low-noise buck, 3.3V, < 1µA Iq {/* result row — rounded card */} TPS62840DLCR 60nA · AVL matched in stock ); } // Automation-first — streams flow right together, then smoothly split to CLI / Python / MCP function CIArt() { return ( {/* atopile glyph, no ring */} atopile {/* three streams — ride together through the first half, split after x=160 */} {/* right: three endpoints */} {[ { y: 28, label: "CLI" }, { y: 50, label: "Python" }, { y: 72, label: "MCP" }, ].map((n, i) => ( {n.label} ))} ); } // On-prem — atopile ring inside a VPC boundary, external world blocked function OnPremArt() { return ( {/* VPC boundary — rounded, soft */} your.vpc {/* atopile glyph inside, no ring */} atopile {/* data node inside, connected */} {/* external — blocked */} {/* block markers */} outside outside ); } // AI-native — a .ato code snippet with a subtle AI accent tag (no card border) function AINativeArt() { return ( {/* filename */} rail.ato {/* AI tag */} AI {/* code lines */} module Rail5V: v_out = 5V ± 2% i_max = 2A {/* cursor */} ); } // Data layer — streams ride together out of atopile core, then smoothly split to 3 consumers function DataLayerArt() { return ( {/* atopile glyph on left, no ring */} atopile {/* three streams — travel together, then split */} {/* consumers */} {[ { y: 22, label: "Slack" }, { y: 50, label: "Sourcing" }, { y: 78, label: "Field techs" }, ].map((n, i) => ( {n.label} ))} ); } Object.assign(window, { PCBHero, IntegrationArt, VersionArt, AgentArt, CheckArt, ParametricArt, PartsArt, CIArt, OnPremArt, AINativeArt, DataLayerArt });