Product Hunt launch poster

The same founder, still on launch day, needs a portrait poster for sharing outward. Big product name, one line, the launch date, a badge slot. It has to read as the same launch as the gallery.

The person doing this already has the gallery artboards. The poster is a different size and a different job, but it should share the component library and the fonts. If the line changes, the poster should take the same kind of edit the gallery would: a field, then export.

The job is one poster. You fill { product, line, date }, you export, you share outward. The gallery images stay their own artboards. The poster shares the same component library and fonts, so the launch reads as one thing.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same library, one artboard, one image.

The component is .lerret/producthunt/launch-poster.jsx. It draws the big product name, one line, the launch date, and a Product Hunt badge slot. It lives under .lerret/producthunt/ next to the gallery files. The badge slot is on the component. The product, the line, and the date are in the data.

Data is { product, line, date }. One file, one poster. If the line changes on launch day, you edit the file and export again. Same component, new values, new image. The date field is the launch date on the poster, so it cannot silently stay a draft date. Those three fields are product, line, and date.

The image is a PNG at 1200×1500, the shipped Product Hunt launch poster size. Portrait, for sharing outward, next to the 1270×760 gallery set.

You use Lerret because the portrait poster and the gallery images share the same component library and fonts, so the launch reads as one thing. A design file for the poster and a separate file for the gallery will drift on type. A screenshot of the product page will not give you 1200×1500 with the badge slot.

npx @lerret/cli@latest export

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