安装并选效果
安装 AnimeFX，从 88 个效果或 8 个场景案例里选择接近你需求的方案。
npm install @voltwake/animefx效果目录
卡片内快速播放，进入独立详情页可调节全部参数、重播并复制调用代码。门户始终只保留一个活动预览，避免耗尽 WebGL 上下文。
正在读取效果目录…
三步接入
已有设计系统就直接导入；没有时可以去 Design by Curio 挑一套。AnimeFX 会沿用其中的颜色和字体，你只需要选择效果并调整参数。
导入设计系统
已有 `design.md` 就直接导入；没有时，可以去 Curio 从 1000+ 设计系统中挑选并下载，也可以让 AI 通过 Curio MCP 获取。本站就是活例子——界面风格全部来自「景德甜白」design.md，动效全部来自 AnimeFX。
打开详情并微调
进入任意效果详情页，直接调整速度、强度、数量等参数；满意后复制调用代码——浏览器用 `<script>` 引入 `lib/anime-fx.js`，工程里 `import '@voltwake/animefx'` 即可调用。
去效果目录调参数 →或者，一句话交给 AI
装好 animefx 后，把下面这句话交给你的 AI 编程助手即可。
在本项目中使用 animefx（没装先 npm install @voltwake/animefx）：读取 node_modules/@voltwake/animefx/AGENTS.md，按其中的指引检索合适的动效并应用到我的需求上。Demo 案例
8 个可以直接打开的真实场景页面——SaaS 首屏、数据仪表盘、App 宣传、电商详情、作品集、活动落地、AI 对话、行情数据。点击卡片预览图即可在弹窗内直接观看，1920×1080 画面会等比缩放到窗口；Web / Video 标签表示该场景更贴近网页还是程序化视频用法。
开源与参与
网站负责展示，代码库独立维护。所有发布文件、贡献约定和安全报告入口都在 GitHub 仓库中。