Instagram story

Social posts a story alongside any square post. The facts are the same. The aspect ratio is not. A stretched crop of the square will cover the bottom-safe area the platform needs for its own UI. This is a second artboard, not a crop.

The person doing this is social, on the same day as the square. They already have the number, the label, and the repo. They need a vertical file that reads those fields and leaves the bottom clear. They should not start from the square and pull the sides.

The job is a vertical story that uses the same fields as the square. Large type, a layout that suits 1080×1920, and the bottom kept clear. You export the story artboard. The square stays its own artboard. Dimensions are per-asset, so each one gets a layout that suits its ratio.

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

The component is .lerret/social/story.jsx. It is a vertical layout with large type and a bottom-safe area kept clear for platform UI. This artboard is not a crop of .lerret/social/stars-milestone.jsx. It is a second layout for the same data shape. meta.dimensions is per-asset, which is why the two files can disagree on size and still agree on fields.

Data is the same fields as the square post: { number, label, repo }. A second artboard reads that colocated data shape. That is the second of the four bulk patterns: many artboards with colocated .data.json / .data.js. Story and square sit next to each other and share the shape, not a single stretched frame. One export can capture both.

The image is a PNG at 1080×1920.

You use Lerret because story and square are separate artboards. Dimensions are per-asset, so each gets a layout that suits its aspect ratio instead of a stretched crop. A design file that starts from the square and pulls the sides will cover the safe area. A screenshot of the square, rotated or padded, will do the same. The story has to be drawn for 1080×1920, and this component is that drawing.

npx @lerret/cli@latest export

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