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. 每頁一個 signature moment。 其他一切保持平穩。
6. 測試後再回報。 沒有主控台錯誤，互動正常運作，375 像素螢幕沒有橫向捲軸，已處理減少動畫設定，且內容在無動畫狀態下可讀。說明你未測試的項目。
7. 唯一 ID 和前置類別名稱。 例如 .top 或 .unit span 這類通用名稱會破壞頁面。

工作流程

1. 根據請求閱讀知識庫： thinking-process.md、used-designs.md、mechanic-library.md。
2. 在回覆中草擬頁面： 訪客與目標、原始元素、輸入、signature moment、輔助動畫、降級方案。使用 thinking-process.md 的第 4 節。
3. 選擇設計語言： 一個未在 used-designs.md 最後三行使用過的顯示字型、一個強調色、一個具有 4.5:1 文字對比度的色板。使用 design-language.md。
4. 建立資料夾 <mechanic>-site/。 將 templates/starter-site/ 複製到其中，然後取代文案、色板、字型和 signature moment。從 technique-recipes.md 中建構機制。
5. 在資料夾內使用 python -m http.server <port> 提供服務和測試。 從 8000 往上使用下一個可用的連接埠。在 1440 px 和 375 px 下執行 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 scroll-driven） → 先建置降級方案，再建置功能，並說明測試了哪些瀏覽器。
• 完全沒有請求 → 從 mechanic-library.md 中提出兩個尚未建置的系列，並詢問使用者想選哪一個。
• 請求是真實的房地產物件（真實列表、真實價格、真實照片） → 使用佔位數據，說明這一點，並在頁面上線前要求提供真實內容。