# Animate Text Skill：让 Agent 能创建好看的文字动画

- 来源：meng shao (@shao__meng)
- 发布时间：2026-05-16 19:23
- AIHOT 分数：67
- AIHOT 链接：https://aihot.virxact.com/items/cmp8admwa0h1wslnzk18v8zka
- 原文链接：https://x.com/shao__meng/status/2055610047175238118

## AI 摘要

Animate Text Skill 将复杂的文字动画描述转化为机器可读的 JSON 规格，使 AI Agent 能通过查表而非直觉生成动画。其架构分为两层：可移植的“动机合约”描述库无关的动画语义意图；精确的“复现合约”提供针对 WAAPI、Motion、GSAP 等渲染栈的适配细节。该技能封装了24种按字符、词、行、整体分类的动画效果，仅交付规格而非绑定特定栈的实现，从而支持在 Remotion、CSS、Lottie 等多种环境中使用。

## 正文

Animate Text Skill：让 Agent 能创建好看的文字动画

这个 Skill 把 "反复复杂模糊的风格描述" 翻译成 "可执行规格"，把 24 种精心打磨的文字动画固化为机器可读的 JSON，让 Agent 不再凭直觉生成动画，而是查表执行。

来自 Pixelpoint @alex_barashkov 安装地址：
https://pixelpoint.io/skills/animate-text/

架构上的两层设计
1. assets/specs/*.json -- 可移植的"动机合约"（portable motion contract）
描述动画的语义意图：目标粒度（整体/逐字/逐词/逐行）、入场出场时长、缓动曲线、from/to 状态、stagger 节奏、swap 切换策略。它是库无关的，意图能在 GSAP、Motion、WAAPI、CSS、Lottie、Rive 任意栈中复刻。

2. assets/effects/*.json -- 精确的"复现合约"（exact reproduction contract）
包含完整的渲染器算法、播放循环、运行时倍率、舞台宿主要求、渲染契约，以及针对 WAAPI/Motion/GSAP 三个库的适配器映射（imports、时间单位转换、缓动转换、关键帧形态、完成回调、库特定注意事项）。

这种分层很关键：当用户说"用 Framer Motion 做一个 Apple 风的标题"，agent 走 portable 路径足够；当用户说"在我的 Remotion 项目里 1：1 复刻你网站上 kinetic-center-build 那个效果"，必须走 exact effects 路径。

24 种文字动画效果的分类
· per-character（字符级）：soft-blur-in、per-character-rise、typewriter、bottom-up-letters、top-down-letters、stagger-from-center、stagger-from-edges
· per-word（词级）：per-word-crossfade、spring-scale-in、shared-axis-y、blur-out-up、depth-parallax-words、kinetic-center-build、short-slide-right、short-slide-down
· per-line（行级）：mask-reveal-up、line-by-line-slide
whole（整体）：micro-scale-fade、shimmer-sweep、fade-through、shared-axis-x/z、scale-down-fade、focus-blur-resolve

与同类方案的差异
市面上类似的动画"库"通常走两条路：要么是 React 组件库（绑定栈），要么是 CSS 动画合集（绑定渲染方式）。这个 skill 走第三条路--只交付规格，不交付实现。

带来的直接好处：
· 在 Remotion 里能用（关键帧驱动）
· 在 Motion/GSAP 里能用（命令式时间轴）
· 在纯 CSS 里能用（keyframes + animation-delay）
· 在 Lottie/Rive 里也能用（设计师按规格在 AE 里手搓）

代价是 agent 必须做翻译工作--而这正是 skill 存在的意义：把翻译规则也写清楚（references/implementation-notes.md、library-adapters.json）。

### 引用推文

> Alex Barashkov：Teach your AI agents to create beautiful text animations. Exact specs wrapped as a skill - timings, curves, and effects. Library-agnostic, so it works with Remo...