Nothing on this page is a screenshot of anything. The files are synthetic
fixtures — flat shapes drawn at a screenshot's dimensions — and they exist so a
real build renders `ProseImg` instead of a fenced example of it. Every `![…]`
in [the component reference](~/reference/mdc-components/prose/prose-img) sits
inside a code block, so until this page existed the build walked straight past
the component: no `srcset` was ever emitted, no dialog variant was ever
generated, and nothing measured either.

They are deliberately larger than the column that draws them. A 2560px original
scaled into a 48rem slot is the case responsive sources exist for, and a
fixture already the right size would prove nothing.

## A dark twin, with dimensions

The most common ugly thing in documentation is a screenshot of a dark editor on
a white page. Two files, named explicitly, and CSS picks — toggle the theme and
this swaps.

`width` and `height` are supplied here, which is what lets the browser reserve
the box before the file arrives.

![A documentation site](/demo/screenshot.png){dark="/demo/screenshot-dark.png" width="2560" height="1440"}

## The same image with no dimensions

Identical file, nothing declared. The box has no ratio until the image loads,
so the text below it moves when it does — which is the reflow the reference
page recommends against and does not pretend to solve.

![The same fixture, with no dimensions declared](/demo/screenshot.png)

## An original narrower than the column

A badge is 160px wide and has nothing to downscale to. It is left at its own
size rather than stretched, and it says so with a `sizes` of its own: the
layer's policy describes the prose column, and this image is not the prose
column.

![A build badge](_assets/badge.png){sizes="sm:50vw md:160px" width="160" height="40"}

## A vector

An SVG has no pixels to resample, so it is served exactly as committed — no
`srcset`, in the page and in the dialog alike. It still zooms, because a
diagram set into a 48rem column is exactly the thing a reader wants larger.

It also names a background for each theme. Its ink is drawn for a light
surface, and a transparent file on a dark page is ink on ink — so the colour
sits behind it in the page and in the viewer alike.

![How a source becomes a page](/demo/pipeline.svg){background="#fafafa" dark-background="#171717"}

## An animation

A GIF run through a raster pipeline comes back as its first frame. This one is
passed through for the same reason the vector is, and keeps moving in the
dialog.

![A spinner, looping](/demo/spinner.gif)

## An image that does not zoom

`zoom="false"` has to leave an image looking inert: no indicator in the corner,
no focus ring, no cursor, and nothing to tab into. Compare its corner with the
first image on this page.

It is a file of its own rather than a second copy of the screenshot above, and
deliberately so: an image that cannot be zoomed must also have no dialog-sized
variants written for it on a static build, and two images sharing a source would
make that impossible to tell apart in the output. Nothing named `ornament` may
appear at a zoom width in `.output/public/_ipx/`.

![A decorative ornament, not zoomable](/demo/ornament.png){zoom="false" width="1600" height="400"}

## A documentation-owned terminal demo

This reproducible VHS fixture lives beside its tape under `docs/_assets/`.
The build publishes its GIF and keeps the tape private.

![A documentation-owned terminal demo](_assets/quickstart.gif){width="640" height="360"}