Shop the Look Lookbook Gallery Block for React

Each look in LOOKS has a scene, a caption and four items; every item has a name, a price, a detail, a side for its popover and a position in percent (x, y). Replace <Scene ratio={RATIO} scene={current.scene} /> with <img alt="" className="size-full object-cover" src={…} />, set RATIO to the photograph's width over its height, and type each pin's x and y by hand instead of reading them from anchorsOf, which only knows the drawn room.

anchorsOf(scene) reads the numbers that draw the room (where the window light falls, which side the sofa is on, how wide it is) and returns a point on the sofa, one on the lamp shade, one on the print and one on the rug, in percent of the picture. A pin is placed at its point with CSS variables, so it stays on its object at every size.

Tab reaches the look chooser (arrow keys move through it), then each pin; Enter or Space opens its popover, Escape closes it and a press anywhere else closes it too. The popover has a "View" link. The list of items under or beside the picture has a real link in every row, so nothing needs a pin. Hovering or focusing a row's link rings the matching pin.

The picture comes first, then the chooser's look and the list under it; the pins stay on the picture and open the same popovers, which move to stay on screen. The two looks' lists share one cell, so choosing the other look never changes the height.

The popovers open without animation and the looks swap with no fade.

Yes. The pins are your card and foreground colours, the popover is your popover surface, and the room is mixed from your foreground, background and muted tokens, so the look reads in a light theme and a dark one.