[Docs]: Visual overhaul — reshoot companion screenshots & GIFs (batched)`

[rosspeili]

Doc location

README.md, docs/using-the-app.md, docs/getting-started/*, docs/avatars.md, docs/environments.md, docs/camera-and-lighting.md, docs/animations/vrma.md, docs/voice/*, docs/user-settings.md, docs/vroid-hub.md, plus docs/screenshots/ (new assets). Keep the existing multi-avatar strip on the README (docs/screenshots/91-multi-avatar-strip.png) as-is.

What kind of change?

Screenshot update / new screenshot

What’s wrong or missing?

Docs and the README mix full-bleed crops, tiny UI scraps (bar-only, panel-only), uneven heights, and stacked GIFs. That makes pages hard to scan and inconsistent for newcomers. We want a single visual language and a full reshoot of product media (almost everything new), then a layout pass that embeds them cleanly. A first motion-GIF pass already landed; this issue is the broader redesign and replacement set, not a small patch on top of old PNGs.

Visual rules (acceptance for layout PRs):

1. Every asset is one of four kinds only:
   • Full screen + static — whole desktop/IDE; width="100%"; nothing under it in that beat.
   • Full screen + GIF — same framing rules as full static.
   • App window + static — companion window (stage + glass bar + any open menu), centered, fixed height/width.
   • App window + GIF — same crop as app-window static.
2. No tiny fragments (bar-only, live-dot-only, settings-panel-only crops). Show the whole app window focused on the story (e.g. chrome contrast = window on dark then light backdrop so the bar recolors).
3. App-window row: up to 3 images; at most one GIF per row (GIF + up to two statics is fine).
4. Scale showcase: up to three app-window shots on one row (×0.5 / ×1 / ×2).
5. Two rows max as 2×2; if GIFs appear in a 2×2, use ~75% of normal app-window display size so the block is not endless scroll.
6. Prefer one motion story per section; reuse the same file from README, using-the-app, and the deep feature doc when the story matches.
7. Do not change app code. Docs text stays unless a short rearrange/caption is needed to fit the layout.

Capture defaults: Windows desktop companion (installer or npm run desktop). Avatar 1, Default animation, unless the shot needs otherwise. GIFs ideally 5–10 seconds (hard max ~12). Keep each file reasonably small for GitHub (aim under ~6 MB after compression; maintainers can compress further).

Suggested tool — ShareX (Windows, free/open source): Prefer this over manual crop + separate converters. Configure a hotkey to start/stop recording and to output GIF (or short video). Use window capture / “active window” (or equivalent) so ShareX tracks the AVATAR companion window without hand-drawing a crop — that matches our app window framing. For full screen shots, use monitor/fullscreen capture instead. Trim length in ShareX or with a quick pass in a GIF editor if a clip runs long. Other tools (OBS + ezgif, Win+G, etc.) are fine if you already have a workflow; ShareX is the path of least friction for this issue.

Drop finished files under docs/screenshots/incoming/ with the IDs below in the filename (example: 01-readme-hero-overlay.gif). Maintainers will rename, compress if needed, and wire Markdown.

Suggested fix (optional)

Work in batches. A PR can ship one batch of assets + embeds, or assets-only first. Mark checklist items in the PR description.

Batch 1 — Core product (highest priority)

ID	Suggested filename	Frame	Type	What to capture
01	01-readme-hero-overlay	App window or full screen	GIF	Companion on a dark IDE / desktop, Default or idle motion. README “what this is” hero. If full screen, nothing under it.
02	02-gear-main	App window	Static	Gear main menu open (Appearance, Voice, Camera, Animations, Settings, etc.).
03	03-scale-menu	App window	Static	Window scale menu open (×0.5 / ×1 / ×2 visible).
04	04-lip-sync-live	App window	GIF	Device output (or clear audio) active; mouth moving; green live dot visible on the glass bar.
05	05-voice-panel-device	App window	Static	Voice panel with Device output selected.
06	06-anim-default-loop	App window	GIF	Default animation: Greeting once, then into the loop — one continuous clip.
13	13-overlay-drag	App window or full screen	GIF	Drag the glass bar; the window moves across the desktop.
14	14-scale-x0.5	App window	Static	Companion at scale ×0.5 (same camera/avatar framing family as 15–16).
15	15-scale-x1	App window	Static	Companion at scale ×1.
16	16-scale-x2	App window	Static	Companion at scale ×2.
18	18-gear-animations	App window	Static	Gear → Animations submenu expanded.
19	19-avatar-switch	App window	GIF	Appearance → Avatars: switch Avatar 1 → Avatar 2; stage updates.
20	20-appearance-avatars	App window	Static	Appearance → Avatars strip open.
22	22-env-builtin-switch	App window	GIF	Appearance → Environments: Stars → Code → Bloom (short).
23	23-env-color-fade	App window	Static	Color fade controls visible (Use color / Reset).
24	24-chrome-contrast	App window	GIF	Same companion window; move from a dark backdrop to a light one (drag or env change) so bar/button chrome recolors.
27	27-camera-lighting	App window	GIF	Camera & Lighting open; move a slider; framing or light visibly changes.
32	32-settings-snap	App window	GIF	Settings → Snap pad: click a cell; window jumps.
33	33-settings-open	App window	Static	Settings open (Overlay + Snap visible; Directories peek OK).
34	34-windowed-toggle	App window	GIF	Toggle Pinned/overlay ↔ Windowed (opaque frame).

Where Batch 1 lands (layout hint): README hero + gear/scale + lip sync + one animations GIF; using-the-app §§1–3, scale row (14–16), chrome, camera, settings; deep links in avatars / environments / vrma / voice / camera docs via reuse.

Batch 2 — Directories, custom media, Voice sources, install / first run

ID	Suggested filename	Frame	Type	What to capture
07	07-env-custom-browse	App window	GIF	Appearance → Environments → Custom expander; browse/pick a custom image.
08	08-first-session-launch	Full screen or app window	Static or GIF	“Just launched” orientation for first-session (pick one clear framing).
11	11-installer-eula	Full screen	Static	Windows installer license / EULA page.
21	21-directories-avatars	App window	GIF	Settings → Directories → Avatars → Custom → choose folder → Appearance list updates.
25	25-voice-window	App window	Static	Voice → Window source / window picker.
26	26-voice-microphone	App window	Static	Voice → Microphone.
35	35-settings-directories	App window	Static or GIF	Directories section clear (skip if 21 already shows it well).
46	46-voice-file	App window	Static	Voice → File source.

Batch 3 — VRoid Hub

ID	Suggested filename	Frame	Type	What to capture
40	40-vroid-hub-grid	App window	Static	Appearance → Avatars with VRoid Hub character grid.
41	41-vroid-on-stage	App window	Static	Hub character loaded on stage.
47	47-vroid-settings-setup	App window	Static	Settings → VRoid Hub OAuth / app credential fields.
48	48-vroid-settings-connect	App window	Static	Connect affordance / not-yet-connected state.
49	49-vroid-browser-success	Full screen	Static	Browser authorize success together with app showing connected (one full desktop frame).
50	50-vroid-license-gate	App window	Static	Hearted-model conditions of use gate.
51	51-vroid-gate-open-hub	App window	GIF	From the gate, open View on VRoid Hub (or equivalent) to the model page.

Batch 4 — Optional galleries (only if Batch 1–3 feel thin)

ID	Suggested filename	Frame	Type	What to capture
28	28-camera-bust	App window	Static	Default bust framing.
29	29-camera-fuller	App window	Static	Fuller / pulled-back framing.
30	30-lighting-panel	App window	Static	Lighting section expanded (skip if 27 is enough).
31	31-avatar-transform	App window	Static	Avatar transform section (skip if 27 is enough).
37–39	37-avatar1 … 39-avatar3	App window	Static	Optional 2×2 gallery with 20; skip if 19 is enough.
42–45	42-pose-…	App window	Static or short GIF	Optional VRMA pose gallery (2×2 at ~75% display size).

Out of scope for contributors picking this up: changing Electron/React code; replacing 91-multi-avatar-strip.png; rewriting architecture/roadmap/credits docs; closing older motion-GIF tracking issues unless a maintainer asks.

Maintainer follow-up after assets: embed under the visual rules above; remove obsolete screenshots from docs/screenshots/ when unused; note in CONTRIBUTING that product GIFs/PNGs are replaced in place with stable names when the UI changes.

Checklist

• I searched existing issues for a duplicate