CRT/storebound
1
0
Fork 0
Code Issues Pull requests Releases 1 Packages 1 Activity Actions

README, docs and site: one story (the whole job, no avoidable rejections, the desktop app, your AI, install)

Browse source 
README is a short front page (about 120 lines) with one real visual per section; every former section moved
unchanged into docs/*.md with a docs/README.md index (journey, rejections, getting-started, commands, growth,
studios, store-art, listing-languages, api, skills, mcp, safety, faq, project). The site tells the same story on one
page: the teaser in the hero, real CLI output as text, the desktop app as a section with light/dark captures of eight
screens and the per-system downloads (desktop/latest.json); /desktop/ redirects to /#download. New capture tools:
tools/site-desktop-shots.ts (fixture-mode desktop frames) and tools/site-term-shots.ts (real CLI output as text and
WebP). tests/docs-links.test.ts checks README, docs and site links resolve.
This commit is contained in:
CRTkafa 2026-10-13 03:29:59 +08:00
parent deb218943c
commit 710c3a53d0
63 changed files with 2742 additions and 1782 deletions
Download patch file Download diff file Expand all files Collapse all files

85
docs/store-art.md Normal file
View file

@ -0,0 +1,85 @@
# 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](../examples/demo-game) ("Prism Puddle", procedural art) and [an app](../examples/demo-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.
![App style: four calm screenshots and the feature graphic of the demo list app, rendered by storebound](img/app-style.jpg)
![Store screenshots rendered by storebound: four scenes in English plus the hero scene in Turkish, Japanese and Arabic](img/showcase.jpg)
| Play feature graphic | App preview (App Store, 886 x 1920) |
|---|---|
| ![Play feature graphic, 1024 x 500](img/feature.jpg) | ![A few seconds of the app preview video](img/preview.gif) |
![The review gallery: every language, size, scene and variant on one local page, store check issues highlighted](img/gallery.jpg)
<details>
<summary>Contact sheet of one language (every size, packed into a grid)</summary>
![Contact sheet: iPhone 6.9" and 6.5", 13" iPad, Play phone, 7" and 10" tablets, feature graphic](img/sheet.jpg)
</details>
## 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 &lt;Script&gt;, 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? }`:
```ts
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](../skills/store-screenshots/SKILL.md) and [app-previews](../skills/app-previews/SKILL.md)
skills.
---
[All docs](README.md) · [README](../README.md)