Vessel 01 is a carry object from HAAM Atelier in the implied year 3026, edition 001 of 008. Product Studio holds it so the material, the light, and the construction can be looked at, shared as a URL, and taken away as a still.
Abyss glass, Moon pearl, Solar pollen, Liquid chrome. Material select also sets camera and light.
of 008
001
One object. Implied year 3026. HAAM Atelier catalogue fiction.
studio state
URL
m, c, e, x, w encode material, camera, environment, exploded, and wireframe.
export name
PNG
haam-vessel-01-{material}-{camera}-{YYYYMMDD}.png
The job
Look at it the way a catalogue object is looked at.
Material viewers often arrive as engineering demos. I wanted Vessel 01 in a room: named materials, a designed camera, a paired environment, construction, and a still you can take away.
The share had to be a specific looking. If someone sends a link, they should send this material, this camera, this light — not a homepage.
Native apps, collaborative editing, user accounts, a general material editor, and ecommerce were out of this piece.
The looking
Meet the object. Change the skin. Keep the view.
Visitors without WebGL keep the static first-frame poster and a noscript note. The scene loads when the browser can hold it.
01
Arrive on a still
A static poster holds the first frame so the page has something to see before the scene is ready.
02
Choose a material
Four PBR skins share one object. Choosing a material also chooses camera choreography and a preferred environment.
03
Inspect construction
Exploded and wireframe states live in the same URL as the beauty view, so construction is part of the catalogue, not a hidden debug flag.
04
Share or export
Share copies the canonical URL. If the clipboard is denied, a toast shows the URL. Export writes a PNG with a deterministic filename.
Design decisions
What had to stay true in the interface.
studio.haam.co
01
Catalogue
One object is enough if the looking is designed.
Edition 001 of 008. Four named skins with codes and a short lore line. The studio does not become a general configurator by adding a fifth unrelated mesh.
Abyss glass, Moon pearl, Solar pollen, Liquid chrome
Material select sets cameraChoreography and preferredEnvironment
Catalogue copy stays with HAAM Atelier, implied year 3026
02
State
The URL is the studio notebook.
Query keys m, c, e, x, and w serialize the view. Invalid values fall back in tests. A share is therefore a specific looking, and a reload does not invent a different one.
URL serialize and parse covered by unit tests
Invalid fallbacks stay in the suite
Clipboard denial still surfaces the canonical URL
03
Export
A still needs a name that can be filed.
The PNG filename carries material, camera, and date so a folder of exports remains searchable. There is no locked 1920×1080 buffer in this pass.
Deterministic exportFrameName()
Reduced-motion and save-data helpers in tests
No visual-regression baselines yet
The working stack
What actually runs.
Scene
Three.js + R3F
StudioScene lazy-loads. React 19, Three.js 0.185, React Three Fiber 9.
State
studioState.ts
Canonical query shape for material, camera, environment, exploded, and wireframe.
Entry
Static first frame
index.html poster plus noscript note. Vite 8 production build.
Host
studio.haam.co
Published showcase. Local Vite remains the development path.
In evidence
What a reviewer can check.
01Four named materials share one inspectable object
02A shared URL restores the same studio view
03A PNG export carries material, camera, and date in the filename
04WebGL-less visitors keep the poster instead of an empty stage
Where it stops
Packaging tests cover the URL, not device FPS.
There is no visual-regression suite, no Playwright flow, and no dated device FPS or Lighthouse capture in the evidence file. Touch and keyboard on real phones are not yet in evidence.
No awards, production-traffic, or measured performance claims belong here.
HAAM’s role
I framed the object, then I made the looking shareable.
Catalogue frame, material naming, camera choreography, environment pairing, React/Three.js studio, URL state, export naming, tests, and documentation. Direct work, 2026.
