Lab — concept build
Anchor: gallery-hang
Print Room
The picture you clicked is the picture you land on.
A store for photographic prints, where a thumbnail becomes the hero image of the product page — not a cross-fade, the same rectangle travelling across a real navigation. It is the transition most stores reach for a client-side framework to get. Here it is an at-rule and two declarations, and no JavaScript runs to produce it.
Not client work. This is a specimen storefront: the photographs are real and they are Kush's own, and every price, edition size, paper stock and delivery figure attached to them is invented. Nothing on these pages can be bought, and no order or enquiry is transmitted anywhere.
This shop does not exist. The photographs are real and they are Kush’s own — every price, edition size, paper stock and delivery figure on these pages is invented, and nothing here can be bought.
The prints
01 — What happens when you click a print
The thumbnail does not disappear and get replaced. It travels: same photograph, same aspect ratio, growing into the hero frame while the wall changes behind it. The browser does the interpolation itself, between two snapshots it takes of two different documents.
What makes the pair is a name. The grid image and the product page's hero image carry the same view-transition-name, and each document opts in with@view-transition { navigation: auto; }. That is the whole mechanism. There is no router, no hydration, no client-side navigation, and no state to keep in sync — a click is still a link, and the page you land on is a page the build wrote.
Firefox does not support cross-document view transitions yet. It ignores the at-rule and performs an ordinary navigation, which is the correct fallback and the reason this approach is safe to ship: the transition is decoration over a navigation that already worked, not a replacement for one. Nothing is half-applied, and there is no broken frame to land on. Underprefers-reduced-motion: reduce the transition is switched off the same way, by the browser, before it starts.
02 — The parts that decide whether anything sells
A transition does not sell a print. These do, and they are all here rather than described: a size and edition choice that is already made when you arrive, so the cheapest possible action is "add"; a bag that keeps its count across a navigation and sits on the bottom edge where a thumb already is; and a last step that shows the list back to you before it asks for anything.
| Size | Paper, mm | Price |
|---|---|---|
| Small | 297 × 210 | $95 |
| Medium | 420 × 297 | $160 |
| Large | 594 × 420 | $280 |
03 — Notes
Every online store has the same seam in it. You click a thumbnail, the page goes away, another page arrives, and somewhere in the gap you lose track of which of the six pictures you were looking at. The usual fix is to stop navigating — hand the URL to a client-side router, keep the DOM, animate the image into place, and accept the framework, the hydration and the state management that arrive with it.
The browser will do it for you now. Two documents each opt in with
@view-transition { navigation: auto; }, the outgoing thumbnail and the
incoming hero carry the same view-transition-name, and the navigation is
still an ordinary navigation to an ordinary static page. What crosses the gap
is a rectangle the browser interpolates itself. There is no router, no
hydration, and nothing to keep in sync, because there is no client-side state
to be out of sync with.
The measurement that matters here is not the transition’s frame rate. It is that the store’s JavaScript budget contains no part of it: the bag needs a script, the morph does not, and deleting the one leaves the other working. That is the difference between a transition that costs nothing and a transition that costs an architecture.
Firefox does not implement cross-document view transitions yet, and this is named on the page rather than hidden, because the fallback is the argument. The at-rule is ignored, the link is still a link, the page it lands on is the same complete page — there is no half-applied state to get stuck in and no broken frame to render. A technique that degrades to the thing it was decorating is safe to ship on a real store today; one that replaces the navigation is not.
The prices are the other thing worth naming. This studio’s own honesty tests ban a price on any route, because scope precedes a number and none of the studio’s work is priced on a page. A labelled specimen storefront is a different claim, so the ban is lifted for these routes by an explicit allowlist — and the same test then asserts that the fictional-shop notice is present on every one of them. Without that second half the exemption would have been self-fulfilling: delete the disclaimer and nothing would have gone red.
Measured build time: 1 hr 11 min.
Specimen shop — invented prices, nothing for sale
Bag is empty.