search for standard sites pub-search.waow.tech
search zig blog atproto
11
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: redesign atlas OG image with dense organic constellation

Replace 25 uniformly scattered dots with ~190 gaussian-distributed
points mimicking the actual UMAP cluster shape. Bright stars with
box-shadow glow, gradient text overlay, outlier dots for depth.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

zzstoatzz 793a8b40 a59f31f1

+231 -92
+231 -92
site/functions/og-image.js
··· 111 111 { color: "#9ca3af", label: "other" }, 112 112 ]; 113 113 114 - // deterministic "random" positions for atlas dots 115 - function atlasDots() { 114 + // seeded PRNG (mulberry32) for deterministic constellation 115 + function mulberry32(seed) { 116 + return function () { 117 + seed |= 0; 118 + seed = (seed + 0x6d2b79f5) | 0; 119 + let t = Math.imul(seed ^ (seed >>> 15), 1 | seed); 120 + t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; 121 + return ((t ^ (t >>> 14)) >>> 0) / 4294967296; 122 + }; 123 + } 124 + 125 + // box-muller gaussian from uniform random 126 + function gaussian(rng) { 127 + const u1 = rng(), u2 = rng(); 128 + return Math.sqrt(-2 * Math.log(u1 + 0.0001)) * Math.cos(2 * Math.PI * u2); 129 + } 130 + 131 + // platform weights matching real index distribution 132 + const PLATFORM_WEIGHTS = [0.45, 0.20, 0.08, 0.05, 0.07, 0.15]; 133 + 134 + function pickPlatform(rng) { 135 + let r = rng(), acc = 0; 136 + for (let i = 0; i < PLATFORM_WEIGHTS.length; i++) { 137 + acc += PLATFORM_WEIGHTS[i]; 138 + if (r < acc) return i; 139 + } 140 + return 0; 141 + } 142 + 143 + function atlasConstellation() { 144 + const rng = mulberry32(42); 116 145 const dots = []; 117 - const positions = [ 118 - [180, 200], [340, 150], [520, 280], [700, 180], [850, 250], 119 - [240, 350], [450, 180], [620, 340], [780, 300], [950, 200], 120 - [300, 260], [500, 400], [680, 220], [400, 320], [560, 160], 121 - [820, 380], [200, 420], [730, 400], [900, 340], [380, 220], 122 - [150, 300], [480, 250], [650, 380], [770, 160], [920, 420], 146 + // center of the constellation, offset right to leave space for text 147 + const cx = 740, cy = 310; 148 + 149 + // generate ~180 dots with organic cluster shape 150 + for (let i = 0; i < 180; i++) { 151 + const pi = pickPlatform(rng); 152 + const platform = PLATFORM_DOTS[pi]; 153 + 154 + // gaussian distribution with elliptical stretch 155 + let dx = gaussian(rng) * 140; 156 + let dy = gaussian(rng) * 120; 157 + 158 + // slight rotation to feel organic 159 + const angle = 0.3; 160 + const rx = dx * Math.cos(angle) - dy * Math.sin(angle); 161 + const ry = dx * Math.sin(angle) + dy * Math.cos(angle); 162 + 163 + let x = cx + rx; 164 + let y = cy + ry; 165 + 166 + // clamp to image bounds with padding 167 + x = Math.max(20, Math.min(1170, x)); 168 + y = Math.max(20, Math.min(610, y)); 169 + 170 + // distance from center determines size and brightness 171 + const dist = Math.sqrt(rx * rx + ry * ry); 172 + const isCore = dist < 100; 173 + const isMid = dist < 180; 174 + 175 + // size: core dots slightly larger, some random "bright stars" 176 + const isStar = rng() < 0.06; 177 + let size; 178 + if (isStar) size = 6 + Math.floor(rng() * 5); 179 + else if (isCore) size = 2 + Math.floor(rng() * 3); 180 + else size = 2 + Math.floor(rng() * 2); 181 + 182 + // opacity: denser and brighter in core 183 + let opacity; 184 + if (isStar) opacity = 0.85 + rng() * 0.15; 185 + else if (isCore) opacity = 0.5 + rng() * 0.3; 186 + else if (isMid) opacity = 0.3 + rng() * 0.25; 187 + else opacity = 0.15 + rng() * 0.2; 188 + 189 + const style = { 190 + position: "absolute", 191 + left: `${Math.round(x)}px`, 192 + top: `${Math.round(y)}px`, 193 + width: `${size}px`, 194 + height: `${size}px`, 195 + borderRadius: "50%", 196 + background: platform.color, 197 + opacity: opacity, 198 + }; 199 + 200 + // bright stars get a glow 201 + if (isStar) { 202 + style.boxShadow = `0 0 ${size * 2}px ${platform.color}`; 203 + } 204 + 205 + dots.push({ 206 + type: "div", 207 + props: { style, children: "" }, 208 + }); 209 + } 210 + 211 + // add a few distant outlier dots for depth 212 + const outliers = [ 213 + [120, 180], [90, 400], [1050, 120], [1100, 480], 214 + [200, 520], [1020, 80], [350, 100], [950, 530], 123 215 ]; 124 - for (let i = 0; i < positions.length; i++) { 125 - const platform = PLATFORM_DOTS[i % PLATFORM_DOTS.length]; 126 - const size = 4 + (i % 3) * 2; 127 - const opacity = 0.4 + (i % 4) * 0.15; 216 + for (let i = 0; i < outliers.length; i++) { 217 + const pi = pickPlatform(rng); 128 218 dots.push({ 129 219 type: "div", 130 220 props: { 131 221 style: { 132 222 position: "absolute", 133 - left: `${positions[i][0]}px`, 134 - top: `${positions[i][1]}px`, 135 - width: `${size}px`, 136 - height: `${size}px`, 223 + left: `${outliers[i][0]}px`, 224 + top: `${outliers[i][1]}px`, 225 + width: "3px", 226 + height: "3px", 137 227 borderRadius: "50%", 138 - background: platform.color, 139 - opacity: opacity, 228 + background: PLATFORM_DOTS[pi].color, 229 + opacity: 0.25 + rng() * 0.15, 140 230 }, 141 231 children: "", 142 232 }, 143 233 }); 144 234 } 235 + 145 236 return dots; 146 237 } 147 238 148 239 function buildConstellationImage(docCount) { 149 240 const children = []; 150 241 151 - // scattered dots as background decoration 152 - children.push(...atlasDots()); 242 + // dense constellation as background 243 + children.push(...atlasConstellation()); 153 244 154 - // header 245 + // subtle center glow behind the cluster 155 246 children.push({ 156 247 type: "div", 157 248 props: { 158 249 style: { 159 - color: "#888", 160 - fontSize: "28px", 161 - fontFamily: '"JetBrains Mono", monospace', 162 - marginBottom: "8px", 250 + position: "absolute", 251 + left: "540px", 252 + top: "110px", 253 + width: "400px", 254 + height: "400px", 255 + borderRadius: "50%", 256 + background: "radial-gradient(circle, rgba(74,222,128,0.04) 0%, rgba(74,222,128,0.01) 40%, transparent 70%)", 163 257 }, 164 - children: "pub search", 258 + children: "", 165 259 }, 166 260 }); 167 261 168 - // title 262 + // text container on the left with subtle gradient fade 169 263 children.push({ 170 264 type: "div", 171 265 props: { 172 266 style: { 173 - color: "#fff", 174 - fontSize: "48px", 175 - fontFamily: '"JetBrains Mono", monospace', 176 - marginTop: "16px", 267 + position: "absolute", 268 + left: "0", 269 + top: "0", 270 + bottom: "0", 271 + width: "520px", 272 + background: "linear-gradient(to right, #050505 60%, transparent 100%)", 177 273 }, 178 - children: "atlas", 274 + children: "", 179 275 }, 180 276 }); 181 277 182 - // subtitle 278 + // text content (positioned above the gradient) 183 279 children.push({ 184 280 type: "div", 185 281 props: { 186 282 style: { 187 - color: "#555", 188 - fontSize: "24px", 189 - fontFamily: '"JetBrains Mono", monospace', 190 - marginTop: "12px", 191 - }, 192 - children: "2d semantic map of the document index", 193 - }, 194 - }); 195 - 196 - // platform legend 197 - children.push({ 198 - type: "div", 199 - props: { 200 - style: { 283 + position: "relative", 201 284 display: "flex", 202 - gap: "16px", 203 - marginTop: "32px", 285 + flexDirection: "column", 286 + height: "100%", 287 + padding: "0", 288 + maxWidth: "440px", 204 289 }, 205 - children: PLATFORM_DOTS.slice(0, 5).map((p) => ({ 206 - type: "div", 207 - props: { 208 - style: { 209 - display: "flex", 210 - alignItems: "center", 211 - gap: "6px", 290 + children: [ 291 + // header 292 + { 293 + type: "div", 294 + props: { 295 + style: { 296 + color: "#666", 297 + fontSize: "26px", 298 + fontFamily: '"JetBrains Mono", monospace', 299 + }, 300 + children: "pub search", 301 + }, 302 + }, 303 + // title 304 + { 305 + type: "div", 306 + props: { 307 + style: { 308 + color: "#fff", 309 + fontSize: "52px", 310 + fontFamily: '"JetBrains Mono", monospace', 311 + marginTop: "16px", 312 + letterSpacing: "2px", 313 + }, 314 + children: "atlas", 212 315 }, 213 - children: [ 214 - { 215 - type: "div", 216 - props: { 217 - style: { 218 - width: "8px", 219 - height: "8px", 220 - borderRadius: "50%", 221 - background: p.color, 222 - }, 223 - children: "", 224 - }, 316 + }, 317 + // subtitle 318 + { 319 + type: "div", 320 + props: { 321 + style: { 322 + color: "#555", 323 + fontSize: "20px", 324 + fontFamily: '"JetBrains Mono", monospace', 325 + marginTop: "14px", 326 + lineHeight: "1.5", 327 + }, 328 + children: "2d semantic map of atproto publishing platforms", 329 + }, 330 + }, 331 + // platform legend 332 + { 333 + type: "div", 334 + props: { 335 + style: { 336 + display: "flex", 337 + flexWrap: "wrap", 338 + gap: "12px", 339 + marginTop: "36px", 225 340 }, 226 - { 341 + children: PLATFORM_DOTS.slice(0, 5).map((p) => ({ 227 342 type: "div", 228 343 props: { 229 344 style: { 230 - color: "#666", 231 - fontSize: "18px", 232 - fontFamily: '"JetBrains Mono", monospace', 345 + display: "flex", 346 + alignItems: "center", 347 + gap: "6px", 233 348 }, 234 - children: p.label, 349 + children: [ 350 + { 351 + type: "div", 352 + props: { 353 + style: { 354 + width: "8px", 355 + height: "8px", 356 + borderRadius: "50%", 357 + background: p.color, 358 + boxShadow: `0 0 6px ${p.color}`, 359 + }, 360 + children: "", 361 + }, 362 + }, 363 + { 364 + type: "div", 365 + props: { 366 + style: { 367 + color: "#555", 368 + fontSize: "16px", 369 + fontFamily: '"JetBrains Mono", monospace', 370 + }, 371 + children: p.label, 372 + }, 373 + }, 374 + ], 235 375 }, 376 + })), 377 + }, 378 + }, 379 + // footer 380 + { 381 + type: "div", 382 + props: { 383 + style: { 384 + color: "#444", 385 + fontSize: "18px", 386 + fontFamily: '"JetBrains Mono", monospace', 387 + marginTop: "auto", 236 388 }, 237 - ], 389 + children: docCount 390 + ? `${docCount.toLocaleString()} documents` 391 + : "explore the index", 392 + }, 238 393 }, 239 - })), 240 - }, 241 - }); 242 - 243 - // footer 244 - const footerText = docCount 245 - ? `${docCount.toLocaleString()} documents · explore the index` 246 - : "explore the index"; 247 - children.push({ 248 - type: "div", 249 - props: { 250 - style: { 251 - color: "#555", 252 - fontSize: "20px", 253 - fontFamily: '"JetBrains Mono", monospace', 254 - marginTop: "auto", 255 - }, 256 - children: footerText, 394 + ], 257 395 }, 258 396 }); 259 397 ··· 269 407 background: "#050505", 270 408 padding: "48px 56px", 271 409 fontFamily: '"JetBrains Mono", monospace', 410 + overflow: "hidden", 272 411 }, 273 412 children, 274 413 },