Product Hunt gallery images

A founder needs gallery images on launch day. Feature callouts over product UI. Copy changes hourly. The set still has to look like one gallery.

The person doing this is editing captions while the day is moving. A badge on one image may change. The other images have to stay visually consistent with it. You should not restyle one frame by hand and leave the others on the morning’s type.

The job is one image per gallery slot. Caption and badge per image. When a line changes, you edit that image’s { caption, badge } and export again. The other images stay consistent because they share the same components. Re-export takes seconds.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same components, colocated data, one run. There is no batch product, no queue, no orchestrator.

The component is .lerret/producthunt/gallery-*.jsx. Each file draws feature callouts over product UI. The product UI is in the component. The callout copy is in the data. The glob is the gallery. The files live under .lerret/producthunt/. Feature callouts sit on the product UI the component already draws.

Data is per-image colocated data with { caption, badge }. That is the second of the four bulk patterns: many artboards with colocated .data.json / .data.js. One export captures the gallery. An hourly copy change is a data edit. The caption and the badge are fields, so they change the same way on every re-run.

The image is a PNG at 1270×760, the shipped Product Hunt gallery size. Every slot in the gallery uses that size, so the set lines up when you put the files next to each other.

You use Lerret because launch-day copy changes hourly. Re-export takes seconds and every image stays visually consistent with the others. A design file will get the new caption on some frames and miss the others. Screenshots of the product, with type dropped on top, will not share the callout style.

npx @lerret/cli@latest export

Start a project with npx create-lerret@latest. More in the use cases index.