Vfx Text Cursor
- 1.6k installs
- 82k repo stars
- Updated July 28, 2026
- nexu-io/open-design
vfx-text-cursor is an open-design skill for VFX-style text cursor motion marketing visuals.
About
The vfx-text-cursor skill from open-design generates VFX-style text cursor motion graphics following open-design template constraints for web marketing prototypes. It preserves template visual signatures with real content instead of placeholders. Use when developers need stylized cursor text effects for promotional visuals or social-ready motion frames within the open-design system.
- open-design VFX text cursor template for marketing visuals.
- Prototype web surface with HTML preview patterns.
- Requires real content; avoids lorem ipsum placeholders.
- Generative media text motion styling focus.
- Part of nexu-io open-design card and frame library.
Vfx Text Cursor by the numbers
- 1,610 all-time installs (skills.sh)
- +123 installs in the week ending Jul 28, 2026 (Skillselion tracking)
- Ranked #180 of 1,340 Generative Media skills by installs in the Skillselion catalog
- Security screen: LOW risk (skills.sh audit)
- Data as of Jul 28, 2026 (Skillselion catalog sync)
vfx-text-cursor capabilities & compatibility
- Capabilities
- vfx text cursor template rendering · open design visual signature preservation · real content enforcement without placeholders · marketing prototype html preview integration
- Use cases
- marketing · ui design · video generation
What vfx-text-cursor says it does
vfx-text-cursor
npx skills add https://github.com/nexu-io/open-design --skill vfx-text-cursorAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 1.6k |
|---|---|
| repo stars | ★ 82k |
| Security audit | 3 / 3 scanners passed |
| Last updated | July 28, 2026 |
| Repository | nexu-io/open-design ↗ |
How do I create VFX text cursor motion graphics with the open-design template?
Create VFX-style text cursor motion graphics using open-design template specs for marketing visuals.
Who is it for?
Designers and developers creating open-design promotional text motion frames.
Skip if: Skip for code-only cursor UX patterns without visual template output.
When should I use this skill?
User requests VFX text cursor visuals or open-design motion text templates.
What you get
Styled VFX text cursor visual following open-design template signatures with real copy.
- VFX quote-reveal video frame
- Cursor light-trail composition asset
By the numbers
- Featured score of 38 in the open-design catalog
- 7 recommended uses listed for vfx-text-cursor
- Targets 1920×1080 (16:9) video intro dimensions
Files
【模板: 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, 不要外链字体以外的资源。
<!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>
VFX 光标开场帧
逐字揭示 + chromatic 拖光, hot pink + cyan
金句
Markdown 是给作者的中间过程, HTML 才是给读者的最终形态。
章节标记
FRAME 01 · OPENING
Timecode
00 : 03 : 21
Related skills
Remotion Best PracticesGet Remotion-specific coding guidance that prevents common video rendering mistakes when creating animated React videos.442k4.1k
Remotion RenderGenerate high-quality MP4 videos from React code using Remotion inside an AI coding agent.363k648Ai Video GenerationTurn written prompts into short videos using AI video generation models directly from Cursor or Claude.363k648Ai Avatar VideoGenerate short talking-head videos of custom AI avatars from text prompts.363k648Ai Image GenerationLet their coding agent generate, iterate on, and insert high-quality images directly into web apps, marketing assets, or product features.363k648
Video EditIntelligently route video editing requests to the best RunComfy model without trial-and-error.357k31Forks & variants (1)
Vfx Text Cursor has 1 known copy in the catalog totaling 1 installs. They canonicalize to this original listing.
- nexu-io - 1 installs
FAQ
What does vfx-text-cursor produce?
VFX-style text cursor motion graphics using open-design template visual signatures.
When should I use vfx-text-cursor?
When creating marketing motion text cursor visuals within the open-design template system.
Is vfx-text-cursor safe to install?
Review the Security Audits panel on this page before installing in production.