All projects
SaaS · AI product studio
Cadence
SaaS product · Material 3 app
A product site where a spatial assembly of modules illustrates a real workflow, driven by the same controls as the interface below it.
The brief
What it had to do.
Product sites explain workflows in diagrams nobody reads. The brief was to make the workflow itself the illustration, and keep the interface legible over the effect.
Design approach
The decisions behind it.
- Material 3 colour roles, shape scale and type scale, used as the system intends
- Navigation rail, tonal surfaces for elevation, chips and a filled primary action
- Interface previews that look like software, not like marketing
Signature interaction
Spatial workflow assembly controlled by real UI
Three scenario tabs reconfigure both the scene and the HTML product preview. Run sample advances a deterministic local demonstration through received, processed, reviewed and delivered.
On a phone
Usable before anything loads.
A simplified scene or static diagram on phones, with the same working controls.
Next.jsReact Three FiberProcedural geometryCSS Modules
