Surfaces · component

Plate

A contact sheet that opens into a lightbox you can arrow, swipe or play through.

open a plate, then try the arrow keys and Escape

Paste into Claude Code, Cursor or any agent. Pinned to a tag, so it will not change under you.

Options

label Plates

Accessible name for the sheet and for the overlay. Keep it a noun. It is read out as the name of the whole gallery.

closeLabel Close

Text on the close control. There is a visible one as well as Escape, because Escape is not discoverable and on a touch device it does not exist.

columns 3

1 to 6

Columns at the widest the container gets. The sheet steps down on its own below that, because it fits its container rather than the viewport.

autoplay 0

0 to 12

Seconds between plates once the overlay is open. Zero is off, and off is the default: a gallery that starts moving on its own is rarely what the reader wanted. Any value above zero renders a pause control, and reduced motion turns it off entirely.

playLabel Play

Text on the autoplay control when it is stopped.

pauseLabel Pause

Text on the autoplay control when it is running.

What it needs

Dependencies: react@>=18
Browser: No WebGL
Frame budget: ~0.2 ms · 0 context
Pinned to: v0.3.1

Uses <dialog>.showModal(), so the focus trap, Escape, top layer, inerting and focus restoration are the browser's
The fade uses transition-behavior: allow-discrete and @starting-style; where those are unsupported the overlay appears instantly, which is a graceful loss
No carousel library, no focus-trap library, no portal, no scroll-lock package
Swipe is Pointer Events, and is ignored for mouse input, where a small drag is the start of a click rather than a gesture
No JavaScript runs per frame. The enter is one CSS animation on the image
Thumbnails below the first row are lazy, and the two neighbouring full-size files are decoded while you are looking at the current one
Intrinsic width and height are required on every plate so the sheet reserves its shape and does not reflow as the files arrive