Agent Skills
› nexu-io/motion-anything
› kinetic-headline
kinetic-headline
GitHub用于为单个英雄标题或视频标题卡添加逐字/逐字母入场动画。遵循无障碍规范，尊重用户减少动态偏好设置。严禁用于正文或需立即阅读的内容，每屏仅限使用一次。
Trigger Scenarios
需要为单行主标题添加入场动画
制作发布视频的标题卡效果
Install
npx skills add nexu-io/motion-anything --skill kinetic-headline -g -y
SKILL.md
Frontmatter
{
"od": {
"mode": "prototype",
"preview": {
"type": "html"
},
"surface": "web",
"category": "animation-motion",
"platform": "desktop",
"upstream": null,
"design_system": {
"requires": false
},
"example_prompt": "Use kinetic-headline on the hero h1: stagger the words in on load (letters mode for the short\neyebrow), short and restrained, with a prefers-reduced-motion fallback."
},
"name": "kinetic-headline",
"triggers": [
"kinetic text",
"animated headline",
"words stagger in",
"文字逐字入场",
"标题动效"
],
"description": "Stagger a headline's words (or letters) in on load, one after another. Use for a single hero\nheadline or a title card in a launch video. Honors prefers-reduced-motion. One per screen;\nnever use on body copy or must-read content.\n"
}
kinetic-headline
Words or letters stagger in, one after another. Part of
motion-anything; obeys MOTION-SPEC.md.
When to use it
- One hero headline or a single key line. Title cards in launch / release videos.
When NOT to use it (restraint)
- Body copy or must-read content. Never more than one kinetic line per screen.
How to apply
- Copy
kinetic-headline.cssandkinetic-headline.jsand link them. - Mark a heading:
<h1 data-kinetic>…</h1>(ordata-kinetic="letters"for short lines).
Accessibility & performance
prefers-reduced-motion: shown immediately. Transform/opacity only.
Version History
- b016900 Current 2026-07-11 17:09
