Use this when the thing being sold is on a screen — software, a dashboard, an app, an agent, a booking system. The dive earns the reveal: you spend a viewport and a half travelling toward a lit rectangle across a room, and what is waiting is the product. It is mercury.com's hero read literally, and it is the strongest version of this mechanic because the payload has a reason to be looked at closely. In Astro: --- import DeepZoomScreenHero from '../components/innovations/heroes/deep-zoom-screen'; --- <DeepZoomScreenHero client:load /> This wraps 'heroes/deep-zoom' and passes it one plate plus an inset. Every prop on the base component passes straight through, so override copy and imagery here rather than forking it. THE SCREEN IS LIVE DOM, NOT A SCREENSHOT, and that is the whole reason this variant exists. Pass anything as 'screen'. It is positioned in real pixels each frame — not scaled by the parent transform — because a transformed element that the compositor has promoted gets rasterised once at layout size and then magnified as a bitmap, so DOM inside a scale(5) parent is a 5x blow-up of small text. Laying it out at its true size each frame means the browser rasterises it at its true size, which is why the interface arrives sharp. Everything inside it should be sized in em off the inset's own font-size, which the effect drives. FOUR NUMBERS ARE MEASURED OFF THE PHOTOGRAPH, and they are the only fragile thing here. Scanning the bundled plate for its dark rectangle finds the glass at x 558 to 817, y 333 to 505, in a 1376 x 768 source. DO NOT USE THAT RECTANGLE DIRECTLY — this was the first version's visible bug. With the display switched off the bezel is exactly as black as the screen, so a dark-pixel scan returns glass PLUS bezel, and an interface drawn across all of it paints over the bezel and out onto the lid. It stops looking like a laptop that is on and starts looking like a screenshot stuck on top of a laptop. Inset it: about 8px horizontally and 7px vertically inside the measured glass, so the photograph's own black shows as a frame. That gives 41.13 / 44.27 / 17.73 / 20.70, with focus at the centre of the inset rect, 50.0 / 54.62. Two details worth carrying to the next photograph. The glass is usually a slight trapezoid — a few px wider at the bottom, because the lid is rarely perfectly square to the lens — so take the NARROWER top width and let the bottom frame run a little fatter; too much bezel reads as bezel, too little reads as a mistake. And the bezel is off-frame by the time the dive lands, which is right: you are inside the screen by then, not looking at a computer. SWAP THE PHOTOGRAPH AND ALL OF THIS HAS TO BE MEASURED AGAIN. Nothing fails loudly if you skip it — the interface just sits slightly off its own laptop, which reads as a rendering fault rather than as a mistake. GENERATE OR SHOOT THE PLATE WITH THE OVERLAY IN MIND: the display straight-on with no rotation or keystone, and switched OFF. A dark rectangle keys cleanly and gives the lit overlay something to sit in. A screen with content already on it fights whatever you put over it, and a screen at an angle needs a perspective transform this component does not do. ZOOM IS MEASURED, NOT SET. The 'zoom' on the plate is only a fallback: for a plate with an inset the base component computes the real number from live geometry on mount and on every resize, so the dive always ends with the interface filling the frame. A hard-coded number was the first version and it broke the moment the window was not a laptop — the plate box is sized to COVER the viewport, so on a portrait phone it is three times wider than the screen and a value tuned on a desktop overshoots into a single message bubble. The one dial left is 'insetCrop' (default 1.25): how much of the interface the dive may crop past the scale that would have fitted it whole. Short of filling the frame the dive ends on a laptop in a room instead of inside the product, which is the difference between a nice photograph and a hero. ONE PLATE, AND endBlur DOES THE WORK. There is no second photograph to hand over to, so the wide shot is asked for 5x on its own. It does not have to carry that, because the focal plane moves to the display: the room falls out of focus as you arrive, which is what a real lens would do and also what hides the upscaling. Set endBlur to 0 and you will see exactly how much it was doing. THE COPY LEAVES BEFORE YOU LAND, and it leaves EARLY — in at 0.30, out at 0.54. endOut is set here and deliberately unset on the kitchen version. Two reasons, and only the second one showed up on screen. A headline still parked over the UI at the bottom turns the payoff into a captioned screenshot. And a headline running ACROSS a laptop that is by then half the frame is two things fighting for the same pixels, which is exactly what an earlier 0.42-to-0.68 window produced. Give the line its own moment while the room is still wide, then get it out before the screen is big. THE SITE NAV LEAVES TOO, at navOut 0.7. The app has its own title bar and its own wordmark, so letting the page nav sit on top of them puts two 'Hermes' marks in the same corner. On the kitchen version the nav stays, because over a photograph it is the only thing still saying this is a website. THE SCREEN IS LIT AT REST, not woken during the dive. It was a wake at first, on the theory that a rectangle lighting up gives the eye a reason to travel toward it. Two things killed that. A dark laptop just reads as a switched-off laptop, and the opening frame is the one most visitors ever see. And the wake ran across the same scroll as the opening copy leaving, so there was no frame anywhere in the hero with the screen lit AND the headline crisp — and that frame is what a gallery card needs. STATIC STATE: no JS or reduced motion gives you the photograph, both pieces of copy, and the screen rendered underneath at a legible size as an ordinary block. The interface is the point of the page, so the fallback shows it rather than hiding it behind a scroll handler that is not going to run.