feitangyuan/motion-web

解決的問題

motion-web 解決了創意網頁開發中的「AI 滑稽感（AI slop）」問題——即 AI 生成的動畫往往過於通用、線性且缺乏物理真實感。它提供了一個框架，用於構建高觸感、以運動為先的網站，將運動視為核心材質而非裝飾性附加物，確保互動體驗自然且專業。

工作原理

該項目作為 AI 代理（如 Claude）和前端工程師的「技能」使用。它結合了一組物理定律（如彈簧阻尼系統、各向異性力、Verlet 積分）與嚴格的驗證系統。為防止合成漂移或無回應互動，它使用基於 Playwright 的無頭預言機（verify_case.py），透過數學方式斷言位移比、形變誤差和狀態收斂，確保程式碼實際按預期運行。

適用對象

專為希望使用原生 Three.js、Canvas 2D、WebGL 和 CSS 構建高階、創意性互動網站的 AI 代理和前端工程師設計，無需依賴重型建構工具或外部 CDN。

主要亮點

• 物理驅動的運動：實現真實世界物理，包括二階彈簧阻尼系統和步進抖動，帶來觸覺反饋。
• 自動化驗證：包含無頭測試套件，數學驗證動畫和互動是否正常運行。
• 零依賴：所有案例均為獨立運行的單檔案 HTML 頁面，無外部網路依賴。
• 多樣化的案例研究：提供七個經驗證的互動範例，涵蓋軟體時鐘、WebGL2 墨水人群、因果生態系統和 Verlet 繩簾等。