Saltar al contenido
Marketplace

vfx-text-cursor

de nexu-io

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

Resumen

SKILL.mdLeída en 53231d4

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

Archivos 3 archivos

Instálala a mano

Deska ejecuta esto por ti, para cada agente que elijas. Para ejecutarlo tú en una terminal:

npx skills add nexu-io/open-design --skill vfx-text-cursor

Más de nexu-io

  • ui-ux-pro-maxnexu-ioCatalog-only UI/UX Pro Max entry. The full upstream templates, data, and search workflow are not bundled in OpenDesign.5,200 instalaciones en skills.sh0
  • frontend-designnexu-ioCreate distinctive, production-grade frontend interfaces with strong visual direction, polished typography, considered layout, and working HTML/CSS/JS or framework code. Use for websites, landing pages, dashboards, React components, application screens, and UI beautification.4,600 instalaciones en skills.sh0
  • web-design-guidelinesnexu-ioReview UI code for Web Interface Guidelines compliance by the Vercel engineering team. Covers layout, typography, color, motion, and accessibility for product UI.3,700 instalaciones en skills.sh0
  • creative-directornexu-ioAI creative director with recursive self-assessment: 20+ methodologies (SIT, TRIZ, Bisociation, SCAMPER, Synectics), 3-axis evaluation calibrated against Cannes/D&AD/HumanKind, 5-phase process from brief to presentation.3,200 instalaciones en skills.sh0
  • design-briefnexu-ioParse a structured design brief written in I-Lang protocol format into a concrete design spec. Eliminates ambiguity from vague requests like "make it professional" by requiring explicit dimensions: palette, typography, layout, mood, density, and constraints. Trigger keywords: "design brief", "create a design brief", "ilang brief", "structured brief".3,200 instalaciones en skills.sh0
Todas las skills de nexu-io