무료GitHub에 공개한국어 소개

vfx-text-cursor

영상 도입부에 쓸 짧은 문구를 빛 효과와 함께 한 글자씩 나타나는 HTML로 만듭니다. 발광 커서와 색상 어긋남, 광선을 조합하고 출처나 장 제목을 덧붙일 수 있습니다.

원문원문 설명 보기

Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros.

nexu-io/open-design

AI 평가100점/ 100 설치 방법 보기

이럴 때 유용합니다

인용문으로 영상 시작
빛나는 글자로 장 도입 화면 제작
도입 문구에 인용 출처 추가
동작 줄이기 설정을 지원하는 문자 효과

한국어 소개

할 수 있는 일

vfx-text-cursor는 사용자가 제공한 문구를 한 글자씩 표시하는 영상 도입 화면을 단일 HTML로 만듭니다. 어두운 배경의 굵은 글자에 빛나는 커서, 색상 어긋남이 있는 잔상, 대각선 광선을 조합합니다. 모든 글자가 나타나면 빛의 띠가 가로지릅니다. 인용 출처나 장 이름을 담는 부제와 오른쪽 아래 타임코드도 배치합니다.

이럴 때 유용합니다

짧은 인용문이나 메시지를 영상 도입부에서 인상적으로 보여 줄 때 적합합니다. 글자가 중심인 오프닝이나 장의 시작 화면에 활용합니다. 글자 표시 간격과 빛의 색상까지 정해진 템플릿이므로 일정한 표현을 유지하며 내용을 바꿀 수 있습니다.

사용 예시

“이 인용문을 한 글자씩 나타나는 영상 도입 화면으로 만들어 주세요.”
“청록색 커서를 사용하고 아래에 인용 출처를 넣어 주세요.”

주의 사항

사용할 문구는 사용자가 제공해야 합니다. 화면은 1920×1080 가로형을 기준으로 하며 외부 참조는 글꼴로 제한합니다. 동작은 CSS와 JavaScript로 구현하고, prefers-reduced-motion에서는 전체 문구를 즉시 표시합니다. 영상 파일로 내보내는 절차는 기재되어 있지 않습니다.

이 소개문은 공개된 SKILL.md를 바탕으로 AI(OpenAI Codex)가 작성했습니다. 정확한 사양은 아래 원문을 확인하세요.

객관 평가

AI가 SKILL.md의 내용만을 근거로 4가지 관점에서 판정했습니다. 스타 수나 인기도는 판정에 넣지 않았습니다.

지시의 명확성언제 쓰고 무엇을 하는지 알 수 있는가: A양호영상 도입부 문자 효과라는 용도와 한 글자씩 표시하는 방식 및 빛 효과가 명시되어 있습니다.
절차의 구체성절차·입출력·예시가 구체적으로 적혀 있는가: A양호화면 크기, 80밀리초 글자 간격, 배색, 단일 HTML 파일 출력이 지정되어 있습니다.
안전성전송·삭제·명령 실행 등을 명시하고 있는가: A양호외부 참조를 글꼴로 제한하며 동작 줄이기 설정에서는 전체 문구를 즉시 표시하도록 지정합니다.
도입의 용이성필요한 도구나 API 키가 적고 적혀 있는가: A양호단일 HTML에서 CSS와 JavaScript를 사용하며 API 키나 전용 도구 요구는 없습니다.

총점은 각 항목을 A=25점, B=15점, C=5점으로 더한 값입니다. 2026년 10월 20일 기준으로 AI(OpenAI Codex)가 판정했습니다. 참고용이므로 설치 전에 원문도 확인해 주세요.

평가가 다르다고 생각되면 재검토를 요청하기

포함된 파일(3)

SKILL.md3.6 KB
example.html3.5 KB
example.md225 B

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

리뷰

아직 리뷰가 없습니다. 사용해 본 소감을 남겨 주세요.

로그인 없이 쓸 수 있습니다. 사용 후기, 질문, 작동하지 않은 환경 등을 편하게 남겨 주세요.

아직 댓글이 없습니다. 첫 댓글을 남겨 보세요.

같은 저장소의 스킬