Vfx Text Cursor
This generates a single-frame video intro with a typing cursor that reveals text word by word, dragging hot pink and cyan chromatic aberration trails and directional light flares behind it. It's built for 1920×1080 dark backgrounds and uses Inter Tight or Noto Sans SC at 6–8vw bold. Each character appears with an 80ms delay, a blinking vertical cursor bar, and a motion-blurred trail that fades out radially. When the text finishes, a shimmer sweep runs across the whole quote. The chromatic separation is deliberately binary, not full RGB rainbow, and the whole thing ships as a single HTML file with CSS keyframes and setTimeout loops. Good for cold opens or hero frames when you need that glitchy kinetic energy without After Effects.
- skills.sh installs
- 2.7K
- GitHub stars
- 106.9K
- last updated
- Aug 21, 2026
Install
$ npx -y skills add nexu-io/open-design --skill vfx-text-cursor --agent claude-codeInstalls into .claude/skills of the current project.
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)。
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/nexu-io/open-design
- Categories
- Design & UI/UX, Office & Documents
- First seen
- Jun 3, 2026
More from nexu-io/open-design
All 217- Frame Macos Notification2.7K
- Social X Post Card2.7K
- Impeccable Design Polish2.7K
- Social Reddit Card2.7K
- Social Spotify Card2.7K
- Weread Year In Review Video Template2.5K
- Emilkowalski Motion2.4K
- Research Decision Room2.3K
- Gsap Performance2.3K
- Gsap Plugins2.3K
- Gsap Frameworks2.2K
- Gsap Utils2.2K
- Ecommerce Image Workflow2.2K
- High End Visual Design2.1K
- Brandkit2K
- Redesign Existing Projects2K
- Image To Code2K
- Gpt Taste2K
- Od Contribute1.9K
- Export Download Debugging1.9K
- Stitch Design Taste1.9K
- Reference Design Contract1.9K
- Pr Feedback Quality Gate1.9K
- Minimalist Ui1.9K
Recommended
More Design & UI/UX
video-podcast-makeragents365-ai/365-skillsUse when the user gives a topic and wants an automated topic-driven narrated explainer, podcast, or knowledge-summary video (Bilibili / YouTube / Xiaohongshu / 2.7Kskills.sh installs
social-reddit-cardnexu-io/open-designRealistic Reddit post card with vote rail and comment count, suited to video overlays or story sharing.2.7Kskills.sh installs
react-spring-physicsfreshtechbro/claudedesignskillsPhysics-based animation library combining React Spring (spring dynamics, gesture integration, 60fps animations) and Popmotion (low-level composable animation ut2.6Kskills.sh installsscroll-reveal-librariesfreshtechbro/claudedesignskillsSimple scroll-triggered reveal animations using AOS (Animate On Scroll). Use this skill when building marketing pages, landing pages, or content-heavy sites req2.6Kskills.sh installs
scientific-visualizationk-dense-ai/scientific-agent-skillsCreate and audit truthful, accessible, publication-ready scientific figures with Matplotlib, Seaborn, or Plotly. Use for figure design, multi-panel layouts, unc2.6Kskills.sh installs
control-uicursor/pluginsBuild or adapt a local browser/CDP harness to drive and inspect a web, IDE, or Electron UI. Use for local UI verification, screenshots, accessibility snapshots,2.5Kskills.sh installs