remotion-markup

Name: remotion-markup
Author: remotion-dev

54kstars3.9kforks

How to install remotion-markup?

remotion-dev/remotion/remotion-markup

$npx -y skills add remotion-dev/remotion --skill remotion-markup

Installs into the current project.

Summary

Best practices for writing Remotion React Markup

Files · 1

View on GitHub

SKILL.md

1	This is guidance for writing Remotion React Markup.
2	If this is not relevant, load [Remotion Best Practices](../remotion-best-practices/SKILL.md) instead.
3
4	## General rules
5
6	Animate properties using `useCurrentFrame()` and `interpolate()`.
7
8	Use `interpolate()` over `spring()`.
9
10	Use `Easing.bezier()` to customize timing, including jumpy or overshooting motion.
11	Use `Easing.spring()` if you want spring animations
12
13	HTML Elements which make sense to be made interactive in the Studio should use `Interactive`: `<div>` -> `<Interactive.Div>`.
14	Set a descriptive `name` prop such as `name="Hero title"` for `Interactive`, `Solid`, `Sequence`.
15
16	```tsx
17	import { useCurrentFrame, Easing, interpolate, Interactive } from "remotion";
18
19	export const FadeIn = () => {
20	const frame = useCurrentFrame();
21
22	return (
23	<Interactive.Div
24	name="Title"
25	style={{
26	opacity: interpolate(frame, [0, 60], [0, 1], {
27	extrapolateRight: "clamp",
28	extrapolateLeft: "clamp",
29	easing: Easing.bezier(0.16, 1, 0.3, 1),
30	}),
31	}}
32	>
33	Hello World!
34	</Interactive.Div>
35	);
36	};
37	```
38
39	Keep the `interpolate()` call inline in the `style` prop.
40	Prefer `scale`, `translate`, `rotate` CSS properties over `transform`.
41
42	```tsx
43	// 👍 Inline editable keyframes and transform shorthands
44	style={{
45	scale: interpolate(frame, [0, 100], [0, 1]),
46	translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"]),
47	rotate: interpolate(frame, [0, 100], ["20deg", "90deg"]),
48	}}
49
50	// 👎 Hidden values and transform strings become harder to edit in Studio
51	const scale = interpolate(frame, [0, 100], [0, 1]);
52
53	style={{
54	transform: `scale(${scale})`,
55	}}
56	```
57
58	CSS transitions or animations are FORBIDDEN - they will not render correctly.
59	Tailwind animation class names are FORBIDDEN - they will not render correctly.
60
61	Place assets in the `public/` folder at your project root.
62
63	Use `staticFile()` to reference files from the `public/` folder.
64
65	Add video and audio using `@remotion/media`.
66	Add images using the `<Img>` component.
67	Use `staticFile()` for files in `public/` or pass a remote URL directly:
68
69	```tsx
70	import { Audio, Video } from "@remotion/media";
71	import { staticFile } from "remotion";
72
73	export const MyComposition = () => {
74	return (
75	<>
76	<Video src={staticFile("video.mp4")} style={{ opacity: 0.5 }} />
77	<Audio src={staticFile("audio.mp3")} />
78	<Img src={staticFile("logo.png")} style={{ width: 100, height: 100 }} />
79	<Video src="https://remotion.media/video.mp4" />
80	</>
81	);
82	};
83	```
84
85	To delay content wrap it in `<Sequence>` and use `from`.
86	To limit the duration of an element, use `durationInFrames` of `<Sequence>`.
87	`<Sequence>` by default is an absolute fill covering the scene.
88	For inline content, use `layout="none"`.
89
90	```tsx
91	const Main = () => {
92	const {fps} = useVideoConfig();
93
94	return (
95	<AbsoluteFill>
96	<Sequence name="Background">
97	<Background />
98	</Sequence>
99	<Sequence name="Title" from={30} durationInFrames={60} layout="none">
100	<Title />
101	</Sequence>
102	<Sequence name="Subtitle" from={60} durationInFrames={60} layout="none">
103	<Subtitle />
104	</Sequence>
105	</AbsoluteFill>
106	);
107	}
108
109	export const Title = () => {
110	const frame = useCurrentFrame();
111
112	return (
113	<div
114	style={{
115	opacity: interpolate(frame, [0, 60], [0, 1], {
116	extrapolateRight: "clamp",
117	extrapolateLeft: "clamp",
118	easing: Easing.bezier(0.16, 1, 0.3, 1),
119	}),
120	}}
121	>
122	Title
123	</div>
124	);
125	};
126
127	export const Subtitle = () => {
128	return <div>Subtitle</div>;
129	};
130	```
131
132	## Maps
133
134	See [map.md](map.md) for choosing between simple static maps, Mapbox maps, and MapLibre maps.
135
136	## Text highlights and annotations
137
138	See [text-highlights.md](text-highlights.md) for text highlights (highlight markers), circles, underlines, strike-throughs, crossed-off text, boxes, and brackets.
139
140	## Voiceover
141
142	See [voiceover.md](voiceover.md) for adding AI-generated voiceover to Remotion compositions using ElevenLabs TTS.
143
144	## Trimming
145
146	See [trimming.md](trimming.md) for trimming patterns - cutting the beginning or end of animations.
147
148	## Embedding Videos
149
150	See [embedding-videos.md](embedding-videos.md) for advanced knowledge about embedding videos - trimming, volume, speed, looping, pitch.
151
152	## Video editing
153
154	See [video-editing.md](video-editing.md) for structuring editable video timelines in Remotion Studio.
155
156	## Embedding Audio
157
158	See [audio.md](audio.md) for advanced audio features like trimming, volume, speed, pitch.
159
160	## Transitions
161
162	See [transitions.md](transitions.md) for scene transition patterns.
163
164	## Visual and pixel effects
165
166	When creating a visual effect, prefer: 1. normal Remotion/HTML/CSS/SVG/filter/blend/mask animation, 2. a listed effect via [effects.md](effects.md), including on HTML rendered through `<Html

People who liked this also viewed

6 picks

Type

find-skillsHelps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skSkillsJul 20262.6M27k
grill-meA relentless interview to sharpen a plan or design.SkillsJul 2026633k182k
vercel-react-best-practicesVercel's official collection of agent skillsSkillsJul 2026573k29k
improve-codebase-architectureScan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.SkillsJul 2026522k182k
setup-matt-pocock-skillsConfigure this repo for the engineering skills — set up its issue tracker, triage label vocabulary, and domain doc layout. Run once before first use of the other engineering skills.SkillsJul 2026454k182k
triageMove issues and external PRs through a state machine of triage roles — categorise, verify, grill if needed, and write agent-ready briefs.SkillsJul 2026424k182k

remotion-markup

54kstars3.9kforks

View on GitHub

How to install remotion-markup?

remotion-dev/remotion/remotion-markup

$npx -y skills add remotion-dev/remotion --skill remotion-markup

Installs into the current project.

Summary

Best practices for writing Remotion React Markup

Files · 1

View on GitHub

SKILL.md

1	This is guidance for writing Remotion React Markup.
2	If this is not relevant, load [Remotion Best Practices](../remotion-best-practices/SKILL.md) instead.
3
4	## General rules
5
6	Animate properties using `useCurrentFrame()` and `interpolate()`.
7
8	Use `interpolate()` over `spring()`.
9
10	Use `Easing.bezier()` to customize timing, including jumpy or overshooting motion.
11	Use `Easing.spring()` if you want spring animations
12
13	HTML Elements which make sense to be made interactive in the Studio should use `Interactive`: `<div>` -> `<Interactive.Div>`.
14	Set a descriptive `name` prop such as `name="Hero title"` for `Interactive`, `Solid`, `Sequence`.
15
16	```tsx
17	import { useCurrentFrame, Easing, interpolate, Interactive } from "remotion";
18
19	export const FadeIn = () => {
20	const frame = useCurrentFrame();
21
22	return (
23	<Interactive.Div
24	name="Title"
25	style={{
26	opacity: interpolate(frame, [0, 60], [0, 1], {
27	extrapolateRight: "clamp",
28	extrapolateLeft: "clamp",
29	easing: Easing.bezier(0.16, 1, 0.3, 1),
30	}),
31	}}
32	>
33	Hello World!
34	</Interactive.Div>
35	);
36	};
37	```
38
39	Keep the `interpolate()` call inline in the `style` prop.
40	Prefer `scale`, `translate`, `rotate` CSS properties over `transform`.
41
42	```tsx
43	// 👍 Inline editable keyframes and transform shorthands
44	style={{
45	scale: interpolate(frame, [0, 100], [0, 1]),
46	translate: interpolate(frame, [0, 100], ["0px 0px", "100px 100px"]),
47	rotate: interpolate(frame, [0, 100], ["20deg", "90deg"]),
48	}}
49
50	// 👎 Hidden values and transform strings become harder to edit in Studio
51	const scale = interpolate(frame, [0, 100], [0, 1]);
52
53	style={{
54	transform: `scale(${scale})`,
55	}}
56	```
57
58	CSS transitions or animations are FORBIDDEN - they will not render correctly.
59	Tailwind animation class names are FORBIDDEN - they will not render correctly.
60
61	Place assets in the `public/` folder at your project root.
62
63	Use `staticFile()` to reference files from the `public/` folder.
64
65	Add video and audio using `@remotion/media`.
66	Add images using the `<Img>` component.
67	Use `staticFile()` for files in `public/` or pass a remote URL directly:
68
69	```tsx
70	import { Audio, Video } from "@remotion/media";
71	import { staticFile } from "remotion";
72
73	export const MyComposition = () => {
74	return (
75	<>
76	<Video src={staticFile("video.mp4")} style={{ opacity: 0.5 }} />
77	<Audio src={staticFile("audio.mp3")} />
78	<Img src={staticFile("logo.png")} style={{ width: 100, height: 100 }} />
79	<Video src="https://remotion.media/video.mp4" />
80	</>
81	);
82	};
83	```
84
85	To delay content wrap it in `<Sequence>` and use `from`.
86	To limit the duration of an element, use `durationInFrames` of `<Sequence>`.
87	`<Sequence>` by default is an absolute fill covering the scene.
88	For inline content, use `layout="none"`.
89
90	```tsx
91	const Main = () => {
92	const {fps} = useVideoConfig();
93
94	return (
95	<AbsoluteFill>
96	<Sequence name="Background">
97	<Background />
98	</Sequence>
99	<Sequence name="Title" from={30} durationInFrames={60} layout="none">
100	<Title />
101	</Sequence>
102	<Sequence name="Subtitle" from={60} durationInFrames={60} layout="none">
103	<Subtitle />
104	</Sequence>
105	</AbsoluteFill>
106	);
107	}
108
109	export const Title = () => {
110	const frame = useCurrentFrame();
111
112	return (
113	<div
114	style={{
115	opacity: interpolate(frame, [0, 60], [0, 1], {
116	extrapolateRight: "clamp",
117	extrapolateLeft: "clamp",
118	easing: Easing.bezier(0.16, 1, 0.3, 1),
119	}),
120	}}
121	>
122	Title
123	</div>
124	);
125	};
126
127	export const Subtitle = () => {
128	return <div>Subtitle</div>;
129	};
130	```
131
132	## Maps
133
134	See [map.md](map.md) for choosing between simple static maps, Mapbox maps, and MapLibre maps.
135
136	## Text highlights and annotations
137
138	See [text-highlights.md](text-highlights.md) for text highlights (highlight markers), circles, underlines, strike-throughs, crossed-off text, boxes, and brackets.
139
140	## Voiceover
141
142	See [voiceover.md](voiceover.md) for adding AI-generated voiceover to Remotion compositions using ElevenLabs TTS.
143
144	## Trimming
145
146	See [trimming.md](trimming.md) for trimming patterns - cutting the beginning or end of animations.
147
148	## Embedding Videos
149
150	See [embedding-videos.md](embedding-videos.md) for advanced knowledge about embedding videos - trimming, volume, speed, looping, pitch.
151
152	## Video editing
153
154	See [video-editing.md](video-editing.md) for structuring editable video timelines in Remotion Studio.
155
156	## Embedding Audio
157
158	See [audio.md](audio.md) for advanced audio features like trimming, volume, speed, pitch.
159
160	## Transitions
161
162	See [transitions.md](transitions.md) for scene transition patterns.
163
164	## Visual and pixel effects
165
166	When creating a visual effect, prefer: 1. normal Remotion/HTML/CSS/SVG/filter/blend/mask animation, 2. a listed effect via [effects.md](effects.md), including on HTML rendered through `<Html

People who liked this also viewed

6 picks

Type