From 19c52f5e3f42fb754fc154bbd16552c5111df0c5 Mon Sep 17 00:00:00 2001
From: N0zoM1z0 <1705004398@qq.com>
Date: Fri, 9 Oct 2026 11:21:18 +0800
Subject: [PATCH] feat(website): lead with the playable dinosaur example
---
website/README.md | 12 +-
website/evidence/calculator-and-dino.md | 5 +-
website/figures.md | 6 +-
website/public/index.html | 497 +++++++++++++-----------
website/style-guide.md | 2 +
5 files changed, 279 insertions(+), 243 deletions(-)
diff --git a/website/README.md b/website/README.md
index cbe1512324..ae758a8959 100644
--- a/website/README.md
+++ b/website/README.md
@@ -26,7 +26,7 @@ Open . Refresh the browser after editing a file.
## Pages
-- `public/index.html`: compact setup, manual/agent comparison, Calculator percentage example, playable dinosaur reconstruction and case-study overviews.
+- `public/index.html`: compact setup, playable dinosaur reconstruction, manual/agent comparison, Calculator percentage example and case-study overviews.
- `public/examples/dino-lab/index.html`: adjustable-speed mini-game, recovered rule, original-game check and browser analysis steps.
- `public/first-investigation/index.html`: a guided Notes export investigation, from setup to a checked CSV prediction.
- `public/showcase/index.html`: the case-study index.
@@ -98,10 +98,12 @@ their provenance and the scope of the validation claims. The original executable
and complete private Evidence records are not website assets.
The homepage starts with a short installation prompt and the ordinary setup
-command. It compares manual investigation with asking an agent, using the same
-Calculator percentage question. The native excerpt comes from an installed
-model DLL; Microsoft’s public implementation supplies names and a crosscheck.
-The Calculator controls illustrate that rule with generic inputs.
+command, followed immediately by the playable dinosaur example. Its game
+precedes the prompt and code on small screens. The manual/agent comparison
+then explains the investigation using the same dinosaur speed question.
+Calculator follows as a native example: its excerpt comes from an installed
+model DLL, and Microsoft’s public implementation supplies names and a
+crosscheck. Its controls illustrate the percentage rule with generic inputs.
The dinosaur example connects an inspected running script to a new playable
mini-game. `public/assets/dino-speed.js` owns the recovered speed rule and replay;
diff --git a/website/evidence/calculator-and-dino.md b/website/evidence/calculator-and-dino.md
index 67d8160147..e89138d54e 100644
--- a/website/evidence/calculator-and-dino.md
+++ b/website/evidence/calculator-and-dino.md
@@ -1,8 +1,9 @@
# Calculator and dinosaur beginner examples
Evidence collected on 9 October 2026 with the published REA 4.1.0 package.
-The homepage offers compact setup first, then a manual/agent comparison and
-two familiar behavior questions. Prompts and replies are examples based on the
+The homepage offers compact setup first, then a playable dinosaur reconstruction,
+a manual/agent comparison of that investigation, and the Calculator example.
+Prompts and replies are examples based on the
findings below. Selected code and generic inputs are public; raw captures stay
outside the website.
diff --git a/website/figures.md b/website/figures.md
index c94db54f95..a87cf7b19f 100644
--- a/website/figures.md
+++ b/website/figures.md
@@ -44,9 +44,9 @@ rendering at desktop and mobile widths.
## Beginner homepage and dinosaur reconstruction
-The Calculator role comparison and its percentage controls are semantic HTML.
-The assembly comes from a real installed model DLL; the named calculation is
-a readable summary crosschecked against Microsoft’s public source. See
+The dinosaur role comparison and Calculator percentage controls are semantic
+HTML. Calculator’s assembly comes from a real installed model DLL; the named
+calculation is a readable summary crosschecked against Microsoft’s public source. See
[evidence/calculator-and-dino.md](evidence/calculator-and-dino.md).
The dinosaur sequence uses an HTML flow: inspect the loaded script, rebuild the
diff --git a/website/public/index.html b/website/public/index.html
index 747e1715b5..636ade994e 100644
--- a/website/public/index.html
+++ b/website/public/index.html
@@ -62,7 +62,7 @@
what it does.
+ 01 · InspectREA returns the loaded scriptThe agent reads the update function and its speed
+ settings.
+
+
+ 02 · RebuildUse the recovered ruleStart at 6 and add 0.001 while speed is below 13.
+
+
+ 03 · Change and playMake speed adjustableKeep the original acceleration, or choose your own
+ pace.
+
+
+
+
+
+ See the script, checks and how to try the analysis
+
+
+ REA inspected the HTTP browser edition through a local debugging
+ connection and returned the loaded index.js,
+ including its source and digest.
+
+
+
+ Selected settings from the inspected script
+
+
ACCELERATION: 0.001,
+MAX_SPEED: 13,
+SPEED: 6
+
+
+ We called the original game’s update function in a controlled
+ browser check, with obstacles and automatic scheduling disabled.
+ After 4,000 updates, speed was 10.0; after 10,000, it was 13.0,
+ rounded to one decimal.
+
+
+ The new mini-game keeps that speed rule. Its drawing, jumping and
+ collision code are a small teaching implementation.
+ Open the lab to see the new code
+ and run the same speed check.
+
+
+ To inspect the target yourself, follow the
+ browser connection steps
+ using
+ the dinosaur page. Give your agent that page URL and your local debugging
+ endpoint, then copy the prompt above.
+
@@ -175,13 +388,13 @@
Example prompt · CalculatorExample prompt · Dinosaur game
@@ -189,8 +402,8 @@
›Use REA to inspect Windows Calculator. Why does 200 + 10%
- give 220? Show the code behind the % button.Use REA to inspect this dinosaur game. Why does it get
+ faster? Show the speed rule.
@@ -198,11 +411,14 @@
Example explanation from the findings
- With addition, % calculates a percentage of the first
- number.
+ It starts at 6. Each update without a collision adds 0.001
+ while speed is below 13.
- 10% of 200 is 20. Then 200 + 20 = 220.
+ After 4,000 updates, speed is 10.
+ You can replay the rule to check it.
@@ -222,7 +438,7 @@
-
Example 01 · Windows Calculator
+
Example 02 · Windows Calculator
What does the % button actually do?
The answer depends on the operator. Compare addition and
@@ -369,6 +585,30 @@
0x64 = 100
+
+
+ Example prompt · Calculator
+
+
+
+ ›Use REA to inspect Windows Calculator. Why does 200 + 10%
+ give 220? Show the code behind the % button.
+
+
Inspected with REA 4.1.0: Windows Calculator 11.2508.4.0, x64. The
readable summary uses names from Microsoft’s public source to
@@ -390,215 +630,6 @@
-
-
-
-
Example 02 · Chrome’s dinosaur game
-
Find the speed rule. Rebuild it. Change it.
-
- Why does the dinosaur game get faster? Use REA to read the running
- page’s script, then turn the answer into a game you can adjust.
-
-
-
-
-
-
- Example prompt · Dinosaur game
-
-
-
- ›Use REA to inspect this dinosaur game. Why does it get
- faster? Show the speed rule, then build a small version with
- an adjustable speed.
-
- Original rule: start at 6, then increase toward 13.
-
-
- Move the slider to set your own speed. Space or Jump clears a
- cactus.
-
-
-
-
-
-
From the running game to a new version
-
-
- 01 · InspectREA returns the loaded scriptThe agent reads the update function and its speed
- settings.
-
-
- 02 · RebuildUse the recovered ruleStart at 6 and add 0.001 while speed is below 13.
-
-
- 03 · Change and playMake speed adjustableKeep the original acceleration, or choose your own
- pace.
-
-
-
-
-
- See the script, checks and how to try the analysis
-
-
- REA inspected the HTTP browser edition through a local debugging
- connection and returned the loaded index.js,
- including its source and digest.
-
-
-
- Selected settings from the inspected script
-
-
ACCELERATION: 0.001,
-MAX_SPEED: 13,
-SPEED: 6
-
-
- We called the original game’s update function in a controlled
- browser check, with obstacles and automatic scheduling disabled.
- After 4,000 updates, speed was 10.0; after 10,000, it was 13.0,
- rounded to one decimal.
-
-
- The new mini-game keeps that speed rule. Its drawing, jumping and
- collision code are a small teaching implementation.
- Open the lab to see the new code
- and run the same speed check.
-
-
- To inspect the target yourself, follow the
- browser connection steps
- using
- the dinosaur page. Give your agent that page URL and your local debugging
- endpoint, then copy the prompt above.
-
diff --git a/website/style-guide.md b/website/style-guide.md
index c322c1acd2..d8afc1c003 100644
--- a/website/style-guide.md
+++ b/website/style-guide.md
@@ -66,6 +66,8 @@ and the specific facts REA supplies to answer it.
Put compact setup at the beginning of the homepage: a copyable installation
prompt and the ordinary setup command. Follow it with the beginner examples.
+Put the most immediate result first. An interactive example can precede the
+process explanation; on mobile, show the demo before its supporting code.
Show how the reader's task changes using the same question on both sides of a
manual/agent comparison. Let returned evidence make REA's contribution visible.