Empro Labs 交互动画

Empro Labs 动画

为每个页面设计和构建一种新的动画机制。每个页面都是一个本地的、独立的演示，包含占位品牌文案，以便适配任何业务，包括房地产。

请求

来自斜杠命令的用户请求：

$ARGUMENTS

如果上方请求为空，则提出一个问题：我们应该构建哪种机制或部分，或者从哪个参考中学习？然后开始工作流程。

知识库（阅读，不要猜测）

文件	何时阅读
references/thinking-process.md	始终阅读，在选择机制之前。如何发明一个机制并证明其合理性
references/used-designs.md	始终阅读。已使用的字体系列、字体和调色板，避免重复
references/mechanic-library.md	始终阅读。25 个已构建的系列和约 26 个已测试但尚未构建的想法
references/design-language.md	步骤 3。字体配对、调色板、布局和文案规则，以及应避免的内容
references/technique-recipes.md	步骤 4。可用的构建模块：倾斜、FLIP、粒子、物理、WebGL、音频等
references/real-estate-applications.md	当需求是房地产或房产部分时
references/premium-quality-bar.md	步骤 6。必须和应该项列表，以及报告模板
references/build-and-test-process.md	步骤 5 和 6。命名规则、测试清单、之前遇到的错误
references/mechanics-catalogue.md	当需要现有示例的详细信息时
references/layered-stack-hyperframe.md	请求是分层或堆叠的 3D 悬停效果

规则

1. 发明，而非重复。 选择一个不在 used-designs.md 中的机制系列，或者更改输入和视觉创意，使其能够通过 thinking-process.md 中的新颖性测试。
2. 重建，而非复制。 当用户指向一个参考网站时，研究其行为和技巧，然后编写新的代码、文案和布局。绝不复制其他网站的代码、文本、标志、字体或图像。
3. 占位品牌。 除非用户提供品牌，否则使用虚构的品牌文案。不要添加邮箱、电话号码、客户名称或真实数据。在每个演示中标注为概念。
4. 仅限本地。 在 localhost 上提供页面。除非用户要求，否则不要连接到 GitHub、Vercel 或任何其他主机。
5. 每页一个标志性时刻。 其他所有内容保持平静。
6. 报告前测试。 无控制台错误，交互工作正常，375 像素屏幕无侧向滚动，已处理减少动画偏好，内容在无动画时仍可阅读。说明未测试的内容。
7. 唯一 ID 和带前缀的类名。 诸如 .top 或 .unit span 之类的通用名称会导致页面出错。

工作流程

1. 阅读知识库 以了解请求：thinking-process.md、used-designs.md、mechanic-library.md。
2. 在回复中草拟 页面：访客和目标、原生元素、输入、标志性时刻、辅助动画、降级方案。使用 thinking-process.md 第 4 节。
3. 选择设计语言： 选择一种未在 used-designs.md 最后三行中使用过的显示字体、一种强调色、一个文本对比度达到 4.5:1 的调色板。使用 design-language.md。
4. 创建文件夹 <mechanic>-site/。将 templates/starter-site/ 复制到其中，然后替换文案、调色板、字体和标志性时刻。从 technique-recipes.md 构建动画机制。
5. 提供页面并测试，在文件夹内运行 python -m http.server <port>。从 8000 开始使用下一个可用端口。在 1440 像素和 375 像素宽度下运行 build-and-test-process.md 中的检查清单。
6. 对照 premium-quality-bar.md 评判。在报告前修复任何失败的必须项。
7. 使用 premium-quality-bar.md 中的模板报告。
8. 记录： 如果用户保留该页面，则在 used-designs.md 中添加一行，如果它是一个新系列，则在 mechanic-library.md 中标记为已构建。

示例

examples/ 包含 25 个可运行的演示，包括中性分层堆叠示例。要尝试它们，请在 examples/ 文件夹内运行 python -m http.server 8000，然后打开一个文件夹，例如 http://localhost:8000/layered-stack-hyperframe/。

模板

文件夹	用途
templates/starter-site/	每个新页面的起点。布局、令牌、揭示效果、倾斜和减少动画偏好已预先配置

降级方案链

• 用户提及一个参考但未提供页面供研究 → 请求 URL 或屏幕录制。不要仅凭名称猜测动画机制。
• 某个机制需要浏览器缺失的功能（WebGL、Web Audio、基于滚动的 CSS）→ 先构建降级方案，再构建功能特性，并说明测试了哪些浏览器。
• 完全没有请求 → 从 mechanic-library.md 中提出两个尚未构建的系列，并询问用户选择哪一个。
• 请求针对真实房产（真实列表、真实价格、真实照片）→ 使用占位数据，并说明这一点，然后在正式上线前请求真实内容。