Web & Frontendlow risk

vfx-text-cursor

Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros.

nexu-io/open-design·plugins/_official/examples/vfx-text-cursor/SKILL.md

60/ 100推荐值

↓

导入这个 Skill

选择你的 coding agent，复制项目级或个人级安装命令。

固定到平台收录的 commit

导入当前项目.agents/skills/vfx-text-cursor

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/_official/examples/vfx-text-cursor -a codex -y

导入个人环境~/.agents/skills/vfx-text-cursor

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/_official/examples/vfx-text-cursor -a codex -g -y

手动放置目录.agents/skills/vfx-text-cursorOfficial docs ↗

导入当前项目.claude/skills/vfx-text-cursor

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/_official/examples/vfx-text-cursor -a claude-code -y

导入个人环境~/.claude/skills/vfx-text-cursor

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/_official/examples/vfx-text-cursor -a claude-code -g -y

手动放置目录.claude/skills/vfx-text-cursorOfficial docs ↗

导入当前项目.agents/skills/vfx-text-cursor

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/_official/examples/vfx-text-cursor -a github-copilot -y

导入个人环境~/.copilot/skills/vfx-text-cursor

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/_official/examples/vfx-text-cursor -a github-copilot -g -y

手动放置目录.agents/skills/vfx-text-cursorOfficial docs ↗

导入当前项目.agents/skills/vfx-text-cursor

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/_official/examples/vfx-text-cursor -a cursor -y

导入个人环境~/.cursor/skills/vfx-text-cursor

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/_official/examples/vfx-text-cursor -a cursor -g -y

手动放置目录.agents/skills/vfx-text-cursorOfficial docs ↗

导入当前项目.agents/skills/vfx-text-cursor

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/_official/examples/vfx-text-cursor -a gemini-cli -y

导入个人环境~/.gemini/skills/vfx-text-cursor

npx skills add https://github.com/nexu-io/open-design/tree/7533db3f4342d09b27368fa5d907ebd3cdb93b75/plugins/_official/examples/vfx-text-cursor -a gemini-cli -g -y

Native Gemini CLI

gemini skills install https://github.com/nexu-io/open-design.git --scope workspace --path plugins/_official/examples/vfx-text-cursor

手动放置目录.agents/skills/vfx-text-cursorOfficial docs ↗

⚠ 安装命令使用开源 skills CLI。执行前请检查来源、脚本和权限。

Skill 指令

在 GitHub 查看原始文件 ↗

【模板: 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, 不要外链字体以外的资源。