KILN.
← All work
◆ 1280°CTier 01 · SignatureProduct brand · 3D

Kembang

A craft soda that comes in six botanicals, each the colour of the thing it was steeped from. The range sits on a turntable — six aluminium cans modelled and lit in real time — over water that moves when your cursor does.

Role
Design + build
Type
Craft-soda brand
Stack
Three.js · WebGL · GSAP
Status
Concept build
The idea

A soda you can pick up before you've tasted it.

Real-time 3D · move your cursor across it

Drink brands are sold on flat-lay photography, and a flat lay is one moment in a studio somebody paid for. There is no studio here and no photographer, and the product does not exist — so the object had to be built rather than shot.

There are six of them and they are cans. A cylinder body wearing a label that is drawn into a canvas at load, with the neck and the recessed base lathed from profiles so the silhouette is a real can and not a tube with flat ends. Each is a different botanical carrying its own colour, steep time and sugar figure, and the range rides a pinned gallery you drag, arrow through or swipe. Adding a seventh flavour is a line of data, not an asset.

Behind them the page runs a fluid simulation that answers to the cursor, and it is not decoration: the brand's one claim is that nothing is added and the colour comes out of the plant, so the water on the page takes its colour from whichever can is in front of it. The strongest version of that claim got its own section — butterfly pea is indigo until acid reaches it and then reorganises into violet, so it is shown as a four-step pH ladder rather than asserted in a sentence.

What went into it
Product 3D

Six cans, modelled rather than photographed

A cylinder body in brushed aluminium with a clearcoat over the label, and both ends lathed from profiles — the drawn-in neck at the top, the recessed dome underneath — because those two curves are most of what makes a can read as a can. The label is drawn into a canvas at load, one per botanical, so the colour, the name and the artwork all come from the same row of data the copy does.

Water

The colour comes out of the plant

The ground behind the range is a fluid solve running to the cursor, twenty pressure iterations a frame. It earns its cost by making the brand's argument rather than decorating it: the claim is that no colouring is added, so the liquid takes its colour from whichever can is currently in front of it instead of being a fixed backdrop the product is placed on.

Accent

One colour, rationed and rotating

Paper, ink, and exactly one saturated colour set from the botanical you are looking at — lime on Calamansi, deep red on Roselle. It is used only as a fill and never as type, which is the rule that lets it change under the reader without anything becoming unreadable. It is also why the colophon's link home is ink: measured, the Calamansi green lands at 1.60:1 on the paper ground.

The blue one

A demonstration instead of a claim

Butterfly pea holds a deep indigo until something acidic reaches it, then the pigment reorganises into violet. Rather than write that down and hope, the section lays out the ladder as four swatches from indigo at pH 7 to violet at pH 3 — and the copy notes the lime is already in the can, so it has happened long before the glass gets to you.

Light the kiln

Got a brand worth firing?

Tell me what you're making. There's no form to fill in and no discovery call to book: one email lands directly with the person who'd build it.

hello@studiokiln.space
  • Tell meWhat you're building, roughly when you need it, and a link or two you like.
  • You'll hear backWithin 48 hours, from me. There's nobody else here to route it through.
  • You'll getA tier recommendation, a timeline, and a fixed quote. No hourly billing.