remotion-render

Files (50)

• SKILL.md
• package-lock.json
• package.json
• props.json
• remotion.config.ts
• 3d.md · rules/
• animations.md · rules/
• assets.md · rules/
• charts-bar-chart.tsx · rules/assets/
• text-animations-typewriter.tsx · rules/assets/
• text-animations-word-highlight.tsx · rules/assets/
• audio.md · rules/
• calculate-metadata.md · rules/
• can-decode.md · rules/
• charts.md · rules/
• compositions.md · rules/
• display-captions.md · rules/
• extract-frames.md · rules/
• fonts.md · rules/
• get-audio-duration.md · rules/
• get-video-dimensions.md · rules/
• get-video-duration.md · rules/
• gifs.md · rules/
• images.md · rules/
• import-srt-captions.md · rules/
• lottie.md · rules/
• maps.md · rules/
• measuring-dom-nodes.md · rules/
• measuring-text.md · rules/
• parameters.md · rules/
• sequencing.md · rules/
• tailwind.md · rules/
• text-animations.md · rules/
• timing.md · rules/
• transcribe-captions.md · rules/
• transitions.md · rules/
• transparent-videos.md · rules/
• trimming.md · rules/
• videos.md · rules/
• Root.tsx · src/
• TalkingHeadClip.tsx · src/
• VideoClip.tsx · src/
• ContextBadge.tsx · src/components/
• RollingCaption.tsx · src/components/
• SectionTitle.tsx · src/components/
• SpeakerLabel.tsx · src/components/
• TitleCard.tsx · src/components/
• index.ts · src/
• types.ts · src/
• tsconfig.json

SKILL.md (first lines)

# Remotion Render Skill

Generic video rendering with motion graphics overlays.

## Components

- `VideoClip.tsx` - Main composition (video + captions + annotations)
- `components/RollingCaption.tsx` - Karaoke-style word highlighting
- `components/SpeakerLabel.tsx` - Positioned speaker annotations
- `components/ContextBadge.tsx` - Location/event badge

## Usage

Called by `make-video` skill. Not typically invoked directly.

```bash
npx remotion render VideoClip output.mp4 --props=props.json
```

## Props Interface

```typescript
{
  videoSrc: string;           // Video filename in public/
  captions: Caption[];        // Timed caption segments
  speakers: SpeakerAnnotation[];  // Speaker labels with positions
  contextBadge: {
    location: string;
    event: string;
  }
}
```

## Dependencies

- @remotion/captions - TikTok-style caption pages
- @remotion/media - Video embedding
- System fonts (PingFang SC) for Chinese text

## Best Practices (rules/)

Reference documentation for Remotion patterns:

- `rules/display-captions.md` - TikTok-style captions with word highlighting
- `rules/videos.md` - Video embedding, trimming, volume, speed
- `rules/text-animations.md` - Typewriter, word highlight effects
- `rules/fonts.md` - Loading Google Fonts and local fonts
- `rules/animations.md` - Interpolation, spring, easing
- `rules/timing.md` - Frame-based timing and curves
- `rules/sequencing.md` - Sequence patterns for timeline control

See `rules/` folder for complete documentation.

From Nuva-Lab/vibecut, Apache-2.0.

More from Nuva-Lab/vibecut