mcpField
E
experts

experts

github.com/remotion-devMarketing & growth68.6k293 installsUpdated today
Repository

About experts

A repository skill for regenerating the homepage experts animation and maintaining its image assets when expert data changes. It describes rendering and validating transparent video variants, copying them to the docs and promo pages, and keeping portrait files in sync.

Key features

  1. 01Render transparent ProRes master
  2. 02Encode WebM and Safari HEVC video
  3. 03Validate dimensions, duration, and alpha
  4. 04Sync video and portrait assets

Use cases

  1. 01Regenerate animation after expert data changes
  2. 02Update animation files for docs and homepage
  3. 03Render a newly added expert card

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/remotion-dev/remotion --skill experts

After installing, type/expertsin Claude Code to confirm it loaded.

Bundled filesagents/openai.yaml

Details

From the project README

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.

    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.

    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.

    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.

    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.

    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:

bun render-cards

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

Comments

Markdown supported