vfx-text-cursor

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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

【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.