サンプル集  >  React  >  Remotion
Remotion
2026/03/08

Remotionを使ってみます。

◆環境
OS Windows 11 Home 25H2

npx create-video@latest

Enterを押します。

>npx create-video@latest
Need to install the following packages:
create-video@4.0.434
Ok to proceed? (y)

Hello Worldを選択しEnterを押します。

npm warn deprecated tar@6.2.1: Old versions of tar are not supported, and contain widely publicized security vulnerabilities, which have been fixed in the current version. Please update. Support for old versions may be purchased (at exorbitant rates) by contacting i@izs.me
Welcome to Remotion!
? Choose a template: » - Use arrow-keys. Return to submit.
    Blank Nothing except an empty canvas
>   Hello World A playground with a simple animation
    Next.js SaaS template for video generation apps
    Next.js (Vercel Sandbox) Render videos on-demand using Vercel Sandbox
    Next.js (No Tailwind) SaaS template for video generation apps
    Next.js (Pages dir) SaaS template for video generation apps
    Recorder A video production tool built entirely in JavaScript
    Prompt to Motion Graphics SaaS Starter Kit SaaS template for AI-powered code generation with Remotion
    Hello World (JavaScript) The default starter template in plain JS
    Render Server An Express.js server for rendering videos with Remotion
    React Router SaaS template for video generation apps
    React Three Fiber Remotion + React Three Fiber Starter Template
    Still images Dynamic PNG/JPEG template with built-in server
    Audiogram Text and waveform visualization for podcasts
    Music Visualization Text and waveform visualization for podcasts
    Prompt to Video Create a story with images and voiceover from a prompt
    Skia React Native Skia starter
    Overlay Overlays for video editing software
    Code Hike Beautiful code animations
 ↓ Stargazer Celebrate your repo stars with a video

Enterを押します。

Choose a template: » Hello World A playground with a simple animation
? Add TailwindCSS? » No / Yes

Enterを押します。

? Add agent skills? » No / Yes

Enterを押します。


███████╗██╗  ██╗██╗██╗     ██╗     ███████╗
██╔════╝██║ ██╔╝██║██║     ██║     ██╔════╝
███████╗█████╔╝ ██║██║     ██║     ███████╗
╚════██║██╔═██╗ ██║██║     ██║     ╚════██║
███████║██║  ██╗██║███████╗███████╗███████║
╚══════╝╚═╝  ╚═╝╚═╝╚══════╝╚══════╝╚══════╝


T  skills 
|
o Source: https://github.com/remotion-dev/skills.git
|
o Repository cloned
|
o Found 1 skill
|
Skill: remotion-best-practices
|
| Best practices for Remotion - Video creation in React
|
o Detected 2 agents
|
* Install to
| > All detected agents (Recommended) (Install to all 2 detected agents)
| Select specific agents

Enterを押します。

*  Installation scope
|  > Project (Install in current directory (committed with your project))
|    Global

Enterを押します。

*  Installation method
|  > Symlink (Recommended) (Single source of truth, easy updates)
|    Copy to all agents

Enterを押します。

o Installation Summary -----------------------------------------------------+
| |
| .\.agents\skills\remotion-best-practices |
| symlink → Antigravity, Claude Code, Moltbot, Cline, CodeBuddy +26 more |
| |
+----------------------------------------------------------------------------+
|
* Proceed with installation?
| > Yes / No

o Installation complete

|
o Installed 1 skill to 31 agents -------------------------------------------+
| |
|
.\.agents\skills\remotion-best-practices |
| symlink → Antigravity, Claude Code, Moltbot, Cline, CodeBuddy +26 more |
| |
+----------------------------------------------------------------------------+

|
Done!


Copied to .

Get started by running:
npm i
npm run dev

To render a video, run:
npx remotion render

Links to get you started:
https://www.remotion.dev/docs
https://www.remotion.dev/prompts

Remotion is free for teams of up to 3.
Adopting Remotion in your company? Visit https://www.remotion.pro/license

? 💻 Open in VS Code? » No / Yes

Yes, I trust the authorsをクリックします。


Terminalを開きます。


npm run dev

サーバーを起動しようとしたところエラーになりました。


npm install



再生ボタンを押すと動画が再生されました!


期待通りに動作しました。

▲ PageTop  ■ Home


Copyright (C) 2026 ymlib.com