Swap meta image to the bliss/Claude-Code hero

Udit Akhouri · Udit Akhouri · commit f0957af77c6f · 2026-05-26T11:07:16.000+05:30
diff --git a/index.html b/index.html
@@ -12,7 +12,7 @@
 <meta property="og:image" content="https://adhdstack.github.io/og.png">
 <meta property="og:image:width" content="1200">
 <meta property="og:image:height" content="630">
-<meta property="og:image:alt" content="ADHD: Parallel Divergent Ideation for Coding Agents — preprint card showing the diverge/focus loop and headline result: 5W/1L vs baseline, +5.17 novelty, +7.67 trap detection.">
+<meta property="og:image:alt" content="ADHD for Claude Code. A bliss-style horizon with a translucent ADHD wordmark and the subtitle 'For Claude Code'.">
 <meta name="twitter:card" content="summary_large_image">
 <meta name="twitter:title" content="ADHD: Parallel Divergent Ideation for Coding Agents">
 <meta name="twitter:description" content="Stop your agent from picking the first answer. Wins 5/6 against single-shot baseline.">
diff --git a/og.png b/og.png
diff --git a/og.svg b/og.svg
@@ -1,121 +1,68 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630"
-     font-family="Georgia, 'Times New Roman', serif">
+     font-family="-apple-system, 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif">
   <defs>
-    <marker id="arr" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
-      <path d="M0,0 L10,5 L0,10 z" fill="#9a948a"/>
-    </marker>
-    <marker id="arr-accent" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse">
-      <path d="M0,0 L10,5 L0,10 z" fill="#e0644b"/>
-    </marker>
+    <linearGradient id="sky" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%"  stop-color="#1e8fe6"/>
+      <stop offset="55%" stop-color="#3da8ee"/>
+      <stop offset="100%" stop-color="#7dc2ee"/>
+    </linearGradient>
+    <linearGradient id="hill" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%"   stop-color="#7fc352"/>
+      <stop offset="40%"  stop-color="#5fa636"/>
+      <stop offset="100%" stop-color="#3a7720"/>
+    </linearGradient>
+    <linearGradient id="wordmark" x1="0" y1="0" x2="0" y2="1">
+      <stop offset="0%"   stop-color="#ffffff" stop-opacity="0.55"/>
+      <stop offset="55%"  stop-color="#dff0fa" stop-opacity="0.78"/>
+      <stop offset="100%" stop-color="#cbe6f5" stop-opacity="0.92"/>
+    </linearGradient>
+    <radialGradient id="cloudL" cx="0.5" cy="0.5" r="0.5">
+      <stop offset="0%"   stop-color="#ffffff" stop-opacity="0.55"/>
+      <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
+    </radialGradient>
+    <radialGradient id="cloudR" cx="0.5" cy="0.5" r="0.5">
+      <stop offset="0%"   stop-color="#ffffff" stop-opacity="0.45"/>
+      <stop offset="100%" stop-color="#ffffff" stop-opacity="0"/>
+    </radialGradient>
+    <filter id="soft" x="-10%" y="-10%" width="120%" height="120%">
+      <feGaussianBlur stdDeviation="0.6"/>
+    </filter>
   </defs>
 
-  <!-- background -->
-  <rect width="1200" height="630" fill="#16161a"/>
+  <!-- sky -->
+  <rect width="1200" height="630" fill="url(#sky)"/>
 
-  <!-- subtle horizontal rule near top -->
-  <line x1="80" y1="100" x2="1120" y2="100" stroke="#2e2e36" stroke-width="1.2"/>
+  <!-- soft clouds -->
+  <ellipse cx="160"  cy="280" rx="220" ry="60"  fill="url(#cloudL)"/>
+  <ellipse cx="1040" cy="320" rx="240" ry="70"  fill="url(#cloudR)"/>
+  <ellipse cx="640"  cy="160" rx="320" ry="40"  fill="url(#cloudL)" opacity="0.6"/>
 
-  <!-- eyebrow -->
-  <text x="80" y="80" font-family="Menlo, Consolas, monospace" font-size="16" fill="#9a948a" letter-spacing="2.4">
-    PREPRINT · 2026 · ADHDSTACK.GITHUB.IO
-  </text>
+  <!-- rolling hill (two layered curves) -->
+  <path d="M0,440 C 220,380 400,520 640,460 C 880,400 1020,500 1200,440 L 1200,630 L 0,630 Z"
+        fill="url(#hill)"/>
+  <path d="M0,500 C 200,460 460,580 700,520 C 940,460 1080,540 1200,500 L 1200,630 L 0,630 Z"
+        fill="#3a7720" opacity="0.55"/>
 
-  <!-- title -->
-  <text x="80" y="210" font-size="106" font-weight="700" fill="#e9e6dc" letter-spacing="-2">ADHD</text>
-  <text x="80" y="276" font-size="44" font-weight="400" fill="#e9e6dc" letter-spacing="-0.5">Parallel Divergent Ideation</text>
-  <text x="80" y="322" font-size="34" font-style="italic" fill="#9a948a">for coding agents</text>
+  <!-- subtle highlight ridge -->
+  <path d="M0,442 C 220,382 400,522 640,462 C 880,402 1020,502 1200,442"
+        fill="none" stroke="#a3d76b" stroke-width="1.6" opacity="0.45" filter="url(#soft)"/>
 
-  <!-- one-liner -->
-  <text x="80" y="402" font-size="24" font-weight="600" fill="#e9e6dc">
-    Stop your agent from picking the first answer.
-  </text>
-
-  <!-- result chip -->
-  <g transform="translate(80, 440)">
-    <rect width="540" height="90" rx="8" fill="#1f1f25" stroke="#2e2e36" stroke-width="1.2"/>
-    <text x="22" y="34" font-family="Menlo, Consolas, monospace" font-size="13" fill="#9a948a" letter-spacing="2">VS SINGLE-SHOT BASELINE</text>
-    <text x="22" y="70" font-size="24" font-weight="600" fill="#e9e6dc">
-      <tspan fill="#e0644b" font-weight="700">5W / 1L</tspan>
-      <tspan>  ·  novelty </tspan>
-      <tspan fill="#e0644b" font-weight="700">+5.17</tspan>
-      <tspan>  ·  traps </tspan>
-      <tspan fill="#e0644b" font-weight="700">+7.67</tspan>
-    </text>
+  <!-- tiny tree silhouette (left) -->
+  <g transform="translate(150, 430)" fill="#2d5a18" opacity="0.85">
+    <ellipse cx="0" cy="-6" rx="8" ry="14"/>
+    <rect x="-1" y="0" width="2" height="8"/>
   </g>
+  <!-- tiny structure (right) -->
+  <rect x="930" y="430" width="14" height="10" fill="#6e4a2a" opacity="0.85"/>
 
-  <!-- footer line -->
-  <text x="80" y="585" font-family="Menlo, Consolas, monospace" font-size="16" fill="#9a948a">
-    $ npm install -g adhd-agent
-  </text>
-  <text x="1120" y="585" font-family="Menlo, Consolas, monospace" font-size="16" fill="#9a948a" text-anchor="end">
-    Udit Akhouri Raj
-  </text>
-
-  <!-- right side: loop diagram -->
-  <g transform="translate(650, 140)" font-family="Menlo, Consolas, monospace" font-size="14">
-    <!-- problem -->
-    <rect x="0" y="120" width="90" height="40" rx="6" fill="none" stroke="#5b5b5b" stroke-width="1.2"/>
-    <text x="45" y="145" text-anchor="middle" fill="#e9e6dc">problem</text>
-
-    <!-- 5 frames -->
-    <g fill="none" stroke="#5b5b5b" stroke-width="1.2">
-      <rect x="130" y="20" width="150" height="32" rx="6"/>
-      <rect x="130" y="70" width="150" height="32" rx="6"/>
-      <rect x="130" y="120" width="150" height="32" rx="6"/>
-      <rect x="130" y="170" width="150" height="32" rx="6"/>
-      <rect x="130" y="220" width="150" height="32" rx="6"/>
-    </g>
-    <g text-anchor="middle" fill="#e9e6dc">
-      <text x="205" y="41">regulator</text>
-      <text x="205" y="91">biology</text>
-      <text x="205" y="141">speedrunner</text>
-      <text x="205" y="191">10-year-old</text>
-      <text x="205" y="241">$0 budget</text>
-    </g>
-
-    <!-- diverge arrows -->
-    <g stroke="#9a948a" stroke-width="1.2" fill="none">
-      <line x1="90" y1="140" x2="130" y2="36" marker-end="url(#arr)"/>
-      <line x1="90" y1="140" x2="130" y2="86" marker-end="url(#arr)"/>
-      <line x1="90" y1="140" x2="130" y2="136" marker-end="url(#arr)"/>
-      <line x1="90" y1="140" x2="130" y2="186" marker-end="url(#arr)"/>
-      <line x1="90" y1="140" x2="130" y2="236" marker-end="url(#arr)"/>
-    </g>
-
-    <!-- score+cluster -->
-    <rect x="320" y="100" width="110" height="80" rx="6" fill="none" stroke="#5b5b5b" stroke-width="1.2"/>
-    <text x="375" y="135" text-anchor="middle" fill="#e9e6dc">score</text>
-    <text x="375" y="155" text-anchor="middle" fill="#e9e6dc">+ cluster</text>
+  <!-- wordmark "ADHD" -->
+  <text x="600" y="370" text-anchor="middle"
+        font-size="280" font-weight="900" letter-spacing="-8"
+        fill="url(#wordmark)">ADHD</text>
 
-    <g stroke="#9a948a" stroke-width="1.2" fill="none">
-      <line x1="280" y1="36" x2="320" y2="120" marker-end="url(#arr)"/>
-      <line x1="280" y1="86" x2="320" y2="130" marker-end="url(#arr)"/>
-      <line x1="280" y1="136" x2="320" y2="140" marker-end="url(#arr)"/>
-      <line x1="280" y1="186" x2="320" y2="150" marker-end="url(#arr)"/>
-      <line x1="280" y1="236" x2="320" y2="160" marker-end="url(#arr)"/>
-    </g>
-
-    <!-- deepen top-3 -->
-    <g fill="none" stroke="#e0644b" stroke-width="1.6">
-      <rect x="465" y="70" width="40" height="32" rx="6"/>
-      <rect x="465" y="120" width="40" height="32" rx="6"/>
-      <rect x="465" y="170" width="40" height="32" rx="6"/>
-    </g>
-    <g text-anchor="middle" fill="#e0644b" font-size="16">
-      <text x="485" y="92">★</text>
-      <text x="485" y="142">★</text>
-      <text x="485" y="192">★</text>
-    </g>
-
-    <g stroke="#e0644b" stroke-width="1.4" fill="none">
-      <line x1="430" y1="125" x2="465" y2="88" marker-end="url(#arr-accent)"/>
-      <line x1="430" y1="140" x2="465" y2="136" marker-end="url(#arr-accent)"/>
-      <line x1="430" y1="155" x2="465" y2="188" marker-end="url(#arr-accent)"/>
-    </g>
-
-    <!-- phase labels -->
-    <text x="205" y="295" text-anchor="middle" fill="#9a948a" font-size="12" letter-spacing="1.6">DIVERGE</text>
-    <text x="485" y="295" text-anchor="middle" fill="#e0644b" font-size="12" letter-spacing="1.6">FOCUS</text>
-  </g>
+  <!-- subtitle -->
+  <text x="600" y="450" text-anchor="middle"
+        font-size="44" font-weight="700"
+        fill="#ffffff" letter-spacing="0.5">For Claude Code</text>
 </svg>
