Skip to content

docs: real screenshots and a real-footage tour video - #28

Merged
webtools-dotcom merged 3 commits into
mainfrom
docs/real-screenshots
Sep 28, 2026
Merged

webtools-dotcom merged 3 commits into
mainfrom
docs/real-screenshots

Conversation

@webtools-dotcom

@webtools-dotcom webtools-dotcom commented Sep 28, 2026 •

Copy link
Copy Markdown
Owner

Summary

Replaces every image of the app with live captures of ZYNLEX in use, and adds a tour video cut from real screen recordings. Supersedes #26.

The captures use a small demo project — a dashboard on localhost:5173 calling an API on localhost:8000, plus a docs site on :4321 — so every shot shows ZYNLEX doing its actual job on localhost.

What changed

  • Screenshots (README + site): new tab with detected servers; network log with the /api/orders response pretty-printed; a mock rule returning 500 next to the dashboard's error state (new); an iPhone 17 Pro viewport; the API client calling the API.
  • Tour video (52 s, 1080p, 8.6 MB): servers → network → Mock this → 500 → empty and slow responses → device viewport → API client. Captions and zoom-ins on the key moments; all app footage is real.
  • README hero GIF (27 s loop, 880 px, 6.9 MB): a quick tour of the whole app — dev servers → network log → Mock this → 500 → iPhone viewport → API client — linking to the full video. Replaces the old v0.9 recording.
  • Site plays the full video under the hero (preload="none", poster frame).
  • Open Graph image rebuilt from the new mocks screenshot.

Screenshots show the panel fixes from #27 (path-first URLs, pretty-printed JSON, folded mock form), so merge #27 alongside this.

Every image of the app is now a live capture of ZYNLEX running a demo
project (a dashboard on :5173 calling an API on :8000):

- README and site screenshots: servers, network log with a
  pretty-printed response, a 500 mock breaking the dashboard, an
  iPhone viewport, and the API client. Adds the mocks shot.
- Tour video (52 s, 1080p) cut from screen recordings of the app in
  use, with captions and zoom-ins on the key moments. README opens
  with a 24 s cut as a GIF; the site plays the full video.
- Open Graph image rebuilt from the new mocks screenshot.
A 15 s loop cut from the real recordings: the new tab lists the local
dev servers, then Mock this turns /api/orders into a 500 and the
dashboard shows its error state. Replaces the teaser GIF and the old
v0.9 screen recording.
27 s loop over every headline feature instead of mocking alone: dev
servers, network log, a 500 mock breaking the dashboard, an iPhone
viewport, and the API client.
@webtools-dotcom
webtools-dotcom merged commit 8a2eaa6 into main Sep 28, 2026
2 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant