diff --git a/.claude/skills/remotion-video/SKILL.md b/.claude/skills/remotion-video/SKILL.md index 41fbe22..8a2d9b6 100644 --- a/.claude/skills/remotion-video/SKILL.md +++ b/.claude/skills/remotion-video/SKILL.md @@ -76,6 +76,8 @@ export const Hello = ({ title }: { title: string }) => { - Rendering needs Chromium and ffmpeg (Remotion installs/handles these); first render can be slow. ## Common problems +- **Can't download the browser (no internet / locked-down machine)**: point Remotion at an installed Chromium: + `npx remotion render out/video.mp4 --browser-executable=/path/to/chromium --chrome-mode=chrome-for-testing` - **Blank/white frames**: an asset path is wrong; use `staticFile()`. - **Flicker**: an image or font not loaded; use `` and `@remotion/google-fonts`. - **Slow render**: lower resolution/fps while testing, or use `--concurrency`. diff --git a/.claude/skills/remotion-video/templates/captions.md b/.claude/skills/remotion-video/templates/captions.md index a8ff260..52b9ce1 100644 --- a/.claude/skills/remotion-video/templates/captions.md +++ b/.claude/skills/remotion-video/templates/captions.md @@ -8,7 +8,7 @@ import { AbsoluteFill, useCurrentFrame, useVideoConfig } from "remotion"; type Word = { text: string; start: number; end: number }; // seconds -export const Captions = ({ words }: { words: Word[] }) => { +export const Captions = ({ words, background = "#111" }: { words: Word[]; background?: string }) => { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const t = frame / fps; @@ -19,7 +19,7 @@ export const Captions = ({ words }: { words: Word[] }) => { const visible = words.slice(Math.floor(i / 5) * 5, Math.floor(i / 5) * 5 + 5); return ( - +
{visible.map((w, k) => ( = w.start && t < w.end ? "#ffd400" : "white", marginRight: 16 }}> @@ -34,4 +34,5 @@ export const Captions = ({ words }: { words: Word[] }) => { Tips - Get word times from a transcription tool (e.g. `@remotion/captions` or Whisper) and save them as JSON in `public/`. -- Layer it over the video: ``. +- `background` is the backdrop when there is no video. Pass `"transparent"` when layering over a video. +- Layer it over the video: ``.