Live on real Twitch chat: every chatter in a busy channel becomes a creature.
Demo mode: subs open the pearl clam, gifted subs bring a rain of fish, raids arrive as a school.

Inspiration

Most chat overlays are a scrolling list of text that viewers stop reading after a minute. We wanted chat to feel like a place: something that grows while the stream is live and is still there next time, so regulars can see that they belong.

What it does

Chat Reef is a browser-source overlay that turns Twitch chat into a living coral reef.

Every chatter becomes a creature (fish, jellyfish, seahorse, crab or turtle), colored by their Twitch name color and labeled with their name.
Conversation grows the coral; emotes release bubbles; quiet chat lets the reef settle.
Subscriptions open a pearl clam, gifted subs bring a rain of fish, and raids arrive as a passing school sized by the raid.
Moderation is respected: a ban or timeout removes that creature; a chat clear calms the reef.
The reef is saved between streams (local storage per channel), so returning chatters get their own creature back.
?channel=name connects to any channel, &transparent=1 makes it an OBS overlay, &anon=1 hides names, ?demo=1 runs an offline simulated chat.

It connects to Twitch chat anonymously and read-only over WebSocket IRC (IRCv3 tags for badges, emotes, sub/gift/raid USERNOTICEs and CLEARCHAT). No login, no API keys, no backend, no build step: a streamer pastes one URL into OBS.

How we built it

We wrote a one-page spec (features, URL parameters, file layout, performance caps, tests). OpenAI Codex CLI built the entire project in a single session (session ID below): it wrote the HTML/CSS/Canvas renderer, the IRC parser and WebSocket client, the demo generator, the README and a 10-case test suite, ran the tests until they passed, and then opened the demo in a real browser to check rendering, persistence, entity caps (120 creatures, 420 particles, 150-fish raids) and moderation handling.

Plain HTML, Canvas 2D, CSS and vanilla JavaScript, with no dependencies. Hosted on GitHub Pages.

Challenges we ran into

The first live test against a real channel failed: the overlay kept reconnecting. Twitch's WebSocket endpoint closed the socket when the login commands (CAP, PASS, NICK, JOIN) were sent together in one frame. Sending each command as its own WebSocket message fixed it, and the test suite was updated to cover that behaviour. After the fix it held a stable connection to a busy channel (about 70 chat messages per minute, 60+ creatures).

Keeping a busy chat beautiful was the other challenge: hard caps, recycling of inactive creatures and particle limits keep it smooth when a raid lands.

Accomplishments that we're proud of

It runs on real Twitch chat with nothing to install, and it looks calm and readable instead of noisy, even in a fast chat.

What we learned

A short, precise spec lets Codex build and verify a complete project in one pass; live testing against the real service still matters.

What's next for Chat Reef

Channel point redemptions and follows via EventSub (with streamer login), seasonal reef themes, and a "reef history" view that shows how the community grew over a month.

Codex session ID: 01a17f4a-c689-7a80-abd0-7a5e39265ea3