remotion-performance-optimizer

Name: remotion-performance-optimizer
Author: ncklrs

133installs3forks

How to install remotion-performance-optimizer?

ncklrs/startup-os-skills/remotion-performance-optimizer

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

Installs into the current project.

Summary

Analyzes Remotion compositions for performance issues and provides optimization recommendations. Identifies expensive computations, unnecessary re-renders, large assets, memoization opportunities, and architecture improvements. Use when optimizing render times or when asked to "i

Files · 1

View on GitHub

SKILL.md

1	# Remotion Performance Optimizer
2
3	Comprehensive performance analysis and optimization recommendations for Remotion video compositions. Identifies bottlenecks and provides actionable fixes to reduce render times.
4
5	## What This Skill Does
6
7	Performs deep performance analysis:
8
9	1. Computation analysis — Identify expensive operations in render path
10	2. Re-render detection — Find unnecessary component re-renders
11	3. Asset optimization — Recommend asset size and format improvements
12	4. Memoization opportunities — Identify cacheable calculations
13	5. Architecture review — Suggest structural improvements
14	6. Render profiling — Analyze frame render times
15
16	## Input/Output Formats
17
18	### Input Format: Remotion Composition Code
19
20	Accepts implemented Remotion composition files:
21
22	Files to analyze:
23	```
24	src/remotion/compositions/VideoName/
25	├── index.tsx # Main composition
26	├── constants.ts # Color, timing, spring configs
27	├── types.ts # TypeScript types
28	└── scenes/
29	├── Scene1.tsx
30	├── Scene2.tsx
31	└── Scene3.tsx
32	```
33
34	Context needed:
35	- Target render time goals (e.g., < 100ms/frame)
36	- Composition complexity (simple, moderate, complex)
37	- Any specific performance concerns
38
39	Example request:
40	```
41	Analyze performance of VideoName composition.
42	Target: < 100ms/frame average render time.
43	Scene 2 is rendering slowly (200ms/frame).
44	```
45
46	### Output Format: OPTIMIZATION_REPORT.md
47
48	Generates detailed performance analysis with actionable fixes:
49
50	```markdown
51	# Performance Optimization Report: [Video Title]
52
53	Date: 2026-01-23
54	Analyzer: remotion-performance-optimizer
55	Composition: `src/remotion/compositions/VideoName/`
56
57	---
58
59	## Executive Summary
60
61	Current Performance: ⚠️ NEEDS OPTIMIZATION
62
63	\| Metric \| Current \| Target \| Status \|
64	\|--------\|---------\|--------\|--------\|
65	\| Average Render Time \| 145ms/frame \| < 100ms \| 🔴 45% over target \|
66	\| Slowest Scene \| Scene 2: 285ms \| < 150ms \| 🔴 90% over target \|
67	\| Total Render Time (estimated) \| 36 minutes \| < 20 minutes \| 🔴 80% over target \|
68	\| Memory Usage \| Normal \| Normal \| 🟢 Good \|
69
70	Potential Improvement: 60-70% faster render times after implementing recommendations
71
72	Priority Actions:
73	1. Replace Math.random() with seeded random in Scene 2 (55% improvement)
74	2. Optimize large product image (20% faster asset loading)
75	3. Extract repeated spring calculations (15% improvement)
76
77	---
78
79	## Performance Breakdown by Scene
80
81	\| Scene \| Avg Render Time \| Status \| Primary Bottleneck \|
82	\|-------\|----------------\|--------\|-------------------\|
83	\| Scene 1 \| 75ms \| 🟢 Good \| None \|
84	\| Scene 2 \| 285ms \| 🔴 Critical \| Non-deterministic particle system \|
85	\| Scene 3 \| 95ms \| 🟡 Acceptable \| Large asset loading \|
86	\| Scene 4 \| 80ms \| 🟢 Good \| None \|
87
88	Overall: 145ms average (Target: < 100ms)
89
90	---
91
92	## Issues Found
93
94	### CRITICAL (Major Performance Impact)
95
96	#### 1. Non-Deterministic Particle System in Scene 2
97	Impact: 🔴 200ms per frame slowdown
98	Location: `src/remotion/compositions/VideoName/scenes/Scene2.tsx:48-65`
99	Severity: Critical - 70% of render time in Scene 2
100
101	Problem:
102	```typescript
103	// ❌ PROBLEM: Math.random() called 70 times per frame
104	{Array.from({ length: 70 }, (_, i) => {
105	const x = Math.random() * width; // Recalculated every frame!
106	const y = Math.random() * height; // Non-deterministic
107	const speed = Math.random() * 2;
108
109	return <Particle key={i} x={x} y={y} speed={speed} />;
110	})}
111	```
112
113	Why This Is Slow:
114	- Math.random() is non-deterministic (different each frame)
115	- 70 particles × 3 random calls = 210 random calls per frame
116	- Remotion can't cache because values change
117	- Browser must recalculate positions every frame
118
119	Solution:
120	```typescript
121	// ✅ OPTIMIZED: Seeded random, deterministic
122	const seededRandom = (seed: number): number => {
123	const x = Math.sin(seed) * 10000;
124	return x - Math.floor(x);
125	};
126
127	const particles = useMemo(
128	() => Array.from({ length: 70 }, (_, i) => ({
129	x: seededRandom(i * 123.456) * width,
130	y: seededRandom(i * 789.012) * height,
131	speed: seededRandom(i * 456.789) * 2,
132	})),
133	[width, height]
134	);
135
136	{particles.map((p, i) => (
137	<Particle key={i} x={p.x} y={p.y} speed={p.speed} />
138	))}
139	```
140
141	Expected Improvement:
142	- Scene 2: 285ms → 125ms (55% faster)
143	- Overall: 145ms → 105ms (28% faster)
144	- Total render time: 36min → 22min (40% faster)
145
146	Implementation Time: 15 minutes
147
148	---
149
150	### HIGH (Significant Performance Impact)
151
152	#### 2. Large Unoptimized Product Image
153	Impact: 🟡 50ms asset loading delay
154	Location: `public/images/product.png`
155	Severity: High - Affect

People who liked this also viewed

6 picks

Type

remotion-performance-optimizer

133installs3forks

View on GitHub

How to install remotion-performance-optimizer?

ncklrs/startup-os-skills/remotion-performance-optimizer

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Remotion Performance Optimizer
2
3	Comprehensive performance analysis and optimization recommendations for Remotion video compositions. Identifies bottlenecks and provides actionable fixes to reduce render times.
4
5	## What This Skill Does
6
7	Performs deep performance analysis:
8
9	1. Computation analysis — Identify expensive operations in render path
10	2. Re-render detection — Find unnecessary component re-renders
11	3. Asset optimization — Recommend asset size and format improvements
12	4. Memoization opportunities — Identify cacheable calculations
13	5. Architecture review — Suggest structural improvements
14	6. Render profiling — Analyze frame render times
15
16	## Input/Output Formats
17
18	### Input Format: Remotion Composition Code
19
20	Accepts implemented Remotion composition files:
21
22	Files to analyze:
23	```
24	src/remotion/compositions/VideoName/
25	├── index.tsx # Main composition
26	├── constants.ts # Color, timing, spring configs
27	├── types.ts # TypeScript types
28	└── scenes/
29	├── Scene1.tsx
30	├── Scene2.tsx
31	└── Scene3.tsx
32	```
33
34	Context needed:
35	- Target render time goals (e.g., < 100ms/frame)
36	- Composition complexity (simple, moderate, complex)
37	- Any specific performance concerns
38
39	Example request:
40	```
41	Analyze performance of VideoName composition.
42	Target: < 100ms/frame average render time.
43	Scene 2 is rendering slowly (200ms/frame).
44	```
45
46	### Output Format: OPTIMIZATION_REPORT.md
47
48	Generates detailed performance analysis with actionable fixes:
49
50	```markdown
51	# Performance Optimization Report: [Video Title]
52
53	Date: 2026-01-23
54	Analyzer: remotion-performance-optimizer
55	Composition: `src/remotion/compositions/VideoName/`
56
57	---
58
59	## Executive Summary
60
61	Current Performance: ⚠️ NEEDS OPTIMIZATION
62
63	\| Metric \| Current \| Target \| Status \|
64	\|--------\|---------\|--------\|--------\|
65	\| Average Render Time \| 145ms/frame \| < 100ms \| 🔴 45% over target \|
66	\| Slowest Scene \| Scene 2: 285ms \| < 150ms \| 🔴 90% over target \|
67	\| Total Render Time (estimated) \| 36 minutes \| < 20 minutes \| 🔴 80% over target \|
68	\| Memory Usage \| Normal \| Normal \| 🟢 Good \|
69
70	Potential Improvement: 60-70% faster render times after implementing recommendations
71
72	Priority Actions:
73	1. Replace Math.random() with seeded random in Scene 2 (55% improvement)
74	2. Optimize large product image (20% faster asset loading)
75	3. Extract repeated spring calculations (15% improvement)
76
77	---
78
79	## Performance Breakdown by Scene
80
81	\| Scene \| Avg Render Time \| Status \| Primary Bottleneck \|
82	\|-------\|----------------\|--------\|-------------------\|
83	\| Scene 1 \| 75ms \| 🟢 Good \| None \|
84	\| Scene 2 \| 285ms \| 🔴 Critical \| Non-deterministic particle system \|
85	\| Scene 3 \| 95ms \| 🟡 Acceptable \| Large asset loading \|
86	\| Scene 4 \| 80ms \| 🟢 Good \| None \|
87
88	Overall: 145ms average (Target: < 100ms)
89
90	---
91
92	## Issues Found
93
94	### CRITICAL (Major Performance Impact)
95
96	#### 1. Non-Deterministic Particle System in Scene 2
97	Impact: 🔴 200ms per frame slowdown
98	Location: `src/remotion/compositions/VideoName/scenes/Scene2.tsx:48-65`
99	Severity: Critical - 70% of render time in Scene 2
100
101	Problem:
102	```typescript
103	// ❌ PROBLEM: Math.random() called 70 times per frame
104	{Array.from({ length: 70 }, (_, i) => {
105	const x = Math.random() * width; // Recalculated every frame!
106	const y = Math.random() * height; // Non-deterministic
107	const speed = Math.random() * 2;
108
109	return <Particle key={i} x={x} y={y} speed={speed} />;
110	})}
111	```
112
113	Why This Is Slow:
114	- Math.random() is non-deterministic (different each frame)
115	- 70 particles × 3 random calls = 210 random calls per frame
116	- Remotion can't cache because values change
117	- Browser must recalculate positions every frame
118
119	Solution:
120	```typescript
121	// ✅ OPTIMIZED: Seeded random, deterministic
122	const seededRandom = (seed: number): number => {
123	const x = Math.sin(seed) * 10000;
124	return x - Math.floor(x);
125	};
126
127	const particles = useMemo(
128	() => Array.from({ length: 70 }, (_, i) => ({
129	x: seededRandom(i * 123.456) * width,
130	y: seededRandom(i * 789.012) * height,
131	speed: seededRandom(i * 456.789) * 2,
132	})),
133	[width, height]
134	);
135
136	{particles.map((p, i) => (
137	<Particle key={i} x={p.x} y={p.y} speed={p.speed} />
138	))}
139	```
140
141	Expected Improvement:
142	- Scene 2: 285ms → 125ms (55% faster)
143	- Overall: 145ms → 105ms (28% faster)
144	- Total render time: 36min → 22min (40% faster)
145
146	Implementation Time: 15 minutes
147
148	---
149
150	### HIGH (Significant Performance Impact)
151
152	#### 2. Large Unoptimized Product Image
153	Impact: 🟡 50ms asset loading delay
154	Location: `public/images/product.png`
155	Severity: High - Affect

People who liked this also viewed

6 picks

Type