Building in Chunks
Every card on this site used to be a video. That was a constraint dressed up as a decision — the carousel was built around Mux, so a piece without footage had nowhere to live. Adding image covers was less about supporting a second media type than about admitting that some work does not move.
Motion is a claim about time
A looping cover says: this piece has a before and an after. That is true of an interaction study, a transition, a gesture. It is not true of a layout, a typographic specimen, or a piece of writing. Putting those behind a loop manufactures a temporality the work does not have, and the loop point becomes a small lie you notice on the second pass.
A still frame makes the opposite claim. It says: everything is here, look as long as you like. For work that resolves at a glance, that is the honest container.
What the two kinds share
The interesting part of supporting both was discovering how little needed to differ:
- Same box. Both fill the card, both crop with
object-fit: cover. - Same rounding, same border, same position in the strip.
- Same tap target, same navigation, same analytics event.
What differs is only the loading strategy, and only because the underlying constraint differs. A video needs buffering ahead of time so it can start at frame zero the moment it comes into view. An image has no start — once the bytes land, it is done. Giving images the video's preload machinery would be ceremony with nothing behind it.
Deciding which to use
A rough test, in order:
- Does the piece have a state change worth seeing? If yes, video.
- Would a viewer understand it from one frame? If yes, image.
- If both, prefer the image. It is cheaper, and a still that reads well is more considered than a loop that merely moves.
The third rule matters most. Motion is easy to reach for because it attracts attention, and attention feels like quality. It usually is not. A grid of autoplaying loops is exhausting in a way that a grid of stills is not, and the exhaustion is charged to the work rather than the format.
There is a third kind of work the test does not cover — pieces you can only judge by touching them. A loop of someone else tapping is not the same claim as a surface that answers your finger. Those get a live frame:
The cost you do not see
Ten autoplaying covers is ten concurrent video streams, ten decoder contexts, and a manifest round trip each before a single frame renders. On a phone over cellular that is the difference between a page that feels immediate and one that feels like it is thinking.
An image cover is one request that resolves from cache on the second visit. Where the work does not need motion, that is a straight saving with no expressive cost — which is the rarest kind of trade in interface work, and worth taking whenever it appears.
Notes
The type describing a cover is a union rather than two optional fields, so a piece is a video or an image and the impossible states — both, neither — cannot be written down. Bad frontmatter fails the build instead of rendering an empty rectangle in production. See the Next.js image documentation for the sizing contract that keeps a 4000px original from being served into a 640px box.