mcpField
H
homepage-video-assets

homepage-video-assets

github.com/remotion-devCreative & media68.6k499 installsUpdated today
Repository

About homepage-video-assets

A workflow skill for producing and checking homepage video assets from Remotion’s brand package. It covers transparent master rendering, Chrome and Safari exports, and copying verified outputs into app asset folders.

Key features

  1. 01Render a transparent ProRes 4444 master
  2. 02Create Chrome WebM and Safari MP4 files
  3. 03Copy exports to promo and docs folders
  4. 04Check alpha, codec, and dimensions

Use cases

  1. 01Refresh homepage creator strip videos
  2. 02Validate Safari and Chrome video assets
  3. 03Prevent opaque or incorrectly sized exports

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/remotion-dev/remotion --skill homepage-video-assets

After installing, type/homepage-video-assetsin Claude Code to confirm it loaded.

Details

From the project README

Homepage Video Assets

Use this workflow for homepage creator strip assets such as:

  • homepage-assets-master
  • editing-vp9-chrome / editing-safari
  • what-is-remotion

Workflow

  1. Render a fresh transparent ProRes 4444 master from packages/brand.
cd packages/brand
bunx remotion render <composition-id> /tmp/<asset>-master.mov \
  --codec=prores \
  --prores-profile=4444 \
  --pixel-format=yuva444p10le \
  --image-format=png \
  --timeout=120000 \
  --overwrite
  1. Convert from the ProRes master, not from a previous WebM/MOV.

Chrome WebM:

ffmpeg -y -i /tmp/<asset>-master.mov \
  -vf scale=540:540 \
  -c:v libvpx \
  -pix_fmt yuva420p \
  -auto-alt-ref 0 \
  -an /tmp/<chrome-name>.webm

Safari MP4:

ffmpeg -y -i /tmp/<asset>-master.mov \
  -vf scale=540:540 \
  -c:v prores_ks \
  -profile:v 4 \
  -pix_fmt yuva444p10le \
  -an /tmp/<asset>-540-prores.mov

avconvert \
  --source /tmp/<asset>-540-prores.mov \
  --preset PresetHEVCHighestQualityWithAlpha \
  --output /tmp/<safari-name>.mp4 \
  --replace
  1. Copy both outputs into both app folders:
cp /tmp/<chrome-name>.webm ../promo-pages/public/img/<chrome-name>.webm
cp /tmp/<safari-name>.mp4 ../promo-pages/public/img/<safari-name>.mp4
cp /tmp/<chrome-name>.webm ../docs/static/img/<chrome-name>.webm
cp /tmp/<safari-name>.mp4 ../docs/static/img/<safari-name>.mp4

Verification

Verify the ProRes master has real alpha before converting, and verify the Safari MP4 exists in both folders:

ffmpeg -i /tmp/<asset>-master.mov
ffmpeg -i ../promo-pages/public/img/<safari-name>.mp4
ffmpeg -y -i /tmp/<asset>-master.mov \
  -vf alphaextract -frames:v 1 /tmp/<asset>-alpha.png

The master should report prores (4444) and a yuva... pixel format. alphaextract should succeed, and the alpha image should not be fully opaque. A common failure mode is alphaextract succeeding but every sampled pixel is opaque; in that case, the master was rendered with a black/opaque background or a stale opaque master was reused.

Verify every copied Chrome WebM and Safari MP4 is exactly 540x540:

for f in \
  ../promo-pages/public/img/<chrome-name>.webm \
  ../promo-pages/public/img/<safari-name>.mp4 \
  ../docs/static/img/<chrome-name>.webm \
  ../docs/static/img/<safari-name>.mp4; do
  ffmpeg -i "$f"
done

The Safari MP4 should look like the known-good file shape: major_brand: mp42, compatible_brands: isommp41mp42, Video: hevc (Main) (hvc1), 540x540, and handler_name: Core Media Video. If it reports h264 (avc1) or dimensions such as 960x540, it is the wrong file and will render differently in Safari.

Do not add ProRes .mov files to the homepage PR; they are too large. Safari should use the small .mp4 fallback. Chrome should use the transparent .webm.

Comments

Markdown supported