Cardume
A complete aquarium store, from the hero to the checkout: a real koi swims after the cursor, the store warns you when one fish eats another and the tank you build comes alive on screen.
Cardume is a FICTITIOUS store, built for this portfolio. Products and prices are examples and the checkout Pix charges nothing. The species photos come from Wikimedia Commons, credited in the site footer.
- Live on Vercel, entirely in the browser: 29 products, cart, spec sheets and a demo Pix checkout
- The hero koi is a real photo, cut out and sliced into 32 strips that follow the curve of its body
- 13 species cut out of photos swim, eat and get startled in the tank the visitor builds
- 60 frames per second measured on the hero, the categories and the tank builder
How it worked before.
I wanted an e-commerce piece in the portfolio that did not look like yet another store template. Fishkeeping was the right subject: a living product, beautiful to look at and full of hidden rules, because a beautiful fish in the wrong tank dies or eats its neighbour.
Newcomers buy from the shop window and find the problem at home. The neon and the angelfish swim together in the store; months later the angelfish grows and the neon becomes food. A good store had to show the fish and, at the same time, warn about that before the purchase.
What changed.
The whole site lives underwater. A single WebGL background draws caustics and bubbles behind every section and gets darker as the page goes down, like diving. In the hero, the store name is huge and a koi swims over the letters after the cursor. I first tried a koi drawn in code and it looked like an illustration. The final version is a real photo, cut out of its background with the Mac’s own Vision framework and sliced into 32 strips that follow a chain of points: the head chases the cursor and a wave grows towards the tail.
Every fish has a spec sheet with temperature, pH, adult size and temperament on visual rulers. A rule compares the fish in the cart with each other and warns when the water differs, when the temperatures do not overlap or when one can eat the other. The same warning shows up in the tank builder, where the visitor picks the tank, equipment, plants and fish and watches the result alive: the fish cut out of the photos swim, chase the food when you click the water and flee if the cursor moves fast.
Everything runs in the browser, with no server: the cart is saved on the visitor’s own machine and the checkout goes as far as a demo Pix that says, in plain words, that nothing is charged. The typography went through three attempts before landing on a heavy serif, Zodiak, with one word in cyan italics in every heading.
A look inside.
The store’s promise and the four live-delivery guarantees, next to the video that started the project. 
The categories are a typographic list. Each one’s photo follows the cursor with a delay, like something floating, and ripples as if seen through water. 
The store: search that takes the common or the scientific name, filters by water and a button that releases a bubble up to the cart. 
The spec sheet shows each species’ ideal range on rulers and already says whether the fish gets along with what is in the cart. 
The video shows an angelfish among the neons, and the text points at the problem: when it grows, the neon becomes food. It bridges into the compatibility warning. 
The tank the visitor builds shows up alive. The bar measures stocking by the one centimetre of fish per litre rule, and the warnings change with every fish added. 
In the cart, the same rule: here it catches the combination from the video. The live-fish delivery fee disappears above R$ 300. 
On the phone the koi wanders by itself and follows touch, and the built tank sits above the choices.