experts

$npx mdskill add remotion-dev/remotion/experts

Maintains Remotion's experts directory and regenerates homepage expert animations.

  • Solves updating expert data, portraits, and rendered homepage animations.
  • Depends on Remotion CLI, bunx, and ffmpeg for rendering and encoding.
  • Determines when to regenerate based on changes to experts-data.tsx.
  • Produces transparent ProRes masters and encoded WebM files for Chrome and Safari.

SKILL.md

.github/skills/expertsView on GitHub ↗
---
name: experts
description: Maintain Remotion's experts directory and its generated assets. Use when adding, removing, or editing experts; changing experts data or portraits; rendering expert cards; or regenerating the homepage experts animation for Chrome and Safari.
---

# Experts

## How to update the videos

Regenerate the homepage experts animation whenever the experts shown by
`packages/promo-pages/src/components/experts/experts-data.tsx` change. The
`ExpertsGraphic` composition imports this array directly.

1. Render a fresh transparent ProRes 4444 master from the current branch. Never
   convert an existing WebM or MOV.

   ```bash
   cd packages/brand
   bunx remotion render ExpertsGraphic /tmp/experts-graphic-master.mov \
     --codec=prores \
     --prores-profile=4444 \
     --pixel-format=yuva444p10le \
     --image-format=png \
     --timeout=120000 \
     --overwrite
   ```

2. Verify the master reports `prores (4444)`, a `yuva...` pixel format, and
   `1080x1080`. Extract an alpha frame and confirm it is not fully opaque.

   ```bash
   ffmpeg -i /tmp/experts-graphic-master.mov
   ffmpeg -y -i /tmp/experts-graphic-master.mov \
     -vf alphaextract -frames:v 1 /tmp/experts-graphic-alpha.png
   ```

3. Encode the transparent 540x540 Chrome WebM.

   ```bash
   ffmpeg -y -i /tmp/experts-graphic-master.mov \
     -vf scale=540:540 \
     -c:v libvpx \
     -pix_fmt yuva420p \
     -auto-alt-ref 0 \
     -an /tmp/experts-graphic.webm
   ```

4. Encode a 540x540 ProRes intermediate and convert it to the Safari
   HEVC-with-alpha MP4.

   ```bash
   ffmpeg -y -i /tmp/experts-graphic-master.mov \
     -vf scale=540:540 \
     -c:v prores_ks \
     -profile:v 4 \
     -pix_fmt yuva444p10le \
     -an /tmp/experts-graphic-540-prores.mov

   avconvert \
     --source /tmp/experts-graphic-540-prores.mov \
     --preset PresetHEVCHighestQualityWithAlpha \
     --output /tmp/experts-graphic.mp4 \
     --replace
   ```

5. Copy both outputs to both homepage consumers.

   ```bash
   cp /tmp/experts-graphic.webm ../promo-pages/public/img/experts-graphic.webm
   cp /tmp/experts-graphic.mp4 ../promo-pages/public/img/experts-graphic.mp4
   cp /tmp/experts-graphic.webm ../docs/static/img/experts-graphic.webm
   cp /tmp/experts-graphic.mp4 ../docs/static/img/experts-graphic.mp4
   ```

6. Inspect all four files. Each must be 540x540 and 60 seconds long. The Safari
   MP4 must report `major_brand: mp42`, `compatible_brands: isommp41mp42`,
   `Video: hevc (Main) (hvc1)`, and `handler_name: Core Media Video`. Confirm the
   matching docs and promo-pages files have identical checksums.

Do not commit either ProRes MOV. Only commit the two WebM copies and two MP4
copies.

## Expert data

The source of truth is
`packages/promo-pages/src/components/experts/experts-data.tsx`. Keep portraits in
both `packages/docs/static/img/freelancers` and
`packages/promo-pages/public/img/freelancers`, with identical contents.

After adding or changing an expert, render their expert card from `packages/docs`:

```bash
bun render-cards
```

Verify the expected `packages/docs/static/generated/experts-<slug>.png` was
rendered rather than reported as already existing.

More from remotion-dev/remotion

SkillDescription
add-bugAdd a new Remotion bug entry to packages/bugs/api/[v].ts. Use when the user describes a bug and affected Remotion versions that should be surfaced through the bugs API.
add-cli-optionAdd a new Remotion CLI or config option by creating an AnyRemotionOption, registering CLI parsing, wiring config setters, and updating documentation. Use when adding or converting command-line flags or Remotion options.
add-effectAdd a new effect to @remotion/effects, including implementation, package exports, docs, demos, preview images, Remotion skill updates, formatting, and builds.
add-expertAdd a new expert to the Remotion experts page
add-new-packageAdd a new package to the Remotion monorepo, including package scaffolding, monorepo registration, documentation, build scripts, and release checklist updates. Use when creating a new @remotion package.
add-sfxAdd a new sound effect to @remotion/sfx
add-webcodecs-bugAdd a browser WebCodecs bug to the Remotion Mediabunny WebCodecs bugs docs page. Use when given a Chromium, WebKit, or Firefox issue URL that should be tracked in packages/docs/docs/mediabunny/webcodecs-bugs.mdx, especially when needing to look up the issue title, filing date, reporter, and resolution state before editing the MDX table.
canvas-capture-extensionRebuild, install, and reload the private Remotion Canvas Capture unpacked Chrome extension. Use when the extension needs to be restored after a Codex worktree was deleted, rebuilt after source changes, moved to its durable install directory, or reloaded in Chrome or Chrome Canary.
checkoutCheckout a requested branch or ref in the Remotion repo, rename the current task to the associated PR title when running in Codex, then install dependencies and build. Use when the user asks to checkout a ref and prepare the workspace.
convertStart the local @remotion/convert app and open it in the Codex browser. Use when the user invokes /convert or $convert, asks to launch convert.remotion.dev locally, or wants to inspect the Convert package UI.