Vfx Text Cursor

Name: Vfx Text Cursor
Author: nexu-io

nexu-io/html-video

1 installs
4.3k repo stars
Updated June 21, 2026
nexu-io/html-video

This is a copy of vfx-text-cursor by nexu-io - installs and ranking accrue to the original listing.

Helps with ai & agent building tasks.

About

vfx-text-cursor is a Claude Code skill for ai & agent building. It helps developers move faster with AI-assisted coding.

vfx-text-cursor
AI & Agent Building
AI-coding skill

Vfx Text Cursor by the numbers

1 all-time installs (skills.sh)
Data as of Aug 5, 2026 (Skillselion catalog sync)

npx skills add https://github.com/nexu-io/html-video --skill vfx-text-cursor

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

[![Listed on Skillselion](https://skillselion.com/badge/skills/nexu-io/html-video/vfx-text-cursor.svg)](https://skillselion.com/skills/nexu-io/html-video/vfx-text-cursor)

Installs	1
repo stars	★ 4.3k
Last updated	June 21, 2026
Repository	nexu-io/html-video ↗

What it does

Helps with ai & agent building tasks.

Files

SKILL.mdMarkdownGitHub ↗

【模板: 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), 闪烁 @keyframes 1.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:21 mono)。

【设计细节】

绝不: 多色彩虹 chromatic (只用 1 个 hot pink + cyan 这种二元像散, 不要 R/G/B 全色)。
字体: 西文 Inter Tight Bold; 中文 Noto Sans SC Bold; 严禁衬线。
动效用 @keyframes + JS 计时器 (setTimeout 逐字), 可被 prefers-reduced-motion 关闭 (直接显示所有字)。
必须用用户提供的金句; 不要捏造。
单文件 HTML, 不要外链字体以外的资源。

{
  "name": "@html-video/template-vfx-text-cursor",
  "version": "0.1.0",
  "description": "html-video template: vfx-text-cursor (cherry-picked from nexu-io/open-design)",
  "license": "Apache-2.0",
  "private": true,
  "files": ["template.html-video.yaml", "source", "SKILL.md", "example.md", "preview.png"]
}

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>VFX Text Cursor · Opening</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700;800;900&family=Noto+Sans+SC:wght@400;700;900&family=JetBrains+Mono&display=swap" rel="stylesheet" />
<style>
  body { font-family:'Inter Tight','Noto Sans SC',system-ui,sans-serif; background:#06070a; color:#f5f5f7; margin:0; min-height:100vh; overflow:hidden; position:relative; }
  .vignette { position:absolute; inset:0; background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.8) 100%); z-index:1; }
  .grain { position:absolute; inset:0; opacity:0.06; mix-blend-mode:overlay; pointer-events:none; z-index:2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); }
  .mono { font-family:'JetBrains Mono',ui-monospace,monospace; }
  .chip { font-size:11px; letter-spacing:0.18em; text-transform:uppercase; }
  @keyframes blink { 0%, 50% { opacity:1 } 51%, 100% { opacity:0 } }
  .cursor { display:inline-block; width:18px; height:1.05em; background:#ff3b6f; margin-left:6px; vertical-align:text-bottom; animation: blink 1s steps(1) infinite;
    box-shadow: 0 0 24px #ff3b6f, 0 0 8px #ff3b6f, 60px 0 80px rgba(255,59,111,0.6); }
  .chroma {
    text-shadow:
      3px 0 #00d4ff,
      -3px 0 #ff3b6f,
      0 0 40px rgba(255,59,111,0.3);
  }
  .text-line { position:relative; }
  /* directional light leaks */
  .ray { position:absolute; mix-blend-mode:screen; pointer-events:none; z-index:1; }
  .ray-1 { top:30%; left:-10%; width:60%; height:6px; transform:rotate(-12deg); background:linear-gradient(90deg, transparent, rgba(255,59,111,0.6), transparent); filter: blur(8px); }
  .ray-2 { top:55%; right:-10%; width:50%; height:4px; transform:rotate(15deg); background:linear-gradient(90deg, transparent, rgba(0,212,255,0.5), transparent); filter: blur(6px); }
  .ray-3 { top:70%; left:10%; width:40%; height:3px; transform:rotate(-8deg); background:linear-gradient(90deg, transparent, rgba(255,181,71,0.5), transparent); filter: blur(5px); }
</style>
</head>
<body class="flex flex-col items-center justify-center relative">

  <header class="absolute top-12 left-12 right-12 flex items-baseline justify-between chip opacity-50 z-10 mono">
    <span>FRAME 01 · OPENING</span>
    <span>VFX · TEXT CURSOR</span>
    <span>00:03:21</span>
  </header>

  <!-- light rays -->
  <div class="ray ray-1"></div>
  <div class="ray ray-2"></div>
  <div class="ray ray-3"></div>

  <main class="relative z-10 text-center max-w-[1280px] px-12">
    <h1 class="chroma font-black leading-[1.05] tracking-[-0.02em]" style="font-size:clamp(48px,7vw,108px)">
      Markdown 是给作者的<br/>
      中间过程, <span style="color:#ff3b6f">HTML</span> 才是<br/>
      给读者的最终形态<span class="cursor"></span>
    </h1>
    <p class="mt-10 text-[22px] opacity-60 font-medium">
      — Claude Code 团队, 2026
    </p>
  </main>

  <div class="vignette"></div>
  <div class="grain"></div>

  <footer class="absolute bottom-12 left-12 right-12 flex items-baseline justify-between chip opacity-40 z-10 mono">
    <span>HTML-ANYTHING · VFX-TEXT-CURSOR</span>
    <span>HOT PINK × CYAN CHROMATIC</span>
    <span>REC ●</span>
  </footer>
</body>
</html>

spec_version: 1
id: vfx-text-cursor
name: Text + Cursor VFX
description: >
  Typewriter text effect with blinking terminal cursor — perfect for code-style reveals or tech demos.

engine: hyperframes
engine_version: ^0.4.0
source_entry: source/index.html

category: presentation
subcategory: text-card
tags: [text, typewriter, cursor, terminal, code, reveal]

best_for:
  - "Code demo intro"
  - "Tech narrative"
  - "Terminal vibe"

output:
  formats: [mp4, webm]
  default_format: mp4
  resolution:
    default: { width: 1920, height: 1080 }
    supported_aspects: ["16:9", "9:16", "1:1"]
  fps:
    default: 60
    supported: [30, 60]
  duration:
    type: variable
    min_sec: 3
    max_sec: 10
  alpha: false
  audio:
    supported: true
    expected_inputs: [bgm]

inputs:
  schema:
    type: object
    required: [text]
    properties:
      text:
        type: "string"
        maxLength: 240
        description: "Text to type out"
      speed_cps:
        type: "number"
        minimum: 5
        maximum: 40
        default: 15
        description: "Characters per second"
      duration_sec:
        type: "number"
        minimum: 3
        maximum: 10
        default: 5
  examples:
    - {"text": "$ html-video render --template frame-logo-outro", "speed_cps": 15, "duration_sec": 5}

license:
  spdx: Apache-2.0
  attribution_required: false
  redistribution_allowed: true
  commercial_use: true

author:
  name: nexu-io
  url: https://github.com/nexu-io
  contact: open-design@nexu.io

version: 0.1.0
changelog:
  - version: 0.1.0
    date: 2026-05-27
    notes: Cherry-picked from open-design/repo/skills/vfx-text-cursor/example.html

preview:
  poster: preview.png

performance:
  reference_render:
    duration_sec: 5
    render_wall_clock_sec: 9
    machine: "M2 MacBook Air"