Back to Details

animate-text

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Animate Text

文本动画

Use this skill as a text animation catalog backed by canonical 
spec.json
files.
For visible website effects, each spec also carries a 
site_reference
block that explains the additional renderer, playback, runtime, and stage adjustments needed to match the current site version exactly.
This skill ships 24 specs in total. The website currently showcases 20 of them.
将本技能作为由标准
spec.json
文件支持的文本动画目录使用。
对于网站可见效果，每个规范还包含一个
site_reference
块，说明匹配当前网站版本所需的额外渲染器、播放、运行时和舞台调整。
本技能总共包含24个规范，目前网站展示其中20个。

When To Use

使用场景

Use this skill when the request involves:
  • animating headings, labels, counters, editorial copy, or text swaps
  • matching a named effect id such as 
    soft-blur-in
    , 
    typewriter
    , 
    shared-axis-y
    , or 
    kinetic-center-build
  • choosing a motion pattern from a curated catalog and translating it into a target stack
  • reproducing the current website showcase behavior in another stack without relying on example components
当请求涉及以下内容时，使用本技能：
  • 为标题、标签、计数器、编辑文案或文本切换添加动画
  • 匹配指定效果ID，如
    soft-blur-in
    、
    typewriter
    、
    shared-axis-y
    或
    kinetic-center-build
  • 从精选目录中选择运动模式并将其转换为目标技术栈
  • 在不依赖示例组件的情况下，在另一技术栈中重现当前网站展示的行为

Workflow

工作流程

  1. Determine whether the user wants:
    • the exact site version of a visible effect
    • a portable translation of the motion contract
  2. If the user names an effect id, read 
    assets/specs/<id>.json
    or run 
    node scripts/get-spec.mjs <id>
    .
  3. Otherwise use 
    references/catalog.md
    or optionally run: 
    • node scripts/list-specs.mjs
    • node scripts/find-spec.mjs "<query>"
  4. Use the top-level spec fields for the portable motion contract.
  5. If the spec includes 
    site_reference
    , treat that block as the authoritative guide for reproducing the current website version.
  6. If the request includes text replacement, treat 
    swap
    as the portable contract and 
    site_reference.playback
    as the exact website playback behavior.
  1. 判断用户需求：
    • 可见效果的精准网站版本
    • 运动规则的可移植转换版本
  2. 如果用户指定了效果ID，读取
    assets/specs/<id>.json
    或运行
    node scripts/get-spec.mjs <id>
    。
  3. 否则，使用
    references/catalog.md
    ，或可选运行以下脚本： 
    • node scripts/list-specs.mjs
    • node scripts/find-spec.mjs "<query>"
  4. 使用顶层规范字段作为可移植运动规则。
  5. 如果规范包含
    site_reference
    块，将其视为重现当前网站版本的权威指南。
  6. 如果请求包含文本替换，将
    swap
    作为可移植规则，
    site_reference.playback
    作为精准网站播放行为。

Bundled Resources

捆绑资源

  • references/catalog.md
    : compact summary of the bundled spec library
  • references/schema.md
    : field-level schema for canonical spec JSON files
  • references/selection-guide.md
    : heuristics for picking the right effect family
  • references/implementation-notes.md
    : translation notes for common animation stacks
  • assets/specs/*.json
    : canonical spec contracts, including 
    site_reference
    for visible website effects
  • assets/catalog.json
    : visible website catalog order and renderer overrides
  • assets/samples.json
    : sample copy used by the website showcase
  • references/catalog.md
    ：捆绑规范库的精简摘要
  • references/schema.md
    ：标准规范JSON文件的字段级 schema
  • references/selection-guide.md
    ：选择合适效果类别的启发式指南
  • references/implementation-notes.md
    ：常见动画技术栈的转换说明
  • assets/specs/*.json
    ：标准规范规则，包含网站可见效果的
    site_reference
  • assets/catalog.json
    ：网站可见目录顺序和渲染器覆盖配置
  • assets/samples.json
    ：网站展示使用的示例文案

Optional Helper Scripts

可选辅助脚本

The helper scripts are optional deterministic shortcuts. They require Node.js 20+.
  • node scripts/list-specs.mjs
    prints bundled spec metadata as JSON
  • node scripts/get-spec.mjs <id>
    prints one exact bundled spec as JSON
  • node scripts/find-spec.mjs "<query>"
    returns likely matches ranked by metadata
If Node is unavailable, the core skill still works through the Markdown references and JSON assets alone.
辅助脚本是可选的确定性快捷方式，需要Node.js 20+版本。
  • node scripts/list-specs.mjs
    ：以JSON格式打印捆绑规范的元数据
  • node scripts/get-spec.mjs <id>
    ：以JSON格式打印指定的精准捆绑规范
  • node scripts/find-spec.mjs "<query>"
    ：返回按元数据排序的可能匹配结果
如果无法使用Node.js，核心技能仍可通过Markdown参考文档和JSON资源单独运行。

Translation Rules

转换规则

  • Preserve 
    target
    exactly: 
    whole
    , 
    per-character
    , 
    per-word
    , or 
    per-line
    .
  • Map 
    enter
    and 
    exit
    durations, easing, and stagger directly into the target stack.
  • Preserve transform, opacity, blur, scale, rotation, and spacing fields when the target stack supports them.
  • For layout-aware effects such as 
    kinetic-center-build
    or 
    short-slide-down
    , use the 
    build
    block and notes in 
    usage_notes
    to preserve the choreography rather than flattening them into a generic stagger.
  • For exact website-example reproduction, preserve the 
    site_reference.renderer
    , 
    site_reference.playback
    , 
    site_reference.runtime
    , and 
    site_reference.stage
    fields from the spec.
  • Read 
    site_reference.reproduction_notes
    carefully when present. Those notes describe the extra site-specific transformations that are required for visual parity.
  • 严格保留
    target
    值：
    whole
    、
    per-character
    、
    per-word
    或
    per-line
    。
  • 将
    enter
    和
    exit
    的时长、缓动效果和stagger直接映射到目标技术栈。
  • 当目标技术栈支持时，保留变换、透明度、模糊、缩放、旋转和间距字段。
  • 对于布局感知效果（如
    kinetic-center-build
    或
    short-slide-down
    ），使用
    build
    块和
    usage_notes
    中的说明来保留编排逻辑，而非将其简化为通用stagger效果。
  • 如需精准重现网站示例，保留规范中
    site_reference.renderer
    、
    site_reference.playback
    、
    site_reference.runtime
    和
    site_reference.stage
    字段的值。
  • 若存在
    site_reference.reproduction_notes
    ，请仔细阅读，这些说明描述了实现视觉一致性所需的额外站点特定转换。

Notes

注意事项

  • The public website uses a curated subset of the bundled library. The skill can still use additional bundled specs that are not currently visible on the website.
  • assets/specs/*.json
    are the authoritative public contracts.
  • There is no separate public 
    effect.json
    or example-component layer. Exact website reproduction data lives inside the spec's 
    site_reference
    block.
  • Visible website effects carry a 
    site_reference
    block inside the spec. Hidden effects may set 
    site_reference
    to 
    null
    .
  • If a prose note conflicts with a JSON field, prefer the JSON.
  • 公开网站使用的是捆绑库中的精选子集，本技能仍可使用当前网站未展示的其他捆绑规范。
  • assets/specs/*.json
    是权威公开规则。
  • 没有单独的公开
    effect.json
    或示例组件层，精准网站重现数据位于规范的
    site_reference
    块内。
  • 网站可见效果的规范中包含
    site_reference
    块，隐藏效果可能将
    site_reference
    设为
    null
    。
  • 如果文字说明与JSON字段冲突，优先以JSON字段为准。