remotion-video-skill

Remotion Video Skill enables you to create videos programmatically using React components and the Remotion framework, with built-in AI-powered text-to-speech audio generation via MiniMax or Edge TTS. The skill uses a scene-based architecture that automatically handles timing and supports animations, subtitles, and music visualization. Operations and marketing teams can integrate it into workflows to automate video production at scale without manual video editing. Setup requires Node.js 18+, Python 3.8+, and ffmpeg; TTS can be configured with either free Edge TTS or MiniMax's paid service for voice cloning.

[{"step":"Define your video requirements","action":"Clearly outline the topic, duration, style, and key sections (e.g., intro, key points, CTA) in your prompt. Use placeholders like [TOPIC/PURPOSE] and [DURATION] to customize the output.","tip":"For consistency, create a template for your team with predefined styles (e.g., 'professional,' 'casual,' 'animated') and voice preferences (e.g., 'male US English,' 'female UK English')."},{"step":"Write the script structure","action":"Break down the video into sections (e.g., intro, 3 key points, CTA) and provide the script text for each section. Include timing estimates for each segment to ensure the final video meets the duration requirement.","tip":"Use tools like Google Docs or Notion to draft the script collaboratively. For AI-generated scripts, provide a detailed outline to avoid generic outputs."},{"step":"Generate the React component","action":"Use a React library like `remotion` or `react-three-fiber` to create a video component. Structure the component to dynamically render text, animations, and transitions based on the script. Example:\n```jsx\nimport { useVideoConfig } from 'remotion'; \n\nfunction MyVideo() {\n const { durationInFrames } = useVideoConfig();\n return (\n <div>\n <Intro duration={durationInFrames} />\n <KeyPoints duration={durationInFrames} />\n <CTA duration={durationInFrames} />\n </div>\n );\n}\n```","tip":"Leverage Remotion's built-in templates (e.g., `npx create-video`) to scaffold your project quickly. Use CSS-in-JS libraries like styled-components for dynamic styling."},{"step":"Add AI-powered text-to-speech","action":"Integrate an AI TTS service (e.g., ElevenLabs, Azure Speech, or Amazon Polly) to generate narration. Use the script text as input and sync the audio with the video timeline. Example:\n```bash\n# Using ElevenLabs API\nelevenlabs-cli --text \"Welcome to our guide\" --voice \"Samantha\" --output welcome.mp3\n```","tip":"Test different voices and speeds to match the video's tone. For multilingual videos, use services like Google Cloud TTS or Azure Speech for broader language support."},{"step":"Render and export the video","action":"Use Remotion's CLI to render the video in your desired format (e.g., MP4, GIF). Example:\n```bash\nnpx remotion render my-video my-video.mp4 --props='{\"duration\": 60}'\n```","tip":"For batch processing, use a script to automate rendering multiple videos with different inputs. Store outputs in a cloud bucket (e.g., AWS S3) for easy distribution."}]