AGENT SKILL
vfx-text-cursor
Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros.
- License 许可
- MIT
- 最近更新
- 2026-09-12
- Stars
- ★ 2
- Forks
- 1
01 前言 Front Matter
- od
- { "mode": "video", "preview": { "type": "html", "entry": "index.html", "reload": "debounce-100" }, "surface": "video", "featured": 0.15, "scenario": "video", "upstream": "https://github.com/nexu-io/html-anything", "design_system": { "requires": false }, "example_prompt": "Use the VFX Text Cursor template to turn my content into a video-intro quote reveal with cursor light trails, chromatic rays, and directional flares. Preserve the template's visual signature, use real content and data, and avoid lorem ipsum or placeholder images.", "example_prompt_i18n": { "zh-CN": "用「VFX 文字光标」模板把我的内容做成一段「光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句」。保持模板的视觉签名,使用真实内容和数据,避免 lorem ipsum 和占位图片。" } }
- name
- vfx-text-cursor
- tags
- [ "vfx", "text", "cursor", "chromatic", "reveal", "frame" ]
- emoji
- ✨
- en_name
- VFX Text Cursor
- zh_name
- VFX 文字光标
- category
- video
- featured
- 38
- scenario
- video
- example_id
- sample-vfx-text-cursor
- aspect_hint
- 1920×1080 (16:9)
- description
- Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros.
- recommended
- 7
- example_desc
- 光标打字 hot pink + cyan 像散, 视频开场用
- example_name
- VFX 光标 · 开场金句
- en_description
- Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros.
- example_format
- markdown
- zh_description
- 光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句
- example_tagline
- 逐字揭示 + chromatic 拖光
- example_source_url
- https://hyperframes.heygen.com/catalog
- example_source_label
- hyperframes · vfx-text-cursor
02 资源文件 3
- 参考文档example.md225 B
- 参考文档source/index.html3.5 KB
- 参考文档template.html-video.yaml1.8 KB
03 SKILL.md 正文
【模板: VFX 文字光标 (Text Cursor)】 【意图】视频开场/Hero 帧 —— 光标在画布上"打字", 文字逐字浮现, 后面拖着彩色像散尾迹 + 定向光斑。Inspired by hyperframes vfx-text-cursor。
【画布】1920×1080, 背景 #06070a 暗哑黑 或 #0a0d12 (有暖偏蓝); 加微妙 vignette。
【内容】
- 一句金句 (中英不限), 居中, 字号 6-8vw, weight 700, 字体
Inter Tight/Source Sans 3/Noto Sans SC。 - 逐字揭示, 每个字符 80ms 间隔; 当前字符后面跟着一个 cursor
▍(或细 vertical bar)。 - 已揭示文字默认白色
#f5f5f7, opacity 1; 即将揭示位置加 chromatic ghost: 一份text-shadow: 2px 0 #ff3b6f, -2px 0 #00d4ff在 reveal 瞬间, 200ms 内收敛回正常。 - 光标本身: 16px 宽矩形, 颜色 = accent (取 1: hot pink
#ff3b6f/ cyan#00d4ff/ amber#ffb547), 闪烁@keyframes1.0s 周期; 后面拖一条 60-120px 的 motion blur trail (径向渐变到透明)。
【光斑 / 射线】
- 在打字位置附近随机生成 3-5 道定向光斑 (light leak): 用
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:21mono)。
【设计细节】
- 绝不: 多色彩虹 chromatic (只用 1 个 hot pink + cyan 这种二元像散, 不要 R/G/B 全色)。
- 字体: 西文
Inter TightBold; 中文Noto Sans SCBold; 严禁衬线。 - 动效用
@keyframes+ JS 计时器 (setTimeout逐字), 可被prefers-reduced-motion关闭 (直接显示所有字)。 - 必须用用户提供的金句; 不要捏造。
- 单文件 HTML, 不要外链字体以外的资源。
04 同仓库更多 Skills
weekly-report-ab-market-stub
暂无简介
★ 2
report-csv-ab-market-stub
暂无简介
★ 2
office-pptx-ab-market-stub
暂无简介
★ 2
novel-writer-ab-market-stub
暂无简介
★ 2
meeting-minutes-ab-market-stub
暂无简介
★ 2
md-to-pdf-ab-market-stub
暂无简介
★ 2