docs: productize readme launchpad

Author: hrniux

README.md

@@ -5,8 +5,8 @@
 </p>
 
 <p align="center">
-  <strong>43 playable browser-native mini games and interactive experiments.</strong><br />
-  Built with vanilla JavaScript, Canvas, and zero framework overhead.
+  <strong>A browser-native launch shelf for mini games, pixel experiments, and interactive demos.</strong><br />
+  Open fast. Play immediately. Fork without ceremony.
 </p>
 
 <p align="center">
@@ -18,6 +18,7 @@
 
 <p align="center">
   <a href="./index.html"><strong>Open the collection</strong></a> ·
+  <a href="https://hrniux.github.io/demoCodex/"><strong>Play the live site</strong></a> ·
   <a href="./CONTRIBUTING.md"><strong>Contribute a new idea</strong></a> ·
   <a href="./.github/project-about.md"><strong>GitHub About copy</strong></a>
 </p>
@@ -29,7 +30,100 @@ DemoCodex 聚焦于“无需构建、打开即玩”的浏览器体验。当前
 
 如果这个仓库给你带来一个可复用的玩法灵感、一个值得拆解的页面结构，或者只是给你 5 分钟好玩的浏览器时光，欢迎直接点个 Star。
 
-## Why People Star This Repo
+## Launchpad
+
+<table>
+  <tr>
+    <td width="33%" valign="top">
+      <h3>Play The Shelf</h3>
+      <p><a href="./index.html"><strong>Open the collection</strong></a></p>
+      <p>
+        直接进入主入口，按分类、搜索、排序、收藏和最近打开记录快速找到下一页要玩的作品。
+      </p>
+    </td>
+    <td width="33%" valign="top">
+      <h3>Open The Source</h3>
+      <p><a href="https://github.com/hrniux/demoCodex"><strong>Browse the repo</strong></a></p>
+      <p>
+        主推页面持续拆成 <code>HTML + src/css + src/js</code> 结构，适合直接拆解、复用和改造。
+      </p>
+    </td>
+    <td width="33%" valign="top">
+      <h3>Run The Rig</h3>
+      <p><strong><code>npm run check:manifest</code> + <code>npm run test:browser</code></strong></p>
+      <p>
+        首页数量、README 声明和本机 Chrome 浏览器回归已经接成统一验证链路。
+      </p>
+    </td>
+  </tr>
+</table>
+
+## Featured Shelf
+
+<table>
+  <tr>
+    <td width="50%" valign="top">
+      <h3><a href="./neon-heist.html">neon-heist</a></h3>
+      <p><strong>Turn-based neon stealth.</strong></p>
+      <p>巡逻同步推进、EMP 停滞、诱饵错位和撤离路线计算放在同一局节奏里。</p>
+      <p>
+        <img alt="Genre" src="https://img.shields.io/badge/type-stealth-111827?style=flat-square" />
+        <img alt="Feel" src="https://img.shields.io/badge/feel-clever-38bdf8?style=flat-square" />
+      </p>
+    </td>
+    <td width="50%" valign="top">
+      <h3><a href="./orbit-rescue.html">orbit-rescue</a></h3>
+      <p><strong>Orbital recovery under pulse timing.</strong></p>
+      <p>环带换位、停滞脉冲和节拍式移动结合得很紧，最适合展示仓库的策略节奏感。</p>
+      <p>
+        <img alt="Genre" src="https://img.shields.io/badge/type-orbital%20strategy-111827?style=flat-square" />
+        <img alt="Feel" src="https://img.shields.io/badge/feel-tense-22c55e?style=flat-square" />
+      </p>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <h3><a href="./magnet-forge.html">magnet-forge</a></h3>
+      <p><strong>Pixel push-box with magnetic pressure.</strong></p>
+      <p>磁力牵引、供电目标和巡检火花追击叠在一起，完成度和可复用性都很高。</p>
+      <p>
+        <img alt="Genre" src="https://img.shields.io/badge/type-pixel%20strategy-111827?style=flat-square" />
+        <img alt="Feel" src="https://img.shields.io/badge/feel-clean-38bdf8?style=flat-square" />
+      </p>
+    </td>
+    <td width="50%" valign="top">
+      <h3><a href="./cavern-blast.html">cavern-blast</a></h3>
+      <p><strong>Blast timing and swarm pressure.</strong></p>
+      <p>延时爆炸、碎岩清障和虫群追击的可围观感很强，适合作为仓库的视觉型代表作。</p>
+      <p>
+        <img alt="Genre" src="https://img.shields.io/badge/type-pixel%20blast-111827?style=flat-square" />
+        <img alt="Feel" src="https://img.shields.io/badge/feel-loud-f59e0b?style=flat-square" />
+      </p>
+    </td>
+  </tr>
+  <tr>
+    <td width="50%" valign="top">
+      <h3><a href="./mind-lab.html">mind-lab</a></h3>
+      <p><strong>Light interactive content, not just games.</strong></p>
+      <p>证明仓库不只会做街机，也能把轻互动内容页做得简洁、清楚而且好点开。</p>
+      <p>
+        <img alt="Genre" src="https://img.shields.io/badge/type-interactive%20content-111827?style=flat-square" />
+        <img alt="Feel" src="https://img.shields.io/badge/feel-accessible-22c55e?style=flat-square" />
+      </p>
+    </td>
+    <td width="50%" valign="top">
+      <h3><a href="./compound_interest.html">compound_interest</a></h3>
+      <p><strong>Visualization with narrative payoff.</strong></p>
+      <p>图表、故事线和滚雪球演示被整合成一个完整案例，能看出仓库的另一条产品化路线。</p>
+      <p>
+        <img alt="Genre" src="https://img.shields.io/badge/type-visual%20experiment-111827?style=flat-square" />
+        <img alt="Feel" src="https://img.shields.io/badge/feel-polished-38bdf8?style=flat-square" />
+      </p>
+    </td>
+  </tr>
+</table>
+
+## Why It Hits
 
 - Instant payoff: 绝大多数页面不需要构建，拉下来就能打开试玩。
 - Wide taste range: 同一个仓库里既有像素策略、经典益智，也有知识型互动与创意实验页。