remotion-render

Name: remotion-render
Author: Hainrixz

210stars100forks

How to install remotion-render?

hainrixz/editor-pro-max/remotion-render

$npx -y skills add Hainrixz/editor-pro-max --skill remotion-render

Installs into the current project.

Summary

Render videos from React/Remotion component code via inference.sh. Pass TSX code, get MP4. Supports all Remotion APIs: useCurrentFrame, useVideoConfig, spring, interpolate, AbsoluteFill, Sequence. Configurable resolution, FPS, duration, codec. Use for: programmatic video generati

Files · 1

View on GitHub

SKILL.md

1	# Remotion Render
2
3	Render videos from React/Remotion component code via [inference.sh](https://inference.sh) CLI.
4
5	![Remotion Render](https://cloud.inference.sh/app/files/u/4mg21r6ta37mpaz6ktzwtt8krr/01kg2c0egyg243mnyth4y6g51q.jpeg)
6
7	## Quick Start
8
9	> Requires inference.sh CLI (`infsh`). [Install instructions](https://raw.githubusercontent.com/inference-sh/skills/refs/heads/main/cli-install.md)
10
11	```bash
12	infsh login
13
14	# Render a simple animation
15	infsh app run infsh/remotion-render --input '{
16	"code": "import { useCurrentFrame, AbsoluteFill } from \"remotion\"; export default function Main() { const frame = useCurrentFrame(); return <AbsoluteFill style={{backgroundColor: \"#000\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\"}}><h1 style={{color: \"white\", fontSize: 100, opacity: frame / 30}}>Hello World</h1></AbsoluteFill>; }",
17	"duration_seconds": 3,
18	"fps": 30,
19	"width": 1920,
20	"height": 1080
21	}'
22	```
23
24
25	## Input Schema
26
27	\| Parameter \| Type \| Required \| Description \|
28	\|-----------\|------\|----------\|-------------\|
29	\| `code` \| string \| Yes \| React component TSX code. Must export default a component. \|
30	\| `composition_id` \| string \| No \| Composition ID to render \|
31	\| `props` \| object \| No \| Props passed to the component \|
32	\| `width` \| number \| No \| Video width in pixels \|
33	\| `height` \| number \| No \| Video height in pixels \|
34	\| `fps` \| number \| No \| Frames per second \|
35	\| `duration_seconds` \| number \| No \| Video duration in seconds \|
36	\| `codec` \| string \| No \| Output codec \|
37
38	## Available Imports
39
40	Your TSX code can import from `remotion` and `react`:
41
42	```tsx
43	// Remotion APIs
44	import {
45	useCurrentFrame,
46	useVideoConfig,
47	spring,
48	interpolate,
49	AbsoluteFill,
50	Sequence,
51	Audio,
52	Video,
53	Img
54	} from "remotion";
55
56	// React
57	import React, { useState, useEffect } from "react";
58	```
59
60	## Examples
61
62	### Fade-In Text
63
64	```bash
65	infsh app run infsh/remotion-render --input '{
66	"code": "import { useCurrentFrame, AbsoluteFill, interpolate } from \"remotion\"; export default function Main() { const frame = useCurrentFrame(); const opacity = interpolate(frame, [0, 30], [0, 1]); return <AbsoluteFill style={{backgroundColor: \"#1a1a2e\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\"}}><h1 style={{color: \"#eee\", fontSize: 80, opacity}}>Welcome</h1></AbsoluteFill>; }",
67	"duration_seconds": 2,
68	"fps": 30,
69	"width": 1920,
70	"height": 1080
71	}'
72	```
73
74	### Animated Counter
75
76	```bash
77	infsh app run infsh/remotion-render --input '{
78	"code": "import { useCurrentFrame, useVideoConfig, AbsoluteFill } from \"remotion\"; export default function Main() { const frame = useCurrentFrame(); const { fps, durationInFrames } = useVideoConfig(); const progress = Math.floor((frame / durationInFrames) * 100); return <AbsoluteFill style={{backgroundColor: \"#000\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\", flexDirection: \"column\"}}><h1 style={{color: \"#fff\", fontSize: 200}}>{progress}%</h1><p style={{color: \"#666\", fontSize: 30}}>Loading...</p></AbsoluteFill>; }",
79	"duration_seconds": 5,
80	"fps": 60,
81	"width": 1080,
82	"height": 1080
83	}'
84	```
85
86	### Spring Animation
87
88	```bash
89	infsh app run infsh/remotion-render --input '{
90	"code": "import { useCurrentFrame, useVideoConfig, spring, AbsoluteFill } from \"remotion\"; export default function Main() { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const scale = spring({ frame, fps, config: { damping: 10, stiffness: 100 } }); return <AbsoluteFill style={{backgroundColor: \"#6366f1\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\"}}><div style={{width: 200, height: 200, backgroundColor: \"white\", borderRadius: 20, transform: `scale(${scale})`}} /></AbsoluteFill>; }",
91	"duration_seconds": 2,
92	"fps": 60,
93	"width": 1080,
94	"height": 1080
95	}'
96	```
97
98	### With Props
99
100	```bash
101	infsh app run infsh/remotion-render --input '{
102	"code": "import { AbsoluteFill } from \"remotion\"; export default function Main({ title, subtitle }) { return <AbsoluteFill style={{backgroundColor: \"#000\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\", flexDirection: \"column\"}}><h1 style={{color: \"#fff\", fontSize: 80}}>{title}</h1><p style={{color: \"#888\", fontSize: 40}}>{subtitle}</p></AbsoluteFill>; }",
103	"props": {"title": "My Video", "subtitle": "Created with Remotion"},
104	"duration

People who liked this also viewed

6 picks

Type

remotion-render

210stars100forks

View on GitHub

How to install remotion-render?

hainrixz/editor-pro-max/remotion-render

$npx -y skills add Hainrixz/editor-pro-max --skill remotion-render

Installs into the current project.

Summary

Files · 1

View on GitHub

SKILL.md

1	# Remotion Render
2
3	Render videos from React/Remotion component code via [inference.sh](https://inference.sh) CLI.
4
5	![Remotion Render](https://cloud.inference.sh/app/files/u/4mg21r6ta37mpaz6ktzwtt8krr/01kg2c0egyg243mnyth4y6g51q.jpeg)
6
7	## Quick Start
8
9	> Requires inference.sh CLI (`infsh`). [Install instructions](https://raw.githubusercontent.com/inference-sh/skills/refs/heads/main/cli-install.md)
10
11	```bash
12	infsh login
13
14	# Render a simple animation
15	infsh app run infsh/remotion-render --input '{
16	"code": "import { useCurrentFrame, AbsoluteFill } from \"remotion\"; export default function Main() { const frame = useCurrentFrame(); return <AbsoluteFill style={{backgroundColor: \"#000\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\"}}><h1 style={{color: \"white\", fontSize: 100, opacity: frame / 30}}>Hello World</h1></AbsoluteFill>; }",
17	"duration_seconds": 3,
18	"fps": 30,
19	"width": 1920,
20	"height": 1080
21	}'
22	```
23
24
25	## Input Schema
26
27	\| Parameter \| Type \| Required \| Description \|
28	\|-----------\|------\|----------\|-------------\|
29	\| `code` \| string \| Yes \| React component TSX code. Must export default a component. \|
30	\| `composition_id` \| string \| No \| Composition ID to render \|
31	\| `props` \| object \| No \| Props passed to the component \|
32	\| `width` \| number \| No \| Video width in pixels \|
33	\| `height` \| number \| No \| Video height in pixels \|
34	\| `fps` \| number \| No \| Frames per second \|
35	\| `duration_seconds` \| number \| No \| Video duration in seconds \|
36	\| `codec` \| string \| No \| Output codec \|
37
38	## Available Imports
39
40	Your TSX code can import from `remotion` and `react`:
41
42	```tsx
43	// Remotion APIs
44	import {
45	useCurrentFrame,
46	useVideoConfig,
47	spring,
48	interpolate,
49	AbsoluteFill,
50	Sequence,
51	Audio,
52	Video,
53	Img
54	} from "remotion";
55
56	// React
57	import React, { useState, useEffect } from "react";
58	```
59
60	## Examples
61
62	### Fade-In Text
63
64	```bash
65	infsh app run infsh/remotion-render --input '{
66	"code": "import { useCurrentFrame, AbsoluteFill, interpolate } from \"remotion\"; export default function Main() { const frame = useCurrentFrame(); const opacity = interpolate(frame, [0, 30], [0, 1]); return <AbsoluteFill style={{backgroundColor: \"#1a1a2e\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\"}}><h1 style={{color: \"#eee\", fontSize: 80, opacity}}>Welcome</h1></AbsoluteFill>; }",
67	"duration_seconds": 2,
68	"fps": 30,
69	"width": 1920,
70	"height": 1080
71	}'
72	```
73
74	### Animated Counter
75
76	```bash
77	infsh app run infsh/remotion-render --input '{
78	"code": "import { useCurrentFrame, useVideoConfig, AbsoluteFill } from \"remotion\"; export default function Main() { const frame = useCurrentFrame(); const { fps, durationInFrames } = useVideoConfig(); const progress = Math.floor((frame / durationInFrames) * 100); return <AbsoluteFill style={{backgroundColor: \"#000\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\", flexDirection: \"column\"}}><h1 style={{color: \"#fff\", fontSize: 200}}>{progress}%</h1><p style={{color: \"#666\", fontSize: 30}}>Loading...</p></AbsoluteFill>; }",
79	"duration_seconds": 5,
80	"fps": 60,
81	"width": 1080,
82	"height": 1080
83	}'
84	```
85
86	### Spring Animation
87
88	```bash
89	infsh app run infsh/remotion-render --input '{
90	"code": "import { useCurrentFrame, useVideoConfig, spring, AbsoluteFill } from \"remotion\"; export default function Main() { const frame = useCurrentFrame(); const { fps } = useVideoConfig(); const scale = spring({ frame, fps, config: { damping: 10, stiffness: 100 } }); return <AbsoluteFill style={{backgroundColor: \"#6366f1\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\"}}><div style={{width: 200, height: 200, backgroundColor: \"white\", borderRadius: 20, transform: `scale(${scale})`}} /></AbsoluteFill>; }",
91	"duration_seconds": 2,
92	"fps": 60,
93	"width": 1080,
94	"height": 1080
95	}'
96	```
97
98	### With Props
99
100	```bash
101	infsh app run infsh/remotion-render --input '{
102	"code": "import { AbsoluteFill } from \"remotion\"; export default function Main({ title, subtitle }) { return <AbsoluteFill style={{backgroundColor: \"#000\", display: \"flex\", justifyContent: \"center\", alignItems: \"center\", flexDirection: \"column\"}}><h1 style={{color: \"#fff\", fontSize: 80}}>{title}</h1><p style={{color: \"#888\", fontSize: 40}}>{subtitle}</p></AbsoluteFill>; }",
103	"props": {"title": "My Video", "subtitle": "Created with Remotion"},
104	"duration

People who liked this also viewed

6 picks

Type