触发方式
详情进入时播放一次;点击文字、Enter、空格或工具栏播放按钮可重播。目录悬停演示,离开后显示完整文字。
起点与终点
文字按固定速度逐字打出,末尾光标按时间闪烁。
进入与退出
入场按完整文字时间线展开,完成后保持清晰可读;重播重新执行入场。
内容与参数
当前保存设置:{"kind":"typewriter-text","text":"Hello, World!","fontSize":72,"fontWeight":600,"color":"#171717","charsPerSecond":22,"cursor":true,"cursorColor":"#171717"}。文字采用 1280×720 参考画布,预览按可用空间等比缩放。
时序
时长基准 4000 ms,起始延迟 0 ms。打字速度 22 字符/秒,完整打字需要 591 ms;总播放至少持续到文字打完。
重复操作与打断
重播从头执行文字入场;暂停、预览隐藏和页面后台冻结当前时钟。观察倍速和播放进度不写入配置。文字与参数改动同步预览、说明、Motion、JSON 与导出。
减少动态效果
直接显示完整、清晰的文字,跳过入场动画和光标闪烁;保留文字内容与阅读布局。
默认配置
这些数值来自当前维护的默认配置;编辑器草稿和调整后的导出可以不同。
{
"schemaVersion": 2,
"recipeId": "typewriter-text",
"durationMs": 4000,
"delayMs": 0,
"easing": [
0.22,
1,
0.36,
1
],
"offsetX": 0,
"offsetY": 0,
"scale": 1,
"loop": false,
"interruption": "retarget",
"tracks": [],
"typography": {
"kind": "typewriter-text",
"text": "Hello, World!",
"fontSize": 72,
"fontWeight": 600,
"color": "#171717",
"charsPerSecond": 22,
"cursor": true,
"cursorColor": "#171717"
}
}源码与复用
GitHub 对应示例提供公开渲染源码、默认配置和运行入口。复用前请阅读交互说明,并保留随源码附带的第三方与字体许可;完整网页编辑器由独立工程维护。
用于自己的项目
进入编辑器运行真实预览并比较调整;本说明页不另造一份近似演示。把导出用于自己的项目后,重新检查内容、输入、焦点与布局。
目录来源标注:原创实现. 第三方示例保留自己的许可与署名;公开仓库包含全部当前动效的渲染源码;完整编辑器由独立工程维护。