| 1 | --- |
| 2 | name: vfx-text-cursor |
| 3 | zh_name: "VFX 文字光标" |
| 4 | en_name: "VFX Text Cursor" |
| 5 | emoji: "✨" |
| 6 | description: "Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros." |
| 7 | zh_description: "光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句" |
| 8 | en_description: "Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros." |
| 9 | category: video |
| 10 | scenario: video |
| 11 | aspect_hint: "1920×1080 (16:9)" |
| 12 | featured: 38 |
| 13 | recommended: 7 |
| 14 | tags: ["vfx", "text", "cursor", "chromatic", "reveal", "frame"] |
| 15 | example_id: sample-vfx-text-cursor |
| 16 | example_name: "VFX 光标 · 开场金句" |
| 17 | example_format: markdown |
| 18 | example_tagline: "逐字揭示 + chromatic 拖光" |
| 19 | example_desc: "光标打字 hot pink + cyan 像散, 视频开场用" |
| 20 | example_source_url: "https://hyperframes.heygen.com/catalog" |
| 21 | example_source_label: "hyperframes · vfx-text-cursor" |
| 22 | od: |
| 23 | mode: video |
| 24 | surface: video |
| 25 | scenario: video |
| 26 | featured: 0.15 |
| 27 | upstream: "https://github.com/nexu-io/html-anything" |
| 28 | preview: |
| 29 | type: html |
| 30 | entry: index.html |
| 31 | reload: debounce-100 |
| 32 | design_system: |
| 33 | requires: false |
| 34 | 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." |
| 35 | example_prompt_i18n: |
| 36 | zh-CN: "用「VFX 文字光标」模板把我的内容做成一段「光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句」。保持模板的视觉签名，使用真实内容和数据，避免 lorem ipsum 和占位图片。" |
| 37 | --- |
| 38 | |
| 39 | 【模板: VFX 文字光标 (Text Cursor)】 |
| 40 | 【意图】视频开场/Hero 帧 —— 光标在画布上"打字", 文字逐字浮现, 后面拖着彩色像散尾迹 + 定向光斑。Inspired by hyperframes vfx-text-cursor。 |
| 41 | |
| 42 | 【画布】1920×1080, 背景 `#06070a` 暗哑黑 或 `#0a0d12` (有暖偏蓝); 加微妙 vignette。 |
| 43 | |
| 44 | 【内容】 |
| 45 | - 一句金句 (中英不限), 居中, 字号 6-8vw, weight 700, 字体 `Inter Tight` / `Source Sans 3` / `Noto Sans SC`。 |
| 46 | - 逐字揭示, 每个字符 80ms 间隔; 当前字符后面跟着一个 cursor `▍` (或细 vertical bar)。 |
| 47 | - 已揭示文字默认白色 `#f5f5f7`, opacity 1; 即将揭示位置加 chromatic ghost: 一份 `text-shadow: 2px 0 #ff3b6f, -2px 0 #00d4ff` 在 reveal 瞬间, 200ms 内收敛回正常。 |
| 48 | - 光标本身: 16px 宽矩形, 颜色 = accent (取 1: hot pink `#ff3b6f` / cyan `#00d4ff` / amber `#ffb547`), 闪烁 `@keyframes` 1.0s 周期; 后面拖一条 60-120px 的 motion blur trail (径向渐变到透明)。 |
| 49 | |
| 50 | 【光斑 / 射线】 |
| 51 | - 在打字位置附近随机生成 3-5 道**定向光斑** (light leak): 用 `linear-gradient(45deg, transparent, accent20, transparent)` 的细长矩形 + `mix-blend-mode: screen`, 不规则角度。 |
| 52 | - 当文字打完, 整段文字加 0.5s shimmer sweep (光带横扫)。 |
| 53 | |
| 54 | 【字段】 |
| 55 | - 顶部 caption (uppercase letterspace 0.18em, 11px, opacity 0.5): "FRAME 01 · OPENING"。 |
| 56 | - 文字底下副标 (24-28px, opacity 0.6): 来源 / 章节。 |
| 57 | - 右下角 timecode (`00:03:21` mono)。 |
| 58 | |
| 59 | 【设计细节】 |
| 60 | - **绝不**: 多色彩虹 chromatic (只用 1 个 hot pink + cyan 这种二元像散, 不要 R/G/B 全色)。 |
| 61 | - 字体: 西文 `Inter Tight` Bold; 中文 `Noto Sans SC` Bold; 严禁衬线。 |
| 62 | - 动效用 `@keyframes` + JS 计时器 (`setTimeout` 逐字), 可被 `prefers-reduced-motion` 关闭 (直接显示所有字)。 |
| 63 | - 必须用用户提供的金句; 不要捏造。 |
| 64 | - 单文件 HTML, 不要外链字体以外的资源。 |
| 65 |