skills.rest
remotion-dev
remotion-devOFFICIAL
Explore all skills by this author →
Website𝕏@remotionGitHub

homepage-video-assets

Render and distribute transparent Remotion homepage creator strip videos for Chrome and Safari.

57.9k|4.4k|Updated Jun 23, 2020
Search Tags:#video#transparency#FFmpeg#Remotion#homepage#WebM#MP4#prores
One-click install
npx skills add https://github.com/remotion-dev/remotion --skill homepage-video-assets
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: homepage-video-assets
Source: https://github.com/remotion-dev/remotion/tree/main/.agents/skills/homepage-video-assets
Command: npx skills add https://github.com/remotion-dev/remotion --skill homepage-video-assets

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Maintaining consistent transparent video assets across the Remotion homepage, promo pages, and docs is error-prone because Chrome needs a VP8/VP9 WebM with alpha and Safari needs an HEVC MP4 with alpha, both derived from a single ProRes 4444 master. This Skill codifies the exact render, transcode, copy, and verification pipeline so the assets stay in sync and render correctly in every browser.

Core Features & Use Cases

  • Master Render: Produces a transparent ProRes 4444 (yuva444p10le) master from a Remotion composition in packages/brand.
  • Browser-Specific Transcodes: Converts the master into a 540x540 VP8 WebM with alpha for Chrome and a 540x540 HEVC MP4 with alpha for Safari using avconvert.
  • Multi-Site Distribution: Copies the final WebM and MP4 into both promo-pages/public/img/ and docs/static/img/ so the homepage and documentation stay aligned.
  • Verification: Uses ffmpeg metadata inspection and alphaextract to confirm the master has real alpha and that every output is exactly 540x540 with the expected codec and brand.

Quick Start

Render and replace the homepage creator strip assets by following the homepage-video-assets workflow for the target composition.

Frequently Asked Questions about homepage-video-assets

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I render a transparent video for the Remotion homepage?▼

Render a ProRes 4444 master with `--prores-profile=4444` and `--pixel-format=yuva444p10le` from the Remotion composition, then transcode it to a VP8 WebM with `yuva420p` for Chrome and an HEVC MP4 via `avconvert` for Safari. Verify alpha with `ffmpeg -vf alphaextract` before copying the files into the target folders.

What codec should I use for transparent video in Chrome and Safari?▼

Chrome requires a VP8 or VP9 WebM with the `yuva420p` pixel format for alpha playback. Safari requires an HEVC MP4 produced through `avconvert` with the `PresetHEVCHighestQualityWithAlpha` preset, which yields the `hvc1` codec and `mp42` major brand.

Why does my Safari MP4 render differently from Chrome WebM?▼

The Safari MP4 must be 540x540 HEVC with `major_brand: mp42` and `handler_name: Core Media Video`. If ffmpeg reports `h264 (avc1)` or dimensions like `960x540`, the wrong source file was used or the `avconvert` step was skipped, causing inconsistent playback between browsers.

How do I verify a ProRes master has a real alpha channel?▼

Run `ffmpeg -i master.mov` and confirm it reports `prores (4444)` with a `yuva...` pixel format. Then run `ffmpeg -vf alphaextract -frames:v 1 alpha.png` and check that the extracted alpha image is not fully opaque, which would indicate a black background or stale master.

Can I skip the ProRes master and convert directly from WebM?▼

No. The workflow explicitly requires converting from a freshly rendered ProRes 4444 master, not from a previous WebM or MOV. Reusing an opaque or stale master causes `alphaextract` to succeed but produce a fully opaque image, breaking transparency in the final assets.

Related Skills

Explore More Design & Creative Skills→
calesthiocalesthio
46.2k

remotion-best-practices

Provide best-practice guidance for authoring and debugging Remotion video compositions.

Community
Advanced
Devsoul2026Devsoul2026
150

hyperframes

Render HTML/CSS/JS compositions to MP4/WebM using GSAP timelines.

Community
Advanced
vercelvercel
246

agent-browser-verify

Automate visual verification of dev servers by checking page load, console errors, and UI elements.

Official
Intermediate
mylesfranklinmylesfranklin

remotion-rendering

Automate Remotion rendering and deployment workflows for production video projects.

Community
Advanced