Paper Reef is a web aquarium for a TV or laptop. Phones scan a QR code, photograph a drawing on white paper, and it gets cut out and swims among the fish for two minutes. You can also draw straight on the phone, or describe a creature and a model writes an SVG for it (~2k tokens, no image model).
I built it yesterday for my kid and posted it in a chat; a Reddit thread later it had ~600 visitors and 120 AI creatures, so I'm sharing it here. There's a public tank at paperreef.com/r/REEF and anyone can open a private one for a party or classroom.
Technical bits:
- No framework, no build step: one Node file and plain HTML/canvas. WebGL fragment shader for water, light shafts and caustics; 2D canvas for everything else.
Fish are drawn as thin vertical slices with a travelling sine wave, so any flat drawing "swims". Other animals are small rigs with their own gaits: an octopus that crawls and jets, an eel that undulates, a jellyfish with a lagging tentacle chain, a shoal that scatters from predators.
Motion is never synchronised. Only events cross the wire (spawn, throw, feed, poke); every screen runs its own simulation, and the resident cast is seeded from the room code so all screens agree on who's in the tank.
Moderation was the hard part. OpenAI's moderation endpoint scores a crude drawing of genitals at 0.05 "sexual". A vision model asked to describe-then-verdict catches most of it, but only after compositing the transparent sprite onto white — on black it misread everything. Outline drawings with an eye dot still read as "a fish" to every model I tried, so there's a ban button behind the scenes.
Runs on a $6 droplet behind Cloudflare; load-tested to 600 WebSocket viewers in one room before posting.
Things I'd love opinions on: how to detect crude drawings that vision models don't, and what else a tank should do when nobody is adding fish.
Paper Reef is a web aquarium for a TV or laptop. Phones scan a QR code, photograph a drawing on white paper, and it gets cut out and swims among the fish for two minutes. You can also draw straight on the phone, or describe a creature and a model writes an SVG for it (~2k tokens, no image model).
I built it yesterday for my kid and posted it in a chat; a Reddit thread later it had ~600 visitors and 120 AI creatures, so I'm sharing it here. There's a public tank at paperreef.com/r/REEF and anyone can open a private one for a party or classroom.
Technical bits:
- No framework, no build step: one Node file and plain HTML/canvas. WebGL fragment shader for water, light shafts and caustics; 2D canvas for everything else. Fish are drawn as thin vertical slices with a travelling sine wave, so any flat drawing "swims". Other animals are small rigs with their own gaits: an octopus that crawls and jets, an eel that undulates, a jellyfish with a lagging tentacle chain, a shoal that scatters from predators. Motion is never synchronised. Only events cross the wire (spawn, throw, feed, poke); every screen runs its own simulation, and the resident cast is seeded from the room code so all screens agree on who's in the tank. Moderation was the hard part. OpenAI's moderation endpoint scores a crude drawing of genitals at 0.05 "sexual". A vision model asked to describe-then-verdict catches most of it, but only after compositing the transparent sprite onto white — on black it misread everything. Outline drawings with an eye dot still read as "a fish" to every model I tried, so there's a ban button behind the scenes. Runs on a $6 droplet behind Cloudflare; load-tested to 600 WebSocket viewers in one room before posting.
Things I'd love opinions on: how to detect crude drawings that vision models don't, and what else a tank should do when nobody is adding fish.