一个把动效灵感变成可用素材的地方

我们做什么

网上的动效灵感很多，但大多停在“好看”这一步。Motion Atlas 把每条灵感拆成可直接使用的部分：一段能喂给 AI 的中文提示词，或一段能粘进项目的代码，再补上使用说明、依赖情况与注意事项。

收录标准

• 来源公开可引用，且能追溯到原始页面。
• 能独立复现，不依赖闭源资源或私有素材。
• 有明确的适用场景，而不只是炫技演示。
• 标注技术栈、动效时长与依赖，方便判断能否直接用。

五个来源

• Motion Sites：动效网站案例合集，适合找整体氛围与页面级灵感。
• React Bits：React 动效组件集合，代码直接可用。
• Uiverse：社区贡献的纯 CSS 组件库，零依赖居多。
• Anime.js：轻量 JavaScript 动画库，擅长时间轴与补间控制。
• Aceternity UI：偏视觉冲击的 React + Tailwind 组件。

版权说明

所有素材版权归原作者所有。本站仅做整理、中文说明与索引，每条素材都标注来源链接与许可提示。商用前请阅读对应来源站点的授权条款。如果你是作者且希望调整或下架某条内容，可通过详情页的反馈入口联系我们。

常见问题

• 收藏会同步到账号吗？不会。收藏、历史与偏好都只保存在本机浏览器，可在偏好设置页导出备份。
• 代码复制后跑不起来？先看详情页的依赖与注意事项，多数问题来自缺少依赖或框架版本差异。
• 提示词可以直接用吗？可以，但建议按你的项目补充技术栈与设计约束，效果会更稳定。
• 怎么投稿？在投稿页提交，会先进入审核队列，通过后转为草稿由编辑补齐说明再上架。

技术实现

前端为原生 HTML / CSS / JavaScript，无构建步骤；后端是 Express + SQLite 单文件数据库。整站可以用 node app.js 直接启动，方便本地部署与二次修改。