Material showroom
Stone is judged under raking light. The site should let you do that.
A distributor sells surfaces such as marble, porcelain and wood, which nobody buys from a description. The concept turns the page into a showroom: a rack of slabs dragged one at a time, raking light across the material, and a visualiser that sets the chosen stone on the wall or floor of a room.
- Art direction, interaction and front-end
- Interaction · Art direction · Concept
Context
What was live
- A product chosen by eye, sold through small photos
- No dedicated contact route on product pages
- Small real photos that couldn't be enlarged without losing quality
Challenge
Marble isn't sold by description.
The product is the surface: the vein, the sheen, the way light runs across the slab. A grid of thumbnails with names and codes shows none of that, and a site that's too heavy doesn't get to show anything at all.
Research
- The current site was measured before any proposal: weight, requests, contact per page and platform.
- The real photos were measured so they never appear above native size, at any screen width, even mid-gesture.
Decisions
The rack of slabs you drag
- Dragging is the gesture of someone flicking through samples in a stone yard.
- Each slab has a single number that is at once its exit from the rack, its depth, its turn, its sheen and its shadow; the finger writes fractions into it every frame.
- The rack has ends (nothing wraps around), so the start and the end had to be designed.
- The drag locks slab by slab, and half a step is truly half a step.
The room visualiser
- Nobody chooses a surface without picturing where it will go.
- The visitor taps the wall or the floor, picks a stone, and it settles behind the furniture, multiplied by the photo itself: light and shadow fall on the stone, and the floor is projected in perspective.
- The scene geometry was measured by hand, with the masks embedded in the page.
- The scene presents itself as a visualiser, on the page itself, never as a photo of real work.
Weight as the argument
- A redesign that promises speed cannot load megabytes to prove it.
- System fonts (zero bytes of downloaded type), images at native size and motion in native CSS.
- No licensed typeface in the preview: it would only come in once the project was signed.
- Every page under 1 MB, images included.
Demonstration
The company's real material is awaiting permission to be shown. Here, the six stones are procedural textures drawn in code.
Calacatta
- White marble, bold veining
- Italy
A self-initiated concept, never commissioned, without the company's permission to show its real material. No name, brand or photo of theirs appears here; the stones in this portfolio are procedural textures.
Interactions
- Raking light that sweeps across the slab on hover.
- The stone wall drifts slowly as the section crosses the screen.
- All in native animation-timeline: where the browser lacks support, nothing stays hidden.
Implementation
- The complete site is generated by a script from a single source of facts, with the origin marked on every block.
- Static pages that even open from disk, with no server.
What was built
- A single-file homepage preview that opens with a double-click
- A complete 16-page static site
- A draggable slab rack, slab by slab
- A wall and floor visualiser
- Measurements of the current site and of the proposal
Technology
- Art direction
- Design system
- System fonts
- HTML
- CSS animation-timeline
- JavaScript
- Python (site generator)
- Measurements across 12 screen widths
- Automated browser QA
Outcome
The concept is finished and was never commissioned; it is awaiting the company’s permission to be shown. Until then, this case shows no name, brand or photos, and the portfolio showroom uses procedural textures.
16
static pages in the complete site
0.481 MB
on the heaviest page, in 22 requests
0
images enlarged beyond native size, measured across 12 screen widths
Learnings
- A dark background makes the stone shine once; alternating light and dark grounds makes the whole page shine.
- Measure in motion: the focused slab grows through perspective, and the enlargement ceiling has to hold mid-gesture too.
