Prepare Remotion homepage videos from a transparent ProRes master. Create Chrome WebM and Safari MP4 versions, verify transparency and 540-by-540 dimensions, and copy the finished assets into both the promotional site and documentation folders.
Use when rendering or replacing Remotion homepage creator strip videos, especially transparent Chrome WebM and Safari MP4 assets copied into both promo-pages and docs.
Review the instructions the agent will receive before you install.
Use this workflow for homepage creator strip assets such as:
homepage-assets-masterediting-vp9-chrome / editing-safariwhat-is-remotionpackages/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
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
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
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.
No reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
Add a reported Remotion bug to the bugs API with its affected versions, a short title, and upgrade guidance. Follow the existing entry format and place the new record first so recent bugs appear at the top.
Add a Remotion command-line or configuration option, or convert a hardcoded flag into a shared option definition. Connect parsing, configuration setters, help entries, and generated documentation so the option is consistently available and documented.
Add a new effect to @remotion/effects, including its implementation, package entry points, documentation, interactive demo, and preview images. Follow the package conventions and verify the changes with tests, formatting checks, and builds.
Add a person to the Remotion experts page by placing their portrait, entering their profile and contact links, and generating an expert card image. The instructions specify file locations, profile fields, and how to verify card generation.
Create a new @remotion package within the Remotion monorepo, a repository containing multiple packages. Set up its files, register it across the project, and prepare documentation, usage examples, and build configuration.
Add a new sound effect to @remotion/sfx, from registering the audio file to exporting its URL and documenting its use. The workflow covers playback examples, attribution, navigation entries, waveform generation, and the package build.