X / Twitter card variants for one announcement

A founder needs cards on announcement day. There is one announcement and three ways it might look. The run has to produce real options you can pick from, not a single export you then restyle by hand in a design file.

This is a same-day job. The facts are settled enough to post. The look is not. Default, Quiet, and Bold are the three named exports. You want all three on disk, then you pick. The unused ones can stay in the repo.

The job is three cards for the same news. Each variant keeps the same facts and changes the headline weight and the accent. You look at the three files and choose one. You are not making a fourth frame later because someone asked for a quieter version. Quiet is already in the run.

Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same component, named-export variants, one run.

The component is .lerret/social/tweet-card.jsx with named exports Default, Quiet, and Bold. Those three exports are the three artboards. One file, three variants. Headline weight and accent live per variant. The rest of the card stays shared.

Data is one file keyed by variant name. Each key supplies that variant’s headline weight and accent. That is the third of the four bulk patterns: named-export variants plus keyed data in one file. One run writes all three images. The fields that did not change stay pixel-identical to last time. There is no batch product, no queue, no orchestrator.

The image is a PNG at 1200×675. The files are tweet-card.png, tweet-card-quiet.png, and tweet-card-bold.png.

You use Lerret because you get three real options in one run, pixel-identical to last time except the fields that changed. A screenshot of a browser tab cannot give you a clean 1200×675 with embedded fonts. A design file would be three frames you have to keep in sync by eye, and the fonts would be whatever that file last used, not the ones in the repo.

npx @lerret/cli@latest export

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