Sākums Izpētīt Palīdzība
Reģistrēties Pierakstīties
FWH
/
FranklinWH-Toolbox
2
0
Atdalīts 0
Faili Problēmas 0 Izmaiņu pieprasījumi 0 Vikivietne
Koks: 9331390e29
Atzari Tagi
FranklinWH-Tool...
/
service
/
cmd
/
mcp
/
.kiro
/
skills
/
lieflat-charts
/
templates
/
lupi-gallery.html

lupi-gallery.html 60 KB
Vēsture Neapstrādāts

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220 
  1. <!doctype html>
    2. 

  2. <html lang="en">
    3. 

  3. <head>
    4. 

  4. <meta charset="utf-8" />
    5. 

  5. <meta name="viewport" content="width=device-width,initial-scale=1" />
    6. 

  6. <title>Lieflat Charts — Lupi Gallery · 20 张参考实现</title>
    7. 

  7. <link rel="preconnect" href="https://fonts.googleapis.com">
    8. 

  8. <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    9. 

  9. <style>
    10. 

  10.   :root{--bg:#F0EFEB;--dark:#1C1C1A;--ink:#1C1C1A;--muted:#8F8E88;--faint:#C6C5BF;--grid:#DEDDD6}
    11. 

  11.   *{margin:0;padding:0;box-sizing:border-box}
    12. 

  12.   body{background:var(--bg);font-family:'Inter',sans-serif;color:var(--ink);padding:40px;-webkit-font-smoothing:antialiased}
    13. 

  13.   .grid2{display:grid;grid-template-columns:1fr 1fr;gap:22px;max-width:1400px;margin:0 auto}
    14. 

  14.   .card{background:var(--bg);border-radius:24px;padding:28px 28px 20px}
    15. 

  15.   .card.dark{background:var(--dark);color:#F0EFEB}
    16. 

  16.   .card.dark .sub{color:#8F8E88}
    17. 

  17.   .card.dark .src{color:#55554F}
    18. 

  18.   .card.wide{grid-column:1/-1}
    19. 

  19.   .split{display:grid;grid-template-columns:250px 1fr;gap:30px;align-items:start}
    20. 

  20.   h2{font-weight:700;font-size:16.5px;letter-spacing:-.02em;margin-bottom:3px}
    21. 

  21.   .sub{font-size:11.5px;color:var(--muted);margin-bottom:14px}
    22. 

  22.   .src{font-size:9.5px;color:var(--faint);margin-top:10px;letter-spacing:.08em;font-weight:500}
    23. 

  23.   .note{font-size:11px;color:#6A6963;line-height:1.65;margin-bottom:16px}
    24. 

  24.   .legend{font-size:9px;letter-spacing:.1em;font-weight:600;color:var(--muted);line-height:2}
    25. 

  25.   svg{width:100%;max-height:330px;display:block;margin:0 auto}
    26. 

  26.   svg text{font-family:'Inter',sans-serif}
    27. 

  27.   .pop{transform-box:fill-box;transform-origin:center;animation:pop .5s cubic-bezier(.2,.7,.3,1.3) both}
    28. 

  28.   @keyframes pop{from{transform:scale(0)}to{transform:none}}
    29. 

  29.   .fade{animation:fade .9s ease both}
    30. 

  30.   @keyframes fade{from{opacity:0}}
    31. 

  31.   .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1s cubic-bezier(.4,0,.2,1) both}
    32. 

  32.   @keyframes draw{to{stroke-dashoffset:0}}
    33. 

  33.   @media (prefers-reduced-motion:reduce){
    34. 

  34.     .pop,.fade{animation:none}
    35. 

  35.     .draw{animation:none;stroke-dasharray:none;stroke-dashoffset:0}
    36. 

  36.   }
    37. 

  37. 

  38.   .pagehead{max-width:1400px;margin:0 auto 26px;padding:0 4px}
    39. 

  39.   .pagehead h1{font-size:22px;letter-spacing:-.02em;font-weight:800}
    40. 

  40.   .pagehead p{font-size:12px;color:#8F8E88;margin-top:5px;line-height:1.7}
    41. 

  41.   .pagehead .badge{margin:0 2px}
    42. 

  42.   .badge{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.08em;
    43. 

  43.     padding:3px 10px;border-radius:99px;margin-bottom:10px}
    44. 

  44.   .badge.del{background:#1C1C1A;color:#F0EFEB}
    45. 

  45.   .badge.pick{border:1.5px solid #1C1C1A;color:#1C1C1A}
    46. 

  46.   .badge.pair{border:1px dashed #B0AFA9;color:#8F8E88}
    47. 

  47.   .card.dark .badge.del{background:#F0EFEB;color:#1C1C1A}
    48. 

  48.   .card.dark .badge.pick{border-color:#F0EFEB;color:#F0EFEB}
    49. 

  49.   .card.dark .badge.pair{border-color:#55554F;color:#8F8E88}
    50. 

  50. </style>
    51. 

  51. </head>
    52. 

  52. <body>
    53. 

  53. <div class="pagehead">
    54. 

  54. 

  55.   <h1>Lupi 系（细读）· 20 张参考实现</h1>
    56. 

  56.   <p>发丝线 · 逐记录 · 30 秒阅读。</p>
    57. 

  57. </div>
    58. 

  58. <div class="grid2">
    59. 

  59. 

  60.   <!-- 1 · launch fan -->
    61. 

  61.   <div class="card">
    62. 

  62.     <h2>Twelve features, fanned out</h2>
    63. 

  63.     <div class="sub">one spoke per feature · big dot = launch week, sized by MAU today · small dots = every week since</div>
    64. 

  64.     <svg id="fan" viewBox="0 0 400 320" preserveAspectRatio="xMidYMid meet"></svg>
    65. 

  65.     <div class="src">LAUNCH FAN · MONO-EDITORIAL · PRODUCT ANALYTICS</div>
    66. 

  66.   </div>
    67. 

  67. 

  68.   <!-- 4 · dot cascade on dark -->
    69. 

  69.   <div class="card dark">
    70. 

  70.     <h2>What breaks, stacked and ranked</h2>
    71. 

  71.     <div class="sub">incidents by root cause · 2019 → 2026 · one dot = 2 incidents · sorted ascending</div>
    72. 

  72.     <svg id="cascade" viewBox="0 0 400 320" preserveAspectRatio="xMidYMid meet"></svg>
    73. 

  73.     <div class="src">DOT CASCADE · MONO-EDITORIAL · INCIDENT LOG</div>
    74. 

  74.   </div>
    75. 

  75. 

  76.   <!-- 2 · barcode lollipop, wide + editorial text column -->
    77. 

  77.   <div class="card wide">
    78. 

  78.     <div class="split">
    79. 

  79.       <div>
    80. 

  80.         <h2>Ninety days as a barcode</h2>
    81. 

  81.         <div class="sub">peak concurrent users, daily · Apr – Jun 2026</div>
    82. 

  82.         <div class="note">Every hairline is a day, whether or not anything
    83. 

  83.         happened in it. The dot marks the day's peak; the stem below it is
    84. 

  84.         just gravity. Read the field, not the numbers — the season has a
    85. 

  85.         texture before it has a value.</div>
    86. 

  86.         <div class="legend">
    87. 

  87.           ● &nbsp;WEEKDAY PEAK<br>
    88. 

  88.           ○ &nbsp;WEEKEND PEAK<br>
    89. 

  89.           │ &nbsp;ONE CALENDAR DAY<br>
    90. 

  90.           ◉ &nbsp;TOP-3, LABELED
    91. 

  91.         </div>
    92. 

  92.       </div>
    93. 

  93.       <div>
    94. 

  94.         <svg id="barcode" viewBox="0 0 800 300" preserveAspectRatio="xMidYMid meet" style="max-height:340px"></svg>
    95. 

  95.         <div class="src">BARCODE LOLLIPOP · MONO-EDITORIAL · LIVE OPS</div>
    96. 

  96.       </div>
    97. 

  97.     </div>
    98. 

  98.   </div>
    99. 

  99. 

  100.   <!-- 3 · arc bubble matrix -->
    101. 

  101.   <div class="card">
    102. 

  102.     <h2>Eight products land in twelve cities</h2>
    103. 

  103.     <div class="sub">bubble = paying accounts · each row bows like a horizon</div>
    104. 

  104.     <svg id="arcmatrix" viewBox="0 0 430 320" preserveAspectRatio="xMidYMid meet"></svg>
    105. 

  105.     <div class="src">ARC MATRIX · MONO-EDITORIAL · SALES GEO</div>
    106. 

  106.   </div>
    107. 

  107. 

  108.   <!-- 5 · radial convergence -->
    109. 

  109.   <div class="card">
    110. 

  110.     <h2>48 requests pull toward five themes</h2>
    111. 

  111.     <div class="sub">every rim node = a feature request · lines bundle into the theme that claimed it</div>
    112. 

  112.     <svg id="converge" viewBox="0 0 400 320" preserveAspectRatio="xMidYMid meet"></svg>
    113. 

  113.     <div class="src">RADIAL CONVERGENCE · MONO-EDITORIAL · FEEDBACK BOARD</div>
    114. 

  114.   </div>
    115. 

  115. 

  116.   <!-- 6 · cluster field, wide -->
    117. 

  117.   <div class="card wide">
    118. 

  118.     <h2>The contributor field</h2>
    119. 

  119.     <div class="sub">80 core contributors orbit the main repo · satellite islands keep their own gravity · dotted paths = cross-contribution</div>
    120. 

  120.     <svg id="clusters" viewBox="0 0 840 320" preserveAspectRatio="xMidYMid meet" style="max-height:360px"></svg>
    121. 

  121.     <div class="src">CLUSTER FIELD · MONO-EDITORIAL · CONTRIBUTOR GRAPH</div>
    122. 

  122.   </div>
    123. 

  123. 

  124. 

  125. 

  126.   <!-- 1 · brand spectrum -->
    127. 

  127.   <div class="card">
    128. 

  128.     <h2>Where the brand sits</h2>
    129. 

  129.     <div class="sub">panel of 120 customers placed us between opposing traits · big dot = us · small dots = competitors</div>
    130. 

  130.     <svg id="spectrum" viewBox="0 0 460 300" preserveAspectRatio="xMidYMid meet"></svg>
    131. 

  131.     <div class="src">BRAND SPECTRUM · MONO-EDITORIAL2 · BRAND SURVEY</div>
    132. 

  132.   </div>
    133. 

  133. 

  134.   <!-- 2 · dotty matrix -->
    135. 

  135.   <div class="card">
    136. 

  136.     <h2>Four squads, stacked in space</h2>
    137. 

  137.     <div class="sub">each plane = one squad · 6 × 6 weeks of activity · dot area = tasks closed</div>
    138. 

  138.     <svg id="dotty" viewBox="0 0 400 372" preserveAspectRatio="xMidYMid meet" style="max-height:340px"></svg>
    139. 

  139.     <div class="src">DOTTY MATRIX · MONO-EDITORIAL2 · SPRINT BOARD</div>
    140. 

  140.   </div>
    141. 

  141. 

  142.   <!-- 3 · ticket almanac, wide -->
    143. 

  143.   <div class="card wide">
    144. 

  144.     <h2>Eight years of tickets, one almanac</h2>
    145. 

  145.     <div class="sub">bubble area = support tickets per product area, per year · bubbles overlap where years pile up · dark core = escalations · dashed ring = still in beta</div>
    146. 

  146.     <svg id="almanac" viewBox="0 0 840 400" preserveAspectRatio="xMidYMid meet" style="max-height:420px"></svg>
    147. 

  147.     <div class="src">BUBBLE ALMANAC · MONO-EDITORIAL2 · SUPPORT DESK</div>
    148. 

  148.   </div>
    149. 

  149. 

  150.   <!-- 4 · deploy patchwork -->
    151. 

  151.   <div class="card">
    152. 

  152.     <h2>A quarter of deploys, overlaid</h2>
    153. 

  153.     <div class="sub">each wedge = one deploy · angle = time of day · reach = files touched · ink builds where deploys pile up</div>
    154. 

  154.     <svg id="patchwork" viewBox="0 0 400 320" preserveAspectRatio="xMidYMid meet"></svg>
    155. 

  155.     <div class="src">RADIAL PATCHWORK · MONO-EDITORIAL2 · DEPLOY LOG</div>
    156. 

  156.   </div>
    157. 

  157. 

  158.   <!-- 6 · trend lineage -->
    159. 

  159.   <div class="card">
    160. 

  160.     <h2>Features rise, fall, come back</h2>
    161. 

  161.     <div class="sub">● shipped · ○ reworked · dashed = dormant years · line runs on if it's still alive today</div>
    162. 

  162.     <svg id="lineage" viewBox="0 0 400 340" preserveAspectRatio="xMidYMid meet"></svg>
    163. 

  163.     <div class="src">TREND LINEAGE · MONO-EDITORIAL2 · PRODUCT HISTORY</div>
    164. 

  164.   </div>
    165. 

  165. 

  166.   <!-- 8 · type colonnade -->
    167. 

  167.   <div class="card">
    168. 

  168.     <h2>Forty-four repos, ten owners</h2>
    169. 

  169.     <div class="sub">every hairline hands a repo to the team that owns it · the pile-ups are the org chart nobody drew</div>
    170. 

  170.     <svg id="colonnade" viewBox="0 0 400 320" preserveAspectRatio="xMidYMid meet"></svg>
    171. 

  171.     <div class="src">TYPE COLONNADE · MONO-EDITORIAL2 · CODE OWNERSHIP</div>
    172. 

  172.   </div>
    173. 

  173. 

  174.   <!-- 9 · funnel hourglass -->
    175. 

  175.   <div class="card">
    176. 

  176.     <h2>The funnel, poured</h2>
    177. 

  177.     <div class="sub">each strip's width = people at that stage · threads trickle down · Q2 2026 cohort</div>
    178. 

  178.     <svg id="hourglass" viewBox="0 0 400 330" preserveAspectRatio="xMidYMid meet"></svg>
    179. 

  179.     <div class="src">HOURGLASS STREAM · MONO-EDITORIAL2 · GROWTH</div>
    180. 

  180.   </div>
    181. 

  181. 

  182.   <!-- 14 · hundred field -->
    183. 

  183.   <div class="card">
    184. 

  184.     <span class="badge pair">小数据 · 单位分解</span>
    185. 

  185.     <h2>A hundred of us, four minds</h2>
    186. 

  186.     <div class="sub">one dot = one person in a hundred · four attitude clusters, sized by share · 2026 survey</div>
    187. 

  187.     <svg id="hundredfield" viewBox="0 0 400 320" preserveAspectRatio="xMidYMid meet"></svg>
    188. 

  188.     <div class="src">HUNDRED FIELD · MONO-SMALL · ATTITUDE SURVEY</div>
    189. 

  189.   </div>
    190. 

  190. 

  191.   <!-- 15 · ballot tally -->
    192. 

  192.   <div class="card">
    193. 

  193.     <span class="badge pair">小数据 · 单位分解</span>
    194. 

  194.     <h2>What they fear, tick by tick</h2>
    195. 

  195.     <div class="sub">one tick = one respondent in a hundred · inked = picked it · they could pick several</div>
    196. 

  196.     <svg id="ballottally" viewBox="0 0 400 320" preserveAspectRatio="xMidYMid meet"></svg>
    197. 

  197.     <div class="src">BALLOT TALLY · MONO-SMALL · WORKPLACE SURVEY</div>
    198. 

  198.   </div>
    199. 

  199. 

  200. 

  201.   <!-- L16 · matrix heat -->
    202. 

  202.   <div class="card">
    203. 

  203.     <span class="badge">LUPI 编辑型 · 矩阵热力</span>
    204. 

  204.     <h2>Which features get used together</h2>
    205. 

  205.     <div class="sub">8 × 8 co-usage · shade = share of accounts using both · dashed square = strongest pair</div>
    206. 

  206.     <svg id="matheat" viewBox="0 0 400 320" preserveAspectRatio="xMidYMid meet"></svg>
    207. 

  207.     <div class="src">MATRIX HEAT · MONO-EDITORIAL · PRODUCT ANALYTICS</div>
    208. 

  208.   </div>
    209. 

  209. 

  210.   <!-- L17 · calendar heat -->
    211. 

  211.   <div class="card wide">
    212. 

  212.     <span class="badge">LUPI 编辑型 · 日历热力</span>
    213. 

  213.     <h2>A year of deploys, day by day</h2>
    214. 

  214.     <div class="sub">52 weeks × 7 days · dot area = deploys that day · tiny dot = a quiet day · dashed ring = the busiest day of 2025</div>
    215. 

  215.     <svg id="calheat" viewBox="0 0 840 232" preserveAspectRatio="xMidYMid meet" style="max-height:260px"></svg>
    216. 

  216.     <div class="src">CALENDAR HEAT · MONO-EDITORIAL · DEPLOY LOG</div>
    217. 

  217.   </div>
    218. 

  218. 

  219.   <!-- L18 · beeswarm -->
    220. 

  220.   <div class="card">
    221. 

  221.     <span class="badge">LUPI 编辑型 · 蜂群</span>
    222. 

  222.     <h2>A hundred and twenty deals, swarming</h2>
    223. 

  223.     <div class="sub">one dot = one closed deal · the swarm piles up where deals cluster · hollow = enterprise · dashed = median</div>
    224. 

  224.     <svg id="beeswarm" viewBox="0 0 400 320" preserveAspectRatio="xMidYMid meet"></svg>
    225. 

  225.     <div class="src">BEESWARM · MONO-EDITORIAL · SALES OPS</div>
    226. 

  226.   </div>
    227. 

  227. 

  228.   <!-- L19 · ridgeline -->
    229. 

  229.   <div class="card">
    230. 

  230.     <span class="badge">LUPI 编辑型 · RIDGELINE</span>
    231. 

  231.     <h2>Five pipelines, five tempos</h2>
    232. 

  232.     <div class="sub">each crest = one pipeline's completion-time shape · the area is made of hairlines · dot = the peak</div>
    233. 

  233.     <svg id="ridge" viewBox="0 0 400 320" preserveAspectRatio="xMidYMid meet"></svg>
    234. 

  234.     <div class="src">RIDGELINE · MONO-EDITORIAL · DATA PLATFORM</div>
    235. 

  235.   </div>
    236. 

  236. 

  237.   <!-- L20 · parallel coordinates -->
    238. 

  238.   <div class="card">
    239. 

  239.     <span class="badge">LUPI 编辑型 · 平行坐标</span>
    240. 

  240.     <h2>Twelve products, four dimensions</h2>
    241. 

  241.     <div class="sub">one hairline = one product across price · satisfaction · retention · growth · ink = the one that wins everywhere</div>
    242. 

  242.     <svg id="parallel" viewBox="0 0 400 320" preserveAspectRatio="xMidYMid meet"></svg>
    243. 

  243.     <div class="src">PARALLEL COORDS · MONO-EDITORIAL · PRODUCT PANEL</div>
    244. 

  244.   </div>
    245. 

  245. 

  246. </div>
    247. 

  247. <script>
    248. 

  248. // ── shared Mono tokens ──
    249. 

  249. const INK='#1C1C1A',PAPER='#F0EFEB',MUTED='#8F8E88',GRID='#DEDDD6';
    250. 

  250. const NS='http://www.w3.org/2000/svg';
    251. 

  251. const el=(p,t,a)=>{const n=document.createElementNS(NS,t);for(const k in a)n.setAttribute(k,a[k]);p.appendChild(n);return n};
    252. 

  252. const txt=(p,a,s)=>{const n=el(p,'text',a);n.textContent=s;return n};
    253. 

  253. const tip=(n,s)=>{const t=document.createElementNS(NS,'title');t.textContent=s;n.appendChild(t)};
    254. 

  254. const rnd=(i,k)=>Math.abs(((i*73856093)^(k*19349663))%1000)/1000; // deterministic
    255. 

  255. const D2R=Math.PI/180;
    256. 

  256. const pol=(cx,cy,r,deg)=>[cx+r*Math.cos(deg*D2R),cy+r*Math.sin(deg*D2R)];
    257. 

  257. const sect=(cx,cy,r0,r1,a0,a1)=>{
    258. 

  258.   const big=a1-a0>180?1:0;
    259. 

  259.   const [xa,ya]=pol(cx,cy,r1,a0),[xb,yb]=pol(cx,cy,r1,a1);
    260. 

  260.   const [xc,yc]=pol(cx,cy,r0,a1),[xd,yd]=pol(cx,cy,r0,a0);
    261. 

  261.   return `M${xa} ${ya} A${r1} ${r1} 0 ${big} 1 ${xb} ${yb} L${xc} ${yc} A${r0} ${r0} 0 ${big} 0 ${xd} ${yd} Z`;
    262. 

  262. };
    263. 

  263. // unified reveal: draw when scrolled into view; click replays
    264. 

  264. const obsReveal=(id,fn)=>{
    265. 

  265.   const n=document.getElementById(id);
    266. 

  266.   const go=()=>{n.innerHTML='';fn(n)};
    267. 

  267.   const io=new IntersectionObserver(es=>{if(es[0].isIntersecting){go();io.disconnect()}},{threshold:.3});
    268. 

  268.   io.observe(n);
    269. 

  269.   n.style.cursor='pointer';
    270. 

  270.   n.addEventListener('click',go);
    271. 

  271. };
    272. 

  272. 

  273. // ════ 1 · launch fan ════
    274. 

  274. // spokes sorted by launch week → the big dots cascade along a diagonal arc
    275. 

  275. (()=>{
    276. 

  276. const FEAT=['Editor','Boards','Docs','Chat','Flows','Vault','Pages','Sync','Grid','Views','Hub','Forms'];
    277. 

  277. const LAUNCH=[1,3,4,6,8,9,11,12,14,16,17,19];     // week of launch
    278. 

  278. const CX=40,CY=304,rOf=w=>56+w*9.7;
    279. 

  279. obsReveal('fan',s=>{
    280. 

  280.   const ang=i=>-84+i*(76/11);
    281. 

  281.   // dotted week guides
    282. 

  282.   [5,10,15,20].forEach((w,gi)=>{
    283. 

  283.     const r=rOf(w),[x1,y1]=pol(CX,CY,r,-84),[x2,y2]=pol(CX,CY,r,-8);
    284. 

  284.     el(s,'path',{d:`M${x1} ${y1} A${r} ${r} 0 0 1 ${x2} ${y2}`,fill:'none',
    285. 

  285.       stroke:'#D8D6CE','stroke-width':1,'stroke-dasharray':'2 5',
    286. 

  286.       class:'fade',style:`animation-delay:${gi*.1}s`});
    287. 

  287.     const [lx,ly]=pol(CX,CY,r,-87.5);
    288. 

  288.     txt(s,{x:lx,y:ly,'font-size':6.5,fill:'#B0AFA9','text-anchor':'middle',
    289. 

  289.       class:'fade',style:`animation-delay:${gi*.1}s`},'W'+w);
    290. 

  290.   });
    291. 

  291.   FEAT.forEach((name,i)=>{
    292. 

  292.     const a=ang(i),L=LAUNCH[i];
    293. 

  293.     const mau=Math.round(48-i*3+rnd(i+1,3)*10);
    294. 

  294.     // hairline spoke from launch to rim
    295. 

  295.     const [sx,sy]=pol(CX,CY,rOf(L),a),[ex,ey]=pol(CX,CY,rOf(20),a);
    296. 

  296.     el(s,'line',{x1:sx,y1:sy,x2:ex,y2:ey,stroke:'#E3E2DB','stroke-width':.7,
    297. 

  297.       class:'fade',style:`animation-delay:${.15+i*.05}s`});
    298. 

  298.     // weekly texture dots
    299. 

  299.     for(let w=L+1;w<=20;w++){
    300. 

  300.       const [x,y]=pol(CX,CY,rOf(w),a);
    301. 

  301.       el(s,'circle',{cx:x,cy:y,r:1.1+rnd(i+1,w)*1.2,fill:'#B0AFA9',opacity:.8,
    302. 

  302.         class:'pop',style:`animation-delay:${.2+i*.06+(w-L)*.015}s`});
    303. 

  303.     }
    304. 

  304.     // launch dot, sized by MAU
    305. 

  305.     const [bx,by]=pol(CX,CY,rOf(L),a);
    306. 

  306.     const big=el(s,'circle',{cx:bx,cy:by,r:Math.sqrt(mau)*1.15,fill:INK,
    307. 

  307.       class:'pop',style:`animation-delay:${.15+i*.07}s`});
    308. 

  308.     tip(big,`${name} — launched W${L} · ${mau}k MAU`);
    309. 

  309.     // rim label along the spoke
    310. 

  310.     const [tx,ty]=pol(CX,CY,rOf(20)+9,a);
    311. 

  311.     txt(s,{x:tx,y:ty,'font-size':7,'font-weight':600,fill:'#6A6963',
    312. 

  312.       transform:`rotate(${a} ${tx} ${ty})`,'dominant-baseline':'middle',
    313. 

  313.       class:'fade',style:`animation-delay:${.3+i*.05}s`},name);
    314. 

  314.   });
    315. 

  315. });
    316. 

  316. })();
    317. 

  317. 

  318. // ════ 4 · dot cascade on dark ════
    319. 

  319. (()=>{
    320. 

  320. const CAUSE=['DNS','CDN','QUOTA','DISK','CERT','CACHE','QUEUE','LOCK','OOM','NET','3P API','CONFIG','DB','DEPLOY','CODE','HUMAN'];
    321. 

  321. const COUNT=[1,1,2,3,3,4,5,6,7,9,11,13,15,18,22,27];
    322. 

  322. obsReveal('cascade',s=>{
    323. 

  323.   const x=i=>34+i*22.2, base=i=>272-i*7.5;
    324. 

  324.   // dotted diagonal baseline
    325. 

  325.   el(s,'line',{x1:x(0)-8,y1:base(0)+4,x2:x(15)+8,y2:base(15)+4,
    326. 

  326.     stroke:'#4A4944','stroke-width':1,'stroke-dasharray':'2 4',class:'fade'});
    327. 

  327.   CAUSE.forEach((name,i)=>{
    328. 

  328.     const n=Math.ceil(COUNT[i]/2),bx=x(i),by=base(i);
    329. 

  329.     for(let k=0;k<n-1;k++)
    330. 

  330.       el(s,'circle',{cx:bx,cy:by-12-k*8.8,r:2.2,fill:'#B3B0A4',opacity:.9,
    331. 

  331.         class:'pop',style:`animation-delay:${i*.05+k*.03}s`});
    332. 

  332.     const topY=by-12-(n-1)*8.8;
    333. 

  333.     const top=el(s,'circle',{cx:bx,cy:topY,r:4.6,fill:PAPER,
    334. 

  334.       class:'pop',style:`animation-delay:${i*.05+n*.03}s`});
    335. 

  335.     tip(top,`${name} — ${COUNT[i]} incidents`);
    336. 

  336.     txt(s,{x:bx,y:topY-10,'font-size':9,'font-weight':700,fill:PAPER,'text-anchor':'middle',
    337. 

  337.       class:'fade',style:`animation-delay:${.2+i*.05}s`},COUNT[i]);
    338. 

  338.     txt(s,{x:bx,y:by+12,'font-size':6.5,'font-weight':600,fill:'#6A6963','text-anchor':'end',
    339. 

  339.       transform:`rotate(-90 ${bx} ${by+12})`,
    340. 

  340.       class:'fade',style:`animation-delay:${.1+i*.05}s`},name);
    341. 

  341.   });
    342. 

  342. });
    343. 

  343. })();
    344. 

  344. 

  345. // ════ 2 · barcode lollipop ════
    346. 

  346. (()=>{
    347. 

  347. const N=90;
    348. 

  348. const val=d=>95+55*Math.sin(d/9.5)+30*Math.sin(d/3.7)+rnd(d+1,5)*40;
    349. 

  349. obsReveal('barcode',s=>{
    350. 

  350.   // the barcode: one hairline per day, full height
    351. 

  351.   for(let d=0;d<N;d++){
    352. 

  352.     const x=18+d*8.53;
    353. 

  353.     el(s,'line',{x1:x,y1:8,x2:x,y2:258,stroke:GRID,'stroke-width':.7,
    354. 

  354.       class:'fade',style:`animation-delay:${d*.004}s`});
    355. 

  355.   }
    356. 

  356.   const vs=Array.from({length:N},(_,d)=>val(d));
    357. 

  357.   // top-3 peaks, kept at least 6 days apart so labels never collide
    358. 

  358.   const top3=[];
    359. 

  359.   for(const d of [...vs.keys()].sort((a,b)=>vs[b]-vs[a])){
    360. 

  360.     if(top3.every(t=>Math.abs(t-d)>=6))top3.push(d);
    361. 

  361.     if(top3.length===3)break;
    362. 

  362.   }
    363. 

  363.   for(let d=0;d<N;d++){
    364. 

  364.     const x=18+d*8.53,v=vs[d],y=252-v*.75;
    365. 

  365.     const weekend=d%7===5||d%7===6;
    366. 

  366.     const stemEnd=Math.min(256,y+14+rnd(d+1,9)*26);
    367. 

  367.     el(s,'line',{x1:x,y1:y,x2:x,y2:stemEnd,stroke:INK,'stroke-width':1.1,
    368. 

  368.       class:'fade',style:`animation-delay:${.3+d*.008}s`});
    369. 

  369.     const big=top3.includes(d);
    370. 

  370.     const dot=el(s,'circle',{cx:x,cy:y,r:big?4.6:2.7,
    371. 

  371.       fill:weekend?PAPER:INK,stroke:INK,'stroke-width':weekend?1.2:0,
    372. 

  372.       class:'pop',style:`animation-delay:${.3+d*.008}s`});
    373. 

  373.     tip(dot,`Day ${d+1} — ${Math.round(v)}k peak`);
    374. 

  374.     if(big)txt(s,{x,y:y-10,'font-size':9,'font-weight':800,fill:INK,'text-anchor':'middle',
    375. 

  375.       class:'fade',style:`animation-delay:${.9+d*.004}s`},Math.round(v)+'k');
    376. 

  376.   }
    377. 

  377.   [[0,'APR'],[30,'MAY'],[61,'JUN']].forEach(([d,m])=>
    378. 

  378.     txt(s,{x:18+d*8.53,y:276,'font-size':8,'font-weight':600,fill:MUTED,
    379. 

  379.       'letter-spacing':'.12em',class:'fade'},m));
    380. 

  380. });
    381. 

  381. })();
    382. 

  382. 

  383. // ════ 3 · arc bubble matrix ════
    384. 

  384. (()=>{
    385. 

  385. const PROD=['Editor','Boards','Docs','Flows','Chat','Vault','Pages','Sync'];
    386. 

  386. const CITY=['SF','NYC','LON','BER','TOK','SYD','SIN','PAR','AMS','TOR','SEO','SAO'];
    387. 

  387. const W=[9,8,7,7,6,5,5,4,4,3,3,2];             // market weight
    388. 

  388. obsReveal('arcmatrix',s=>{
    389. 

  389.   const rowY=i=>74+i*29, colX=j=>92+j*27, dy=j=>-16*Math.sin(Math.PI*j/11);
    390. 

  390.   const v=(i,j)=>{
    391. 

  391.     if(rnd(i*13+1,j*7+3)<.09)return 0;                 // a few true absences
    392. 

  392.     const age=1-i*.085;                                // older rows reach further
    393. 

  393.     return Math.min(40,Math.round(W[j]*3.4*age*(.45+rnd(i+1,j+1)*.85)));
    394. 

  394.   };
    395. 

  395.   // find top-4 cells for labels
    396. 

  396.   const all=[];
    397. 

  397.   PROD.forEach((_,i)=>CITY.forEach((_,j)=>all.push([v(i,j),i,j])));
    398. 

  398.   const top=all.sort((a,b)=>b[0]-a[0]).slice(0,4).map(d=>d[1]*100+d[2]);
    399. 

  399.   PROD.forEach((p,i)=>{
    400. 

  400.     // the horizon arc
    401. 

  401.     const d='M'+CITY.map((_,j)=>`${colX(j)} ${rowY(i)+dy(j)}`).join(' L ');
    402. 

  402.     el(s,'path',{d,fill:'none',stroke:'#E3E2DB','stroke-width':1,pathLength:1,
    403. 

  403.       class:'draw',style:`animation-delay:${i*.08}s`});
    404. 

  404.     txt(s,{x:84,y:rowY(i)+3,'font-size':8,'font-weight':600,fill:'#6A6963','text-anchor':'end',
    405. 

  405.       class:'fade',style:`animation-delay:${i*.08}s`},p);
    406. 

  406.     CITY.forEach((c,j)=>{
    407. 

  407.       const x=colX(j),y=rowY(i)+dy(j),vv=v(i,j);
    408. 

  408.       if(!vv){el(s,'circle',{cx:x,cy:y,r:.9,fill:'#D8D6CE',
    409. 

  409.         class:'pop',style:`animation-delay:${.2+i*.08+j*.02}s`});return}
    410. 

  410.       const fill=vv>=25?INK:vv>=12?'#6A6963':'#B0AFA9';
    411. 

  411.       const dot=el(s,'circle',{cx:x,cy:y,r:Math.sqrt(vv)*1.3,fill,
    412. 

  412.         class:'pop',style:`animation-delay:${.2+i*.08+j*.02}s`});
    413. 

  413.       tip(dot,`${p} · ${c} — ${vv} accounts`);
    414. 

  414.       if(top.includes(i*100+j))
    415. 

  415.         txt(s,{x,y:y-Math.sqrt(vv)*1.3-4,'font-size':7,'font-weight':800,fill:INK,
    416. 

  416.           'text-anchor':'middle',class:'fade',style:`animation-delay:${.6}s`},vv);
    417. 

  417.     });
    418. 

  418.   });
    419. 

  419.   CITY.forEach((c,j)=>{
    420. 

  420.     const x=colX(j),y=74+dy(j)-24;
    421. 

  421.     txt(s,{x,y,'font-size':7,'font-weight':700,fill:MUTED,'letter-spacing':'.08em',
    422. 

  422.       transform:`rotate(-55 ${x} ${y})`,class:'fade',style:`animation-delay:${j*.03}s`},c);
    423. 

  423.   });
    424. 

  424. });
    425. 

  425. })();
    426. 

  426. 

  427. // ════ 5 · radial convergence ════
    428. 

  428. (()=>{
    429. 

  429. const N=48,CX=200,CY=162,R=116;
    430. 

  430. const THEME=[['PERF',15,-75],['INTEGRATIONS',10,-3],['PRICING',9,69],['MOBILE',8,141],['UX',6,213]];
    431. 

  431. obsReveal('converge',s=>{
    432. 

  432.   // hub assignment: contiguous blocks with a little organic leakage
    433. 

  433.   const blocks=THEME.flatMap(([,n],h)=>Array(n).fill(h));
    434. 

  434.   const hubOf=i=>rnd(i+1,11)>.92?(blocks[i]+2)%5:blocks[i];
    435. 

  435.   const hubPt=h=>pol(CX,CY,34,THEME[h][2]);
    436. 

  436.   const counts=[0,0,0,0,0];
    437. 

  437.   for(let i=0;i<N;i++)counts[hubOf(i)]++;
    438. 

  438.   for(let i=0;i<N;i++){
    439. 

  439.     const deg=i/N*360-90,[px,py]=pol(CX,CY,R,deg);
    440. 

  440.     const h=hubOf(i),[hx,hy]=hubPt(h);
    441. 

  441.     const c1x=CX+(px-CX)*.42,c1y=CY+(py-CY)*.42;
    442. 

  442.     const c2x=CX+(hx-CX)*.3,c2y=CY+(hy-CY)*.3;
    443. 

  443.     el(s,'path',{d:`M${px} ${py} C${c1x} ${c1y} ${c2x} ${c2y} ${hx} ${hy}`,
    444. 

  444.       fill:'none',stroke:'#A8A7A0','stroke-width':.7,opacity:.55,pathLength:1,
    445. 

  445.       class:'draw',style:`animation-delay:${i*.018}s`});
    446. 

  446.     el(s,'circle',{cx:px,cy:py,r:1.6,fill:'#6A6963',
    447. 

  447.       class:'pop',style:`animation-delay:${i*.018}s`});
    448. 

  448.     // tiny rim code, flipped on the left half so it stays readable
    449. 

  449.     const flip=deg>90&&deg<270,[lx,ly]=pol(CX,CY,R+7,deg);
    450. 

  450.     txt(s,{x:lx,y:ly,'font-size':5.5,fill:MUTED,
    451. 

  451.       'text-anchor':flip?'end':'start','dominant-baseline':'middle',
    452. 

  452.       transform:`rotate(${flip?deg+180:deg} ${lx} ${ly})`,
    453. 

  453.       class:'fade',style:`animation-delay:${.2+i*.01}s`},'R-'+String(i+1).padStart(2,'0'));
    454. 

  454.   }
    455. 

  455.   THEME.forEach(([name,,deg],h)=>{
    456. 

  456.     const [hx,hy]=hubPt(h);
    457. 

  457.     const hub=el(s,'circle',{cx:hx,cy:hy,r:Math.sqrt(counts[h])*1.55,fill:INK,
    458. 

  458.       class:'pop',style:`animation-delay:${.5+h*.08}s`});
    459. 

  459.     tip(hub,`${name} — ${counts[h]} requests`);
    460. 

  460.     // theme label parked outside the rim, past the code ring
    461. 

  461.     const [tx,ty]=pol(CX,CY,R+34,deg);
    462. 

  462.     txt(s,{x:tx,y:ty,'font-size':8,'font-weight':800,fill:INK,'text-anchor':'middle',
    463. 

  463.       'dominant-baseline':'middle','letter-spacing':'.08em',
    464. 

  464.       style:`animation-delay:${.6+h*.08}s`,
    465. 

  465.       class:'fade'},`${name} · ${counts[h]}`);
    466. 

  466.     // hairline tying the label to its hub, skimming past the rim
    467. 

  467.     const [gx,gy]=pol(CX,CY,R+22,deg);
    468. 

  468.     el(s,'line',{x1:hx,y1:hy,x2:gx,y2:gy,stroke:'#C6C5BF','stroke-width':.7,
    469. 

  469.       'stroke-dasharray':'1 3',class:'fade',style:`animation-delay:${.7+h*.08}s`});
    470. 

  470.   });
    471. 

  471. });
    472. 

  472. })();
    473. 

  473. 

  474. // ════ 6 · cluster field ════
    475. 

  475. (()=>{
    476. 

  476. const SAT=[[622,78,'PLUGINS',22],[706,214,'THEMES',16],[540,268,'DOCS',13],[92,72,'FORKS',12],[774,58,'MIRRORS',9]];
    477. 

  477. obsReveal('clusters',s=>{
    478. 

  478.   const HX=300,HY=172;
    479. 

  479.   // dotted cross-contribution paths, hub → each island
    480. 

  480.   SAT.forEach(([x,y],ci)=>{
    481. 

  481.     const mx=(HX+x)/2,my=(HY+y)/2-30;
    482. 

  482.     el(s,'path',{d:`M${HX} ${HY} Q${mx} ${my} ${x} ${y}`,fill:'none',
    483. 

  483.       stroke:GRID,'stroke-width':.9,'stroke-dasharray':'2 4',pathLength:1,
    484. 

  484.       class:'draw',style:`animation-delay:${.8+ci*.12}s;animation-duration:.7s`});
    485. 

  485.   });
    486. 

  486.   // main hub: 80 golden-angle spokes
    487. 

  487.   for(let i=0;i<80;i++){
    488. 

  488.     const a=i*137.508,len=28+rnd(i+1,7)*88;
    489. 

  489.     const [x,y]=pol(HX,HY,len,a);
    490. 

  490.     el(s,'line',{x1:HX,y1:HY,x2:x,y2:y,stroke:'#C6C5BF','stroke-width':.6,pathLength:1,
    491. 

  491.       class:'draw',style:`animation-delay:${i*.012}s;animation-duration:.5s`});
    492. 

  492.     const dot=el(s,'circle',{cx:x,cy:y,r:1.6+rnd(i+1,4)*1.8,fill:INK,opacity:.85,
    493. 

  493.       class:'pop',style:`animation-delay:${.15+i*.012}s`});
    494. 

  494.     tip(dot,`core contributor #${i+1}`);
    495. 

  495.   }
    496. 

  496.   el(s,'circle',{cx:HX,cy:HY,r:6.5,fill:INK,class:'pop'});
    497. 

  497.   txt(s,{x:HX,y:HY+140,'font-size':8,'font-weight':800,fill:INK,'text-anchor':'middle',
    498. 

  498.     'letter-spacing':'.1em',style:`paint-order:stroke;stroke:${PAPER};stroke-width:3px`,
    499. 

  499.     class:'fade'},'CORE · 80');
    500. 

  500.   // satellite islands
    501. 

  501.   SAT.forEach(([x,y,name,n],ci)=>{
    502. 

  502.     el(s,'circle',{cx:x,cy:y,r:3.5,fill:'#4A4944',
    503. 

  503.       class:'pop',style:`animation-delay:${.9+ci*.12}s`});
    504. 

  504.     for(let k=0;k<n;k++){
    505. 

  505.       const a=k*137.508+ci*40,rr=9+rnd(k+1,ci+2)*26;
    506. 

  506.       const [dx,dy]=pol(x,y,rr,a);
    507. 

  507.       if(k%2===0)el(s,'line',{x1:x,y1:y,x2:dx,y2:dy,stroke:'#D8D6CE','stroke-width':.5,
    508. 

  508.         class:'fade',style:`animation-delay:${1+ci*.12+k*.02}s`});
    509. 

  509.       el(s,'circle',{cx:dx,cy:dy,r:1.4+rnd(k+3,ci+5)*1.4,fill:'#6A6963',
    510. 

  510.         class:'pop',style:`animation-delay:${1+ci*.12+k*.02}s`});
    511. 

  511.     }
    512. 

  512.     txt(s,{x,y:y+44,'font-size':7.5,'font-weight':700,fill:MUTED,'text-anchor':'middle',
    513. 

  513.       'letter-spacing':'.12em',style:`paint-order:stroke;stroke:${PAPER};stroke-width:3px`,
    514. 

  514.       class:'fade'},`${name} · ${n}`);
    515. 

  515.   });
    516. 

  516. });
    517. 

  517. })();
    518. 

  518. 

  519. // ════ 1 · brand spectrum ════
    520. 

  520. // paired opposites; the pale ribbon threads our position down the page
    521. 

  521. (()=>{
    522. 

  522. const ROWS=[['FRIEND','AUTHORITY'],['SERIOUS','PLAYFUL'],['RELIABLE','RISK-TAKING'],['CONTEMPORARY','CLASSIC']];
    523. 

  523. const US=[.74,.80,.40,.22];                 // 0 = left trait, 1 = right trait
    524. 

  524. const COMP=[[.42,.52,.57],[.60,.65,.86],[.30,.34,.50],[.36,.41,.73]];
    525. 

  525. const X0=118,X1=342,Y=i=>58+i*60,px=t=>X0+t*(X1-X0);
    526. 

  526. obsReveal('spectrum',s=>{
    527. 

  527.   // the ribbon first, underneath everything
    528. 

  528.   let d=`M${px(US[0])} ${Y(0)}`;
    529. 

  529.   for(let i=1;i<4;i++)
    530. 

  530.     d+=` C${px(US[i-1])} ${Y(i-1)+30} ${px(US[i])} ${Y(i)-30} ${px(US[i])} ${Y(i)}`;
    531. 

  531.   el(s,'path',{d,fill:'none',stroke:'#F0EFEB','stroke-width':30,'stroke-linecap':'round',
    532. 

  532.     'stroke-linejoin':'round',opacity:.9,pathLength:1,class:'draw',
    533. 

  533.     style:'animation-duration:1.4s'});
    534. 

  534.   ROWS.forEach(([a,b],i)=>{
    535. 

  535.     const y=Y(i);
    536. 

  536.     el(s,'line',{x1:X0,y1:y,x2:X1,y2:y,stroke:'#B0AFA9','stroke-width':1,
    537. 

  537.       class:'fade',style:`animation-delay:${i*.08}s`});
    538. 

  538.     [X0,X1].forEach(x=>el(s,'line',{x1:x,y1:y-4,x2:x,y2:y+4,stroke:'#B0AFA9','stroke-width':1,
    539. 

  539.       class:'fade',style:`animation-delay:${i*.08}s`}));
    540. 

  540.     txt(s,{x:X0-14,y:y+3,'font-size':8,'font-weight':600,fill:'#6A6963','text-anchor':'end',
    541. 

  541.       'letter-spacing':'.1em',class:'fade',style:`animation-delay:${i*.08}s`},a);
    542. 

  542.     txt(s,{x:X1+14,y:y+3,'font-size':8,'font-weight':600,fill:'#6A6963',
    543. 

  543.       'letter-spacing':'.1em',class:'fade',style:`animation-delay:${i*.08}s`},b);
    544. 

  544.     COMP[i].forEach((t,k)=>{
    545. 

  545.       const c=el(s,'circle',{cx:px(t),cy:y,r:3.2,fill:'#8F8E88',
    546. 

  546.         class:'pop',style:`animation-delay:${.3+i*.1+k*.05}s`});
    547. 

  547.       tip(c,`competitor ${'ABC'[k]} — ${Math.round(t*100)}% toward ${b}`);
    548. 

  548.     });
    549. 

  549.     const us=el(s,'circle',{cx:px(US[i]),cy:y,r:8,fill:INK,
    550. 

  550.       class:'pop',style:`animation-delay:${.5+i*.1}s`});
    551. 

  551.     tip(us,`us — ${Math.round(US[i]*100)}% toward ${b}`);
    552. 

  552.   });
    553. 

  553.   txt(s,{x:X0,y:284,'font-size':7.5,'font-weight':600,fill:'#B0AFA9','letter-spacing':'.12em',
    554. 

  554.     class:'fade',style:'animation-delay:.9s'},'● US    ● COMPETITORS A · B · C');
    555. 

  555. });
    556. 

  556. })();
    557. 

  557. 

  558. // ════ 2 · dotty matrix — isometric stacked dot planes ════
    559. 

  559. // pitch 20/10, dot radius capped well under half-pitch, decks 64px apart:
    560. 

  560. // each plane reads as its own quiet grid instead of a smudge
    561. 

  561. (()=>{
    562. 

  562. const SQUAD=['PLATFORM','GROWTH','MOBILE','INFRA'];
    563. 

  563. const SHADE=['#C6C5BF','#A8A7A0','#6A6963',INK];
    564. 

  564. const P=(c,r,k)=>[196+(c-r)*20,236+(c+r)*10-k*64];
    565. 

  565. obsReveal('dotty',s=>{
    566. 

  566.   for(let k=0;k<4;k++){
    567. 

  567.     // plane slab: paper fill so upper decks occlude lower ones
    568. 

  568.     const cs=[P(-.8,-.8,k),P(5.8,-.8,k),P(5.8,5.8,k),P(-.8,5.8,k)];
    569. 

  569.     el(s,'path',{d:'M'+cs.map(p=>p.join(' ')).join(' L ')+' Z',
    570. 

  570.       fill:PAPER,'fill-opacity':.96,stroke:'#DEDDD6','stroke-width':.9,
    571. 

  571.       class:'fade',style:`animation-delay:${k*.16}s`});
    572. 

  572.     for(let r=0;r<6;r++)for(let c=0;c<6;c++){
    573. 

  573.       const load=rnd(k*37+r*6+c+1,k+2);
    574. 

  574.       const v=load<.3?0:Math.round(load*12);   // sparser: silence is part of the texture
    575. 

  575.       const [x,y]=P(c,r,k);
    576. 

  576.       if(!v){el(s,'circle',{cx:x,cy:y,r:.7,fill:'#D8D6CE',
    577. 

  577.         class:'pop',style:`animation-delay:${k*.16+(r*6+c)*.008}s`});continue}
    578. 

  578.       const dot=el(s,'circle',{cx:x,cy:y,r:1+Math.sqrt(v)*1.15,fill:SHADE[k],
    579. 

  579.         class:'pop',style:`animation-delay:${k*.16+(r*6+c)*.008}s`});
    580. 

  580.       tip(dot,`${SQUAD[k]} · week ${c+1} × lane ${r+1} — ${v} tasks`);
    581. 

  581.     }
    582. 

  582.     // label off the plane's right corner, tied by a short hairline
    583. 

  583.     const [cxr,cyr]=P(5.8,-.8,k);
    584. 

  584.     el(s,'line',{x1:cxr+4,y1:cyr,x2:cxr+22,y2:cyr,stroke:'#C6C5BF','stroke-width':.8,
    585. 

  585.       class:'fade',style:`animation-delay:${.2+k*.16}s`});
    586. 

  586.     txt(s,{x:cxr+27,y:cyr+2.5,'font-size':7.5,'font-weight':700,fill:k===3?INK:'#8F8E88',
    587. 

  587.       'letter-spacing':'.12em',class:'fade',style:`animation-delay:${.2+k*.16}s`},SQUAD[k]);
    588. 

  588.   }
    589. 

  589. });
    590. 

  590. })();
    591. 

  591. 

  592. // ════ 3 · bubble almanac ════
    593. 

  593. // the vintage-almanac feel lives in three things: ledger-paper hairlines
    594. 

  594. // under everything, bubbles big enough to collide, and marginalia. do all three.
    595. 

  595. (()=>{
    596. 

  596. const AREAS=['EDITOR','BOARDS','DOCS','CHAT','FLOWS','VAULT','PAGES','SYNC','GRID','VIEWS','HUB','FORMS'];
    597. 

  597. const BETA={GRID:2023,VIEWS:2024,HUB:2025,FORMS:2025};   // beta until this year
    598. 

  598. const BORN={EDITOR:2019,BOARDS:2019,DOCS:2019,CHAT:2020,FLOWS:2020,VAULT:2021,PAGES:2021,SYNC:2022,GRID:2022,VIEWS:2023,HUB:2024,FORMS:2024};
    599. 

  599. obsReveal('almanac',s=>{
    600. 

  600.   const rowY=i=>62+i*34,colX=j=>132+j*57;
    601. 

  601.   // ledger paper: hairlines every 6.8px, edge to edge, under everything
    602. 

  602.   for(let y=40;y<=318;y+=6.8)
    603. 

  603.     el(s,'line',{x1:56,y1:y,x2:822,y2:y,stroke:'#E4E3DC','stroke-width':.5,
    604. 

  604.       class:'fade',style:`animation-delay:${(y-40)*.001}s`});
    605. 

  605.   const vals=[];
    606. 

  606.   for(let i=0;i<8;i++){
    607. 

  607.     const yr=2019+i;
    608. 

  608.     el(s,'line',{x1:56,y1:rowY(i),x2:822,y2:rowY(i),stroke:'#D3D2CA','stroke-width':.9,
    609. 

  609.       class:'fade',style:`animation-delay:${i*.04}s`});
    610. 

  610.     txt(s,{x:48,y:rowY(i)+3,'font-size':9,'font-weight':700,fill:'#8F8E88','text-anchor':'end',
    611. 

  611.       class:'fade',style:`animation-delay:${i*.04}s`},yr);
    612. 

  612.     AREAS.forEach((a,j)=>{
    613. 

  613.       if(yr<BORN[a])return;
    614. 

  614.       const age=yr-BORN[a];
    615. 

  615.       // steep spread: quiet areas stay pinpricks, busy ones balloon
    616. 

  616.       const v=Math.round((2+age*5)*(0.25+rnd(i*12+j+1,j+3)**2*2.2));
    617. 

  617.       vals.push([Math.max(1,v),i,j,a,yr]);
    618. 

  618.     });
    619. 

  619.   }
    620. 

  620.   // draw small over large so the giants sit underneath as washes
    621. 

  621.   vals.sort((a,b)=>b[0]-a[0]);
    622. 

  622.   const top3=vals.slice(0,3);
    623. 

  623.   // hand-drawn circle: radius wobbles around the rim on two slow sine waves,
    624. 

  624.   // so every bubble is its own slightly-off print — never a compass circle
    625. 

  625.   const blob=(x,y,r,seed)=>{
    626. 

  626.     const n=Math.max(14,Math.round(r*1.6)),pts=[];
    627. 

  627.     for(let t=0;t<n;t++){
    628. 

  628.       const a=t/n*Math.PI*2;
    629. 

  629.       const w=1+.055*Math.sin(a*2+seed*7)+.04*Math.sin(a*3+seed*13)+(rnd(seed+t,3)-.5)*.03;
    630. 

  630.       pts.push([x+Math.cos(a)*r*w,y+Math.sin(a)*r*w]);
    631. 

  631.     }
    632. 

  632.     let d=`M${pts[0][0].toFixed(1)} ${pts[0][1].toFixed(1)}`;
    633. 

  633.     for(let t=0;t<n;t++){
    634. 

  634.       const p=pts[t],q=pts[(t+1)%n];
    635. 

  635.       d+=` Q${p[0].toFixed(1)} ${p[1].toFixed(1)} ${((p[0]+q[0])/2).toFixed(1)} ${((p[1]+q[1])/2).toFixed(1)}`;
    636. 

  636.     }
    637. 

  637.     return d+' Z';
    638. 

  638.   };
    639. 

  639.   vals.forEach(([v,i,j,a,yr],k)=>{
    640. 

  640.     const x=colX(j)+(rnd(i*7+j+2,j+9)-.5)*10,  // jitter off the gridline
    641. 

  641.           y=rowY(i),r=Math.sqrt(v)*3.8;        // big: rows are 34 apart, giants reach ~28 and collide
    642. 

  642.     const beta=BETA[a]&&yr<=BETA[a];
    643. 

  643.     const g=el(s,'g',{class:'pop',style:`animation-delay:${.15+k*.012}s`});
    644. 

  644.     const seed=i*12+j;
    645. 

  645.     const dot=el(g,'path',beta
    646. 

  646.       ?{d:blob(x,y,r,seed),fill:'none',stroke:'#8F8E88','stroke-width':1,'stroke-dasharray':'3 3'}
    647. 

  647.       :{d:blob(x,y,r,seed),fill:INK,'fill-opacity':.09+rnd(i+2,j+4)*.1,
    648. 

  648.         stroke:INK,'stroke-opacity':.3+rnd(i+5,j+7)*.35,'stroke-width':.6+rnd(i+3,j+11)*.9});
    649. 

  649.     tip(dot,`${a} · ${yr} — ${v*10} tickets${beta?' (beta)':''}`);
    650. 

  650.     // escalation core: small wobbly blot, nudged off-center like a press mark
    651. 

  651.     if(!beta){
    652. 

  652.       const ox=(rnd(seed+1,17)-.5)*r*.3,oy=(rnd(seed+3,19)-.5)*r*.3;
    653. 

  653.       el(g,'path',{d:blob(x+ox,y+oy,Math.max(1.4,r*.17),seed+29),fill:INK});
    654. 

  654.     }
    655. 

  655.     if(top3.includes(vals[k]))
    656. 

  656.       txt(s,{x,y:y-r-5,'font-size':8.5,'font-weight':800,fill:INK,'text-anchor':'middle',
    657. 

  657.         class:'fade',style:'animation-delay:1s'},v*10);
    658. 

  658.   });
    659. 

  659.   AREAS.forEach((a,j)=>{
    660. 

  660.     const x=colX(j);
    661. 

  661.     txt(s,{x,y:34,'font-size':7.5,'font-weight':700,fill:MUTED,'letter-spacing':'.1em',
    662. 

  662.       transform:`rotate(-32 ${x} 34)`,class:'fade',style:`animation-delay:${j*.03}s`},a);
    663. 

  663.   });
    664. 

  664.   // marginalia: two annotations with pointer hairlines, like the original's notes
    665. 

  665.   el(s,'path',{d:`M${colX(3)+30} ${rowY(5)-14} C${colX(3)+70} ${rowY(5)-34} ${colX(3)+96} ${rowY(5)-38} ${colX(3)+118} ${rowY(5)-38}`,
    666. 

  666.     fill:'none',stroke:'#B0AFA9','stroke-width':.7,class:'fade',style:'animation-delay:1.1s'});
    667. 

  667.   txt(s,{x:colX(3)+124,y:rowY(5)-35,'font-size':7,fill:'#6A6963','font-style':'italic',
    668. 

  668.     class:'fade',style:'animation-delay:1.1s'},'chat tickets triple after mobile GA');
    669. 

  669.   el(s,'path',{d:`M${colX(9)+16} ${rowY(2)+8} C${colX(9)+40} ${rowY(2)+26} ${colX(9)+60} ${rowY(2)+30} ${colX(9)+80} ${rowY(2)+30}`,
    670. 

  670.     fill:'none',stroke:'#B0AFA9','stroke-width':.7,class:'fade',style:'animation-delay:1.2s'});
    671. 

  671.   txt(s,{x:colX(9)+86,y:rowY(2)+33,'font-size':7,fill:'#6A6963','font-style':'italic',
    672. 

  672.     class:'fade',style:'animation-delay:1.2s'},'betas barely ticket — nobody files bugs on toys');
    673. 

  673.   // footer strip: important events, the almanac's timeline shelf
    674. 

  674.   const evY=356;
    675. 

  675.   el(s,'line',{x1:56,y1:evY-16,x2:822,y2:evY-16,stroke:'#C6C5BF','stroke-width':.8,
    676. 

  676.     class:'fade',style:'animation-delay:1.2s'});
    677. 

  677.   txt(s,{x:56,y:evY-24,'font-size':7,'font-weight':800,fill:'#8F8E88','letter-spacing':'.16em',
    678. 

  678.     class:'fade',style:'animation-delay:1.2s'},'IMPORTANT EVENTS');
    679. 

  679.   [['2020','SLA introduced'],['2022','self-serve help center'],['2023','the GA wave'],['2025','AI deflection live']]
    680. 

  680.   .forEach(([yr,note],k)=>{
    681. 

  681.     const x=90+k*196;
    682. 

  682.     el(s,'line',{x1:x,y1:evY-16,x2:x,y2:evY-6,stroke:'#8F8E88','stroke-width':1,
    683. 

  683.       class:'fade',style:`animation-delay:${1.3+k*.08}s`});
    684. 

  684.     txt(s,{x,y:evY+4,'font-size':8,'font-weight':800,fill:INK,
    685. 

  685.       class:'fade',style:`animation-delay:${1.3+k*.08}s`},yr);
    686. 

  686.     txt(s,{x,y:evY+15,'font-size':7,fill:'#8F8E88',
    687. 

  687.       class:'fade',style:`animation-delay:${1.3+k*.08}s`},note);
    688. 

  688.   });
    689. 

  689. });
    690. 

  690. })();
    691. 

  691. 

  692. // ════ 4 · radial patchwork ════
    693. 

  693. (()=>{
    694. 

  694. const CX=200,CY=168,N=46;
    695. 

  695. obsReveal('patchwork',s=>{
    696. 

  696.   // 24h rim ticks
    697. 

  697.   for(let h=0;h<96;h++){
    698. 

  698.     const a=-90+h*3.75,[x1,y1]=pol(CX,CY,140,a),[x2,y2]=pol(CX,CY,h%4===0?146:143,a);
    699. 

  699.     el(s,'line',{x1,y1,x2,y2,stroke:'#C6C5BF','stroke-width':h%4===0?1:.5,
    700. 

  700.       class:'fade',style:`animation-delay:${h*.006}s`});
    701. 

  701.   }
    702. 

  702.   [0,6,12,18].forEach(h=>{
    703. 

  703.     const [x,y]=pol(CX,CY,157,-90+h*15);
    704. 

  704.     txt(s,{x,y:y+3,'font-size':8,'font-weight':700,fill:MUTED,'text-anchor':'middle',
    705. 

  705.       class:'fade'},String(h).padStart(2,'0'));
    706. 

  706.   });
    707. 

  707.   // the patchwork: translucent wedges pile into ink
    708. 

  708.   const wedges=[];
    709. 

  709.   for(let i=0;i<N;i++){
    710. 

  710.     // deploys cluster around 11h and 16h, thin overnight
    711. 

  711.     const peak=rnd(i+1,2)>.5?11:16;
    712. 

  712.     const hour=(peak+(rnd(i+1,3)-.5)*7+24)%24;
    713. 

  713.     const a0=-90+hour*15,sw=10+rnd(i+1,4)*34;
    714. 

  714.     const r1=34+rnd(i+1,5)*100;
    715. 

  715.     wedges.push([a0,sw,r1,hour,i]);
    716. 

  716.   }
    717. 

  717.   wedges.forEach(([a0,sw,r1,hour,i])=>{
    718. 

  718.     const w=el(s,'path',{d:sect(CX,CY,16,r1,a0,a0+sw),fill:INK,
    719. 

  719.       'fill-opacity':.07+rnd(i+1,6)*.09,class:'fade',
    720. 

  720.       style:`animation-delay:${.2+i*.022}s`});
    721. 

  721.     tip(w,`deploy #${i+1} — ${String(Math.floor(hour)).padStart(2,'0')}:${String(Math.floor(hour%1*60)).padStart(2,'0')} · ${Math.round(r1*6)} files`);
    722. 

  722.   });
    723. 

  723.   // three outlined wedges: the ones that paged somebody
    724. 

  724.   [4,17,31].forEach((i,k)=>{
    725. 

  725.     const [a0,sw,r1]=wedges[i];
    726. 

  726.     const w=el(s,'path',{d:sect(CX,CY,16,r1,a0,a0+sw),fill:'none',
    727. 

  727.       stroke:INK,'stroke-width':1.1,class:'fade',style:`animation-delay:${1.2+k*.15}s`});
    728. 

  728.     tip(w,`deploy #${i+1} — triggered an incident`);
    729. 

  729.   });
    730. 

  730.   el(s,'circle',{cx:CX,cy:CY,r:3,fill:INK,class:'pop',style:'animation-delay:1.3s'});
    731. 

  731.   txt(s,{x:CX,y:308,'font-size':7.5,'font-weight':600,fill:'#B0AFA9','text-anchor':'middle',
    732. 

  732.     'letter-spacing':'.12em',class:'fade',style:'animation-delay:1.4s'},'OUTLINED = TRIGGERED AN INCIDENT');
    733. 

  733. });
    734. 

  734. })();
    735. 

  735. 

  736. // ════ 6 · trend lineage ════
    737. 

  737. (()=>{
    738. 

  738. // [name, events [year, type f|o], aliveToday]
    739. 

  739. const TR=[
    740. 

  740.   ['Dark mode',[[2017,'f'],[2022,'o']],true],
    741. 

  741.   ['Kanban',[[2016,'f']],true],
    742. 

  742.   ['Wikis',[[2016,'f'],[2019,'o']],false],
    743. 

  743.   ['Slash cmds',[[2018,'f']],true],
    744. 

  744.   ['Templates',[[2019,'f'],[2024,'o']],true],
    745. 

  745.   ['Inbox',[[2020,'f']],false],
    746. 

  746.   ['Live cursors',[[2020,'f'],[2023,'o']],true],
    747. 

  747.   ['AI drafts',[[2023,'f'],[2025,'o']],true],
    748. 

  748.   ['Voice notes',[[2021,'f']],false],
    749. 

  749.   ['Offline',[[2018,'f'],[2026,'o']],true],
    750. 

  750. ];
    751. 

  751. const Y0=2016,yY=yr=>34+(yr-Y0)*24,colX=c=>76+c*31;
    752. 

  752. obsReveal('lineage',s=>{
    753. 

  753.   for(let yr=Y0;yr<=2026;yr++){
    754. 

  754.     el(s,'line',{x1:60,y1:yY(yr),x2:372,y2:yY(yr),stroke:'#E3E2DB','stroke-width':.8,
    755. 

  755.       class:'fade',style:`animation-delay:${(yr-Y0)*.03}s`});
    756. 

  756.     if(yr%2===0)txt(s,{x:52,y:yY(yr)+3,'font-size':8,'font-weight':600,fill:MUTED,'text-anchor':'end',
    757. 

  757.       class:'fade',style:`animation-delay:${(yr-Y0)*.03}s`},yr);
    758. 

  758.   }
    759. 

  759.   TR.forEach(([name,ev,alive],c)=>{
    760. 

  760.     const x=colX(c);
    761. 

  761.     // segments between events: solid while fresh, dashed once dormant
    762. 

  762.     for(let k=0;k<ev.length-1;k++){
    763. 

  763.       const gap=ev[k+1][0]-ev[k][0];
    764. 

  764.       el(s,'line',{x1:x,y1:yY(ev[k][0])+7,x2:x,y2:yY(ev[k+1][0])-7,
    765. 

  765.         stroke:'#B0AFA9','stroke-width':1,
    766. 

  766.         'stroke-dasharray':gap>2?'2 4':'none',pathLength:1,
    767. 

  767.         class:'draw',style:`animation-delay:${.3+c*.07}s;animation-duration:.6s`});
    768. 

  768.     }
    769. 

  769.     const last=ev[ev.length-1][0];
    770. 

  770.     if(alive)
    771. 

  771.       el(s,'line',{x1:x,y1:yY(last)+7,x2:x,y2:yY(2026)+16,stroke:'#B0AFA9','stroke-width':1,
    772. 

  772.         pathLength:1,class:'draw',style:`animation-delay:${.45+c*.07}s;animation-duration:.6s`});
    773. 

  773.     ev.forEach(([yr,t])=>{
    774. 

  774.       const node=el(s,'circle',t==='f'
    775. 

  775.         ?{cx:x,cy:yY(yr),r:5.5,fill:INK}
    776. 

  776.         :{cx:x,cy:yY(yr),r:5.5,fill:PAPER,stroke:INK,'stroke-width':1.4});
    777. 

  777.       node.setAttribute('class','pop');
    778. 

  778.       node.style.animationDelay=(.35+c*.07)+'s';
    779. 

  779.       tip(node,`${name} — ${t==='f'?'shipped':'reworked'} ${yr}`);
    780. 

  780.     });
    781. 

  781.     // terminal dot: alive lands on today's baseline, dead stops where it stopped
    782. 

  782.     el(s,'circle',{cx:x,cy:alive?yY(2026)+16:yY(last)+12,r:alive?3:1.6,
    783. 

  783.       fill:alive?INK:'#C6C5BF',class:'pop',style:`animation-delay:${.6+c*.07}s`});
    784. 

  784.     const ly=yY(2026)+26;
    785. 

  785.     txt(s,{x,y:ly,'font-size':6.8,'font-weight':600,fill:alive?'#4A4944':'#B0AFA9',
    786. 

  786.       transform:`rotate(-38 ${x} ${ly})`,'text-anchor':'end',
    787. 

  787.       class:'fade',style:`animation-delay:${.7+c*.05}s`},name);
    788. 

  788.   });
    789. 

  789. });
    790. 

  790. })();
    791. 

  791. 

  792. // ════ 8 · type colonnade ════
    793. 

  793. (()=>{
    794. 

  794. const PRE=['core','ui','api','data','auth','sync','mail','flag','edge','doc','bot'];
    795. 

  795. const SUF=['-kit','-svc','-web','-cli','-db','-gw','-sdk','-jobs'];
    796. 

  796. const TEAM=['PLATFORM','FRONTEND','BACKEND','DATA','INFRA','MOBILE','SECURITY','GROWTH','ML','DESIGN'];
    797. 

  797. obsReveal('colonnade',s=>{
    798. 

  798.   const N=44;
    799. 

  799.   const teamY=j=>36+j*28,repoY=i=>16+i*6.7;
    800. 

  800.   const counts=Array(10).fill(0);
    801. 

  801.   const owner=i=>{const w=rnd(i+1,17);return Math.min(9,Math.floor(w*w*10))}; // skewed: low teams hoard
    802. 

  802.   for(let i=0;i<N;i++)counts[owner(i)]++;
    803. 

  803.   for(let i=0;i<N;i++){
    804. 

  804.     const name=PRE[i%11]+SUF[Math.floor(rnd(i+1,8)*8)%8]+(i>21?'-v2':'');
    805. 

  805.     const yi=repoY(i),j=owner(i),yj=teamY(j);
    806. 

  806.     txt(s,{x:112,y:yi+2,'font-size':5,fill:'#8F8E88','text-anchor':'end',
    807. 

  807.       class:'fade',style:`animation-delay:${i*.012}s`},name);
    808. 

  808.     el(s,'rect',{x:117,y:yi-1.2,width:4,height:2.4,fill:'#B0AFA9',
    809. 

  809.       class:'fade',style:`animation-delay:${i*.012}s`});
    810. 

  810.     el(s,'path',{d:`M123 ${yi} C 200 ${yi} 220 ${yj} 288 ${yj}`,fill:'none',
    811. 

  811.       stroke:'#A8A7A0','stroke-width':.6,opacity:.6,pathLength:1,
    812. 

  812.       class:'draw',style:`animation-delay:${.2+i*.015}s;animation-duration:.7s`});
    813. 

  813.   }
    814. 

  814.   TEAM.forEach((t,j)=>{
    815. 

  815.     const y=teamY(j);
    816. 

  816.     el(s,'circle',{cx:293,cy:y,r:2.6+counts[j]*.55,fill:counts[j]>=7?INK:counts[j]>=4?'#6A6963':'#B0AFA9',
    817. 

  817.       class:'pop',style:`animation-delay:${.6+j*.05}s`});
    818. 

  818.     const lab=txt(s,{x:302+counts[j]*.55,y:y+2.5,'font-size':7,'font-weight':700,fill:'#4A4944',
    819. 

  819.       class:'fade',style:`animation-delay:${.65+j*.05}s`},`${t} · ${counts[j]}`);
    820. 

  820.     tip(lab,`${t} owns ${counts[j]} repos`);
    821. 

  821.   });
    822. 

  822. });
    823. 

  823. })();
    824. 

  824. 

  825. // ════ 9 · hourglass stream ════
    826. 

  826. (()=>{
    827. 

  827. const STAGE=[['VISITORS',4200],['SIGN-UPS',1900],['ACTIVATED',960],['RETAINED',540],['PAYING',310]];
    828. 

  828. obsReveal('hourglass',s=>{
    829. 

  829.   const CXm=185,sy=k=>34+k*64,w=c=>c/4200*290;
    830. 

  830.   STAGE.forEach(([name,c],k)=>{
    831. 

  831.     const y=sy(k),hw=w(c)/2;
    832. 

  832.     // barcode strip: one tick ≈ 40 people
    833. 

  833.     const n=Math.round(c/40);
    834. 

  834.     for(let t=0;t<n;t++){
    835. 

  835.       const x=CXm-hw+(t+.5)/n*hw*2+(rnd(t+1,k+3)-.5)*3;
    836. 

  836.       el(s,'line',{x1:x,y1:y-6,x2:x,y2:y+6,stroke:INK,'stroke-width':.8,
    837. 

  837.         opacity:.45+rnd(t+2,k+5)*.5,class:'fade',style:`animation-delay:${k*.12+t*.004}s`});
    838. 

  838.     }
    839. 

  839.     // threads trickling to the next strip
    840. 

  840.     if(k<4){
    841. 

  841.       const hw1=w(STAGE[k+1][1])/2;
    842. 

  842.       for(let t=0;t<34;t++){
    843. 

  843.         const xt=CXm+(rnd(t+1,k*7+1)-.5)*2*hw*.94;
    844. 

  844.         const xb=CXm+(rnd(t+3,k*7+5)-.5)*2*hw1*.94;
    845. 

  845.         el(s,'path',{d:`M${xt} ${y+8} C${xt} ${y+34} ${xb} ${sy(k+1)-34} ${xb} ${sy(k+1)-8}`,
    846. 

  846.           fill:'none',stroke:'#B0AFA9','stroke-width':.5,opacity:.32,pathLength:1,
    847. 

  847.           class:'draw',style:`animation-delay:${.2+k*.15+t*.008}s;animation-duration:.8s`});
    848. 

  848.       }
    849. 

  849.       // conversion between stages, parked in the left margin
    850. 

  850.       const pct=Math.round(STAGE[k+1][1]/c*100);
    851. 

  851.       txt(s,{x:26,y:(y+sy(k+1))/2+3,'font-size':8.5,'font-weight':800,fill:'#8F8E88',
    852. 

  852.         class:'fade',style:`animation-delay:${.5+k*.15}s`},pct+'%');
    853. 

  853.       txt(s,{x:26,y:(y+sy(k+1))/2+13,'font-size':6,'font-weight':600,fill:'#C6C5BF',
    854. 

  854.         'letter-spacing':'.08em',class:'fade',style:`animation-delay:${.5+k*.15}s`},'GET THROUGH');
    855. 

  855.     }
    856. 

  856.     // stage label, tied to the strip edge
    857. 

  857.     el(s,'line',{x1:CXm+hw+6,y1:y,x2:340,y2:y,stroke:'#DEDDD6','stroke-width':.8,
    858. 

  858.       class:'fade',style:`animation-delay:${.3+k*.12}s`});
    859. 

  859.     txt(s,{x:344,y:y-1,'font-size':7.5,'font-weight':700,fill:'#4A4944',
    860. 

  860.       'letter-spacing':'.08em',class:'fade',style:`animation-delay:${.35+k*.12}s`},name);
    861. 

  861.     txt(s,{x:344,y:y+10,'font-size':9.5,'font-weight':800,fill:INK,
    862. 

  862.       class:'fade',style:`animation-delay:${.4+k*.12}s`},c.toLocaleString());
    863. 

  863.   });
    864. 

  864. });
    865. 

  865. })();
    866. 

  866. 

  867. // ════ 14 · hundred field ════
    868. 

  868. // small data, unit-decomposed: four shares of 100% become 100 people.
    869. 

  869. // phyllotaxis discs (golden angle) so每簇自带肌理; share is countable, not just readable.
    870. 

  870. (()=>{
    871. 

  871. const SEG=[['CHARGED',41,INK],['TORN',35,'#55554F'],['ADRIFT',12,'#8F8E88'],['AVERSE',12,'#B0AFA9']];
    872. 

  872. const POS=[[132,140],[276,116],[186,252],[322,238]];
    873. 

  873. obsReveal('hundredfield',s=>{
    874. 

  874.   // dashed constellation hairlines tying the cluster cores
    875. 

  875.   [[0,1],[0,2],[1,3],[2,3]].forEach(([a,b],k)=>{
    876. 

  876.     el(s,'line',{x1:POS[a][0],y1:POS[a][1],x2:POS[b][0],y2:POS[b][1],
    877. 

  877.       stroke:GRID,'stroke-width':.7,'stroke-dasharray':'2 5',
    878. 

  878.       class:'fade',style:`animation-delay:${.9+k*.1}s`});
    879. 

  879.   });
    880. 

  880.   SEG.forEach(([name,v,shade],ci)=>{
    881. 

  881.     const [cx,cy]=POS[ci];
    882. 

  882.     let edge=0;
    883. 

  883.     for(let k=0;k<v;k++){
    884. 

  884.       const a=k*137.508+ci*55;
    885. 

  885.       const rr=4+Math.sqrt(k)*5.9+rnd(k+1,ci+2)*3;
    886. 

  886.       edge=Math.max(edge,rr);
    887. 

  887.       const [x,y]=pol(cx,cy,rr,a);
    888. 

  888.       // hairline spoke for every 5th person, core to dot
    889. 

  889.       if(k%5===0)el(s,'line',{x1:cx,y1:cy,x2:x,y2:y,stroke:'#CDCCC5','stroke-width':.6,
    890. 

  890.         class:'fade',style:`animation-delay:${ci*.14+k*.012}s`});
    891. 

  891.       const dot=el(s,'circle',{cx:x,cy:y,r:1.5+rnd(k+2,ci+3)*1.7,fill:shade,opacity:.9,
    892. 

  892.         class:'pop',style:`animation-delay:${ci*.14+k*.012}s`});
    893. 

  893.       tip(dot,`${name} — one of ${v} in 100`);
    894. 

  894.     }
    895. 

  895.     el(s,'circle',{cx,cy,r:2.4,fill:INK,class:'pop',style:`animation-delay:${ci*.14}s`});
    896. 

  896.     txt(s,{x:cx,y:cy+edge+13,'font-size':8,'font-weight':800,fill:INK,'text-anchor':'middle',
    897. 

  897.       'letter-spacing':'.1em',style:`paint-order:stroke;stroke:${PAPER};stroke-width:3px;animation-delay:${.5+ci*.12}s`,
    898. 

  898.       class:'fade'},`${name} · ${v}`);
    899. 

  899.   });
    900. 

  900.   txt(s,{x:200,y:314,'font-size':7,'font-weight':600,fill:'#B0AFA9','text-anchor':'middle',
    901. 

  901.     'letter-spacing':'.12em',class:'fade',style:'animation-delay:1.3s'},'ONE DOT = ONE PERSON · 41 + 35 + 12 + 12 = 100');
    902. 

  902. });
    903. 

  903. })();
    904. 

  904. 

  905. // ════ 15 · ballot tally ════
    906. 

  906. // multi-select survey (each option independent, 0–100): every option is a row of
    907. 

  907. // 100 hairline ticks — a hundred people standing in line, the ones who picked it inked.
    908. 

  908. (()=>{
    909. 

  909. const ASK=[['DO MORE WITH THE SAME PAY',51],['AN UNSUSTAINABLE PACE',46],['QUALITY OF WORK SLIPPING',41],['BEING REPLACED OUTRIGHT',22]];
    910. 

  910. obsReveal('ballottally',s=>{
    911. 

  911.   ASK.forEach(([name,v],i)=>{
    912. 

  912.     const base=78+i*62;
    913. 

  913.     txt(s,{x:28,y:base-26,'font-size':7.5,'font-weight':700,fill:'#6A6963',
    914. 

  914.       'letter-spacing':'.08em',class:'fade',style:`animation-delay:${i*.1}s`},name);
    915. 

  915.     el(s,'line',{x1:28,y1:base,x2:372,y2:base,stroke:GRID,'stroke-width':.6,
    916. 

  916.       class:'fade',style:`animation-delay:${i*.1}s`});
    917. 

  917.     for(let k=0;k<100;k++){
    918. 

  918.       const x=28+k*3.44,picked=k<v;
    919. 

  919.       const h=picked?12+rnd(k+1,i+2)*5:4.5+rnd(k+1,i+5)*2;
    920. 

  920.       el(s,'line',{x1:x,y1:base,x2:x,y2:base-h,
    921. 

  921.         stroke:picked?INK:'#CFCEC7','stroke-width':picked?.9:.55,
    922. 

  922.         class:'fade',style:`animation-delay:${i*.1+k*.006}s`});
    923. 

  923.       if(k%10===0)el(s,'circle',{cx:x,cy:base+4.5,r:.8,fill:'#C6C5BF',
    924. 

  924.         class:'fade',style:`animation-delay:${i*.1+k*.006}s`});
    925. 

  925.     }
    926. 

  926.     const lab=txt(s,{x:28+(v-1)*3.44+9,y:base-11,'font-size':11,'font-weight':800,fill:INK,
    927. 

  927.       style:`paint-order:stroke;stroke:${PAPER};stroke-width:3px;animation-delay:${.5+i*.1}s`,
    928. 

  928.       class:'fade'},v);
    929. 

  929.     tip(lab,`${v} of 100 picked this — they could pick several`);
    930. 

  930.   });
    931. 

  931.   txt(s,{x:200,y:314,'font-size':7,'font-weight':600,fill:'#B0AFA9','text-anchor':'middle',
    932. 

  932.     'letter-spacing':'.12em',class:'fade',style:'animation-delay:1.1s'},'ONE TICK = ONE RESPONDENT · DOT MARKS EVERY TENTH');
    933. 

  933. });
    934. 

  934. })();
    935. 

  935. 

  936. 

  937. // ── New chart-family helpers (scoped to the added templates) ──
    938. 

  938. (()=>{
    939. 

  939. const INK='#1C1C1A',PAPER='#F0EFEB',MUTED='#8F8E88',GRID='#DEDDD6';
    940. 

  940. const NS='http://www.w3.org/2000/svg';
    941. 

  941. const el=(p,t,a)=>{const n=document.createElementNS(NS,t);for(const k in a)n.setAttribute(k,a[k]);p.appendChild(n);return n};
    942. 

  942. const txt=(p,a,s)=>{const n=el(p,'text',a);n.textContent=s;return n};
    943. 

  943. const tip=(n,s)=>{const t=document.createElementNS(NS,'title');t.textContent=s;n.appendChild(t)};
    944. 

  944. const rnd=(i,k)=>Math.abs(((i*73856093)^(k*19349663))%1000)/1000;
    945. 

  945. 

  946. // ════ L16 · matrix heat ════
    947. 

  947. // 通用矩阵热力：任意 分类×分类×连续值。明度即数据——五档灰阶方块，
    948. 

  948. // 越黑越高。对角线不参与（自己×自己），零格留一粒小点（沉默可见）。
    949. 

  949. // 最强的一对上虚线框 + 标数。区别于 F10 dot heat：这里编码用明度不用面积，
    950. 

  950. // 值是占比/强度而不是可数件数。
    951. 

  951. (()=>{
    952. 

  952. const FEAT=['EDITOR','BOARDS','DOCS','CHAT','FLOWS','VAULT','PAGES','SYNC'];
    953. 

  953. const v=(i,j)=>{
    954. 

  954.   if(i===j)return -1;
    955. 

  955.   const a=Math.min(i,j),b=Math.max(i,j);
    956. 

  956.   const pop=(8-a)/8*(8-b)/8;                       // 头部功能重合度高
    957. 

  957.   const raw=pop*62*(0.35+rnd(a*8+b+1,a+b+3)*.9);
    958. 

  958.   return Math.round(raw);
    959. 

  959. };
    960. 

  960. const shade=t=>t>36?INK:t>24?'#4A4944':t>14?'#8F8E88':t>6?'#B0AFA9':'#D8D7D1';
    961. 

  961. obsReveal('matheat',s=>{
    962. 

  962.   const X0=118,Y0=70,P=26,C=22;
    963. 

  963.   let max=0,mi=0,mj=0;
    964. 

  964.   for(let i=0;i<8;i++)for(let j=0;j<8;j++){const t=v(i,j);if(t>max){max=t;mi=i;mj=j}}
    965. 

  965.   FEAT.forEach((f,i)=>{
    966. 

  966.     txt(s,{x:X0-10,y:Y0+i*P+C/2+3,'font-size':7,'font-weight':700,fill:'#6A6963','text-anchor':'end',
    967. 

  967.       'letter-spacing':'.06em',class:'fade',style:`animation-delay:${i*.04}s`},f);
    968. 

  968.     const cy=Y0-10;
    969. 

  969.     txt(s,{x:X0+i*P+C/2,y:cy,'font-size':7,'font-weight':700,fill:MUTED,'letter-spacing':'.06em',
    970. 

  970.       transform:`rotate(-55 ${X0+i*P+C/2} ${cy})`,class:'fade',style:`animation-delay:${i*.04}s`},f);
    971. 

  971.   });
    972. 

  972.   for(let i=0;i<8;i++)for(let j=0;j<8;j++){
    973. 

  973.     const x=X0+j*P,y=Y0+i*P,t=v(i,j),d=(i+j)*.02;
    974. 

  974.     if(t<0){el(s,'rect',{x:x+C/2-3,y:y+C/2-.6,width:6,height:1.2,fill:'#D8D6CE',
    975. 

  975.       class:'fade',style:`animation-delay:${d}s`});continue}
    976. 

  976.     if(!t){el(s,'circle',{cx:x+C/2,cy:y+C/2,r:.9,fill:'#D8D6CE',
    977. 

  977.       class:'pop',style:`animation-delay:${d}s`});continue}
    978. 

  978.     const cell=el(s,'rect',{x,y,width:C,height:C,rx:4,fill:shade(t),
    979. 

  979.       class:'pop',style:`animation-delay:${d}s`});
    980. 

  980.     tip(cell,`${FEAT[i]} × ${FEAT[j]} — ${t}% of accounts use both`);
    981. 

  981.     if(i===mi&&j===mj){
    982. 

  982.       el(s,'rect',{x:x-3.5,y:y-3.5,width:C+7,height:C+7,rx:6,fill:'none',
    983. 

  983.         stroke:INK,'stroke-width':1,'stroke-dasharray':'2 3',
    984. 

  984.         class:'fade',style:'animation-delay:.9s'});
    985. 

  985.       txt(s,{x:x+C/2,y:y+C/2+3.5,'font-size':9,'font-weight':800,fill:PAPER,'text-anchor':'middle',
    986. 

  986.         class:'fade',style:'animation-delay:1s'},t);
    987. 

  987.     }
    988. 

  988.   }
    989. 

  989.   // shade legend, countable buckets
    990. 

  990.   const LG=[['#D8D7D1','1–6'],['#B0AFA9','7–14'],['#8F8E88','15–24'],['#4A4944','25–36'],[INK,'37+']];
    991. 

  991.   LG.forEach(([c,lab],k)=>{
    992. 

  992.     const x=118+k*54;
    993. 

  993.     el(s,'rect',{x,y:292,width:9,height:9,rx:2,fill:c,class:'fade',style:`animation-delay:${1+k*.05}s`});
    994. 

  994.     txt(s,{x:x+13,y:300,'font-size':6.5,'font-weight':600,fill:'#8F8E88',
    995. 

  995.       class:'fade',style:`animation-delay:${1+k*.05}s`},lab+'%');
    996. 

  996.   });
    997. 

  997.   txt(s,{x:36,y:300,'font-size':7,'font-weight':600,fill:'#B0AFA9','letter-spacing':'.1em',
    998. 

  998.     class:'fade',style:'animation-delay:1s'},'SHADE = %');
    999. 

  999. });
    1000. 

  1000. })();
    1001. 

  1001. 

  1002. // ════ L17 · calendar heat ════
    1003. 

  1003. // 日历热力：GitHub 贡献墙的 Lupi 皮。一格一天，52 周 × 7 天，
    1004. 

  1004. // 点面积 = 当天量（sqrt 换算），静默日一粒小点。月份写在上檐，
    1005. 

  1005. // 峰值日虚线圈 + 旁注引线。逐记录世界观：一年 365 天每天都在场。
    1006. 

  1006. (()=>{
    1007. 

  1007. const MON=['JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC'];
    1008. 

  1008. const DAY=['MON','WED','FRI','SUN'];
    1009. 

  1009. const val=(w,d)=>{
    1010. 

  1010.   const wd=d<5;
    1011. 

  1011.   const season=1+.55*Math.sin((w-8)/9);            // 春秋两个发布季
    1012. 

  1012.   if(!wd)return rnd(w*7+d+1,3)>.82?1:0;            // 周末基本静默
    1013. 

  1013.   const raw=season*(2.5+rnd(w*7+d+1,d+2)*9)*(rnd(w+1,d+5)>.12?1:0);
    1014. 

  1014.   return Math.round(raw);
    1015. 

  1015. };
    1016. 

  1016. obsReveal('calheat',s=>{
    1017. 

  1017.   const X0=56,Y0=42,P=14.8;
    1018. 

  1018.   let max=0,mw=0,md=0;
    1019. 

  1019.   for(let w=0;w<52;w++)for(let d=0;d<7;d++){const t=val(w,d);if(t>max){max=t;mw=w;md=d}}
    1020. 

  1020.   DAY.forEach((lab,k)=>{
    1021. 

  1021.     txt(s,{x:X0-10,y:Y0+[0,2,4,6][k]*P+3,'font-size':6.5,'font-weight':700,fill:'#8F8E88','text-anchor':'end',
    1022. 

  1022.       'letter-spacing':'.06em',class:'fade',style:`animation-delay:${k*.04}s`},lab);
    1023. 

  1023.   });
    1024. 

  1024.   MON.forEach((m,k)=>{
    1025. 

  1025.     const x=X0+Math.round(k*52/12)*P;
    1026. 

  1026.     txt(s,{x,y:Y0-16,'font-size':7,'font-weight':700,fill:MUTED,'letter-spacing':'.1em',
    1027. 

  1027.       class:'fade',style:`animation-delay:${k*.03}s`},m);
    1028. 

  1028.     el(s,'line',{x1:x,y1:Y0-11,x2:x,y2:Y0-5,stroke:'#C6C5BF','stroke-width':.7,
    1029. 

  1029.       class:'fade',style:`animation-delay:${k*.03}s`});
    1030. 

  1030.   });
    1031. 

  1031.   for(let w=0;w<52;w++)for(let d=0;d<7;d++){
    1032. 

  1032.     const x=X0+w*P,y=Y0+d*P,t=val(w,d),delay=w*.012+d*.004;
    1033. 

  1033.     if(!t){el(s,'circle',{cx:x,cy:y,r:.75,fill:'#D8D6CE',
    1034. 

  1034.       class:'pop',style:`animation-delay:${delay}s`});continue}
    1035. 

  1035.     const r=1.1+Math.sqrt(t)*1.55;
    1036. 

  1036.     const dot=el(s,'circle',{cx:x,cy:y,r,
    1037. 

  1037.       fill:t>max*.66?INK:t>max*.33?'#6A6963':'#B0AFA9',
    1038. 

  1038.       class:'pop',style:`animation-delay:${delay}s`});
    1039. 

  1039.     tip(dot,`W${w+1} ${['MON','TUE','WED','THU','FRI','SAT','SUN'][d]} — ${t} deploys`);
    1040. 

  1040.   }
    1041. 

  1041.   // peak: dashed ring + marginalia hairline
    1042. 

  1042.   const px=X0+mw*P,py=Y0+md*P,pr=1.1+Math.sqrt(max)*1.55;
    1043. 

  1043.   el(s,'circle',{cx:px,cy:py,r:pr+3.6,fill:'none',stroke:INK,'stroke-width':1,
    1044. 

  1044.     'stroke-dasharray':'2 3',class:'fade',style:'animation-delay:1s'});
    1045. 

  1045.   el(s,'path',{d:`M${px+pr+6} ${py+6} C${px+34} ${py+30} ${px+52} ${py+36} ${px+72} ${py+36}`,
    1046. 

  1046.     fill:'none',stroke:'#B0AFA9','stroke-width':.7,class:'fade',style:'animation-delay:1.1s'});
    1047. 

  1047.   txt(s,{x:px+78,y:py+39,'font-size':7,fill:'#6A6963','font-style':'italic',
    1048. 

  1048.     class:'fade',style:'animation-delay:1.15s'},`the release-week spike — ${max} deploys in a day`);
    1049. 

  1049.   txt(s,{x:420,y:222,'font-size':7,'font-weight':600,fill:'#B0AFA9','text-anchor':'middle',
    1050. 

  1050.     'letter-spacing':'.12em',class:'fade',style:'animation-delay:1.2s'},
    1051. 

  1051.     'ONE DOT = ONE DAY · DOT AREA = DEPLOYS · TINY DOT = A QUIET DAY');
    1052. 

  1052. });
    1053. 

  1053. })();
    1054. 

  1054. 

  1055. // ════ L18 · beeswarm ════
    1056. 

  1056. // 蜂群：violin 的 Lupi 姊妹。不聚合密度，把 120 条真实记录沿数值轴
    1057. 

  1057. // 逐颗排开，撞上了就往两边让——堆得高的地方就是分布的峰。
    1058. 

  1058. // 空心 = enterprise 单，虚线 = 中位数。每颗点背后是一条真实成交。
    1059. 

  1059. (()=>{
    1060. 

  1060. const N=120;
    1061. 

  1061. const deals=Array.from({length:N},(_,i)=>{
    1062. 

  1062.   const u=rnd(i+1,3),ent=rnd(i+2,11)>.86;
    1063. 

  1063.   const v=Math.round(4+(ent?60:6)+150*Math.pow(u,2.6)+rnd(i+3,7)*10);
    1064. 

  1064.   return [Math.min(178,v),ent];
    1065. 

  1065. });
    1066. 

  1066. obsReveal('beeswarm',s=>{
    1067. 

  1067.   const X0=36,X1=376,BASE=246,R=4,GAP=R*2+.8;
    1068. 

  1068.   const mapX=v=>X0+v/180*(X1-X0);
    1069. 

  1069.   // axis rail + barcode ticks
    1070. 

  1070.   el(s,'line',{x1:X0-4,y1:BASE,x2:X1+4,y2:BASE,stroke:GRID,'stroke-width':.8,class:'fade'});
    1071. 

  1071.   for(let g=0;g<=9;g++){
    1072. 

  1072.     const x=X0+g/9*(X1-X0);
    1073. 

  1073.     el(s,'line',{x1:x,y1:BASE,x2:x,y2:BASE+(g%3===0?7:4),stroke:'#CFCEC7','stroke-width':.6,
    1074. 

  1074.       class:'fade',style:`animation-delay:${g*.02}s`});
    1075. 

  1075.     if(g%3===0)txt(s,{x,y:BASE+18,'font-size':7,'font-weight':600,fill:'#C6C5BF','text-anchor':'middle',
    1076. 

  1076.       class:'fade',style:`animation-delay:${g*.02}s`},'$'+Math.round(g/9*180)+'k');
    1077. 

  1077.   }
    1078. 

  1078.   // swarm as clean stacks: x snaps to a GAP-wide lane, dots pile upward —
    1079. 

  1079.   // the pile height IS the density. no half-overlaps, every dot countable.
    1080. 

  1080.   const lanes={};
    1081. 

  1081.   const sorted=deals.map((d,i)=>[d[0],d[1],i]).sort((a,b)=>a[0]-b[0]);
    1082. 

  1082.   sorted.forEach(([v,ent,i])=>{
    1083. 

  1083.     const lane=Math.round((mapX(v)-X0)/GAP);
    1084. 

  1084.     const x=X0+lane*GAP;
    1085. 

  1085.     const row=lanes[lane]||0;lanes[lane]=row+1;
    1086. 

  1086.     const y=BASE-R-1-row*GAP;
    1087. 

  1087.     const dot=ent
    1088. 

  1088.       ?el(s,'circle',{cx:x,cy:y,r:R,fill:PAPER,stroke:INK,'stroke-width':1.1,
    1089. 

  1089.         class:'pop',style:`animation-delay:${.1+i*.007}s`})
    1090. 

  1090.       :el(s,'circle',{cx:x,cy:y,r:R,fill:INK,opacity:.82,
    1091. 

  1091.         class:'pop',style:`animation-delay:${.1+i*.007}s`});
    1092. 

  1092.     tip(dot,`deal #${i+1} — $${v}k${ent?' · enterprise':''}`);
    1093. 

  1093.   });
    1094. 

  1094.   // median
    1095. 

  1095.   const vs=deals.map(d=>d[0]).sort((a,b)=>a-b);
    1096. 

  1096.   const med=vs[Math.floor(N/2)];
    1097. 

  1097.   const mx=mapX(med);
    1098. 

  1098.   el(s,'line',{x1:mx,y1:52,x2:mx,y2:BASE+8,stroke:'#8F8E88','stroke-width':.9,
    1099. 

  1099.     'stroke-dasharray':'2 4',class:'fade',style:'animation-delay:1s'});
    1100. 

  1100.   txt(s,{x:mx,y:44,'font-size':9.5,'font-weight':800,fill:INK,'text-anchor':'middle',
    1101. 

  1101.     style:`paint-order:stroke;stroke:${PAPER};stroke-width:3px;animation-delay:1.1s`,
    1102. 

  1102.     class:'fade'},'MEDIAN $'+med+'k');
    1103. 

  1103.   txt(s,{x:200,y:306,'font-size':7,'font-weight':600,fill:'#B0AFA9','text-anchor':'middle',
    1104. 

  1104.     'letter-spacing':'.12em',class:'fade',style:'animation-delay:1.2s'},
    1105. 

  1105.     'ONE DOT = ONE DEAL · THE PILE IS THE DISTRIBUTION · HOLLOW = ENTERPRISE');
    1106. 

  1106. });
    1107. 

  1107. })();
    1108. 

  1108. 

  1109. // ════ L19 · ridgeline ════
    1110. 

  1110. // 多组分布的 Lupi 皮：每行一条完成时长的密度山脊，面积由竖发丝组成
    1111. 

  1111. // （F3 hairline area 的语法），行与行轻微重叠，后排画在前、前排糊上
    1112. 

  1112. // 纸色 slab 遮挡（dotty matrix 的手法）。峰值点标中心时长。
    1113. 

  1113. (()=>{
    1114. 

  1114. const ROWS=[['MOBILE',3.2,1.3],['DESKTOP',5.1,1.9],['API',7.4,2.3],['IMPORTS',10.8,3.2],['BATCH',15.2,4]];
    1115. 

  1115. obsReveal('ridge',s=>{
    1116. 

  1116.   const X0=92,X1=372,MAXH=24,N=72,LIFT=54;
    1117. 

  1117.   const rowY=i=>96+i*44;
    1118. 

  1118.   ROWS.forEach(([name,c,sp],i)=>{
    1119. 

  1119.     const y0=rowY(i);
    1120. 

  1120.     const dens=Array.from({length:N},(_,k)=>{
    1121. 

  1121.       const h=k/(N-1)*MAXH;
    1122. 

  1122.       return Math.exp(-((h-c)**2)/(2*sp*sp))+.26*Math.exp(-((h-c*2.1)**2)/(2*(sp*1.7)**2));
    1123. 

  1123.     });
    1124. 

  1124.     const dmax=Math.max(...dens);
    1125. 

  1125.     const pts=dens.map((d,k)=>[X0+k/(N-1)*(X1-X0),y0-d/dmax*LIFT]);
    1126. 

  1126.     const crest='M'+pts.map(p=>p[0].toFixed(1)+' '+p[1].toFixed(1)).join(' L ');
    1127. 

  1127.     el(s,'path',{d:crest+` L${X1} ${y0} L${X0} ${y0} Z`,fill:PAPER,'fill-opacity':.96,
    1128. 

  1128.       class:'fade',style:`animation-delay:${i*.1}s`});
    1129. 

  1129.     pts.forEach(([px,py],k)=>{
    1130. 

  1130.       if(k%2)return;
    1131. 

  1131.       el(s,'line',{x1:px,y1:y0,x2:px,y2:py,stroke:'#8F8E88','stroke-width':.5,
    1132. 

  1132.         opacity:.28+rnd(k+1,i+3)*.32,class:'fade',style:`animation-delay:${i*.1+k*.004}s`});
    1133. 

  1133.     });
    1134. 

  1134.     el(s,'path',{d:crest,fill:'none',stroke:INK,'stroke-width':.9,pathLength:1,
    1135. 

  1135.       class:'draw',style:`animation-delay:${.1+i*.1}s;animation-duration:.8s`});
    1136. 

  1136.     el(s,'line',{x1:X0,y1:y0,x2:X1,y2:y0,stroke:GRID,'stroke-width':.7,
    1137. 

  1137.       class:'fade',style:`animation-delay:${i*.1}s`});
    1138. 

  1138.     const pk=dens.indexOf(dmax),[px,py]=pts[pk];
    1139. 

  1139.     const dot=el(s,'circle',{cx:px,cy:py,r:2.6,fill:INK,class:'pop',style:`animation-delay:${.6+i*.1}s`});
    1140. 

  1140.     tip(dot,`${name} — most runs finish around ${c.toFixed(1)}h`);
    1141. 

  1141.     txt(s,{x:px+7,y:py+1,'font-size':8,'font-weight':800,fill:INK,
    1142. 

  1142.       style:`paint-order:stroke;stroke:${PAPER};stroke-width:3px;animation-delay:${.7+i*.1}s`,
    1143. 

  1143.       class:'fade'},c.toFixed(1)+'h');
    1144. 

  1144.     txt(s,{x:X0-10,y:y0-3,'font-size':7.5,'font-weight':700,fill:'#6A6963','text-anchor':'end',
    1145. 

  1145.       'letter-spacing':'.06em',class:'fade',style:`animation-delay:${i*.1}s`},name);
    1146. 

  1146.   });
    1147. 

  1147.   const yb=rowY(4);
    1148. 

  1148.   [0,6,12,18,24].forEach(h=>{
    1149. 

  1149.     const x=X0+h/MAXH*(X1-X0);
    1150. 

  1150.     el(s,'line',{x1:x,y1:yb+4,x2:x,y2:yb+9,stroke:'#CFCEC7','stroke-width':.6,
    1151. 

  1151.       class:'fade',style:'animation-delay:.8s'});
    1152. 

  1152.     txt(s,{x,y:yb+20,'font-size':7,'font-weight':600,fill:MUTED,'text-anchor':'middle',
    1153. 

  1153.       class:'fade',style:'animation-delay:.85s'},h+'h');
    1154. 

  1154.   });
    1155. 

  1155.   txt(s,{x:200,y:308,'font-size':7,'font-weight':600,fill:'#B0AFA9','text-anchor':'middle',
    1156. 

  1156.     'letter-spacing':'.12em',class:'fade',style:'animation-delay:1.1s'},
    1157. 

  1157.     'EACH CREST = ONE PIPELINE · THE AREA IS MADE OF HAIRLINES · DOT = THE PEAK');
    1158. 

  1158. });
    1159. 

  1159. })();
    1160. 

  1160. 

  1161. // ════ L20 · parallel coordinates ════
    1162. 

  1162. // 多维记录对比的 Lupi 皮：一条发丝线 = 一个产品走过四根轴。
    1163. 

  1163. // 线束的形状就是数据结构（哪两维相关、谁全线领先）。
    1164. 

  1164. // 全线最优的上墨标名，其余发丝退后。轴顶名、轴脚 min/max。
    1165. 

  1165. (()=>{
    1166. 

  1166. const DIMS=[['PRICE $',8,30],['CSAT',6,9.6],['RETENTION %',55,95],['GROWTH %',-5,40]];
    1167. 

  1167. const P=[['Editor',12,9.1,91,22],['Boards',18,8.4,86,18],['Forms',9,8.8,78,31],
    1168. 

  1168.   ['Docs',15,8.0,82,12],['Chat',7,7.2,64,8],['Vault',24,7.8,88,6],
    1169. 

  1169.   ['Flows',21,8.6,90,38],['Views',11,7.5,71,14],['Sync',16,6.9,58,-2],
    1170. 

  1170.   ['Pages',8,8.2,74,19],['Grid',19,7.1,62,4],['Hub',13,6.6,52,9]];
    1171. 

  1171. obsReveal('parallel',s=>{
    1172. 

  1172.   const AX=[64,156,248,340],TOP=64,BOT=252;
    1173. 

  1173.   const mapY=(di,v)=>{const [,lo,hi]=DIMS[di];return BOT-(v-lo)/(hi-lo)*(BOT-TOP)};
    1174. 

  1174.   // hero: judged on csat+retention+growth (price is a fact, not a virtue)
    1175. 

  1175.   const score=p=>(p[2]-6)/3.6+(p[3]-55)/40+(p[4]+5)/45;
    1176. 

  1176.   const hero=P.reduce((a,b)=>score(b)>score(a)?b:a);
    1177. 

  1177.   DIMS.forEach(([name,lo,hi],di)=>{
    1178. 

  1178.     el(s,'line',{x1:AX[di],y1:TOP-8,x2:AX[di],y2:BOT+8,stroke:'#B0AFA9','stroke-width':1,
    1179. 

  1179.       class:'fade',style:`animation-delay:${di*.06}s`});
    1180. 

  1180.     [[TOP-8],[BOT+8]].forEach(([yy])=>
    1181. 

  1181.       el(s,'line',{x1:AX[di]-4,y1:yy,x2:AX[di]+4,y2:yy,stroke:'#B0AFA9','stroke-width':1,
    1182. 

  1182.         class:'fade',style:`animation-delay:${di*.06}s`}));
    1183. 

  1183.     txt(s,{x:AX[di],y:TOP-22,'font-size':7,'font-weight':800,fill:'#6A6963','text-anchor':'middle',
    1184. 

  1184.       'letter-spacing':'.08em',class:'fade',style:`animation-delay:${di*.06}s`},name);
    1185. 

  1185.     txt(s,{x:AX[di]+8,y:TOP-5,'font-size':6.5,'font-weight':600,fill:'#C6C5BF',
    1186. 

  1186.       class:'fade',style:`animation-delay:${.1+di*.06}s`},hi);
    1187. 

  1187.     txt(s,{x:AX[di]+8,y:BOT+11,'font-size':6.5,'font-weight':600,fill:'#C6C5BF',
    1188. 

  1188.       class:'fade',style:`animation-delay:${.1+di*.06}s`},lo);
    1189. 

  1189.   });
    1190. 

  1190.   P.forEach((p,i)=>{
    1191. 

  1191.     const isHero=p===hero;
    1192. 

  1192.     const ys=[mapY(0,p[1]),mapY(1,p[2]),mapY(2,p[3]),mapY(3,p[4])];
    1193. 

  1193.     let d=`M${AX[0]} ${ys[0].toFixed(1)}`;
    1194. 

  1194.     for(let k=0;k<3;k++){
    1195. 

  1195.       const mx=(AX[k]+AX[k+1])/2;
    1196. 

  1196.       d+=` C${mx} ${ys[k].toFixed(1)} ${mx} ${ys[k+1].toFixed(1)} ${AX[k+1]} ${ys[k+1].toFixed(1)}`;
    1197. 

  1197.     }
    1198. 

  1198.     const ln=el(s,'path',{d,fill:'none',
    1199. 

  1199.       stroke:isHero?INK:'#8F8E88','stroke-width':isHero?2:.65,
    1200. 

  1200.       opacity:isHero?1:.5+rnd(i+1,5)*.3,pathLength:1,
    1201. 

  1201.       class:'draw',style:`animation-delay:${.2+i*.05}s;animation-duration:.8s`});
    1202. 

  1202.     tip(ln,`${p[0]} — $${p[1]} · CSAT ${p[2]} · ${p[3]}% retained · ${p[4]}% growth`);
    1203. 

  1203.     ys.forEach((y,di)=>el(s,'circle',{cx:AX[di],cy:y,r:isHero?3:1.4,
    1204. 

  1204.       fill:isHero?INK:'#8F8E88',opacity:isHero?1:.7,
    1205. 

  1205.       class:'pop',style:`animation-delay:${.3+i*.05+di*.04}s`}));
    1206. 

  1206.     if(isHero)
    1207. 

  1207.       txt(s,{x:AX[3]+12,y:ys[3]+3,'font-size':9,'font-weight':800,fill:INK,
    1208. 

  1208.         style:`paint-order:stroke;stroke:${PAPER};stroke-width:3px;animation-delay:1s`,
    1209. 

  1209.         class:'fade'},p[0]);
    1210. 

  1210.   });
    1211. 

  1211.   txt(s,{x:200,y:302,'font-size':7,'font-weight':600,fill:'#B0AFA9','text-anchor':'middle',
    1212. 

  1212.     'letter-spacing':'.12em',class:'fade',style:'animation-delay:1.2s'},
    1213. 

  1213.     'ONE HAIRLINE = ONE PRODUCT · INK = BEST ACROSS THE BOARD');
    1214. 

  1214. });
    1215. 

  1215. })();
    1216. 

  1216. })();
    1217. 

  1217. 

  1218. </script>
    1219. 

  1219. </body>
    1220. 

  1220. </html>
    1221.