kinetic-typography

用途：为标题、标语、标题卡、歌词视频、字幕揭示等制作动态文字（kinetic typography）动画，并支持变量字体（字重、宽度、斜度、光学尺寸）动画、文字沿路径运动、文字描边绘制和逐字符变形效果。\n\n主要能力：按行、词或字符拆分文本并错开显现；提供遮罩掀起、模糊淡入、clip-path 擦除、字符错开四种揭示技法；输出网页端 CSS、GSAP、Framer Motion 或视频端 Remotion 的可运行代码，另含 After Effects 表达式方案。\n\n使用方式：先定稿静态排版（行高、字距、对齐、字重），再选择拆分粒度并施加揭示动画。以独立 HTML 文件交付，无需构建步骤；动画驱动只用一种（CSS @keyframes 或单个 GSAP 时间轴）。在 document.fonts.ready 之后拆分文本，并加入冻结装置，通过 ?t=N 参数固定帧以便截图验证。可用 npx playwright screenshot --wait-for-timeout=500 "file://$PWD/type.html?t=0.4" frame-mid.png 截图，并配合 scripts/seek-shot.sh 与 scripts/contact-sheet.sh 检查起始、中间、结束帧。\n\n时间原则：入场用 ease-out（cubic-bezier(0.16, 1, 0.3, 1)），每片段 400-600ms，行错开 60-100ms、词 40-70ms、字符 20-40ms，总时长控制在约 800ms 内。\n\n限制与注意：按字符拆分会破坏屏幕阅读器读取与复制粘贴，需在容器设置 aria-label 完整文本，并对拆分片段设 aria-hidden="true"；须遵循 prefers-reduced-motion（无动画展示最终状态）；变量字体动画需确认字体为变量字体及轴范围，否则数值会被静默截断。其他价格、平台与授权信息暂未提供。