search for standard sites
pub-search.waow.tech
search
zig
blog
atproto
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>
+231
-92
+231
-92
site/functions/og-image.js
+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
},