CARP

A koi fish that follows your mouse was everywhere on Threads & Instagram: gorgeous, simple & sold as a one-shot landing page. They're rarely one-shot, & they're never built on a client's brief. Even the great ones are a launching pad: the real work is turning the effect into a story for an actual product.

The joke of the series, in my words at the start: creators keep one-prompting websites that are interactive & fun, “but make NO SENSE in the grande scheme of the brand”. So: “Well, what if the company's brief DID match that design...” As in military goldfish.

CARP is Covert Aquatic Reconnaissance Platforms, a fictional defense contractor that sells armored attack fish for surveillance. Koi are carp, so the name stuck.

It started as GILL Systems. ChatGPT built a first version with a still hero, & the quality “isn't nearly up to what we're looking for”. A second version drew the fish as 3D geometry in a pond, & that missed too: the viral page isn't 3D at all. It's painted koi, seen from above, bent along a path.

So CARP went the same way: painted fish, few words, all visuals. Everyone does koi, so CARP has a catfish too, “cause they aren't beautiful”.

Each fish is an AI painting, made from directly overhead like a scientific specimen photo, head up & spine straight, on a flat ground so it cuts out clean. In the page it's a textured ribbon that bends along the path its head takes, so it swims instead of sliding.

One HTML file, WebGL2, no build step & no libraries. The whole scene runs through a frost blur & a water shader: wobble, ripples, caustics & a little color split. The tails leave ripples.

BigPuffa (PUFF-04) works differently. He doesn't swim like the others: he buzzes his fins, gets nowhere fast & keeps away from the fleet, & the fish bat him around like a ball. Any bump puffs him up, & he stays puffed until nothing has hit him for three seconds. He's four paintings, deflated to fully puffed, on one canvas & one centre; between two of them both are stretched to the same outline & crossfaded, so he morphs instead of fading. Puffed, the fleet steers around his spines.

The story is told in AI “archival” photos: a mayor, a disco, a squad car, Normandy, a world's fair in 1851, Venice in 1509. Each one is split into a background plate & a cut out foreground, so the fish can swim between them & a scribble can reveal them.

The cutouts came from rembg with BiRefNet, & the holes they left were filled with IOPaint's LaMa, rendered on a spare Mac. In hindsight: “I coulda had ChatGPT gimme them as separate plates”.

Name the problem & you (& your robot) can catch it next time. These are the failure modes CARP hit, each with what I actually said when I saw it.

• The Orbit: Fish loop the same circle until you feel seasick: “can we vary up the fish swiming patterns some hahai'm getting dizzy”
• The Clutter: A reticle, a tactical map & extra HUD “for realism”: “don't lik eyour additions, they look messy”
• The Rush: Sections that flash by with nothing to look at: “each of the other frames feels rushed and cheap”
• The Cram: Everything big, everything touching: “all your stuff is jammed together, everything is too big”
• The Fake Lead: The decoy button is the loudest thing on screen: “The request clearance button is a fake CTA, but is drawing most of the attention”
• The Ghost: Photos slide straight through each other when they swap: “still going through each other, instead up and over or down and over”
• The Vanish: A fish you stand down just blinks out: “when a fish leaves they should swim out, not just disappear.”
• The Over-Polish: A “fix” that sands off something on purpose: “a polish pass would actually hurt things, not help.”
• The Stale Tab: Judging a change on yesterday's cached copy. No quote: I just tested old code once.

One build day (Nov 1, about 7 hours across two robots at once), a day of polish, about 120 messages from me, 4 page versions & 35 generated images, 14 of which made the site. The rhythm never changed: look at the build, say exactly what's wrong in plain words, rebuild, look again.

The messages that changed everything all handed the robot something it couldn't invent: a limit (“it's always ONE or TWO big fish, limited text”), a premise, the art, a tone (“masculine/military/garish up the site”), a structure, the photos' jokes & a rulebook (our How to Speak Designer notes).

Every correction became a written rule the next build got for free. “Fish never orbit.” “Yellow is go, red is don't.” & when a polish rule collides with the art direction, ask first & remember the answer. The fish over the nav is on purpose.

Desktop first; phones get a simpler layout. It needs WebGL2 & a decent GPU (older machines chug: lower the pixel ratio cap in resize()). Fonts load from Google, so offline the giant CARP falls back to a system font. Code is MIT; the fish & photos are CC BY-NC 4.0. And the history is fake. No fish were deployed at Normandy. Probably.

Launch CARP above (it opens in its own tab). The long read is the Unhinged & On-Brief article, the files are on GitHub with notes on how it works.

To run it yourself: download the repo, run python3 -m http.server 8000 in the folder & open localhost:8000. It's one index.html, a few fish PNGs & the photo plates. No build step.