docs: lead with the evidence chain and shrink the demo GIF - #57
Conversation
Recompress the launch demo and reorder the top of both READMEs so the first screenful sells the evidence chain instead of a limitation. Demo GIF: 6.75 MB -> 2.81 MB (-58%), same 8.08s and 12.5fps. Regenerated from the 25fps mp4 rather than re-encoding the lossy GIF, with dither=none (Bayer dithering adds noise to the flat dark UI and defeats inter-frame compression), a 64-colour diff palette, and 880px width (GitHub renders README images at ~890px, so 960 was downscaled anyway). cropdetect confirms all 8.08s use the full frame, so nothing is cropped; trimming the bottom would have cut the Network response payoff. READMEs (en + zh): - Move the ASCII evidence chain above the GIF. It is plain text, so it renders before the image finishes downloading. - Add a DevTools contrast line to state the differentiator up front. - Move the Vite-first callout below the demo. The boundary stays prominent, but readers now see what the tool does before its limits. - Tighten the lead description. - Fold the scope and unavailable-evidence caveats into "What the inspector reports" rather than dropping them. Co-Authored-By: Claude Opus 5 <[email protected]>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 687c393386
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| For static text or an element without a dynamic decision, CauseScope simply shows the exact source code and component location. Missing or ambiguous evidence is marked unavailable instead of being invented. | ||
| React DevTools can tell you that `canRefund` is `false`. CauseScope tells you why it is `false`. | ||
|
|
||
|  |
There was a problem hiding this comment.
When maintainers regenerate this README asset with the existing export:demo package script, examples/vite-react-19/scripts/export-demo.ts still emits a 960×960 GIF at 12 fps using a 128-color stats_mode=full palette, while the newly committed GIF is 880×880 at 12.5 fps with a 64-color stats_mode=diff palette. Consequently, the repository's supported regeneration path will overwrite this optimization and restore the larger encoding; update the export filter to encode the parameters used for the committed asset.
Useful? React with 👍 / 👎.
| ``` | ||
|
|
||
| For static text or an element without a dynamic decision, CauseScope simply shows the exact source code and component location. Missing or ambiguous evidence is marked unavailable instead of being invented. | ||
| React DevTools can tell you that `canRefund` is `false`. CauseScope tells you why it is `false`. |
There was a problem hiding this comment.
In the showcased implementation, canRefund is a plain local derived variable in examples/vite-react-19/src/pages/RefundPage.tsx, not a prop, hook, or state value exposed by React DevTools; the comparison table below likewise limits DevTools to components, props, and hooks. Thus DevTools cannot directly report that this binding is false, making the new headline comparison factually misleading; contrast its visible component-level inputs with CauseScope's captured local decision instead.
Useful? React with 👍 / 👎.
| **Click any UI. Trace the cause.** | ||
|
|
||
| The local-first evidence inspector for React. Select an ordinary page element and follow it to the exact TSX, live decision, state transition, prop, store, or request that produced it. | ||
| Select any element in your React app and follow it back to the exact TSX, the decision that produced it, and the state or response behind that decision. |
There was a problem hiding this comment.
For static text or any element without a dynamic expression, this new lead promises that selecting "any element" reaches a decision plus backing state or response, even though the repository's own caveat at line 60 says those elements expose only source and component location. Qualify the English and Chinese leads with evidence availability so the first-screen product claim does not manufacture a causal chain for inputs that cannot have one.
AGENTS.md reference: AGENTS.md:L9-L9
Useful? React with 👍 / 👎.
1 participant
Recompress the launch demo and reorder the top of both READMEs so the first screenful sells the evidence chain instead of a limitation.
Demo GIF: 6.75 MB → 2.81 MB (−58%)
Same 8.08s, same 12.5fps, same content.
causescope-demo-x.mp4rather than re-encoding the already-lossy GIF.dither=none— the main win. Bayer dithering adds noise across the flat dark UI and defeats GIF inter-frame compression.stats_mode=diff; the dark UI never used 128.cropdetectconfirms all 8.08s use the full 960×960 frame, so nothing is cropped — trimming the bottom would have cut off theGET /api/orders/4821payoff. Verified the closing frames still renderdisabled = true, the condition tree, the network row, andresponse.data.order.statuscleanly, with no banding in the dark gradients.READMEs (en + zh)
Checks
pnpm verify:linkspasses.🤖 Generated with Claude Code