Code Video Showcase

用纯代码（HTML/Canvas/SVG/Three.js 逐帧渲染 + Python numpy/scipy 合成配乐 + FFmpeg 合成）制作 30–90 秒卡点风格展示视频的完整技能。 适用于：复刻/仿制《Opus 5.5 视频风格展示》、DeepSeek V4.1-Flash 61s 风格样片、多风格切换卡点视频、纯代码视频、程序化视频、 HTML/Canvas/Three.js 视频、逐帧渲染 + 节拍同步、风格展示短片；要求不使用任何视频/图像/音乐生成模型。 包含：调用前置需求采集与主题选择、8 套主题配色 × 8 种材质、剪辑结构公式、11 种风格配方、大字卡系统、120BPM 配乐合成、Playwright 渲染管线、质检清单与可运行模板。 当用户提到「卡点视频」「风格展示视频」「纯代码做视频」「类似 Opus 5.5 / DeepSeek 风格展示」「逐帧渲染」「用代码做视频」 「HTML Canvas 视频」「程序化视频」「主题配色」「换配色」「配色主题」时必须触发。

239 stars 16 forksImages, Video & Audio

Install

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add Moessif/code-video-showcase --skill code-video-showcase
Manual install
git clone --depth 1 https://github.com/Moessif/code-video-showcase.git /tmp/code-video-showcase
mkdir -p ~/.claude/skills
cp -r /tmp/code-video-showcase/. ~/.claude/skills/code-video-showcase

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# 纯代码卡点视频导演技能

> 目标：不调用任何视频/图像/音乐生成模型，用**代码**逐帧画出画面、用 **numpy/scipy** 合成配乐，最后 FFmpeg 合成 MP4。
> 参考样片：61.0s / 1920×1080 / 30fps / 1830 帧 / 120 BPM / H.264+AAC，见 `assets/contact-1fps.jpg` 与 `references/reference-film-analysis.md`。

## 0. 适用与不适用

**适用**
- 30–90 秒内快速切换多种美术风格的「风格展示 / 能力展示 / 产品宣传」短片；
- 强节拍（120 BPM）、大字卡 + 风格段交替、结尾升华的卡点结构；
- 同一套内容需要不同品牌气质（8 套主题：珊瑚暗夜 / 橙光白 / 水蓝白·莫兰迪 / 琥珀黑金 / 蓝图纸 / 石墨信号 / 青瓷白 / 绯墨剧场）；
- 用户明确要求纯代码、可复现、逐帧确定性渲染（同一 t 必出同一帧）。

**不适用**
- 需要写实镜头、真人、复杂叙事的长视频；
- 需要调用文生视频/文生图/文生音乐模型的场景（本技能明确禁止）。

---

## 1. 交付物与硬约束

| 项目 | 默认值 |
|---|---|
| 画幅/帧率 | 1920×1080，30 fps |
| 时长 | 61.0 s = 1830 帧（可按公式改） |
| 音频 | 48 kHz 立体声 AAC 192 kbps |
| 视频 | H.264 High，yuv420p，libx264，2-pass 约 3.4 Mbps（成片约 26 MB） |
| 节拍 | 120 BPM：1 拍 = 0.5 s，1 小节 = 2 s |
| 主题配色 | 8 选 1，默认 `coral-noir`（原版：珊瑚 `#d97757` + 深底 `#0e0e0d`）；角色 token 与选择流程见 §5、`references/intake.md` |
| 字体 | 全部 OFL：Noto Sans/Serif CJK SC、Ma Shan Zheng、Long Cang、ZCOOL KuaiLe、ZCOOL QingKe HuangYou、Press Start 2P、JetBrains Mono、Inter、Orbitron、Playfair Display |
| 字幕 | 不要底部字幕；信息都做成画面内的胶囊/HUD/注释 |
| 确定性 | 画面是 `t` 的纯函数，禁止 CSS transition/animation、rAF、Date.now、Math.random |

**每个片段必须满足**（Playwright 渲染契约）：

```js
window.DURATION = 3.0;                 // 片段时长（秒）
window.renderFrame = (t) => { /* 只依赖 t 和常量；禁止时间/随机副作用 */ };
window.__ready = false;                // 字体等资源就绪后置 true
window.__bootError = null;             // 初始化失败时写入错误字符串（渲染器立即报错）
```

---

## 2. 十阶段工作流
Read the full skill on GitHub

Details

Skill name
code-video-showcase
Repository
Moessif/code-video-showcase
License
MIT
Repo updated
28 October 2026

FAQ

What does the Code Video Showcase skill do?

用纯代码（HTML/Canvas/SVG/Three.js 逐帧渲染 + Python numpy/scipy 合成配乐 + FFmpeg 合成）制作 30–90 秒卡点风格展示视频的完整技能。 适用于：复刻/仿制《Opus 5.5 视频风格展示》、DeepSeek V4.1-Flash 61s 风格样片、多风格切换卡点视频、纯代码视频、程序化视频、 HTML/Canvas/Three.js 视频、逐帧渲染 + 节拍同步、风格展示短片；要求不使用任何视频/图像/音乐生成模型。 包含：调用前置需求采集与主题选择、8 套主题配色 × 8 种材质、剪辑结构公式、11 种风格配方、大字卡系统、120BPM 配乐合成、Playwright 渲染管线、质检清单与可运行模板。 当用户提到「卡点视频」「风格展示视频」「纯代码做视频」「类似 Opus 5.5 / DeepSeek 风格展示」「逐帧渲染」「用代码做视频」 「HTML Canvas 视频」「程序化视频」「主题配色」「换配色」「配色主题」时必须触发。

How do I install the Code Video Showcase skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add Moessif/code-video-showcase --skill code-video-showcase. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Code Video Showcase popular?

It lives in Moessif/code-video-showcase, which has 239 GitHub stars and 16 forks.

Related skills

Yt Dlp Downloader

213

MapleShaw/yt-dlp-downloader-skill

Download videos from YouTube, Bilibili, Twitter, and thousands of other sites using yt-dlp. Use when the user provides a video URL and wants to download it, extract audio (MP3), download subtitles, or select video quality. Triggers on phrases like "下载视频", "download video", "yt-dlp", "YouTube", "B站", "抖音", "提取音频", "extract audio".

Images, Video & Audio30

Punk Ip Article Illustrations

230

adrianpunk/Punk-IP

Punk 出品的完整个人 IP 插图工作流：先在复古彩色扁平 3D 与松散线描水彩之间选择画风，再从人物照片创建、确认并持久化角色，或启用内置 Punk；随后读取文章、Markdown、网页、帖子或观点，生成统一角色的小剧场正文插图。适用于创建个人 IP、角色设定卡、切换角色或画风、长文自动配图、流程拆解图和核心动作图。

Images, Video & Audio27

Cinematic Video Prompt

168

Rylaispirit/cinematic-video-prompt-skill

Dùng khi viết hoặc sửa prompt tạo video/ảnh AI (Veo 3, Google Flow, Kling, Runway, Sora, Midjourney, Hailuo, Luma): từ vựng chuẩn về góc máy, chuyển động camera, ánh sáng, bố cục, phong cách, màu, cảm xúc công thức ghép prompt, và bài học thực chiến về lỗi model AI hay gặp. Use when writing or fixing AI video/image prompts — cinematic camera angles, camera movement, lighting, composition, style, color grading, mood, a prompt formula, and real-world lessons on common AI video model failures.

Images, Video & Audio80

HTML Explainer

236

OneMoh/html-explainer

把任意主题做成讲解/科普视频并渲染成 MP4（HTML/CSS/GSAP 画面 + 确定性逐帧渲染 + 配音 + 词级硬字幕）。触发场景：要做科普/讲解/教学/知识/产品类视频、「讲一下 X 做成视频」、要挑某种视觉风格（极简/数据/赛博/电影感/品牌）出片、要出抖音封面/竖版封面/9:16 封面、要用 html-video 那种模板化画面但更稳的音画同步、anything2explainer 换 HTML 渲染，或提到 html-explainer / HTML 讲解视频 / explainer video / MG 视频。内置 23 个模板风格（8 类）与 40+ 动作词汇的动效库，主题驱动模板编排；支持 4K60、快门运动模糊、多进程提速、断点续渲；流程含六个用户确认点（渲染通道是硬闸门）。独立可移植，不依赖 html-video / anything2explainer。

Images, Video & Audio29

Qisi Video Remix

186

wyuzhi/qisi-video-remix

根据参考视频创意改编新故事，直接展示可读剧本、人物造型、分镜表和可独立使用的分段视频提示词。适用于参考视频改编、同款叙事创作和 AI 视频制作前的策划。

Images, Video & Audio23

Book Sales Video

234

Kianzzz/book-sales-video

从书名或飞书多维表格中的成稿文案出发，结合微信读书资料与公开点评创作图书带货/书评短视频，并用豆包 TTS、Pexels、Codex 生图和本机 OpenChatCut 完成配音、配图、双语字幕、音效、动效、BGM、可编辑初稿与按需导出。用户提出“根据一本书做带货视频”“读取飞书文案制作图书视频”“写书评口播并自动剪成抖音视频”“仿参考样式做图书推荐短视频”时使用；仅查书、仅写普通书评或无关剪辑不触发。

Images, Video & Audio45

Browse the most popular Claude skills, all images, video & audio skills, or write your own with the skills generator.