无尽俄罗斯套娃

做一个单文件 HTML 作品：**无尽俄罗斯套娃（Infinite Matryoshka）**。 屏幕中央**一个精美的 DOM 盒子**（不是图片，必须用 HTML/CSS/SVG 自己绘制）。点击它，盒子打开，里面是**下一个稍微更复杂的盒子**——再点击再打开……层级越深，UI **越迷幻或越抽象**。 要求： - **永远点不到底**——递归无止境 - 不能因为 DOM 节点累积过多而卡死 - 盒子风格要随层级演化，不要每一层长得一样 可以使用外部 CDN 资源，但是禁止使用外部图片。 直接输出完整可运行的单文件 HTML。

做一个单文件 HTML 作品：**无尽俄罗斯套娃（Infinite Matryoshka）**。 要求如下： ```` ### 初始状态 - 页面正中央展示**第 1 个**盒子——必须是**精美的、写实的**DOM 绘制（用 div / SVG / CSS 实现），不能用任何图片 - 第 1 个盒子建议是经典风格——比如真实的俄罗斯套娃彩绘 / 古董珠宝盒 / 木匣 / 锦缎包装 - 盒子要有打开 / 关闭的状态——视觉上有盒盖、有合上时的接缝、点击时有"开盖"动画 ### 递归规则 - 用户**点击**当前盒子 → 盒盖打开 → **新的盒子从内部弹出 / 浮现** → 自动成为下一层焦点 - 每一层有一个层级编号（depth=1, 2, 3, ...） - **层级深度不设上限**——用户能一直点下去到 depth=99999 也不能卡死 ### 风格演化（核心创意点） 层级越深，盒子的视觉风格应当**越抽象 / 越迷幻 / 越非现实**。模型需要设计一条"风格演化曲线"，例如： - depth 1-5：写实彩绘 / 木雕 / 锦缎（古典工艺感） - depth 6-15：金属机械 / 蒸汽朋克 / 嵌套齿轮 - depth 16-30：几何抽象 / 蒙德里安式 / 网格线条 - depth 31-50：故障艺术 / glitch / 像素崩坏 - depth 51-100：超现实 / 埃舍尔无尽阶梯式 / 反物理结构 - depth 101+：纯粹抽象 / 文字盒子 / 概念性视觉（"这是一个盒子"作为视觉本身） - depth 1000+：彩蛋区——可以发生奇异变化（盒子开始反过来包含上一层 / 盒子是一首诗 / 盒子是一段代码） 不要求严格按上面分段，**模型自由设计**演化路径，但必须能感觉到"越深越奇怪"。 ### 虚拟化（最关键的工程考点） - 任何时刻 DOM 中**最多保留 N 层**（建议 N=3-5：当前层 + 周围两三层） - 超过 N 层的旧盒子从 DOM 中**卸载**——只保留状态记录（depth、风格种子） - 用户**反向回退**（用 ESC 键或后退按钮）时，旧盒子**按状态记录重建** - 不允许内存里存储无限深的盒子 React tree / DOM 引用 ### 视觉与交互 - 盒子打开 / 关闭都要有平滑过渡（推荐 300-500ms 的弹性曲线） - 新盒子从打开的内部"浮现 / 上升"，给用户"我钻进去了"的感觉 - 盒子周围背景应当随深度变化——颜色 / 模糊度 / 噪点逐渐演化，强化"沉入"的氛围 - 屏幕一角显示**当前层级数**（如 "Depth: 47"）让用户有递归的存在感 - 提供**回退**功能（ESC 键或角落小按钮），层层回退到最外层 ### 技术约束 - 输出一个完整的单文件 HTML，所有自己写的 CSS 和 JS 内联 - 可以使用 CDN 引入字体、图标库、动效库 - **禁止使用图片资源**——所有盒子的绘制必须靠 HTML / CSS / SVG / Canvas - 简体中文界面（深层抽象层可以混入英文 / 符号 / 装饰文字） ````