用途:视频开场或 Hero 帧的文字动效模板,光标在画布上“打字”,金句逐字浮现,光标后拖彩色像散尾迹与定向光斑。灵感来自 hyperframes vfx-text-cursor。
主要能力:画布 1920×1080,背景 #06070a 或 #0a0d12,带微妙 vignette。居中金句字号 6-8vw、weight 700,字体 Inter Tight / Source Sans 3 / Noto Sans SC。逐字揭示间隔 80ms,当前字符后跟 cursor ▍ 或细竖条。已揭示文字 #f5f5f7;揭示瞬间加 chromatic ghost(text-shadow: 2px 0 #ff3b6f, -2px 0 #00d4ff),200ms 内收敛。光标 16px 宽矩形,取 hot pink #ff3b6f / cyan #00d4ff / amber #ffb547,1.0s 闪烁,后拖 60-120px 径向渐变到透明的 motion blur trail。打字位置附近随机生成 3-5 道定向光斑,用 linear-gradient(45deg, transparent, accent20, transparent) 细长矩形加 mix-blend-mode: screen。文字打完后整段加 0.5s shimmer sweep。字段含顶部 caption(uppercase、letterspace 0.18em、11px、opacity 0.5,如 “FRAME 01 · OPENING”)、文字下副标(24-28px、opacity 0.6,来源/章节)、右下角 timecode(如 00:03:21 mono)。
使用方式:单文件 HTML,除字体外不引外链资源;动效用 @keyframes 加 JS 计时器(setTimeout 逐字)。
限制:只用二元像散(hot pink + cyan),不做多色彩虹 chromatic;西文用 Inter Tight Bold、中文用 Noto Sans SC Bold,严禁衬线;必须使用用户提供的金句,不得捏造;需支持 prefers-reduced-motion,开启时直接显示所有字。