HyperFrames字幕组件大全20种kinetic caption风格速查表【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframesHyperFrames 是一款「写 HTML、渲染视频」的开源视频创作工具专为 AI 代理打造Built for agents。本文是 HyperFrames 字幕组件速查表20 种 kinetic caption动态字幕风格一次看全按「语气 → 组件」对号入座零代码也能做出专业字幕动效。HyperFrames 把字幕做成即插即用的 HTML 片段caption component每个组件自带一套视觉身份——字体、配色、逐词动画。给视频加「TikTok 式高亮字幕」或「霓虹发光字幕」时直接在提示词中点名组件即可代理会自动按你的旁白重写字词、适配 9:16 竖屏。什么是 HyperFrames 字幕组件即插即用一个组件 一个 HTML 文件按逐词per-word或逐行per-line驱动动画代理可改写组件 demo 默认 8 秒、横屏、固定词表安装后代理会重写字词与时间轴、按你的画幅缩放两种场景别混淆自己编排的合成视频 → 用本文的 caption 组件已有口播 MP4 → 用/embedded-captions工作流字幕能衬在人物身后20 种 kinetic caption 风格速查表#组件效果一句话适用语气1caption-kinetic-slam全屏单词锤入入场方向交替Hype / 高能量2caption-highlight红色背景扫过当前词TikTok 风格Hype / 卡拉OK3caption-particle-burst关键词触发彩色粒子爆炸Hype / 高能量4caption-emoji-pop表情符号弹出 描边字 横向挤压入场Hype / 高能量5caption-clip-wipe逐词左到右 clip-path 擦除显现Clean / 企业6caption-weight-shift字幕行之间优雅的字体粗细过渡Clean / 企业7caption-editorial-emphasis双字体系统 强调词戏剧性大小对比优雅 / 编辑风8caption-gradient-fill渐变裁切文字 弹性弹跳入场优雅 / 编辑风9caption-neon-glow青 品红霓虹辉光关键词专属强调色霓虹 / 音乐10caption-neon-accent多色霓虹光晕 扭动漂移动画霓虹 / 音乐11caption-glitch-rgbRGB 色散 CRT 扫描线覆盖科技 / 故障风12caption-matrix-decode字符乱码扰码后解译显形科技 / 故障风13caption-pill-karaoke胶囊容器 逐词卡拉OK变色卡拉OK / 歌词14caption-texture流动质感蒙版大字内置 6 种纹理质感 / 电影感15caption-parallax-layers人物身后的 3D 文字分层 纵向拉伸深度 / 3D16caption-blend-difference逐像素自动反色复杂背景也清晰实用17caption-camera-follow句子铺满世界、镜头匀速拉远电影感18morph-text黏液感变形循环一组词文字特效19texture-mask-text大字填充实体材质岩石/木头/金属等文字特效20per-word-rise逐词轻柔上浮显现文字特效按语气选组件8 大风格分组 Hype / 高能量社媒风caption-kinetic-slam全屏单词锤入、caption-highlightTikTok 高亮、caption-particle-burst关键词粒子爆炸、caption-emoji-pop表情弹出。示例提示词Hype captions withcaption-kinetic-slam: one full-screen word per beat, alternating slam-in direction. Clean / 企业风caption-clip-wipe擦除显现、caption-weight-shift字重过渡——适合产品发布、企业讲解克制不抢戏。✒️ Elegant / 编辑风caption-editorial-emphasis强调词大小对比、caption-gradient-fill渐变填充弹跳入场、caption-weight-shift亦可跨界使用。 霓虹 / 夜店 / 音乐风caption-neon-glow、caption-neon-accent——支持「品牌名放大 强调色」「数字换色」这类逐词强调指令。 科技 / 赛博 / 故障风caption-glitch-rgbRGB 色散 扫描线、caption-matrix-decode字符扰码解译——适合科技演示、黑客主题。 卡拉OK / 歌词跟读风caption-pill-karaoke胶囊容器逐词变色、caption-highlight。 质感 / 电影感大字caption-texture内置 6 种可切换纹理lava、marble、metal、wood、concrete、rock通过texture变量指定texture-mask-text则把单个大字填充为实体材质砖、岩、木、金属、熔岩 深度 / 特殊场景caption-parallax-layers文字压在人物身后的 3D 分层caption-blend-difference字幕压在晃动画面上自动反色保可读caption-camera-follow句子几何式扩张、镜头稳定拉远的电影运镜感3 步快速上手 HyperFrames 字幕组件安装组件只写入一个 HTML 文件npx hyperframes add caption-kinetic-slam提示词中点名组件例如/faceless-explainer 30-second vertical explainer. Addcaption-highlightcaptions, TikTok-style — one word highlighted at a time.调旋钮语气Tone、逐词强调「品牌名放大 强调色」「给数字换色」、纹理变量texture: lava、画幅竖屏说 9:16 组件文档统一在 docs/catalog/components/官方选风格对照表见 docs/prompting/captions-catalog.mdx。新手避坑清单官方 5 条失败模式别给每个词都堆重特效——组件本身已逐词动画强调只留给关键词❌ 每个词都粒子爆炸 → ✅ 仅关键词触发caption-particle-burst同一画面别混用两种字幕风格——一个组合或一个段落只留一种身份切换只在明确分段处别把合成片段直接贴到口播视频上——那是抠像/遮挡管线的事口播素材请走/embedded-captions工作流高能量风格别配安静内容——健康品牌配 RGB 故障字幕会打架用caption-clip-wipe这类干净风格别臆造组件名——只有速查表里的组件存在描述语气「教程风、等宽字体、打字机」或直接点名真实组件相关文档索引字幕风格官方目录docs/prompting/captions-catalog.mdx口播视频加字幕工作流docs/prompting/captions-and-talking-heads.mdxStudio 中编辑字幕docs/studio/captions.mdx组件源码示例含完整时间轴写法docs/catalog/components/caption-kinetic-slam.mdx【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考