npx create-video@latest

? Choose a template: › - Use arrow-keys. Return to submit.
❯   Hello World               A "Hello World" starter template
    Next.js (App dir)         SaaS template for video generation apps
    Next.js (Pages dir)       SaaS template for video generation apps
    Blank                     Nothing except an empty canvas
    Hello World (JavaScript)  The default starter template in plain JS
    Remix                     Remotion + Remix Starter Kit
    React Three Fiber         Remotion + React Three Fiber Starter Template
    Still images              Dynamic PNG/JPEG template with built-in server
    TTS (Azure)               Turns text into speech and makes a video
    TTS (Google)              Turns text into speech and makes a video
    Audiogram                 Text and waveform visualization for podcasts
    Skia                      React Native Skia starter
    Tailwind                  TypeScript and Tailwind starter
    Overlay                   Overlays for video editing software
    Stargazer                 Celebrate your repo stars with a video
    TikTok                    Generate animated word-by-word captions

npm start

 npm i --save-exact @remotion/lambda@4.0.126

npx remotion lambda policies role

REMOTION_AWS_ACCESS_KEY_ID=<Access key ID>
REMOTION_AWS_SECRET_ACCESS_KEY=<Secret access key>

npx remotion lambda policies user

npx remotion lambda policies validate

npx remotion lambda functions deploy

npx remotion lambda sites create src/index.ts --site-name=my-video

npx remotion lambda render <serve-url> <composition-id>

<Composition
    // You can take the "id" to render a video:
    // npx remotion render src/index.ts <id> out/video.mp4
    id="HelloWorld"
    component={HelloWorld}
    durationInFrames={54000} // 30分
    fps={30}
    width={1920}
    height={1080}
    // You can override these props for each render:
    // https://www.remotion.dev/docs/parametrized-rendering
    schema={myCompSchema}
    defaultProps={{
        titleText: 'hogehoge remotion',
        titleColor: '#000000',
        logoColor1: '#91EAE4',
        logoColor2: '#86A8E7',
    }}
/>

npx remotion render HelloWorld

Error: Timeout exceeded rendering the component at frame 40056.

npx remotion render HelloWorld --concurency=2

(1/3) ╭───────────────────╮ Bundled code 828ms
Composition = HelloWorld (Passed as argument), Codec = h264 (default), Output = out/HelloWorld.mp4
(2/3) ╭───────────────────╮ Rendered frames (4x) 2304142ms
(3/3) ╭───────────────────╮ Encoded video 188954ms

 npx remotion lambda quotas

Region = us-east-1

Concurrency limit: 400 - Increase recommended!
The maximum amount of Lambda functions which can concurrently execute.
Run `npx remotion lambda quotas increase` to ask AWS to increase your limit.

Burst concurrency: 3000, but only 1000 effective because of concurrency limit
The maximum amount of concurrency increase in 10 seconds

npx remotion lambda sites create src/index.ts --site-name=my-video

% npx remotion lambda render https://remotionlambda-useast1-xxxx
bucket = remotionlambda-useast1-atx3f3tmn9, function = remotion-render-xxx
renderId = xxxx, codec = h264 (default)
(1/5) ╭───────────────────╮ Invoking lambdas 100% 
(2/5) ╭────────────────╴    Rendering frames (45810/54000)
(3/5) ╭──────               Encoding chunks 30%

Symbolicating minified error message...
The main function timed out after 119999ms.
略
Accrued costs until error was thrown: $0.516.

npx remotion lambda render https://remotionlambda-useast1-xxxx.s3.amazonaws.com/sites/my-video/index.html HelloWorld

bucket = remotionlambda-useast1-xxxxx, function = remotion-render-xxxx
renderId = xxxxx, codec = h264 (default)
(1/5) ╭───────────────────╮ Invoking lambdas 100% 
(2/5) ╭───────────────────╮ Rendered frames 222953ms
(3/5) ╭───────────────────╮ Encoded chunks 222953ms
(4/5) ╭───────────────────╮ Combined videos 45359ms
(5/5) ╭───────────────────╮ Cleaned up artifacts 1203ms

Done! https://s3.us-east-1.amazonaws.com/remotionlambda-useast1-xxxx/renders/xxxx/out.mp4
151 λ's used, 279.14sec, Estimated cost $0.599

import { Composition } from "remotion";
import { MyComp } from "./MyComp";
 
export const MyVideo = () => {
  return (
    <>
      <Composition
        id="my-comp"
        component={MyComp}
        width={1080}
        height={1080}
        fps={30}
        durationInFrames={3 * 30}
      />
    </>
  );
};

import React from 'react';
import {Sequence} from 'remotion';

const MyComp = () => {
    return (
        <div style={{flex: 1, backgroundColor: '#000', justifyContent: 'center', alignItems: 'center', display: 'flex'}}>
            <Sequence from={0} durationInFrames={90}>
                <h1 style={{color: '#fff'}}>Welcome to My Video</h1>
            </Sequence>
            <Sequence from={90} durationInFrames={90}>
                <h1 style={{color: '#fff'}}>Thanks for Watching</h1>
            </Sequence>
        </div>
    );
};

export default MyComp;

import React from 'react';
import {Sequence} from 'remotion';

const MyComp = ({text1, text2}) => {
    return (
        <div style={{flex: 1, backgroundColor: '#000', justifyContent: 'center', alignItems: 'center', display: 'flex'}}>
            <Sequence from={0} durationInFrames={90}>
                <h1 style={{color: '#fff'}}>{text}</h1>
            </Sequence>
            <Sequence from={90} durationInFrames={90}>
                <h1 style={{color: '#fff'}}>{text2}</h1>
            </Sequence>
        </div>
    );
};

export default MyComp;

npx remotion render --props 

<AbsoluteFill>
  <AbsoluteFill>
    <Img src={staticFile("bg.png")} />
  </AbsoluteFill>
  <AbsoluteFill>
    <h1>This text appears on top of the video!</h1>
  </AbsoluteFill>
</AbsoluteFill>

<Sequence from={60} durationInFrames={40}>
    <h1>This text appears after 60 frames!</h1>
</Sequence>

<Sequence from={60} durationInFrames={60}>
    <Sequence from={30} durationInFrames={30}>
        <h1>This text appears after 90 frames!</h1>
    </Sequence>
</Sequence>