关于 showcase
为录屏视频定义视觉润色方式的技能，通过预设和属性控制 Remotion 组件的画面样式。它涵盖窗口框架、背景、调色、转场及代码注释叠加，供 compose 技能调用。
主要功能
- 01选择六种画面预设
- 02按预设自动选择色彩方案
- 03配置标题到内容的转场
- 04添加语法高亮代码注释
- 05使用窗口、背景和粒子效果
适用场景
- 01为营销视频选择视觉样式
- 02制作文档或幻灯片演示画面
- 03为录屏添加代码注释叠层
安装
复制下面的命令，在终端中运行。
npx skills add https:/安装后在 Claude Code 中输入/showcase确认已加载。
详细介绍
展示效果润色
这个 atom 描述视觉润色系统。它由 compose atom 调用——你通常无需直接调用它。需要了解各预设的视觉效果以及电影感图层的工作方式时，再加载它。
你可以控制的内容
你可以通过选择一个预设并传入 props 来控制视觉输出。其他一切都是自动处理的——Remotion 组件会根据预设和配色方案在内部处理所有电影感图层。
预设
每种预设都会配置窗口边框、间距、背景样式和配色方案选择。
| 预设 | 视觉效果 | 适用场景 |
|---|---|---|
factory | 暖调黑色背景，带琥珀色径向光晕、红绿灯圆点、12px 圆角和宽裕边距。呈现浓郁的电影感暖色调。 | Factory 官方内容 |
factory-hero | 与 factory 相同，另加渐变背景。电影感冲击力最强。 | Factory 落地页、社交媒体 |
hero | 冷色渐变背景、宽裕边距和醒目的阴影。 | 非 Factory 营销内容、第三方内容 |
macos | 简洁的深色背景、红绿灯和细腻阴影。专业而低调。 | 通用演示、README 主视觉 |
presentation | 黑色背景、宽裕边距。专为幻灯片展示效果而设计。 | 演讲、幻灯片 |
minimal | 无窗口栏、微小圆角、紧凑边距。边框几乎不显眼。 | 文档嵌入、内嵌片段 |
每种预设自动包含的内容
Factory / factory-hero 预设（暖色调配色方案）：
- 暖色径向背景暗角，带琥珀色光斑，并会随视频时长增强
- 暖色调盒子阴影，带微弱的点缀光晕
- 暖色调色彩分级叠层（琥珀色调）
- Factory Orange 浮动粒子
所有其他预设（冷色 Catppuccin 配色方案）：
- 冷色调纯色或渐变背景
- 中性盒子阴影
- 细腻的冷色调色彩分级叠层
- 点缀蓝色浮动粒子
所有预设均包含：浮动粒子、噪点纹理叠层、色彩分级、标题→内容的动态模糊转场（可通过 transitionStyle 配置）、动画窗口入场、交错式面板入场（并排显示），以及可选的 codeAnnotations 语法高亮叠层，后者会在主要内容序列期间显示。
视觉配色方案
配色方案会根据预设自动选择。Factory/factory-hero 使用暖色调配色方案；其他所有预设均使用冷色调配色方案。
Factory（暖色调）
| 令牌 | Hex | 用途 |
|---|---|---|
| bg | #0a0804 | 暖调近黑色 |
| surface | #18120e | 终端内容背景 |
| accent | #EE6018 | Factory Orange |
| text | #f0e8e0 | 暖白色 |
| muted | #948781 | 弱化文本 |
Catppuccin（冷色调）
| 令牌 | Hex | 用途 |
|---|---|---|
| bg | #0d1117 | 冷调深色 |
| surface | #181818 | 内容背景 |
| accent | #89b4fa | 蓝色点缀 |
| text | #cdd6f4 | 冷白色 |
| muted | #6c7086 | 弱化文本 |
转场样式
transitionStyle 用于选择交叉淡化的呈现方式。Schema 位于 compose/SKILL.md；预设与转场的推荐搭配如下：
| 预设 | 推荐（默认项列在最前） | 避免 |
|---|---|---|
factory、factory-hero | motion-blur、light-leak、whip-pan、flash | glitch-lite（与暖色调冲突） |
hero、presentation | motion-blur、whip-pan、flash | light-leak（暖色扫光与冷色调配色方案冲突） |
macos、minimal | motion-blur | glitch-lite、light-leak（对于实用主义风格的画面来说个性过强） |
codeAnnotations 与预设无关——配色方案和字体栈会自动派生。Schema 和编写规则请参阅 compose/SKILL.md。
运行说明
渲染时间：渲染一段 1920x1080、时长为 30-60s 的视频约需 1-3 分钟。请将工作进程超时设为 5 分钟。
常见故障模式：
- 内容被截断或某个面板提前冻结：
clipDuration是最长片段的时长，由render-showcase.sh探测；较短的片段会停留在最后一帧。请修剪或重新录制源素材，而不要编辑clipDuration。 public/中缺少片段：渲染会失败，并显示“Could not read file.”。渲染脚本会将片段暂存到专属的每次渲染目录中；切勿直接运行npx remotion render。- 缺少 npm 依赖：如果首次渲染失败，请运行
cd ${REMOTION_DIR} && npm install。
调试布局：render-showcase.sh --still <frame> 会通过与完整渲染相同的标准化和暂存流程渲染单帧（参见 compose/SKILL.md 第 3 步）。
清理：render-showcase.sh 在成功、失败或通过 Ctrl-C / 进程组信号取消时，只会删除自己创建的暂存目录。仅向脚本的 PID 发送信号会推迟处理，直到 npx remotion 子进程退出。
渲染
使用 compose 中的渲染脚本——完整用法请参见 compose/SKILL.md 第 3 步：
RENDER=${DROID_PLUGIN_ROOT}/scripts/render-showcase.sh
$RENDER --props "${RUN_DIR}/props.json" --output "${RUN_DIR}/showcase.mp4" "${RUN_DIR}/clip.mp4"
高级：GlitchTitle
src/components/GlitchTitle.tsx 中提供了一个风格化的 glitch 标题卡组件，适用于前卫 / 黑客美学风格的片头（像素衰变效果，散落的方块逐渐拼成文字）。**此组件未接入默认的 Showcase 合成。**使用它需要编写自定义 Remotion 合成。仅在用户明确提出要求时才使用——标准的 TitleCard 可满足所有常见需求。
前置条件
- Node.js（>= 18）
- Chrome / Chromium（Remotion 使用无头 Chrome）
- ffmpeg 和 ffprobe（Remotion 在底层使用这些工具）
cd ${DROID_PLUGIN_ROOT}/remotion && npm install