vfx-text-cursor

Original：🇨🇳 Chinese

Translated

Cursor with trailing light + chromatic aberration rays + directional light flares, ideal for revealing golden phrases word by word in video openings

7installs

Sourcenexu-io/open-design

Added on2026-05-16

NPX Install

npx skill4agent add nexu-io/open-design vfx-text-cursor

SKILL.md Content (Chinese)

View Translation Comparison →

【Template: VFX Text Cursor】【Purpose】Video Opening/Hero Frame —— The cursor "types" on the canvas, with text appearing word by word, followed by a colorful chromatic aberration trail + directional light flares. Inspired by hyperframes vfx-text-cursor.

【Canvas】1920×1080, background

#06070a

(dull black) or

#0a0d12

(warm blue tint); add subtle vignette.

【Content】

A golden phrase (Chinese or English), centered, font size 6-8vw, weight 700, font
```
Inter Tight
```
/
```
Source Sans 3
```
/
```
Noto Sans SC
```
.
Reveal word by word, with an 80ms interval between each character; a cursor
```
▍
```
(or thin vertical bar) follows the current character.
Revealed text defaults to white
```
#f5f5f7
```
, opacity 1; add a chromatic ghost at the upcoming reveal position: a
```
text-shadow: 2px 0 #ff3b6f, -2px 0 #00d4ff
```
that converges back to normal within 200ms at the moment of reveal.
Cursor itself: 16px wide rectangle, color = accent (choose 1: hot pink
```
#ff3b6f
```
/ cyan
```
#00d4ff
```
/ amber
```
#ffb547
```
), blinking with
```
@keyframes
```
in a 1.0s cycle; followed by a 60-120px motion blur trail (radial gradient to transparent).

【Light Flares / Rays】

Randomly generate 3-5 directional light flares near the typing position: use a slender rectangle with
```
linear-gradient(45deg, transparent, accent20, transparent)
```
and
```
mix-blend-mode: screen
```
, at irregular angles.
When typing is complete, add a 0.5s shimmer sweep (light band sweeping across) to the entire text.

【Fields】

Top caption (uppercase letterspace 0.18em, 11px, opacity 0.5): "FRAME 01 · OPENING".
Subtitle below the text (24-28px, opacity 0.6): Source / Chapter.
Bottom-right timecode (
```
00:03:21
```
mono).

【Design Details】

Strictly No: Full-color rainbow chromatic aberration (only use binary aberration like hot pink + cyan, not full R/G/B colors).
Font: Western
```
Inter Tight
```
Bold; Chinese
```
Noto Sans SC
```
Bold; serif fonts are strictly prohibited.
Animations use
```
@keyframes
```
+ JS timers (
```
setTimeout
```
for word-by-word reveal), and can be disabled by
```
prefers-reduced-motion
```
(display all text directly).
Must use the golden phrase provided by the user; do not fabricate.
Single-file HTML, no external resources other than linked fonts.

vfx-text-cursor

NPX Install

Tags

SKILL.md Content (Chinese)