Implementation
A tiny what-if: what if touching any live neighbor were enough to catch fire, but overcrowding past five neighbors killed you? Start from exactly one cell at the center, run a fixed number of generations, and randomize the duotone once when the component mounts. Each reload is a different short film—same choreography of spread and collapse, new wardrobe.
Breakdown
This is deliberately not Conway—it's closer to epidemic / crystal growth with a death threshold. There are 3 key components:
Ignition and overcrowding
Dead cells flip on if they have any live Moore neighbor (neighborActiveCount > 0). Live cells die if they have more than five neighbors, which punches holes in dense regions after they've ballooned.
If(currentActive.equal(0).and(neighborActiveCount.greaterThan(0)), () => c.assign(1)).ElseIf(
currentActive.equal(1).and(neighborActiveCount.greaterThan(5)),
() => c.assign(0),
)The asymmetry makes fronts that rush outward, then fray when they meet.
Single seed
initialSingleCell pins the seed to the grid center so every run tells the same origin story; only the colors and micro-randomness of the buffer differ if you change seed mode elsewhere.
Finite duration
maxIterations={75} stops the compute loop after 75 steps. That's great for repeatable motion in captures or teaching—the pattern doesn't run forever, it settles into a beat you can reason about.
Foreground and background RGB are picked in useMemo with empty deps, so you get one random palette per page load, not a flickering mess every React render.
