Bess

Try it here: bess.levelorbit.dev

I asked AI to prototype a page for a premium milk, and didn’t like it. It drew SVGs everywhere. My first thought was to abandon it. But what if I could push it beyond what AI had made?

It’s a fictional product page: a landing page and an order page. The bottle is a 3D model, and its animation happens in code.

The first designs were generic. Almost all of them had text on the left and the bottle on the right. I asked AI for less typical ideas, and one stood out. When you open the page you’re inside the bottle: everything is milk-colored, and you have to scroll out of it to see the whole thing. I picked it because it was the least mediocre of the lot, and because the bottle is part of the layout instead of a separate object next to the text. It took five rounds of three or four prototypes each before I had something concrete.

Despite the product being fictional, I wanted people to be able to buy it. The first copy AI wrote was sarcastic, which made the page sound unserious: “one bottle a day, which is why you can’t buy it.” I asked for the sarcasm removed. I don’t know much about milk or farming, so I left the facts in the copy to AI.

For ordering I picked a receipt layout on its own page, with the bottle at the top and your details below. On mobile I wanted a drawer instead, the sheet that slides up from the bottom. It made things worse. The order has more details than a drawer wants to show, and the receipt was already showing them well. I could have re-laid it out and made it work. I kept the receipt on mobile so the page is the same on both.

One thing took several rounds: on iOS Safari the browser’s bars stayed white around a blue page. It turned out Safari 26 ignores the theme-color tag and takes its color from the page’s background instead. Setting that wasn’t enough. What worked in the end was declaring a dark color scheme and putting a fixed blue layer behind the whole page for Safari to read.

For a real product I’d rework the opening. Having to scroll out of the milk before you can order would hurt orders, especially for people who buy often. I’d use the bottle in a more static way. For a fictional one, I’m keeping the scroll for the interaction.

Made with React and TypeScript, a Blender model, and a lot of prototypes.