Year: 2026
Tools: Claude Code, Tripo3D, Blender
Daily driver: Claude Code

BaristaVision

For IcedCoffee.work, I wanted to play around with three.js, see what I could come up with. The challenge was the reward, but the result was definitely icing on the cake.

A playground, not an app

BaristaVision is a live 3D scene in three.js: an iced coffee cup, ice cubes, a bed of coffee grounds, a pour, a straw, a dome lid and a laptop. Nothing is pre-rendered.

Our brief was to take a hero film and make it a scene you can touch. Drag the cup, the lid and the straw, and the scene answers.

Fig. 1: The ice drop.

Fig. 2: The pour.

Fig. 3: The lid and the straw.

Fig. 4: Drag the cup, and the scene answers.

The first hand sketch of the IcedCoffee editor, with the icon floating beside it. — Fig. 5: Where it started: the first sketch, from the IcedCoffee case study.

How the assets were made

Tripo3D made the cup from an image, 87,168 triangles of it. Claude Code wrote a Blender cleanup that turns Tripo's geometry into clean, measured rotational shells. The dome lid is a Tripo model too, retopologized.

Everything else is code. The ice is a hand-written raymarch and the cup is transmission glass. The liquid, the pour and the grounds are made in code.

Fig. 6: The ice, a hand-written raymarch.

Fig. 7: Condensation on the transmission glass.

Fig. 8: The icon blueprint the cup was built from.

A storyboard of 24 frames, from the ice drop to the cup being wiped. — Fig. 9: The storyboard the scene follows.

Change the lens

I drew a camera menu in Figma, and Claude Code built it as a Camera Lens bar. Ten lenses swap live, plus a focal length slider.

Anamorphic letterboxes the scene to scope. Fisheye bends it, the Helios swirls it, and Tilt-Shift turns the cup into a miniature.

Film and Film 65
Anamorphic and Fisheye
Helios 44-2 and Tilt-Shift
35 f/2 and 50 f/1.4
85 portrait and 100 macro

Fig. 10: Film, Anamorphic and Fisheye.

Fig. 11: Helios, Tilt-Shift and 100 macro.

Notes in, fixes out

I reviewed the scene in Infospector, my note tool, pinning notes right on it. The notes came back as fixes the same day.

The back-and-forth

Sep 22
Q
Make the cup from an image.
Tripo3D
A cup model of 87,168 triangles.
Claude Code's Blender script cleaned it into rotational shells.
Oct 2
Q
Build the camera menu from my Figma.
Claude Code
A Camera button and a Camera Lens bar with ten lenses and a focal length slider.
Visitors swap lenses live.
Oct 3
Q
Make Anamorphic look like a real scope film.
Claude Code
Anamorphic now letterboxes the scene to scope.
Oct 4
QThe top of the laptop is shimmering.
Claude Code
Found it on the lid's backlit top edge and calmed the light there.
Fixed the same day.
Oct 19
Qit's not about the app, it's only about the 3D playground we created
Claude Code
This page, with the playground on its own.
BaristaVision got its name.

Tools

Claude Code: Every experiment in the lab, the live scene, the lens bar and the fixes from my notes.
Tripo3D: The cup and the dome lid, from images.
Blender: Cleaning Tripo's cup up into measured shells.
Figma: My design for the camera menu.

Sources & credits

Fonts

ArchivoThe Archivo Project AuthorsThe camera menu and the callouts.SIL OFL 1.1

Code and libraries

three.js, r180three.js authorsThe renderer for the whole scene.MIT
cannon-es 0.20.0cannon.js Authors, pmndrsThe physics for the ice cubes and the straw.MIT

Art and 3D

Tripo3DThe coffee cup, made from an image and then cleaned up in Blender.