Brand concept · interactive publication

Solune & Afterdark

Two coffees, one for each half of the day.

A coffee brand concept presented as an interactive publication: a liquid-coffee opening you can stir with the cursor, a 3D pour bar that builds a serve, and photoreal bottles path-traced from the site's own 3D models.

Role: Concept, art direction, WebGL, motion, sound
Status: Live site
Stack: Raw WebGL2 / GLSL, Three.js, path tracing, GSAP

Live site ↗

1The problem

Brand concepts usually stop at moodboards and flat mockups.

2My role

Concept, art direction, WebGL, motion and sound.

3Outcome

A live interactive publication with path-traced bottles; a speed pass cut blocking time from 5,435 ms to 537 ms.

The problem

Brand concepts usually stop at a moodboard and flat mockups, so you never get a feel for the product.

Who it's for

A design exercise in product storytelling and interaction.

Research

Status, honestly

A design exercise; facts on the site come only from the brand boards.

Key decisions

Touch the product

The opening is a ribbon of about 120,000 grains of liquid coffee in raw WebGL2, with the real bottle rising out of it.

Photoreal from our own models

Product shots are path-traced in the browser: glass with wall thickness, coffee as a volume light passes through.

Measure the speed

An audit of the previous version cut total blocking time from 5,435 ms to 537 ms (production build, desktop, on my machine).

How it evolved

Four concepts, two rejected

Screens from each version in the project's history. The boards were made with AI image tools under my art direction.

v1: scroll site: A long scroll with real-time 3D bottles. Reviewed as too basic.

v3: the horizon: Drag day into night along a horizon, then build a serve in a 3D pour bar. Replaced by the liquid opening.

v4: liquid: A liquid-coffee sculpture you can stir, folding into an editorial publication, with path-traced bottles.

1 / 5 · Brand boards

The source of every fact on the site: the bottles, labels, palettes and lines on the boards.

Final interface

Real screens from the live product.

The liquid opening, Afterdark, with the path-traced bottle

Path-traced studio shot of the three Afterdark blends

Before & after

Real-time render against path-traced

↔

Real-time (before)Path-traced (after)

The same 3D bottle. Path tracing simulates light bounce by bounce: real glass thickness, coffee that light passes through, soft shadows.

Try it

solune-afterdark.vercel.appOpen ↗

Challenges

The GPU watchdog

Long path-traced renders tripped the graphics driver; each shot became short passes from different seeds in 4×4 tiles, then averaged.

Grey cutouts

Cut-out bottles lost the light through the coffee, so the body takes its colour from the render on white and only thin glass stays see-through.

What's next

A concept: brands, bottles and labels designed by me; campaign imagery made with AI image tools under my art direction. Nothing is for sale.

Next project

Shortlist →

Show your real experience, clearly.