animate-text
一个用于在Next.js项目中生成和展示文本动画效果的工具库。
安装使用
复制下面这段提示词发给你的 AI（Claude / Cursor / TRAE / Codex / WorkBuddy 等），它会自动帮你完成安装：
帮我安装这个 AI Skill：animate-text。 它的用途是：一个用于在Next.js项目中生成和展示文本动画效果的工具库。 完整的 Skill 内容见：https://321skill.com/skills/animate-text/raw/index.md 请读取该页面内容，如果是 SKILL.md 格式直接安装，如果是 README 提炼核心 prompt 后安装。
提示词包含完整的 Skill 内容链接，AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。
使用示例
“为我的Next.js项目首页标题添加一个打字机效果的动画。” AI会引导你使用animate-text库：首先运行 `pnpm generate:animate-text-skill` 从动画目录生成技能包，然后在你的页面组件中引入并使用对应的动画组件，即可快速实现该效果。
介绍
animate-text 是一个专注于文本动画的 Next.js 工具库，旨在解决开发者为网站或应用添加吸引人、高性能文本动画效果的难题。它提供了一套预定义的动画效果和生成工具，帮助开发者快速集成动态文本，无需从零编写复杂的 CSS 或 JavaScript 动画逻辑。
使用方式非常直接，开发者可以通过项目提供的脚本（如 pnpm generate:animate-text-skill）从预设的动画目录生成可直接安装的技能包，然后在自己的 Next.js 项目中引入和使用这些动画组件，从而轻松实现打字机效果、渐变显示、滑动进入等多种文本动画。
这个工具库非常适合前端开发者、UI/UX 设计师以及任何使用 Next.js 框架并希望提升页面视觉交互和用户体验的团队或个人。它尤其适合需要在营销页面、产品展示、博客标题或仪表盘等场景中快速部署高质量动画的开发者。
与同类文本动画库相比，animate-text 深度集成于 Next.js 和现代前端工具链（如 Tailwind CSS、shadcn/ui），并非一个独立的通用 JavaScript 库。它更强调在 Next.js 应用内的开发体验和构建流程，提供了从动画定义、验证到技能生成的一体化工作流，确保动画的一致性和可维护性。
核心特点
深度集成 Next.js 开发工作流，提供从动画目录管理、验证到可安装技能包生成的全套工具链，而非单纯的动画效果集合。其动画效果基于规范的目录结构定义，确保了在不同项目间的一致性和可复用性。
注意事项
主要面向 Next.js 技术栈，对于使用其他框架（如 Vue、Svelte）或纯静态 HTML 的项目并不直接适用。
常见问题
animate-text 支持哪些文本动画效果？
它提供了一套预定义的动画效果（如打字机、淡入、滑动等），具体效果取决于其动画目录（catalog/text-animations）中的配置，开发者可以查看或扩展该目录。
我可以在现有的 Next.js 项目中使用它吗？
可以，通过运行项目提供的生成脚本，可以创建出可安装的技能包，然后将其集成到你的 Next.js 应用中。
给 AI 助手的安装指引
如果你的 AI 编程助手（Claude Code、Cursor、TRAE 等）能看到这个页面，把下面这段发给它即可自动完成安装：
请访问 https://321skill.com/skills/animate-text/raw/index.md 读取 animate-text 的原始 Skill 定义（Markdown 格式），按其中说明在我的环境里完成安装和配置。
AI 可直接读取的原始 Markdown 地址：/skills/animate-text/raw/index.md（查看排版版本）