storebound/docs/store-art.md

Store art: screenshots and previews

Screenshots and previews are one step of the journey, but the one that takes the longest by hand, so storebound does a lot here. Two looks: shots.style: 'game' (sunburst, sparkles, badges) and shots.style: 'app' (calm gradient, a clean device frame, headline + subline). Everything below was made by storebound itself from two tiny fictional demos: a game ("Prism Puddle", procedural art) and an app ("Tidy Lists", one static page with sample data): raw frames captured from the web build, captions in several languages, every store size, a review gallery and an app preview video. No store account needed to try it.

Play feature graphic	App preview (App Store, 886 x 1920)

Contact sheet of one language (every size, packed into a grid)

How it works

1. Frames. Give your app or game a few switches (language, demo data or a fixed seed, no ads, jump to a screen, freeze, autoplay) and let shots capture take the frames: Playwright for a web build, simctl for anything that runs in the iOS Simulator (Unity, Godot, Flutter, React Native, native, Capacitor), adb for an Android emulator or device, or bring a folder of your own frames. The status bar is cropped off and redrawn clean (9:41, full battery).

2. Copy. Per language and scene: eyebrow, two-line title, subtitle, badges. Fonts are subset from Google Fonts to exactly your characters, so Japanese, Chinese, Korean, Arabic (right to left) and Hindi just work. shots fonts checks every character of every language against the font's cmap (TTF / OTF / WOFF / WOFF2, read in plain TypeScript): a glyph the font lacks gets an automatic Noto fallback (logged), no fallback is a clear error, and a render that drew any glyph with a fallback you did not choose, or with a system font, fails shots check.

   script	title / body font (default stack)
   Latin incl. Latin Extended (tr, pl, cs, ro, hu ...) and Vietnamese	your shots.fonts; default game Paytone One + Montserrat, app Inter (all cover them)
   Cyrillic, Greek	Noto Sans (whole line)
   Arabic, Hebrew, Devanagari, Bengali, Thai	Noto Sans Arabic / Hebrew / Devanagari / Bengali / Thai (whole line)
   Japanese, Korean, Chinese	Noto Sans JP / KR / SC (TC for zh-Hant, TW, HK) (whole line)
   a character the stack lacks	Noto Sans Display (titles) or Noto Sans (body), Noto Sans <Script>, then Noto Sans Symbols 2 / Symbols / Math: an ERROR in shots check unless listed in shots.fonts.fallback

   Some display fonts lack Latin Extended: Lilita One has no ş ğ İ ą ę ń ś ź ż ć ă ș ț č ř ě ů ő ű or Vietnamese, so Turkish, Polish, Czech, Romanian, Hungarian or Vietnamese titles need another title font (Paytone One, Baloo 2, Rowdies) or fonts: { ..., fallback: ['Noto Sans Display'] } to accept the mixed glyphs.

   Your own brand font. shots.fonts.title / body / fallback[] also take a local file (relative to the config; TTF, OTF, WOFF or WOFF2, checked by extension and signature) or { family, file, weight?, style?, license? }:

   fonts: {
     title: { family: 'ER Display', file: 'apps/game/public/assets/fonts/er-display.woff2', license: 'OFL-1.1' },
     body: 'Montserrat',
     fallback: ['Noto Sans Display'],   // tried in order, before the automatic Noto fallbacks
   },
   

   shots fonts runs the same cmap check on the file (pl title: ę ł ą Ł not in ER Display -> Noto Sans Display), prints its size, glyph count, sha256 and license, and records it in fonts.json. The file is never copied: render (and shots video captions) serve it from where it is, and a changed file changes fonts.css (the capture cache misses) and makes shots render ask for shots fonts again. shots check counts the local font and listed fallbacks as configured, not as fallbacks, and warns when a local font has no license note.

3. Render. Every store size at exact pixels: iPhone 6.9" and 6.5", 13" iPad (if your app runs on iPad), Play phone, 7" and 10" tablets, the 1024 x 500 feature graphic. 24-bit RGB, no alpha (both stores reject it).

4. Check and review. shots check applies the store rules locally (sources cited in cli/shots/spec.ts); shots gallery puts everything on one page with problems outlined. validate repeats the checks next to the store state.

5. Variants. Other first screenshot, order or copy as shots.variants, rendered side by side, for a Play store listing experiment or an App Store Product Page Optimization test (set up in the consoles; storebound makes and checks the images).

6. Video. shots record films the autoplay mode, shots video cuts 15-30 s App Store previews (886 x 1920, 1200 x 1600) and a 9:16 / 16:9 promo for YouTube with captions in every language, apple previews uploads them. Play takes a YouTube URL in play.video.

Details: the store-screenshots and app-previews skills.

---

All docs · README