remotion-composition

Name: remotion-composition
Author: ncklrs

168installs3forks

How to install remotion-composition?

ncklrs/startup-os-skills/remotion-composition

$npx -y skills add ncklrs/startup-os-skills --skill remotion-composition

Installs into the current project.

Summary

Generates Remotion composition structure focusing ONLY on Sequence ordering, scene transitions, and duration mapping. Input is scene list with durations. Output is COMPOSITION_STRUCTURE.md with Sequence layout and timing calculations. Use when organizing scenes or when asked to "

Files · 1

View on GitHub

SKILL.md

1	# Remotion Composition
2
3	Generates composition structure documents that define how scenes are ordered, timed, and transitioned in a Remotion video. This skill focuses exclusively on Sequence layout and timing orchestration.
4
5	## What This Skill Does
6
7	Generates composition structure for:
8
9	1. Sequence layout — Ordering and positioning of scene Sequences
10	2. Timing calculations — Start frames, end frames, duration for each scene
11	3. Scene transitions — Overlap and crossfade timing between scenes
12	4. Duration mapping — Converting seconds to frames for all scenes
13	5. Timing constants — Structured timing object for constants.ts
14
15	## Scope Boundaries
16
17	IN SCOPE:
18	- Sequence component organization
19	- Frame calculations for scene timing
20	- Scene overlap and transition timing
21	- Duration constant generation
22	- Scene ordering logic
23
24	OUT OF SCOPE:
25	- Scene component implementation (use `/remotion-component-gen`)
26	- Animation parameters (use `/remotion-animation`)
27	- Visual styling (colors, layouts)
28	- Asset management (use `/remotion-asset-coordinator`)
29
30	## Input/Output Formats
31
32	### Input Format: Scene List with Durations
33
34	Accepts scene timing specifications:
35
36	Natural Language:
37	```
38	Scene 1 (Intro): 0-5 seconds
39	Scene 2 (Features): 5-15 seconds
40	Scene 3 (Demo): 15-25 seconds
41	Scene 4 (CTA): 25-30 seconds
42	```
43
44	Structured Format:
45	```markdown
46	## Scene Timing
47
48	Total Duration: 30 seconds
49	Frame Rate: 30 fps
50	Total Frames: 900
51
52	Scenes:
53	1. Scene 1 - Intro: 5 seconds (0s - 5s)
54	2. Scene 2 - Features: 10 seconds (5s - 15s)
55	3. Scene 3 - Demo: 10 seconds (15s - 25s)
56	4. Scene 4 - CTA: 5 seconds (25s - 30s)
57
58	Transitions:
59	- Fade transition between scenes: 0.5 seconds (15 frames)
60	```
61
62	### Output Format: COMPOSITION_STRUCTURE.md
63
64	Generates composition structure document:
65
66	```markdown
67	# Composition Structure: ProductDemo
68
69	## Status
70	✅ Sequence layout defined
71	✅ Timing calculations complete
72	⏳ Ready for scene implementation
73
74	## Composition Overview
75
76	Total Duration: 30 seconds (900 frames @ 30fps)
77	Scenes: 4
78	Transitions: Crossfade (15 frames)
79
80	## Scene Timing Constants
81
82	```typescript
83	const FPS = 30;
84
85	export const SCENE_TIMING = {
86	intro: {
87	start: 0,
88	end: 150,
89	duration: 150,
90	// 0s - 5s
91	},
92	features: {
93	start: 150,
94	end: 450,
95	duration: 300,
96	// 5s - 15s
97	},
98	demo: {
99	start: 450,
100	end: 750,
101	duration: 300,
102	// 15s - 25s
103	},
104	cta: {
105	start: 750,
106	end: 900,
107	duration: 150,
108	// 25s - 30s
109	},
110	} as const;
111
112	// Transition timing
113	export const TRANSITIONS = {
114	crossfadeDuration: 15, // frames (0.5 seconds)
115	} as const;
116	```
117
118	## Composition Layout
119
120	Main composition with Sequence structure:
121
122	```typescript
123	import { AbsoluteFill, Sequence } from "remotion";
124	import { SCENE_TIMING } from "./constants";
125	import { Scene1Intro } from "./scenes/Scene1Intro";
126	import { Scene2Features } from "./scenes/Scene2Features";
127	import { Scene3Demo } from "./scenes/Scene3Demo";
128	import { Scene4CTA } from "./scenes/Scene4CTA";
129
130	export function ProductDemo() {
131	return (
132	<AbsoluteFill>
133	{/* Scene 1: Intro (0s - 5s) */}
134	<Sequence
135	from={SCENE_TIMING.intro.start}
136	durationInFrames={SCENE_TIMING.intro.duration}
137	>
138	<Scene1Intro />
139	</Sequence>
140
141	{/* Scene 2: Features (5s - 15s) */}
142	<Sequence
143	from={SCENE_TIMING.features.start}
144	durationInFrames={SCENE_TIMING.features.duration}
145	>
146	<Scene2Features />
147	</Sequence>
148
149	{/* Scene 3: Demo (15s - 25s) */}
150	<Sequence
151	from={SCENE_TIMING.demo.start}
152	durationInFrames={SCENE_TIMING.demo.duration}
153	>
154	<Scene3Demo />
155	</Sequence>
156
157	{/* Scene 4: CTA (25s - 30s) */}
158	<Sequence
159	from={SCENE_TIMING.cta.start}
160	durationInFrames={SCENE_TIMING.cta.duration}
161	>
162	<Scene4CTA />
163	</Sequence>
164	</AbsoluteFill>
165	);
166	}
167	```
168
169	## Scene Timing Breakdown
170
171	\| Scene \| Name \| Duration \| Frames \| Start Frame \| End Frame \|
172	\|-------\|------\|----------\|--------\|-------------\|-----------\|
173	\| 1 \| Intro \| 5s \| 150 \| 0 \| 150 \|
174	\| 2 \| Features \| 10s \| 300 \| 150 \| 450 \|
175	\| 3 \| Demo \| 10s \| 300 \| 450 \| 750 \|
176	\| 4 \| CTA \| 5s \| 150 \| 750 \| 900 \|
177
178	Total: 30 seconds (900 frames)
179
180	## Timeline Visualization
181
182	```
183	Frame: 0 150 450 750 900
184	Time: 0s 5s 15s 25s 30s
185	\|---------\|---------\|---------\|---------\|
186	Scene: \| Intro \| Features\| Demo \| CTA \|
187	\|---------\|---------\|---------\|---------\|
188	```
189
190	## Next Steps
191
192	1. Implement scenes via `/remotion

People who liked this also viewed

6 picks

Type

remotion-composition

168installs3forks

View on GitHub

How to install remotion-composition?

ncklrs/startup-os-skills/remotion-composition

$npx -y skills add ncklrs/startup-os-skills --skill remotion-composition

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Remotion Composition
2
3	Generates composition structure documents that define how scenes are ordered, timed, and transitioned in a Remotion video. This skill focuses exclusively on Sequence layout and timing orchestration.
4
5	## What This Skill Does
6
7	Generates composition structure for:
8
9	1. Sequence layout — Ordering and positioning of scene Sequences
10	2. Timing calculations — Start frames, end frames, duration for each scene
11	3. Scene transitions — Overlap and crossfade timing between scenes
12	4. Duration mapping — Converting seconds to frames for all scenes
13	5. Timing constants — Structured timing object for constants.ts
14
15	## Scope Boundaries
16
17	IN SCOPE:
18	- Sequence component organization
19	- Frame calculations for scene timing
20	- Scene overlap and transition timing
21	- Duration constant generation
22	- Scene ordering logic
23
24	OUT OF SCOPE:
25	- Scene component implementation (use `/remotion-component-gen`)
26	- Animation parameters (use `/remotion-animation`)
27	- Visual styling (colors, layouts)
28	- Asset management (use `/remotion-asset-coordinator`)
29
30	## Input/Output Formats
31
32	### Input Format: Scene List with Durations
33
34	Accepts scene timing specifications:
35
36	Natural Language:
37	```
38	Scene 1 (Intro): 0-5 seconds
39	Scene 2 (Features): 5-15 seconds
40	Scene 3 (Demo): 15-25 seconds
41	Scene 4 (CTA): 25-30 seconds
42	```
43
44	Structured Format:
45	```markdown
46	## Scene Timing
47
48	Total Duration: 30 seconds
49	Frame Rate: 30 fps
50	Total Frames: 900
51
52	Scenes:
53	1. Scene 1 - Intro: 5 seconds (0s - 5s)
54	2. Scene 2 - Features: 10 seconds (5s - 15s)
55	3. Scene 3 - Demo: 10 seconds (15s - 25s)
56	4. Scene 4 - CTA: 5 seconds (25s - 30s)
57
58	Transitions:
59	- Fade transition between scenes: 0.5 seconds (15 frames)
60	```
61
62	### Output Format: COMPOSITION_STRUCTURE.md
63
64	Generates composition structure document:
65
66	```markdown
67	# Composition Structure: ProductDemo
68
69	## Status
70	✅ Sequence layout defined
71	✅ Timing calculations complete
72	⏳ Ready for scene implementation
73
74	## Composition Overview
75
76	Total Duration: 30 seconds (900 frames @ 30fps)
77	Scenes: 4
78	Transitions: Crossfade (15 frames)
79
80	## Scene Timing Constants
81
82	```typescript
83	const FPS = 30;
84
85	export const SCENE_TIMING = {
86	intro: {
87	start: 0,
88	end: 150,
89	duration: 150,
90	// 0s - 5s
91	},
92	features: {
93	start: 150,
94	end: 450,
95	duration: 300,
96	// 5s - 15s
97	},
98	demo: {
99	start: 450,
100	end: 750,
101	duration: 300,
102	// 15s - 25s
103	},
104	cta: {
105	start: 750,
106	end: 900,
107	duration: 150,
108	// 25s - 30s
109	},
110	} as const;
111
112	// Transition timing
113	export const TRANSITIONS = {
114	crossfadeDuration: 15, // frames (0.5 seconds)
115	} as const;
116	```
117
118	## Composition Layout
119
120	Main composition with Sequence structure:
121
122	```typescript
123	import { AbsoluteFill, Sequence } from "remotion";
124	import { SCENE_TIMING } from "./constants";
125	import { Scene1Intro } from "./scenes/Scene1Intro";
126	import { Scene2Features } from "./scenes/Scene2Features";
127	import { Scene3Demo } from "./scenes/Scene3Demo";
128	import { Scene4CTA } from "./scenes/Scene4CTA";
129
130	export function ProductDemo() {
131	return (
132	<AbsoluteFill>
133	{/* Scene 1: Intro (0s - 5s) */}
134	<Sequence
135	from={SCENE_TIMING.intro.start}
136	durationInFrames={SCENE_TIMING.intro.duration}
137	>
138	<Scene1Intro />
139	</Sequence>
140
141	{/* Scene 2: Features (5s - 15s) */}
142	<Sequence
143	from={SCENE_TIMING.features.start}
144	durationInFrames={SCENE_TIMING.features.duration}
145	>
146	<Scene2Features />
147	</Sequence>
148
149	{/* Scene 3: Demo (15s - 25s) */}
150	<Sequence
151	from={SCENE_TIMING.demo.start}
152	durationInFrames={SCENE_TIMING.demo.duration}
153	>
154	<Scene3Demo />
155	</Sequence>
156
157	{/* Scene 4: CTA (25s - 30s) */}
158	<Sequence
159	from={SCENE_TIMING.cta.start}
160	durationInFrames={SCENE_TIMING.cta.duration}
161	>
162	<Scene4CTA />
163	</Sequence>
164	</AbsoluteFill>
165	);
166	}
167	```
168
169	## Scene Timing Breakdown
170
171	\| Scene \| Name \| Duration \| Frames \| Start Frame \| End Frame \|
172	\|-------\|------\|----------\|--------\|-------------\|-----------\|
173	\| 1 \| Intro \| 5s \| 150 \| 0 \| 150 \|
174	\| 2 \| Features \| 10s \| 300 \| 150 \| 450 \|
175	\| 3 \| Demo \| 10s \| 300 \| 450 \| 750 \|
176	\| 4 \| CTA \| 5s \| 150 \| 750 \| 900 \|
177
178	Total: 30 seconds (900 frames)
179
180	## Timeline Visualization
181
182	```
183	Frame: 0 150 450 750 900
184	Time: 0s 5s 15s 25s 30s
185	\|---------\|---------\|---------\|---------\|
186	Scene: \| Intro \| Features\| Demo \| CTA \|
187	\|---------\|---------\|---------\|---------\|
188	```
189
190	## Next Steps
191
192	1. Implement scenes via `/remotion

People who liked this also viewed

6 picks

Type