// Striped SVG placeholders standing in for archival photos. // Each "photo" has people (with approximate face positions), a year, a photographer, // and a location. Names are public figures deliberately spanning eras, professions, // and obscurity so the chain feels like the real thing. // // Positions are in 0..1 coordinate space relative to the placeholder rect. // A "chain" is defined by consecutive photos sharing at least one person. const PHOTOS = [ { id: 'p01', year: 1963, photographer: 'Rowland Scherman', location: 'Lincoln Memorial, Washington D.C.', tone: 'bw', people: [ { name: 'Martin Luther King Jr.', x: 0.34, y: 0.44, r: 0.08 }, { name: 'Mahalia Jackson', x: 0.58, y: 0.48, r: 0.075 }, { name: 'A. Philip Randolph', x: 0.78, y: 0.50, r: 0.07 }, ], }, { id: 'p02', year: 1964, photographer: 'Don Cravens', location: 'Newport Folk Festival, RI', tone: 'bw', people: [ { name: 'Mahalia Jackson', x: 0.28, y: 0.50, r: 0.08 }, { name: 'Bob Dylan', x: 0.52, y: 0.46, r: 0.075 }, { name: 'Joan Baez', x: 0.74, y: 0.48, r: 0.075 }, ], }, { id: 'p03', year: 1965, photographer: 'Daniel Kramer', location: 'Woodstock, New York', tone: 'bw', people: [ { name: 'Bob Dylan', x: 0.30, y: 0.46, r: 0.08 }, { name: 'Allen Ginsberg', x: 0.55, y: 0.50, r: 0.075 }, { name: 'Sara Lownds', x: 0.76, y: 0.52, r: 0.07 }, ], }, { id: 'p04', year: 1968, photographer: 'Fred W. McDarrah', location: 'St. Mark\u2019s Church, NYC', tone: 'bw', people: [ { name: 'Allen Ginsberg', x: 0.34, y: 0.46, r: 0.08 }, { name: 'Andy Warhol', x: 0.58, y: 0.44, r: 0.075 }, { name: 'Edie Sedgwick', x: 0.78, y: 0.50, r: 0.07 }, ], }, { id: 'p05', year: 1971, photographer: 'Cecil Beaton', location: 'The Factory, New York', tone: 'bw', people: [ { name: 'Andy Warhol', x: 0.30, y: 0.44, r: 0.08 }, { name: 'Lou Reed', x: 0.54, y: 0.48, r: 0.075 }, { name: 'Nico', x: 0.76, y: 0.46, r: 0.07 }, ], }, { id: 'p06', year: 1978, photographer: 'Mick Rock', location: 'Chelsea Hotel, New York', tone: 'color', people: [ { name: 'Lou Reed', x: 0.32, y: 0.46, r: 0.08 }, { name: 'David Bowie', x: 0.56, y: 0.44, r: 0.075 }, { name: 'Iggy Pop', x: 0.78, y: 0.50, r: 0.075 }, ], }, { id: 'p07', year: 1983, photographer: 'Helmut Newton', location: 'Los Angeles, California', tone: 'color', people: [ { name: 'David Bowie', x: 0.34, y: 0.44, r: 0.08 }, { name: 'Susan Sarandon', x: 0.58, y: 0.48, r: 0.075 }, { name: 'Catherine Deneuve', x: 0.78, y: 0.50, r: 0.07 }, ], }, { id: 'p08', year: 1986, photographer: 'Annie Leibovitz', location: 'Cannes Film Festival', tone: 'color', people: [ { name: 'Catherine Deneuve', x: 0.30, y: 0.46, r: 0.08 }, { name: 'Fran\u00e7ois Truffaut', x: 0.54, y: 0.48, r: 0.075 }, { name: 'Isabelle Adjani', x: 0.76, y: 0.50, r: 0.07 }, ], }, { id: 'p09', year: 1992, photographer: 'Richard Avedon', location: 'Paris, France', tone: 'bw', people: [ { name: 'Isabelle Adjani', x: 0.32, y: 0.46, r: 0.08 }, { name: 'Daniel Day-Lewis', x: 0.56, y: 0.44, r: 0.075 }, { name: 'Jim Sheridan', x: 0.78, y: 0.50, r: 0.07 }, ], }, { id: 'p10', year: 1998, photographer: 'Brigitte Lacombe', location: 'Dublin, Ireland', tone: 'color', people: [ { name: 'Daniel Day-Lewis', x: 0.30, y: 0.46, r: 0.08 }, { name: 'Rebecca Miller', x: 0.54, y: 0.50, r: 0.075 }, { name: 'Arthur Miller', x: 0.78, y: 0.48, r: 0.075 }, ], }, { id: 'p11', year: 1956, photographer: 'Inge Morath', location: 'Reno, Nevada \u2014 set of \u201cThe Misfits\u201d', tone: 'bw', people: [ { name: 'Arthur Miller', x: 0.28, y: 0.48, r: 0.08 }, { name: 'Marilyn Monroe', x: 0.52, y: 0.46, r: 0.075 }, { name: 'Clark Gable', x: 0.78, y: 0.48, r: 0.07 }, ], }, { id: 'p12', year: 1961, photographer: 'Bob Willoughby', location: 'Hollywood, California', tone: 'bw', people: [ { name: 'Marilyn Monroe', x: 0.32, y: 0.46, r: 0.08 }, { name: 'Frank Sinatra', x: 0.56, y: 0.46, r: 0.075 }, { name: 'Sammy Davis Jr.', x: 0.78, y: 0.50, r: 0.07 }, ], }, { id: 'p13', year: 1960, photographer: 'Unknown (UPI)', location: 'White House, Washington D.C.', tone: 'bw', people: [ { name: 'Frank Sinatra', x: 0.30, y: 0.46, r: 0.08 }, { name: 'John F. Kennedy', x: 0.54, y: 0.44, r: 0.075 }, { name: 'Peter Lawford', x: 0.76, y: 0.48, r: 0.07 }, ], }, { id: 'p14', year: 1961, photographer: 'Cecil Stoughton', location: 'Vienna, Austria', tone: 'bw', people: [ { name: 'John F. Kennedy', x: 0.32, y: 0.44, r: 0.08 }, { name: 'Nikita Khrushchev', x: 0.58, y: 0.46, r: 0.075 }, { name: 'Jacqueline Kennedy', x: 0.78, y: 0.50, r: 0.07 }, ], }, { id: 'p15', year: 1959, photographer: 'Elliott Erwitt', location: 'American Exhibition, Moscow', tone: 'bw', people: [ { name: 'Nikita Khrushchev', x: 0.30, y: 0.46, r: 0.08 }, { name: 'Richard Nixon', x: 0.54, y: 0.44, r: 0.075 }, { name: 'William Safire', x: 0.76, y: 0.50, r: 0.07 }, ], }, { id: 'p16', year: 1972, photographer: 'Ollie Atkins', location: 'Oval Office, Washington D.C.', tone: 'color', people: [ { name: 'Richard Nixon', x: 0.28, y: 0.46, r: 0.08 }, { name: 'Elvis Presley', x: 0.56, y: 0.46, r: 0.08 }, { name: 'Jerry Schilling', x: 0.80, y: 0.50, r: 0.07 }, ], }, { id: 'p17', year: 1969, photographer: 'Alfred Wertheimer', location: 'Las Vegas, Nevada', tone: 'bw', people: [ { name: 'Elvis Presley', x: 0.32, y: 0.44, r: 0.08 }, { name: 'Priscilla Presley', x: 0.56, y: 0.48, r: 0.075 }, { name: 'Col. Tom Parker', x: 0.78, y: 0.50, r: 0.07 }, ], }, { id: 'p18', year: 1977, photographer: 'Ron Galella', location: 'Studio 54, New York', tone: 'color', people: [ { name: 'Priscilla Presley', x: 0.30, y: 0.46, r: 0.08 }, { name: 'Bianca Jagger', x: 0.54, y: 0.44, r: 0.075 }, { name: 'Halston', x: 0.76, y: 0.50, r: 0.07 }, ], }, { id: 'p19', year: 1976, photographer: 'Anton Perich', location: 'Studio 54, New York', tone: 'bw', people: [ { name: 'Bianca Jagger', x: 0.30, y: 0.46, r: 0.08 }, { name: 'Mick Jagger', x: 0.54, y: 0.44, r: 0.08 }, { name: 'Andy Warhol', x: 0.78, y: 0.48, r: 0.075 }, ], }, { id: 'p20', year: 1969, photographer: 'Ethan Russell', location: 'Altamont Speedway, California', tone: 'bw', people: [ { name: 'Mick Jagger', x: 0.30, y: 0.46, r: 0.08 }, { name: 'Keith Richards', x: 0.54, y: 0.48, r: 0.075 }, { name: 'Gram Parsons', x: 0.76, y: 0.50, r: 0.07 }, ], }, ]; // Compute the shared person between this photo and the next one in the chain. function sharedPerson(a, b) { if (!a || !b) return null; for (const pa of a.people) { for (const pb of b.people) { if (pa.name === pb.name) return pa.name; } } return null; } // Deterministic pseudo-random for placeholder rendering (so each photo looks // the same between renders but different from its neighbours). function hashSeed(str) { let h = 2166136261 >>> 0; for (let i = 0; i < str.length; i++) { h ^= str.charCodeAt(i); h = Math.imul(h, 16777619) >>> 0; } return h; } function mulberry32(a) { return function() { a |= 0; a = (a + 0x6D2B79F5) | 0; let t = Math.imul(a ^ (a >>> 15), 1 | a); t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t; return ((t ^ (t >>> 14)) >>> 0) / 4294967296; }; } // Renders the striped "photo" with faint face circles where people would be. // highlightPerson: name of the shared person to render a ring around. function PhotoPlaceholder({ photo, highlightPerson, aspect = '4 / 5', mode = 'original', highlightStyle = 'ring' }) { const seed = hashSeed(photo.id); const rand = mulberry32(seed); // Pick a stripe angle + base luminance per photo const angle = Math.floor(rand() * 40) - 20 + (photo.tone === 'bw' ? 0 : 10); const baseL = photo.tone === 'bw' ? 0.10 + rand() * 0.08 : 0.14 + rand() * 0.08; const accentL = baseL + 0.04 + rand() * 0.05; const hue = photo.tone === 'bw' ? 40 : (30 + rand() * 40); const chroma = photo.tone === 'bw' ? 0.003 : 0.02 + rand() * 0.015; // Two visual ""modes"": // - original: keep tone as marked (bw or warm color) // - bw: force desaturated const finalChroma = mode === 'bw' ? 0.003 : chroma; const finalHue = mode === 'bw' ? 40 : hue; const bg = `oklch(${baseL} ${finalChroma} ${finalHue})`; const accent = `oklch(${accentL} ${finalChroma} ${finalHue})`; // A few "shapes" to evoke a composition — a pyramid of silhouettes. const people = photo.people; return (
{/* film grain layer */}
\")", mixBlendMode: 'overlay', opacity: 0.6, pointerEvents: 'none', }} /> {/* vignette */}
{/* Silhouettes indicating rough figure blocks — evokes a crowd without faking faces */} {people.map((p, i) => { const cx = p.x * 100; const cy = p.y * 125; // Figure: torso block + head circle const rr = p.r * 100; return ( ); })} {/* floor line */} {/* Highlight ring on the shared person */} {highlightPerson && people.map((p, i) => { if (p.name !== highlightPerson) return null; const leftPct = p.x * 100; const topPct = p.y * 100 * (125 / 125); // y is already 0..1 on 4:5 const size = p.r * 2 * 100 * 1.6; if (highlightStyle === 'ring') { return (
); } return null; })}
); } Object.assign(window, { PHOTOS, PhotoPlaceholder, sharedPerson });