ClaudeMap

motion-web

动效优先的创意网页 Agent Skill——真实弹簧-阻尼物理、七个可运行案例、自动化 headless 验证专防 AI 垃圾动效。

技能与命令skillmotionwebphysicsfrontend
访问项目feitangyuan/motion-web

motion-web 是一个代码优先、动驱动的创意网页工程 skill，把动效当作界面的核心材质，而不是事后装饰。技术栈是原生 Three.js / Canvas 2D / WebGL2 / CSS。每个案例与蓝图都强制真实物理定律——弹簧-阻尼系统、各向异性力、阶梯抖动、因果生态——且零占位代码。七个交互案例全是单文件 HTML，无需构建工具、不依赖外部 CDN 即可独立运行；每个案例都要通过基于 Playwright 的 verify_case.py 严格断言，用数学手段杜绝 AI 垃圾动效、合成漂移与死交互。文档中英双语。

它做什么

  • 动效是界面的核心材质，先于标记结构规划——不是事后撒上去的
  • 每个案例都是真实物理：弹簧-阻尼系统、各向异性力、阶梯抖动、因果生态
  • 七个单文件 HTML 案例，零构建工具、零 CDN——克隆下来浏览器直接打开
  • 基于 Playwright 的自动化 headless 判据（verify_case.py）逐案例断言——占位代码与死交互会响亮地挂掉

什么时候用

高质感落地页、交互式讲解、动效即卖点的创意编码——并且你要一份「动效仍然活着」的机器验证证明。

如何上手

# 作为 Claude Code skill：
git clone https://github.com/feitangyuan/motion-web.git ~/.claude/skills/motion-web

# 作为 Codex / Antigravity skill：
git clone https://github.com/feitangyuan/motion-web.git ~/.agents/skills/motion-web

注意事项

案例是 skill 模式的教学样本，不是拿来即用的组件库；本地跑验证判据需要装好 Playwright 的 Python 环境。MIT。

代码仓库

feitangyuan/motion-web

收录日期

地图上的相关资源

  • guizang-product-video-skill

    技能

    归藏的 Agent Skill：把代码库的最近更新做成一支成片宣传片——接真实组件、代码渲染动画、代码写配乐，全程不碰视频剪辑软件。

    • agent-skill
    • video
    • promo
    • marketing
    查看

  • geo-sleuth

    技能

    一个给「图里没有任何文字线索」的照片做地理定位的 Agent Skill——用 OSM 几何、高程天际线与卫星瓦片，把「这是哪」变成带误差半径的测量答案。

    • agent-skill
    • geolocation
    • osint
    • openstreetmap
    查看

  • Birdview

    技能

    让 AI 编码 agent 在动第一行代码之前先画出架构、声明影响范围的 skill——成果是一张可直接打开的独立 HTML 架构地图。

    • skill
    • architecture
    • code-visualization
    • change-scope
    查看