- Shipped
- September 4, 2026 at 1:50 AM UTC
- Author
- Kamo
- Commit
- cf243e4
A page for showing the product as it actually looks. It is built around a data module rather than markup, because more screenshots are coming and adding one should not mean editing a component: drop the WebP in public/img/screenshots, add an entry to app/lib/screenshots, add its copy to the dictionary. The page has two halves and each one disappears when it is empty. Featured shots get a full showcase section — copy, capability chips, the picture in window chrome, and a numbered key to the callouts pinned on it. Everything else falls into a filterable grid below, whose category chips only render once there are two categories to choose between. Today that means one showcase and no grid; it fills out on its own as shots are added. Clicking any picture opens a viewer: arrow keys and thumbnails to move between shots, Escape to leave, focus trapped and then handed back to the picture that opened it, and a 1:1 zoom that pans with the stage's own scrolling. The viewer serves the WebP on disk rather than an optimized variant — a responsive srcset is chosen from the viewport, so zooming one of those to 1:1 shows a 3231px screenshot upscaled from 1920 and every label in it goes soft. Three things worth knowing: - images.qualities gains 75. Next 16 does not reject a quality missing from that list, it SNAPS it to the nearest listed value, so every screenshot was being re-encoded at 50 with no warning anywhere. That is right for a photograph under a dark scrim and wrong for a picture made of 12px UI labels. - The callout pins are sized to their dot, with the label out of flow. Laid out as a flex row, `translate(-50%)` centres the pin on dot plus an invisible 15rem label, and every pin lands several percent off the thing it points at — by a different amount each. - The viewer sits at z-index 100000. The offer banner is at 99999 and the navigation at 10001; a modal the fixed header paints over is not a modal. Registered in the Product menu, the footer, /site-map, both sitemaps and llms.txt, with an ImageObject feed so the pictures can be found on their own in image search. Verified in a production build: the route is still prerendered, and open/zoom/Escape/focus-return were driven with real input events at desktop and phone widths.