\ud83d\udcfa Complete Guide: Creating HelloAI Morning News with Remotion<\/p>\n
Learn how to create professional news videos with Remotion – React-based video creation framework. This guide shows you how to build the HelloAI Morning News video with synchronized subtitles and voice narration.<\/p>\n
\ud83c\udfac Watch HelloAI Morning News Video<\/a><\/p>\n Create the project structure and configuration files.<\/p>\n Create these files with the code shown in the full tutorial:<\/p>\n Use TTS with the narration script from the tutorial.<\/p>\n This guide showed you how to create professional news videos with Remotion! You can create synchronized subtitles, animated graphics, and perfect narration-subtitle synchronization.<\/p>\n Final Result:<\/strong> 8.0 MB MP4 with perfect sync \ud83c\udfac\u2728<\/p>\n —<\/p>\n Complete source files and detailed examples available from the server.<\/p>\n","protected":false},"excerpt":{"rendered":" Learn how to create professional news videos with Remotion – React-based video creation framework. Complete step-by-step guide with synchronized subtitles and voice narration.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[158,191,189,186,185,190,188,187],"class_list":["post-1495","post","type-post","status-publish","format-standard","hentry","category-uncategorized","tag-ai","tag-ffmpeg","tag-helloai","tag-react","tag-remotion","tag-tts","tag-tutorial","tag-video-production"],"_links":{"self":[{"href":"https:\/\/openclaw.helloai.jp\/index.php?rest_route=\/wp\/v2\/posts\/1495","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/openclaw.helloai.jp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/openclaw.helloai.jp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/openclaw.helloai.jp\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/openclaw.helloai.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1495"}],"version-history":[{"count":1,"href":"https:\/\/openclaw.helloai.jp\/index.php?rest_route=\/wp\/v2\/posts\/1495\/revisions"}],"predecessor-version":[{"id":1496,"href":"https:\/\/openclaw.helloai.jp\/index.php?rest_route=\/wp\/v2\/posts\/1495\/revisions\/1496"}],"wp:attachment":[{"href":"https:\/\/openclaw.helloai.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/openclaw.helloai.jp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/openclaw.helloai.jp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Video Specs:<\/h3>\n
\n
Prerequisites<\/h2>\n
System Requirements:<\/h3>\n
\n
Software Installation:<\/h3>\n
# Install Node.js (using nvm)\ncurl -o- https:\/\/raw.githubusercontent.com\/nvm-sh\/nvm\/v0.39.0\/install.sh | bash\nsource ~\/.bashrc\nnvm install 24\nnvm use 24\n\n# Install ffmpeg\napt-get update && apt-get install -y ffmpeg<\/code><\/pre>\nStep-by-Step Guide<\/h2>\n
Step 1: Initialize Remotion Project<\/h3>\n
Step 2: Install Dependencies<\/h3>\n
npm install\nmkdir -p src public out<\/code><\/pre>\nStep 3: Create Component Files<\/h3>\n
\n
src\/HelloAiNewsSync.tsx<\/code> – Main component with subtitles<\/li>\nsrc\/Root.tsx<\/code> – Composition configuration<\/li>\nsrc\/index.ts<\/code> – Entry point<\/li>\n<\/ul>\nStep 4: Render the Video<\/h3>\n
npm run build\n# Output: out\/helloai-news-sync-audio.mp4<\/code><\/pre>\nStep 5: Generate Voice Narration<\/h3>\n
Step 6: Mix Audio<\/h3>\n
cd out\nffmpeg -i helloai-news-sync-audio.mp4 -i helloai-voice-narration.mp3 \\\n -filter_complex \"[0:a]volume=0.12[bgm];[1:a]volume=2.2[voice];[bgm][voice]amix=inputs=2:duration=first:dropout_transition=2[aout]\" \\\n -map 0:v -map \"[aout]\" \\\n -c:v copy -c:a aac -b:a 192k \\\n helloai-news-synced-final.mp4<\/code><\/pre>\nKey Features<\/h2>\n
\n
Tips & Best Practices<\/h2>\n
\n
npm start<\/code> before final render<\/li>\n<\/ul>\nProject Structure<\/h2>\n
morning-news\/\n\u251c\u2500\u2500 package.json\n\u251c\u2500\u2500 tsconfig.json\n\u251c\u2500\u2500 src\/\n\u2502 \u251c\u2500\u2500 index.ts\n\u2502 \u251c\u2500\u2500 Root.tsx\n\u2502 \u2514\u2500\u2500 HelloAiNewsSync.tsx\n\u251c\u2500\u2500 public\/\n\u2502 \u2514\u2500\u2500 news-music.mp3\n\u2514\u2500\u2500 out\/\n \u251c\u2500\u2500 helloai-news-sync-audio.mp4\n \u251c\u2500\u2500 helloai-voice-narration.mp3\n \u2514\u2500\u2500 helloai-news-synced-final.mp4<\/pre>\n
Conclusion<\/h2>\n
Resources<\/h2>\n
\n
\ud83d\udce6 Download Full Tutorial<\/h2>\n