manim-scroll
将Manim数学动画与网页滚动播放结合的React/Next.js库。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：manim-scroll。 它的用途是：将Manim数学动画与网页滚动播放结合的React/Next.js库。 完整的 Skill 内容见：https://321skill.com/skills/manim-scroll/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“我正在用Next.js做一个算法教学网站，想在页面中随着用户滚动，动态展示一个快速排序算法的分区过程动画。”，它会引导你安装`@mihirsarya/manim-scroll`，配置next.config.js，并帮你编写一个使用`<ManimScroll>`组件的React页面，将你的算法步骤描述转换为Manim场景代码，生成随滚动播放的动画。
介绍
Manim Scroll 解决了在网页中流畅、高性能地展示复杂数学动画的难题。传统的网页动画库难以实现Manim那样精美的数学图形动画，而直接嵌入视频又无法实现与滚动的精细交互。该库通过在构建时预渲染Manim动画，并在用户滚动时智能播放，完美融合了数学可视化的表现力与网页的交互性。
使用上，开发者只需安装对应的npm包，在Next.js配置中添加插件，然后在React组件中使用
它非常适合需要制作技术演示、教育课件、数据可视化网站或产品展示页面的前端开发者、全栈开发者以及内容创作者。尤其是那些希望用动态、直观的方式解释复杂概念（如算法、数学原理、物理过程）的团队。
需要注意的是，使用此库要求本地或构建环境已安装Python 3.8+和Manim库，这增加了一定的环境配置复杂度。它主要服务于内容展示型场景，对于需要极高频、实时交互的动画游戏等场景可能不是最佳选择。
核心特点
核心区别在于其深度集成Manim引擎，能够将专业的数学动画制作能力带入Web开发工作流，并通过构建时渲染和智能缓存解决了Manim动画在Web端性能与流畅度的瓶颈。
注意事项
不适合需要极低延迟、实时生成或高度交互式动画（如游戏）的Web应用场景。
常见问题
一定要用Next.js吗？
不是必须，但Next.js插件能实现最便捷的构建时渲染。库也提供了React组件和核心运行时，可用于其他React框架或纯前端项目，但需要自行处理渲染流程。
必须安装Python和Manim吗？
是的，因为动画最终由本地的Manim（Python库）渲染。这是实现高质量数学动画的前提，也是主要的环境依赖。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/manim-scroll/raw/index.md 读取 manim-scroll 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/manim-scroll/raw/index.md（查看排版版本）