very case study on this site has a slot for real product screenshots — and for work that's still in progress, some of those slots are genuinely empty, because the screen doesn't exist to photograph yet. The easy fix is a stock photo: someone smiling at a laptop, a vague dashboard mockup that looks plausible from six feet away. It fills the space. It also isn't the product, and pretending otherwise for the sake of a tidier-looking page is exactly the kind of small dishonesty that compounds.
Anempty,labeledframetellsthetruth:thisdoesn'texistyet.Astockphototellsasmallliethesamesizeastheboxit'sfilling.
Side by side
what we don't do
generic stock photo of "people looking at a laptop, smiling"
what we actually render
trail map with elevation profile
add src to lib/case-studies.ts
The real component — ShotFrame inside CaseStudy.tsx — checks whether a shot has a src. If it does, it renders the actual image with a real alt description. If it doesn't, it renders a dashed border, the shot's intended caption in mono type, and a small note pointing at exactly where to add the file once it exists. Both states use the same layout dimensions, so the page never visually jumps once a real screenshot lands — the empty frame is placeholder geometry with an honest label, not a broken image tag or a lorem-ipsum stand-in.
Why this is harder than it sounds to keep doing
The temptation to fill an empty box only gets stronger the longer it stays empty — a case study that's sat unfinished for a few weeks starts to feel like it needs to look done. The actual discipline here isn't the component, which took a few lines; it's not reaching for a placeholder image the fifth time a page feels a little sparse. The dashed frame is a small, constant reminder pointed at us as much as at anyone reading the page: this isn't finished, and the honest thing is to say so rather than dress it up.