homepage-video-assets

Name: homepage-video-assets
Author: remotion-dev

54kstars3.9kforks

How to install homepage-video-assets?

remotion-dev/remotion/homepage-video-assets

$npx -y skills add remotion-dev/remotion --skill homepage-video-assets

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Homepage Video Assets
2
3	Use this workflow for homepage creator strip assets such as:
4
5	- `homepage-assets-master`
6	- `editing-vp9-chrome` / `editing-safari`
7	- `what-is-remotion`
8
9	## Workflow
10
11	1. Render a fresh transparent ProRes 4444 master from `packages/brand`.
12
13	```bash
14	cd packages/brand
15	bunx remotion render <composition-id> /tmp/<asset>-master.mov \
16	--codec=prores \
17	--prores-profile=4444 \
18	--pixel-format=yuva444p10le \
19	--image-format=png \
20	--timeout=120000 \
21	--overwrite
22	```
23
24	2. Convert from the ProRes master, not from a previous WebM/MOV.
25
26	Chrome WebM:
27
28	```bash
29	ffmpeg -y -i /tmp/<asset>-master.mov \
30	-vf scale=540:540 \
31	-c:v libvpx \
32	-pix_fmt yuva420p \
33	-auto-alt-ref 0 \
34	-an /tmp/<chrome-name>.webm
35	```
36
37	Safari MP4:
38
39	```bash
40	ffmpeg -y -i /tmp/<asset>-master.mov \
41	-vf scale=540:540 \
42	-c:v prores_ks \
43	-profile:v 4 \
44	-pix_fmt yuva444p10le \
45	-an /tmp/<asset>-540-prores.mov
46
47	avconvert \
48	--source /tmp/<asset>-540-prores.mov \
49	--preset PresetHEVCHighestQualityWithAlpha \
50	--output /tmp/<safari-name>.mp4 \
51	--replace
52	```
53
54	3. Copy both outputs into both app folders:
55
56	```bash
57	cp /tmp/<chrome-name>.webm ../promo-pages/public/img/<chrome-name>.webm
58	cp /tmp/<safari-name>.mp4 ../promo-pages/public/img/<safari-name>.mp4
59	cp /tmp/<chrome-name>.webm ../docs/static/img/<chrome-name>.webm
60	cp /tmp/<safari-name>.mp4 ../docs/static/img/<safari-name>.mp4
61	```
62
63	## Verification
64
65	Verify the ProRes master has real alpha before converting, and verify the Safari MP4 exists in both folders:
66
67	```bash
68	ffmpeg -i /tmp/<asset>-master.mov
69	ffmpeg -i ../promo-pages/public/img/<safari-name>.mp4
70	ffmpeg -y -i /tmp/<asset>-master.mov \
71	-vf alphaextract -frames:v 1 /tmp/<asset>-alpha.png
72	```
73
74	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.
75
76	Verify every copied Chrome WebM and Safari MP4 is exactly `540x540`:
77
78	```bash
79	for f in \
80	../promo-pages/public/img/<chrome-name>.webm \
81	../promo-pages/public/img/<safari-name>.mp4 \
82	../docs/static/img/<chrome-name>.webm \
83	../docs/static/img/<safari-name>.mp4; do
84	ffmpeg -i "$f"
85	done
86	```
87
88	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.
89
90	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`.

People who liked this also viewed

6 picks

Type

homepage-video-assets

54kstars3.9kforks

View on GitHub

How to install homepage-video-assets?

remotion-dev/remotion/homepage-video-assets

$npx -y skills add remotion-dev/remotion --skill homepage-video-assets

Installs into the current project.

Summary

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.

Files · 1

View on GitHub

SKILL.md

1	# Homepage Video Assets
2
3	Use this workflow for homepage creator strip assets such as:
4
5	- `homepage-assets-master`
6	- `editing-vp9-chrome` / `editing-safari`
7	- `what-is-remotion`
8
9	## Workflow
10
11	1. Render a fresh transparent ProRes 4444 master from `packages/brand`.
12
13	```bash
14	cd packages/brand
15	bunx remotion render <composition-id> /tmp/<asset>-master.mov \
16	--codec=prores \
17	--prores-profile=4444 \
18	--pixel-format=yuva444p10le \
19	--image-format=png \
20	--timeout=120000 \
21	--overwrite
22	```
23
24	2. Convert from the ProRes master, not from a previous WebM/MOV.
25
26	Chrome WebM:
27
28	```bash
29	ffmpeg -y -i /tmp/<asset>-master.mov \
30	-vf scale=540:540 \
31	-c:v libvpx \
32	-pix_fmt yuva420p \
33	-auto-alt-ref 0 \
34	-an /tmp/<chrome-name>.webm
35	```
36
37	Safari MP4:
38
39	```bash
40	ffmpeg -y -i /tmp/<asset>-master.mov \
41	-vf scale=540:540 \
42	-c:v prores_ks \
43	-profile:v 4 \
44	-pix_fmt yuva444p10le \
45	-an /tmp/<asset>-540-prores.mov
46
47	avconvert \
48	--source /tmp/<asset>-540-prores.mov \
49	--preset PresetHEVCHighestQualityWithAlpha \
50	--output /tmp/<safari-name>.mp4 \
51	--replace
52	```
53
54	3. Copy both outputs into both app folders:
55
56	```bash
57	cp /tmp/<chrome-name>.webm ../promo-pages/public/img/<chrome-name>.webm
58	cp /tmp/<safari-name>.mp4 ../promo-pages/public/img/<safari-name>.mp4
59	cp /tmp/<chrome-name>.webm ../docs/static/img/<chrome-name>.webm
60	cp /tmp/<safari-name>.mp4 ../docs/static/img/<safari-name>.mp4
61	```
62
63	## Verification
64
65	Verify the ProRes master has real alpha before converting, and verify the Safari MP4 exists in both folders:
66
67	```bash
68	ffmpeg -i /tmp/<asset>-master.mov
69	ffmpeg -i ../promo-pages/public/img/<safari-name>.mp4
70	ffmpeg -y -i /tmp/<asset>-master.mov \
71	-vf alphaextract -frames:v 1 /tmp/<asset>-alpha.png
72	```
73
74	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.
75
76	Verify every copied Chrome WebM and Safari MP4 is exactly `540x540`:
77
78	```bash
79	for f in \
80	../promo-pages/public/img/<chrome-name>.webm \
81	../promo-pages/public/img/<safari-name>.mp4 \
82	../docs/static/img/<chrome-name>.webm \
83	../docs/static/img/<safari-name>.mp4; do
84	ffmpeg -i "$f"
85	done
86	```
87
88	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.
89
90	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`.

People who liked this also viewed

6 picks

Type