사용 방법
- 설치 명령을 복사하고 자신의 에이전트 환경에 설치하기 전에 소스 패키지를 확인하세요.
- 필요한 도구, 인증 정보, 지원 환경은 원본 문서에서 확인하세요.
- 입력과 원하는 산출물을 설명하고 출처와 결과를 대조하세요.
npx skills add https://github.com/nexu-io/open-design --skill vfx-text-cursor시작 전 확인
- 설치에는 모델 구독, API 한도, 파일 접근 권한이 포함되지 않습니다.
- 별점 수와 설치 수는 활동 지표이며 독립적인 품질·보안 검증이 아닙니다.
원본 Skill 문서
원본 저장소의 제목, 예시, 코드, 표, 링크, 이미지를 유지해 표시합니다.
【模板: 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)。
【设计细节】
- 绝不: 多色彩虹 chromatic (只用 1 个 hot pink + cyan 这种二元像散, 不要 R/G/B 全色)。
- 字体: 西文
Inter TightBold; 中文Noto Sans SCBold; 严禁衬线。 - 动效用
@keyframes+ JS 计时器 (setTimeout逐字), 可被prefers-reduced-motion关闭 (直接显示所有字)。 - 必须用用户提供的金句; 不要捏造。
- 单文件 HTML, 不要外链字体以外的资源。
