Remotion Video Toolkit

Community

viralcode

remotion-video-toolkit

Complete toolkit for programmatic video creation with Remotion + React. Covers animations, timing, rendering (CLI/Node.js/Lambda/Cloud Run), captions, 3D, charts, text effects, transitions, and media handling. Use when writing Remotion code, building video generation pipelines, or creating data-driven video templates.

Overview

Publisher	viralcode
Repository	`openwhale`
Skill name	`remotion-video-toolkit`
Stars	65
Forks	11
Bundled files	33
Links	Skill source Repository Homepage

Markdown instructions
A SKILL.md file the model loads on demand, so it only costs tokens when a request actually matches.
Works with any LLM
AI skills are plain Markdown, not provider-specific code, so this works with GPT, Claude, Gemini, Grok, or a local model.
33 bundled files
Scripts, templates, and references the model can read while it works. Files are read-only and never executed.
Open source
Published by viralcode on GitHub. Read the source before you install it.

Installation

Install the Remotion Video Toolkit AI skill in TypingMind to use it with any LLM, or drop it into another agent that reads SKILL.md.

Install in TypingMind

TypingMind installs a skill straight from its GitHub folder — it reads SKILL.md, bundles the resource files, and stores the result locally.

Open the app and go to Plugins → Skills.
Choose "Install from GitHub".
Paste the skill folder URL below and confirm.
Enable the skill in any chat where you want it available.

Plugins → Skills → Add skill → From GitHub URL, then paste the folder URL and press Continue.

Install in another agent

Any agent that reads the Agent Skills format can use this skill — copy the folder into that agent's skills directory.

Claude Code — .claude/skills

git clone --depth 1 https://github.com/viralcode/openwhale.git /tmp/openwhale
mkdir -p .claude/skills
cp -r /tmp/openwhale/skills/remotion-video-toolkit .claude/skills/remotion-video-toolkit

Restart Claude Code after copying so it picks up the new skill.

Use it in TypingMind

Enable Remotion Video Toolkit in any TypingMind chat and the model takes it from there. Its name and description sit in the system prompt, and the moment a request matches, the model loads the full instructions itself — you never invoke it by hand, and it costs no tokens until it is actually used.

The model loads Remotion Video Toolkit on its own as soon as a request matches it.

Works with any AI model

AI skills are plain Markdown instructions rather than provider-specific code, so Remotion Video Toolkit is not tied to the model it was written for. Install it once in TypingMind and use it with GPT-5, Claude, Gemini, Grok, DeepSeek, Mistral, Llama, or a local model you run yourself — all on your own API keys.

Loaded only when it is needed
The system prompt carries just the name and description. The instructions are fetched on the first matching request, so an idle skill costs nothing.
Switch models mid-chat
Because the skill is instructions rather than code, changing model does not break it — the next model reads the same SKILL.md.

Skill instructions

This is the SKILL.md content the model loads. Read it before installing — a skill is instructions your model will follow.

Remotion Video Toolkit

Write React components, get real MP4 videos. This skill teaches your AI agent how to build with Remotion — from a first animation to a production rendering pipeline.

29 rules. Every major Remotion feature covered.

What you can build with this

Personalized video at scale Feed user data as JSON props, render a unique video per user. Think Spotify Wrapped, GitHub Unwrapped, onboarding walkthroughs — one template, thousands of outputs.

Automated social media clips Pull live data (stats, leaderboards, product metrics) and render daily or weekly video posts without anyone touching a timeline editor.

Dynamic ads and marketing videos Swap in customer name, product image, pricing. Same template, infinite variations. Render server-side via API or Lambda.

Animated data visualizations Turn dashboards and KPI reports into shareable video clips with animated charts and transitions.

TikTok and Reels captions Transcribe audio, display word-by-word highlighted subtitles, export ready for upload.

Product showcase videos Auto-generate from your database — images, specs, pricing — straight to MP4.

Educational and explainer content Animated course materials, certificate videos, step-by-step walkthroughs — all driven by code.

Video generation as a service Expose rendering as an HTTP endpoint. Your app sends JSON, gets back a video file.

Requirements

Node.js 18+
React 18+ (Remotion renders React components frame-by-frame)
Remotion — scaffold with npx create-video@latest
FFmpeg — ships with @remotion/renderer, no separate install needed
For serverless rendering: AWS account (Lambda) or GCP account (Cloud Run)

What's inside

Core

Rule	Description
Compositions	Define videos, stills, folders, default props, dynamic metadata
Rendering	CLI, Node.js API, AWS Lambda, Cloud Run, Express server patterns
Calculate metadata	Set duration, dimensions, and props dynamically at render time

Animation and timing

Rule	Description
Animations	Fade, scale, rotate, slide
Timing	Interpolation curves, easing, spring physics
Sequencing	Delay, chain, and orchestrate scenes
Transitions	Scene-to-scene transitions
Trimming	Cut the start or end of any animation

Text and typography

Rule	Description
Text animations	Typewriter, word highlight, reveal effects
Fonts	Google Fonts and local font loading
Measuring text	Fit text to containers, detect overflow

Media

Rule	Description
Videos	Embed, trim, speed, volume, loop, pitch shift
Audio	Import, trim, fade, volume and speed control
Images	The Img component
GIFs	Timeline-synced GIF playback
Assets	Importing any media into compositions
Decode check	Validate browser compatibility

Captions and subtitles

Rule	Description
Transcribe captions	Audio to captions via Whisper, Deepgram, or AssemblyAI
Display captions	TikTok-style word-by-word highlighting
Import SRT	Load existing .srt files

Data visualization

Rule	Description
Charts	Animated bar charts, line graphs, data-driven visuals

Advanced

Rule	Description
3D content	Three.js and React Three Fiber
Lottie	After Effects animations via Lottie
TailwindCSS	Style compositions with Tailwind
DOM measurement	Measure element dimensions at render time

Media utilities

Rule	Description
Video duration	Get length in seconds
Video dimensions	Get width and height
Audio duration	Get audio length
Extract frames	Pull frames at specific timestamps

Quick start

bash
# Scaffold a project
npx create-video@latest my-video

# Preview in browser
cd my-video && npm start

# Render to MP4
npx remotion render src/index.ts MyComposition out/video.mp4

# Pass dynamic data
npx remotion render src/index.ts MyComposition out.mp4 --props '{"title": "Hello"}'

Contribute

Source: github.com/shreefentsar/remotion-video-toolkit

Missing something? Found a better approach? Open a PR — new rules, improved examples, bug fixes all welcome.

Built by Zone 99

Bundled files

The model reads these on demand while the skill is loaded. They are exposed as readable files and are never executed.

_meta.json1 KB
rules/3d.md2 KB
rules/animations.md1 KB
rules/assets.md2 KB
rules/assets/charts-bar-chart.tsx3 KB
rules/assets/text-animations-typewriter.tsx2 KB
rules/assets/text-animations-word-highlight.tsx2 KB
rules/audio.md4 KB
rules/calculate-metadata.md3 KB
rules/can-decode.md2 KB
rules/charts.md2 KB
rules/compositions.md3 KB
rules/display-captions.md4 KB
rules/extract-frames.md5 KB
rules/fonts.md3 KB
rules/get-audio-duration.md1 KB
rules/get-video-dimensions.md2 KB
rules/get-video-duration.md1 KB
rules/gifs.md4 KB
rules/images.md3 KB
rules/import-srt-captions.md2 KB
rules/lottie.md2 KB
rules/measuring-dom-nodes.md1 KB
rules/measuring-text.md3 KB
rules/rendering.md6 KB
rules/sequencing.md2 KB
rules/tailwind.md1 KB
rules/text-animations.md1 KB
rules/timing.md4 KB
rules/transcribe-captions.md1 KB
rules/transitions.md4 KB
rules/trimming.md1 KB
rules/videos.md3 KB

Frequently asked questions

What does the Remotion Video Toolkit AI skill do?

Why use Remotion Video Toolkit on TypingMind?

Because you install it once and use it with any model. Remotion Video Toolkit is plain Markdown rather than provider-specific code, so the same skill runs on GPT-5, Claude, Gemini, Grok, or a local model — and you can switch model mid-chat without it breaking. TypingMind runs on your own API keys, so you pay providers directly instead of a per-seat subscription, and your skills and chats stay in your own storage.

How do I install Remotion Video Toolkit in TypingMind?

Open Plugins → Skills → Install from GitHub in TypingMind and paste https://github.com/viralcode/openwhale/tree/main/skills/remotion-video-toolkit. TypingMind reads its SKILL.md and bundles its files and installs it as a skill you can enable per chat.

Which AI models can use Remotion Video Toolkit?

Any model you connect in TypingMind. AI skills are plain Markdown instructions rather than provider-specific code, so GPT, Claude, Gemini, Grok, and local models can all load this skill when a request matches it.

How many AI models can I use with Remotion Video Toolkit?

As many as you like. As long as a model supports skills, you can use Remotion Video Toolkit with it — GPT, Claude, Gemini, Grok, DeepSeek, Mistral, Llama and more — all on TypingMind with your own API keys.

Is the Remotion Video Toolkit AI skill free?

It is published on GitHub by viralcode. Check the repository for licensing terms. You only pay your own AI provider for the tokens you use.

What are AI skills?

An AI skill is a reusable instruction bundle that teaches an AI model how to do one specific task. It follows the open Agent Skills format: a SKILL.md file with a name and description, plus any scripts, templates or reference files the model may need. The model reads the instructions only when your request matches the skill, so an installed skill costs nothing until it is used.

How are AI skills different from plugins or MCP servers?

A plugin or MCP server gives a model new tools to call — code that runs somewhere and returns a result. An AI skill gives the model knowledge and process instead: how to approach a task, which steps to follow, what good output looks like. Skills are plain Markdown, so they need no server, no API key and no runtime, and they work with any model.

View all

Podcast Generation

bytedance

OrganizationPopular

Use this skill when the user requests to generate, create, or produce podcasts from text content. Converts written content into a two-host conversational podcast audio format with natural dialogue.

Video Generation

Use this skill when the user requests to generate, create, or imagine videos. Supports structured prompts and reference image for guided generation.

Accessible Authentication

thedaviddias

CommunityPopular

Use when reviewing sign-in, sign-up, MFA, CAPTCHA, recovery, and re-auth flows. Evaluate the full authentication path, including error handling and backup methods, not just the primary login form.

Audio Descriptions

Use when reviewing rendered HTML, interactive components, or design-system patterns related to Provide audio descriptions for video. Check native semantics first, then inspect keyboard behavior, focus…

Overview

Installation

Install in TypingMind

Install in another agent

Use it in TypingMind

Works with any AI model

Skill instructions

Remotion Video Toolkit

What you can build with this

Requirements

What's inside

Core

Animation and timing

Text and typography

Media

Captions and subtitles

Data visualization

Advanced

Media utilities

Quick start

Contribute

Bundled files

Frequently asked questions

Related AI Skills

Set up your own AI workspace now