Generative Assets · 158 Index

Birthday.

A room of strangers on a 365-day ring. People enter one at a time, and the moment two share a day the pair flares — while a running probability climbs and crosses 50% at just 23 people.

The idea

Birthday is one screen with a single job: make the birthday paradox feel inevitable rather than surprising. Its fictional subject is a probability lecture staged as a lit room after dark — each guest a periwinkle spoke on the calendar ring, each coincidence a rose chord you can point to.

The audience is the reader who has heard "twenty-three people is enough" and never quite believed it. So the page keeps a live tally: people in the room, the first shared date by name, the number of matching pairs, and the analytic odds — and lets you add a guest yourself, or watch the room fill, until the improbable arrives on schedule at person twenty-three.

Palette

Argued from the subject: a dark room, calm marks for ordinary birthdays, and one hot colour spent only on the coincidence.

Dusk-room
#141726
The low-lit room where the coincidence hides — a blue-black that lets the ring glow without glare.
Spoke
#8A9BD8
Periwinkle for every ordinary birthday and the live odds curve. A quiet, even mark — the line/mark accent, never body text.
Collision-flare
#E85C7A
Rose, and rigorously reserved: it appears only when two dates meet, so a flare always means a real match.
Moon-ink
#DCE0EC
The derived body ink — a near-white that clears 4.5:1 on the dusk ground for the big number and copy.

Two dimmer inks — #9AA2BE and #6A7192 — carry secondary labels; the bright spoke and flare stay on strokes and marks so no small text ever rides the accent.

Type

Fraunces
Display

A high-contrast old-style serif with optical sizing, dialled to its display grade for the odds number and headings. It gives the page a lecture-hall gravitas — a warm, human voice for a cold mathematical fact.

IBM Plex Mono
Counts & labels

The instrument voice. Every number that must be read as data — people in the room, the shared date, the 50% line, the month ticks — is set in Plex Mono so the figures line up and stay legible at small sizes.

Technique

Everything is drawn procedurally on a single canvas 2D context — no images, no libraries. The ring is 365 day-ticks with twelve month markers and labels, precomputed on resize. Each guest is a spoke planted at their day's angle; guests who share a day fan out tangentially so a popular date reads as a small cluster hugging the ring.

Collision detection is trivially cheap: birthdays drop into per-day buckets (an array of 365 lists), so a match is just a bucket reaching length two — no pairwise scan. The odds are exact, not sampled: P(n) = 1 − ∏(365−k)/365, precomputed and plotted in the inset with a ghost of its own future so you can see where the curve is heading before it gets there.

The signature — the coincidence arriving at person 23 — lives in three synchronised places. Each shared day links its guests with an inward-bowing quadratic Bézier chord, rendered additively with a breathing glow so the interior slowly fills with rose petals of coincidence. The centre reads the live probability as a large Fraunces figure. And the instant the twenty-third guest enters, that figure flushes rose, prints 50% CROSSED · PERSON 23, and the inset's marker dot lands exactly on the 50% line at the 23 tick. The room rests already mid-convergence — about thirty guests, a flare or two lit, the odds past 50% — so the paradox is on screen before you touch anything.

Iteration log

Pass 1 · Craft

Drove the resting room and the full auto-fill, then read the frame. Caught the brand tagline overlapping the probability inset on desktop and moved the inset to sit below the tagline (it stays top-left on mobile, where the tagline is hidden). Lifted the month-label and 50%-label greys until they cleared 4.5:1 on the dusk ground, and confirmed the flare colour never touches text — only strokes and marks.

Pass 2 · Depth

Enriched the signature: person 23 now flushes the centre figure rose and prints the crossing caption, with the inset dot landing precisely on the 50% line. Added the ghost of the full probability law behind the live curve as a second-read detail — you can see the destination — and named the real first shared date in the readout ("Yes · 10 Dec"). Tuned the chord glow to breathe so pixels always move and the coincidence feels alive.

Pass 3 · Hardening

Verified 375px in headless Chrome — wordmark, nav, readout and controls all inside the viewport, scroll width clean. Confirmed prefers-reduced-motion renders a settled static frame with the loop never started, the DPR capped at 2 with a full rebuild on resize, and the animation paused on document.hidden. Focus rings are visible on every control. Removed the centre eyebrow label so the big number and its one caption carry the middle alone.