Design previews
A client sees their remodel as layers they switch on and off, from a photo of their own room.
A remodel is sold in pieces: this floor, that paint, this vanity. A client asked to see the pieces, and a folder of flat renders cannot answer the question they actually have, which is what happens if the floor stays and the vanity changes.
So the room is a photo plus a stack of transparent layers, one per change, all registered to the same camera. The page lets the client switch each piece on and off, drag pieces in front of each other, compare the design with the room as it is today, open where a piece is sold, and download what they are looking at as a picture or as a layered file their designer can open.
The layers are generated, and generated layers lie. A piece cut out of a finished render carries its neighbours, so hiding the table leaves the table. The import refuses that: it switches every layer the way a viewer would and reports what stays behind, what opens a hole, and where a new surface stops short of the old one.
Details worth knowing
- 01Everything, pictures included, sits behind one password checked at the edge, so nothing of a client's home is fetchable without it. The cookie is an HMAC keyed by the password, so changing the password signs everyone out.
- 02The import re-encodes each layer to WebP named by a hash of its bytes, so a browser may keep a picture for a year while a new version appears at once.
- 03Three checks read the pixels rather than the file names: a layer that changes exactly at another's outline, a hole shaped like the object in front of it, and a surface that stops short of the one it replaces. They found seven faults a human eye had passed.
- 04Product links can be fixed on the page itself, stored at the edge, so a wrong link does not wait for a deploy.