Loom, a row of products that pulls together from threads

How to read it

The product in the centre is the one on offer, and everything else is a hint of what is next. Because the distortion depends on the distance from the centre, it is strongest at the edges of the row, where a visitor is not looking yet anyway. The result is a row that has an obvious front without needing any 3D.

What it suits

Textiles are the natural home: knitwear, scarves, bedding, rugs, anything where threads already mean something. It also works with products that have a tactile surface, such as ceramics and paper goods. It looks out of place for hard technical things, where threads have no meaning at all. It is the same Unweave effect as on its own page, used here as a layout with the row centred.

Details

Square product cards with the name, price and button, on the card. Those stay in their place in the card at all times, so they are not unravelled. At rest the middle card is entirely clean, which is the state a visitor sees most. Set three products in view on desktop, and make the row full width, so that the threads run off the page.

Fallback

Without WebGL or WebGPU, and for visitors who asked for less motion, it is a normal row with whole photos, centred. Without JavaScript, it scrolls.

Questions