Instagram square milestone post
Marketing posts when a round number lands. A thousand stars, then two thousand, then five thousand. The number changes. The framing should not. This is a recurring card, not a one-off celebration layout.
The person doing this is marketing. The trigger is the milestone, not a campaign calendar. When the number hits, the card should already exist as a component. The only edit should be the number, the label, and the repo if that ever changes.
The job is one square image for the current milestone. Big number, a label, the repo name, sparkle framing. When the next round number lands, you edit one field and export again. You do not open last time’s design file and hope the sparkles still sit on the same grid.
Give Lerret a React component under .lerret/ and optional data. export writes a PNG. Same component, data swapped, next image.
The component is .lerret/social/stars-milestone.jsx. It draws the big number, the label, the repo name, and sparkle framing. The number is a prop. The framing stays put. The file lives under .lerret/social/ with the rest of the social artboards.
Data is { number, label, repo }, swapped every time the milestone changes. number is the round figure. label is the word under it. repo is the name on the card. The catalog names 1k, 2k, and 5k stars as the sequence. That is the first of the four bulk patterns: re-run export with a different --data file. Same component, new number, new image. There is no batch product, no queue, no orchestrator. You run the command again when the next round number lands.
The image is a PNG at 1080×1080, as in the shipped stars-milestone example.
You use Lerret because the number is a prop. The next milestone is a one-field edit and a re-run, not a new file in a design tool that drifts from the last one. A screenshot of the repo page will not give you sparkle framing at 1080×1080, and it will not match the last milestone card.
npx @lerret/cli@latest export
Start a project with npx create-lerret@latest. More in the use cases index.