Spotlight Ring Gallery Block for React

Each dial's position is computed once, at module scope, from its index: a point on a circle of 38% of the box, written as two CSS variables (--x and --y) that the thumbnail uses for start and top. The box is a square that scales with its container, so the ring stays a ring at any width from 768 pixels up, and in a right-to-left layout it mirrors, with the first dial still at the top. Add or remove watches in WATCHES and the ring spaces itself out; keep it to about eight so the thumbnails don't touch.

The ring is a native radio group, so Tab goes to the chosen dial, the arrow keys move to the next or previous one and choose it, and the choice wraps. Each dial is named by its model name, and a polite line announces "Capstan Dive, 3 of 8" when the choice changes. In a right-to-left layout the browser reverses the arrows to follow the reading direction.

The drawn dials are one Scene component. Where the code comment says so, replace it with an <img> (object-cover, in a square) in both the centre and the thumbnails, and add a src to each entry of WATCHES. The thumbnails are round crops, so keep the subject in the middle of the picture.

No. The ring box is a fixed square, the centre dial has a fixed size, and the caption's sentence reserves two lines, so only the pictures and the words change. The centre dial fades in over 300 ms, and not at all with reduced motion.

Under md the plan grid goes, the centre dial is a 16 rem circle at the top, and the eight thumbnails become a row of 4 rem circles you swipe sideways, with the next one peeking. The caption sits under them. Nothing else scrolls sideways at 320 pixels.

No. The shop, the watches and the prices are made up for the example; edit them in WATCHES.