remotion-animation

Name: remotion-animation
Author: ncklrs

383installs3forks

How to install remotion-animation?

ncklrs/startup-os-skills/remotion-animation

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

Installs into the current project.

Summary

Generates animation configurations for Remotion including spring configs, interpolations, easing functions, and timing logic. Focuses ONLY on animation parameters, NOT component implementation. Use when defining animation behavior or when asked to "configure animations", "setup s

Files · 1

View on GitHub

SKILL.md

1	# Remotion Animation
2
3	Generates animation configuration documents that define spring behaviors, interpolation mappings, easing curves, and timing constants for Remotion videos. This skill focuses exclusively on animation parameters and does NOT generate component code.
4
5	## What This Skill Does
6
7	Generates animation configurations for:
8
9	1. Spring configs — Damping, stiffness, mass parameters for spring animations
10	2. Interpolation mappings — Input/output ranges for value transformations
11	3. Easing functions — Timing function configurations
12	4. Animation timing — Stagger delays, durations, transition points
13	5. Progress calculations — Frame-based animation progress logic
14
15	## Scope Boundaries
16
17	IN SCOPE:
18	- Spring configuration parameters
19	- Interpolation input/output ranges
20	- Easing curve definitions
21	- Animation timing constants
22	- Progress calculation patterns
23
24	OUT OF SCOPE:
25	- Component implementation (use `/remotion-component-gen`)
26	- Scene layout (use `/remotion-composition`)
27	- Visual styling (colors, fonts, layout)
28	- Asset management (use `/remotion-asset-coordinator`)
29
30	## Input/Output Formats
31
32	### Input Format: Animation Requirements
33
34	Accepts animation specifications from natural language or motion specs:
35
36	From Natural Language:
37	```
38	Create smooth entrance animations with gentle bounce for logo.
39	Scale from 0.8 to 1.0 over 30 frames.
40	Stagger text words with 5 frame delay between each.
41	```
42
43	From Motion Spec:
44	```markdown
45	## Scene 1 Animation Details
46
47	Logo Entrance:
48	- Spring animation: Scale 0.8 → 1.0
49	- Timing: Frames 0-30
50	- Config: Smooth with slight bounce (damping: 180)
51	- Opacity: 0 → 1 (linear)
52
53	Text Stagger:
54	- Word-by-word reveal
55	- Stagger delay: 5 frames
56	- Individual word animation: 15 frames
57	- Spring config: Snappy (damping: 20, stiffness: 200)
58	```
59
60	### Output Format: ANIMATION_CONFIG.md
61
62	Generates a configuration document with all animation parameters:
63
64	```markdown
65	# Animation Configuration: ProductDemo
66
67	## Status
68	✅ Animation parameters defined
69	⏳ Ready for implementation in components
70
71	## Spring Configurations
72
73	```typescript
74	export const SPRING_CONFIGS = {
75	// Smooth, elegant entrance - minimal bounce
76	smooth: {
77	damping: 200,
78	mass: 1,
79	stiffness: 100,
80	},
81
82	// Snappy, responsive - quick settle
83	snappy: {
84	damping: 20,
85	stiffness: 200,
86	mass: 0.5,
87	},
88
89	// Bouncy, playful - noticeable oscillation
90	bouncy: {
91	damping: 8,
92	mass: 1,
93	stiffness: 100,
94	},
95
96	// Gentle, soft - slow and smooth
97	gentle: {
98	damping: 30,
99	stiffness: 80,
100	mass: 1,
101	},
102	} as const;
103	```
104
105	## Interpolation Mappings
106
107	```typescript
108	export const INTERPOLATIONS = {
109	// Logo scale animation
110	logoScale: {
111	input: [0, 1], // Progress from spring (0 to 1)
112	output: [0.8, 1], // Scale value (0.8 to 1.0)
113	extrapolate: 'clamp',
114	},
115
116	// Text slide-in
117	textSlide: {
118	input: [0, 1],
119	output: [-50, 0], // Translate X from -50px to 0
120	extrapolate: 'clamp',
121	},
122
123	// Fade effect
124	fade: {
125	input: [0, 1],
126	output: [0, 1], // Opacity 0 to 1
127	extrapolate: 'clamp',
128	},
129	} as const;
130	```
131
132	## Animation Timing
133
134	```typescript
135	export const ANIMATION_TIMING = {
136	// Global timing constants
137	fps: 30,
138
139	// Stagger animations
140	stagger: {
141	textWords: 5, // Frame delay between words
142	listItems: 3, // Frame delay between list items
143	cards: 8, // Frame delay between card reveals
144	},
145
146	// Durations
147	durations: {
148	fadeIn: 15, // Frames for fade in
149	fadeOut: 10, // Frames for fade out
150	hold: 30, // Frames to hold on screen
151	quickTransition: 5, // Frames for quick change
152	},
153
154	// Scene-specific timing
155	scene1: {
156	logoEnter: { start: 0, end: 30 },
157	textReveal: { start: 20, end: 60 },
158	},
159
160	scene2: {
161	contentFadeIn: { start: 0, end: 20 },
162	bulletStagger: { start: 25, delay: 8 },
163	},
164	} as const;
165	```
166
167	## Easing Functions
168
169	```typescript
170	export const EASING = {
171	// Standard easing curves
172	easeInOut: (t: number) =>
173	t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
174
175	easeOut: (t: number) =>
176	t * (2 - t),
177
178	easeIn: (t: number) =>
179	t * t,
180
181	// Cubic bezier approximations
182	cubicBezier: {
183	ease: [0.25, 0.1, 0.25, 1],
184	easeIn: [0.42, 0, 1, 1],
185	easeOut: [0, 0, 0.58, 1],
186	easeInOut: [0.42, 0, 0.58, 1],
187	},
188	} as const;
189	```
190
191	## Progress Calculation Patterns
192
193	```typescript
194	// Pattern 1: Simple spring progress
195	const logoProgress = spring({
196	frame,
197	fps,
198	config: SPRING_CONFIGS.smooth,
199	});
200
201	// Pattern 2: Delayed spring (for stagger)
202	const itemProgress = spring({
203	frame: frame

People who liked this also viewed

6 picks

Type

remotion-animation

383installs3forks

View on GitHub

How to install remotion-animation?

ncklrs/startup-os-skills/remotion-animation

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

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Remotion Animation
2
3	Generates animation configuration documents that define spring behaviors, interpolation mappings, easing curves, and timing constants for Remotion videos. This skill focuses exclusively on animation parameters and does NOT generate component code.
4
5	## What This Skill Does
6
7	Generates animation configurations for:
8
9	1. Spring configs — Damping, stiffness, mass parameters for spring animations
10	2. Interpolation mappings — Input/output ranges for value transformations
11	3. Easing functions — Timing function configurations
12	4. Animation timing — Stagger delays, durations, transition points
13	5. Progress calculations — Frame-based animation progress logic
14
15	## Scope Boundaries
16
17	IN SCOPE:
18	- Spring configuration parameters
19	- Interpolation input/output ranges
20	- Easing curve definitions
21	- Animation timing constants
22	- Progress calculation patterns
23
24	OUT OF SCOPE:
25	- Component implementation (use `/remotion-component-gen`)
26	- Scene layout (use `/remotion-composition`)
27	- Visual styling (colors, fonts, layout)
28	- Asset management (use `/remotion-asset-coordinator`)
29
30	## Input/Output Formats
31
32	### Input Format: Animation Requirements
33
34	Accepts animation specifications from natural language or motion specs:
35
36	From Natural Language:
37	```
38	Create smooth entrance animations with gentle bounce for logo.
39	Scale from 0.8 to 1.0 over 30 frames.
40	Stagger text words with 5 frame delay between each.
41	```
42
43	From Motion Spec:
44	```markdown
45	## Scene 1 Animation Details
46
47	Logo Entrance:
48	- Spring animation: Scale 0.8 → 1.0
49	- Timing: Frames 0-30
50	- Config: Smooth with slight bounce (damping: 180)
51	- Opacity: 0 → 1 (linear)
52
53	Text Stagger:
54	- Word-by-word reveal
55	- Stagger delay: 5 frames
56	- Individual word animation: 15 frames
57	- Spring config: Snappy (damping: 20, stiffness: 200)
58	```
59
60	### Output Format: ANIMATION_CONFIG.md
61
62	Generates a configuration document with all animation parameters:
63
64	```markdown
65	# Animation Configuration: ProductDemo
66
67	## Status
68	✅ Animation parameters defined
69	⏳ Ready for implementation in components
70
71	## Spring Configurations
72
73	```typescript
74	export const SPRING_CONFIGS = {
75	// Smooth, elegant entrance - minimal bounce
76	smooth: {
77	damping: 200,
78	mass: 1,
79	stiffness: 100,
80	},
81
82	// Snappy, responsive - quick settle
83	snappy: {
84	damping: 20,
85	stiffness: 200,
86	mass: 0.5,
87	},
88
89	// Bouncy, playful - noticeable oscillation
90	bouncy: {
91	damping: 8,
92	mass: 1,
93	stiffness: 100,
94	},
95
96	// Gentle, soft - slow and smooth
97	gentle: {
98	damping: 30,
99	stiffness: 80,
100	mass: 1,
101	},
102	} as const;
103	```
104
105	## Interpolation Mappings
106
107	```typescript
108	export const INTERPOLATIONS = {
109	// Logo scale animation
110	logoScale: {
111	input: [0, 1], // Progress from spring (0 to 1)
112	output: [0.8, 1], // Scale value (0.8 to 1.0)
113	extrapolate: 'clamp',
114	},
115
116	// Text slide-in
117	textSlide: {
118	input: [0, 1],
119	output: [-50, 0], // Translate X from -50px to 0
120	extrapolate: 'clamp',
121	},
122
123	// Fade effect
124	fade: {
125	input: [0, 1],
126	output: [0, 1], // Opacity 0 to 1
127	extrapolate: 'clamp',
128	},
129	} as const;
130	```
131
132	## Animation Timing
133
134	```typescript
135	export const ANIMATION_TIMING = {
136	// Global timing constants
137	fps: 30,
138
139	// Stagger animations
140	stagger: {
141	textWords: 5, // Frame delay between words
142	listItems: 3, // Frame delay between list items
143	cards: 8, // Frame delay between card reveals
144	},
145
146	// Durations
147	durations: {
148	fadeIn: 15, // Frames for fade in
149	fadeOut: 10, // Frames for fade out
150	hold: 30, // Frames to hold on screen
151	quickTransition: 5, // Frames for quick change
152	},
153
154	// Scene-specific timing
155	scene1: {
156	logoEnter: { start: 0, end: 30 },
157	textReveal: { start: 20, end: 60 },
158	},
159
160	scene2: {
161	contentFadeIn: { start: 0, end: 20 },
162	bulletStagger: { start: 25, delay: 8 },
163	},
164	} as const;
165	```
166
167	## Easing Functions
168
169	```typescript
170	export const EASING = {
171	// Standard easing curves
172	easeInOut: (t: number) =>
173	t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t,
174
175	easeOut: (t: number) =>
176	t * (2 - t),
177
178	easeIn: (t: number) =>
179	t * t,
180
181	// Cubic bezier approximations
182	cubicBezier: {
183	ease: [0.25, 0.1, 0.25, 1],
184	easeIn: [0.42, 0, 1, 1],
185	easeOut: [0, 0, 0.58, 1],
186	easeInOut: [0.42, 0, 0.58, 1],
187	},
188	} as const;
189	```
190
191	## Progress Calculation Patterns
192
193	```typescript
194	// Pattern 1: Simple spring progress
195	const logoProgress = spring({
196	frame,
197	fps,
198	config: SPRING_CONFIGS.smooth,
199	});
200
201	// Pattern 2: Delayed spring (for stagger)
202	const itemProgress = spring({
203	frame: frame

People who liked this also viewed

6 picks

Type