Ready to supercharge your AI agents?

Install any skill in seconds. Free to start, no credit card required.

Get Started Free →

Vfx Text Cursor · nexu-io | DecimalAI

nexu-io/vfx-text-cursor

SkillScore61Maintained

光标拖光 + 彩色像散射线 + 定向光斑, 适合视频片头逐字揭示金句

design-mediaby nexu-io

Links this skill to your agents and keeps it current with the author’s updates.

Automatic

Frontend / UI pack

1 · One-time — install the CLI (docs ↗)

pip install decimalai

2 · Get the skill — writes .claude/skills/nexu-io-vfx-text-cursor/SKILL.md

decimalai skills pull nexu-io-vfx-text-cursor --out .claude/skills/

No CLI? Get the same file — curl · raw file

curl -fsSL --create-dirs -o .claude/skills/nexu-io-vfx-text-cursor/SKILL.md https://app.decimal.ai/s/nexu-io-vfx-text-cursor/SKILL.md

Raw file: /s/nexu-io-vfx-text-cursor/SKILL.md ↗ · machine-readable summary at /s/nexu-io-vfx-text-cursor.json ↗

In productionGlobal

how this skill behaves on real traffic · last 30 days

No production data for this skill yet — usage numbers appear here once agents start running it.

Anonymized aggregate across every org using this skill — proof from real production use, not a demo.

Does this skill help? · Benchmark: with vs. withoutsign in to run this on your agents

23 test cases from the publisher’s eval.yaml · each run twice on gemini-3.6-flash — with the skill injected, then without · last run 47d ago

Yes — +35% lift · at higher cost+121% tokens0% turns61% of whole cases pass with skill (14/23)

Test case	Without → With	Effect	Δ tokens	Δ turns
case-03	✗→✓	▲ Improved	11%	0%
case-08	✗→✓	▲ Improved	211%	0%
case-09	✗→✓	▲ Improved	172%	0%
case-10	✗→✓	▲ Improved	254%	0%
case-11	✗→✓	▲ Improved	221%	0%

Showing 5 of 23 cases

SkillSafety

✓ 3 of 3 passed

Code scan15 of 15 checks clean

0 critical · 0 warning · 0 info — scanner v4 — 8/3/2026

live_secretremote_code_executionreverse_shelldata_exfiltrationssrf_metadataagent_snoopinganti_refusaldestructive_commandsobfuscated_unicodeunicode_homoglyphopaque_blobsuspicious_urltool_overreachtrigger_abuseprompt_injection_phrasing

IntentSafe

LLM judge · does the skill do what it claims

ContentClean

LLM judge · policy & harmful-content review

Source

Imported

nexu-io / html-anything

next/src/lib/templates/skills/vfx-text-cursor/SKILL.md

View on GitHub ↗

License Apache-2.0Imported 8/3/2026Version v1

Skill contents

SKILL.md

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

Illustrative Want to see what nexu-io/vfx-text-cursor would put in front of your model? Preview the rendered body and check its trigger phrases — no LLM call, no signup.

Latest benchmark · publisher runVerified

8/12/2026, 16:01 UTC · 23 cases

Lift

+35%

61% vs 26%

Agent turns

0%

1.0 vs 1.0

Tokens

+121%

5,804.61 vs 2,631.57

fail → pass · 11pass → pass · 3fail → fail · 6pass → fail · 3

Per-case results (23)

Case	Status	Duration (ms)			Turns			Tokens			Tool calls
Case	Status	Without	With	Δ	Without	With	Δ	Without	With	Δ	Without	With	Δ
case-01 I need a single-file HTML page for a video hero opening frame. It should showcase the quote 'The future belongs to those who build it' typing out letter-by-letter with a stylized blinking cursor that leaves a motion blur trail. Include subtle chromatic distortion on newly revealed characters, light leak accents around the text, a top header label, a subtitle mentioning the author, and a timecode display in the bottom corner.	fail→fail	30,915	29,251	-5%	1	1	0%	6,227	6,901	+11%	0	0	—
case-02 Can you build a standalone HTML canvas animation for a tech promo video intro? The phrase 'Code is poetry in motion' needs to be dynamically typed onto a dark background with an animated block cursor, subtle light streak overlays, and a glowing sweep effect when complete. Please add a small uppercase category tag at the top and a source attribution below the main text.	fail→fail	32,037	28,671	-11%	1	1	0%	6,212	6,886	+11%	0	0	—
case-03 Create an HTML page for a cinematic text reveal opening sequence featuring the line '行胜于言'. The text should appear character by character with an active cursor, chromatic dispersion shadows, light leaks radiating near the typing point, and a running timecode at the bottom right. Make sure the entire animation is self-contained without external image assets.	fail→pass	32,561	37,505	+15%	1	1	0%	6,209	6,883	+11%	0	0	—
case-04 I'm building a cinematic hero page with light streaks across a dark canvas. I usually use radial gradient glow spots for light leaks, but I want a sleek linear streak behind typing text. What CSS background gradient and blend mode formula should be applied to create subtle angled light leak streaks?	fail→fail	16,413	26,735	+63%	1	1	0%	2,748	6,473	+136%	0	0	—
case-05 I'm coding a text reveal effect in CSS. My default approach for chromatic dispersion is to apply an RGB split text shadow with three colors (red, green, blue). How should the text shadow offset and color palette be defined for a clean two-tone chromatic ghost during reveal?	fail→fail	17,226	28,155	+63%	1	1	0%	3,008	6,650	+121%	0	0	—
case-06 We are designing a typing text reveal animation for a video intro frame. Users with prefers-reduced-motion enabled might experience discomfort from continuous typing motion and blinking cursors. How should CSS media queries handle this preference for the text reveal layout?	pass→pass	12,813	24,609	+92%	1	1	0%	2,055	6,025	+193%	0	0	—
case-07 I want to create a stylized rectangular block cursor for a tech intro sequence. Standard cursors are usually 2px or 4px thin lines. What dimensions and trail effect should be used for a prominent block cursor in a 1080p hero frame?	fail→fail	14,756	28,805	+95%	1	1	0%	2,272	6,868	+202%	0	0	—
case-08 Create a minimalist header metadata bar for a video title frame. I am tempted to style it with 14px bold lowercase text in white. What exact font size, letter spacing, opacity, and text transformation should be applied to the top frame label?	fail→pass	13,452	32,820	+144%	1	1	0%	2,115	6,586	+211%	0	0	—
case-09 Below the main 7vw quote on a video hero slide, I need a subtitle line showing the source attribution. I usually make subtitles 14px with 100% opacity. What are the recommended font size range and opacity settings for this secondary attribution text?	fail→pass	12,059	25,311	+110%	1	1	0%	1,981	5,398	+172%	0	0	—
case-10 When the typing animation finishes displaying the full sentence on the screen, I want a light sweep effect to run across the text. What duration should be assigned to this completion shimmer sweep?	fail→pass	9,894	23,185	+134%	1	1	0%	1,611	5,710	+254%	0	0	—
case-11 I am choosing a background color for a dark mode video opening scene. Pure black `#000000` is my standard go-to, but I want a subtle cinematic dark hue with depth. Which hex code palette options provide the right dark tone?	fail→pass	26,157	29,192	+12%	1	1	0%	2,140	6,868	+221%	0	0	—
case-12 When pacing character-by-character text reveal in JavaScript for a video hero opening, fast typing usually runs at 20ms while slow typing runs at 200ms per character. What precise time interval should be set per character for this cinematic cursor layout?	fail→pass	11,755	24,736	+110%	1	1	0%	1,916	6,138	+220%	0	0	—
case-13 For a video frame UI overlay, where should the timecode element be positioned and what mono-spaced timestamp format should be rendered by default?	fail→pass	12,891	24,196	+88%	1	1	0%	2,124	5,867	+176%	0	0	—
case-14 I want to display a hero quote in Chinese and English on a cinematic opening slide. I'm considering using Georgia or Playfair Display for a classic literary look. Which sans-serif font families are strictly required and what font weights/styles are prohibited?	fail→pass	15,416	23,666	+54%	1	1	0%	2,407	5,640	+134%	0	0	—
case-15 I'm setting up CSS variable accent colors for the block cursor and light streak highlights. I usually pick bright lime green `#00ff00` or electric blue `#0000ff`. What specific accent color hex codes are defined for this theme?	fail→pass	6,643	5,798	-13%	1	1	0%	1,174	1,711	+46%	0	0	—
case-16 When adding chromatic dispersion effects behind text reveal animations, CSS authors often use full RGB spectrum split shadows (Red, Green, Blue offsets). What is the strict design restriction regarding chromatic dispersion colors?	fail→pass	9,449	3,704	-61%	1	1	0%	1,437	1,352	-6%	0	0	—
case-17 What cycle duration should be assigned to the blinking animation `@keyframes` for the main accent block cursor?	pass→pass	10,533	3,731	-65%	1	1	0%	1,666	1,228	-26%	0	0	—
case-18 I am sizing the central quote on a 1920x1080 canvas layout. I normally set main titles to 32px or 48px fixed font-size. What viewport-based font size range and font-weight should be used for the central hero sentence?	fail→pass	12,877	24,856	+93%	1	1	0%	2,571	6,071	+136%	0	0	—
case-19 I'm generating the code for a VFX text reveal hero banner. Should I separate the JavaScript into an external main.js, CSS into styles.css, and import external SVG library files?	fail→fail	13,453	25,992	+93%	1	1	0%	2,290	6,854	+199%	0	0	—
case-20 I'm building a standard responsive dashboard layout with a sidebar and a main content grid using CSS Flexbox and Grid. How do I vertically and horizontally center a card element inside a flexible flex container?	pass→pass	9,548	25,243	+164%	1	1	0%	1,937	6,855	+254%	0	0	—
case-21 I need a simple pure CSS loading spinner with a smooth infinite rotation animation for a web app form submission button. How do I create a border spinner animation in CSS?	pass→fail	8,162	26,360	+223%	1	1	0%	1,701	6,848	+303%	0	0	—
case-22 I want to add a micro-interaction hover effect to a set of navigation SVG icons in a web navbar, changing fill color and adding a subtle scale transition. How do I implement this in CSS?	pass→fail	10,539	27,441	+160%	1	1	0%	2,324	6,855	+195%	0	0	—
case-23 How do I implement smooth scrolling navigation for single-page web landing pages using CSS scroll-behavior and HTML anchor links?	pass→fail	11,445	27,397	+139%	1	1	0%	2,401	6,839	+185%	0	0	—

These cases were also screened by the skill’s intent / safety pass.See the Trust review ↗Reproduce this benchmark in Colab ↗

How this skill was measured

DecimalAI ran this skill against gemini-3.6-flash twice over the same eval suite — once with the skill loaded and once without — and compared the two runs case by case. 23 cases were attempted. The headline lift of +35 percentage points is the difference between those two pass rates over the 23 comparable cases. 3 cases got worse with the skill loaded, and they are included in that figure.

Model measured: gemini-3.6-flash
Graded by: gemini-3.6-flash
Grading method: judged
Verification: verified
Pass rate without the skill: 26.1%
Pass rate with the skill: 60.9%
Cases attempted: 23
Cases counted toward lift: 23
Cases that regressed: 3
Skill version measured: v1
Run completed: 8/12/2026, 16:01 UTC

Measured example — same prompt, with vs. without the skill · from the benchmark run · case case-03

Prompt

Create an HTML page for a cinematic text reveal opening sequence featuring the line '行胜于言'. The text should appear character by character with an active cursor, chromatic dispersion shadows, light leaks radiating near the typing point, and a running timecode at the bottom right. Make sure the entire animation is self-contained without external image assets.

Without the skill loaded, the model failed this case. With it loaded, the same prompt on the same model passed. This is one improved case from the latest verified run; every case, including any that regressed, is in the table above.

Show both answers

SkillScore blends 4 signals1 of 4 complete

BenchmarkPass rate WITH skill on a verified run61

Live evalNeeds ≥10 evaluated traces in 30 days

AI ratingNeeds ≥10 rated traces

AdoptionNeeds ≥10 serves across ≥2 orgs in 30 days

Efficiency · separate axis (at equal correctness)+0% turns+149% tokens

Shown for transparency; not credited unless a verified run shows no correctness regression.

Backed by 1 of 4 signals — each added signal makes the score more robust.

Verified on gemini-3.6-flash · re-tested 46 days ago

Other measured skills in the registry, with their headline benchmark lift.