Reel covers and thumbnails

An Instagram reel cover is 1080 x 1920 pixels, the same size as the Reel, but your profile grid shows only the middle 1080 x 1350 of it (y 285 to 1635), so the words and the focal point belong inside that crop. A YouTube thumbnail is 1280 x 720 pixels and needs its bottom-right corner free for the video length.

This guide covers the sizes, what makes a cover readable, and how to make covers and thumbnails as PNG files with Claude Code and HyperFrames, one at a time or a whole series in one go.

The sizes that matter

The background still runs edge to edge. Only the words, the face or the object people must see stay inside the crop. For every other format, see Reels safe zones.

What makes a cover work

A cover is read in half a second, at the size of a stamp. Four rules do most of the work:

• Three to six words. More than that is a caption, not a cover.
• One focal point. A number, a face, a question or an object. Not all four.
• Read it small. Scale a reel cover to 360 pixels wide and a thumbnail to 320. If the words do not read at that size, cut words; do not shrink them.
• Real results only. Numbers and results on a cover must be your own. The same goes for logos and product photos: use only your own or ones you have permission for.

Pick a design

In Cover Studio, each design is a one-frame HyperFrames project: a small web page whose text, colors and images are declared variables. The export takes a still and saves it as a PNG. Motion Cheat Code's Cover Studio has 12 designs of this kind, v01 to v06 for reel covers and v07 to v12 for thumbnails:

Cut out your photo

Designs with a person or a product in front of the background need a cut-out: the photo with its background removed. HyperFrames does that on your computer:

npx hyperframes remove-background me.jpg -o assets/me.png

It takes JPG, PNG and WebP files. The first run may download the model it uses. Look at the result before you use it: rough edges around hair usually mean a photo against a plain wall works better. Then point the design's image variable at the file.

Set the words and colors

Every text, color and image is a variable. Write your values in as the new defaults, so every later export uses them. Two details help:

• Put a word between asterisks, like *daily*, and it gets the design's emphasis: a highlight, a color or italics, depending on the design.
• To try a color for one export only, pass it on the command line with --set, for example --set accent=#FF2E93.

Check the crop and export

Before you export, draw the guide on the cover. It shows the grid crop and the button zone on reel covers, and the margins and the length corner on thumbnails:

node tools/export.mjs --guide --out check.png
node tools/export.mjs

The first command writes a check image with the guide drawn on; the second writes cover.png. Run npx hyperframes check first, so problems such as low contrast show up early.

Make a whole series in one go

For a series, the design stays the same and only the words change. Put one row of values per episode in a JSON file and export them all with one command:

node tools/export.mjs --batch season.json

Each row becomes its own PNG (covers/cover-01.png, cover-02.png and so on), and values you leave out of a row keep the defaults. The Series Episode design (v04) ships with an example file. The same idea works for videos; see batch-render video variants.

One prompt does all of it

With Claude Code you can ask for the whole routine in plain words:

Use cover design v02. Cut out my photo assets/me.jpg and use it.
Headline: "I stopped posting *daily*". Kicker: "Hot take".
Check the grid crop, export the cover as a PNG and show me
how it reads at 360 pixels wide.

Claude Code sets the variables, makes the cut-out, checks the crop and exports, then tells you what still needs replacing. The carousel guide uses the same approach for 4:5 slides.

Cover Studio is part of the full Motion Cheat Code pack. The free starter kit is a good way to see how a prompt turns into a render before you make your own covers.