Hey everyone, I'm Xiao Ma.

I recently launched my new product vibe2design, and I thought — why not make a few product promo videos myself? After all, remotion-best-practices has been blowing up with 89.0K weekly installs. So I figured, let's give it a shot.

And that's how my Remotion video-making journey began. It was quite an interesting process, though I did hit a few bumps along the way. Let me share what I learned.

My First Video Was a Disaster

Honestly, the first attempt looked incredibly generic. It was basically a typical slideshow with a few simple transitions — zero appeal whatsoever.

So naturally, there was no point in keeping it.

But hey, no big deal — just start over. This time I was smarter about it, and after a few hours of tweaking, I finally had a version I was happy with.

I have to say, seeing the final result was genuinely exciting. I didn't know AI-powered video creation could be this fun.

Lessons Learned the Hard Way

First, model selection really matters

I started with minimax, and the project wouldn't even run — the video assets were full of errors. My guess is that Remotion isn't widely used in certain regions, so the training data might not be sufficient.

After switching to gemini-3-pro, everything finally worked. So my advice: pick the right model from the start and don't waste time on setups that won't work.

Second, write the script before you start building

My first attempt was to just have Claude Code generate a video directly from a blog post, and the result always felt off.

Later I realized the best approach is to have AI help you outline a video script first. Nail down what each scene should show, what text to display — then start building.

This dramatically reduces the chance of having to redo everything later.

Third, prepare your assets in advance

Once the script is ready, don't rush into coding. Get your assets together and put them in the public directory first:

Product screenshots
Screen recordings
Icons and images you'll need

The quality of these assets directly impacts the final result.

Fourth, create HTML mockups to confirm the visual style

This was a trick I picked up later: use Gemini to generate each video scene as an HTML page styled with Tailwind CSS. This way, before actually rendering the video, you can preview every scene and confirm the style is what you want.

For example, here's the color strategy I used as a reference:

Color strategy:
Use #0B0C15, an extremely dark blue-gray, as the background — more textured than pure black
Use different shades of gray (text-gray-300, text-gray-400) for visual hierarchy
Keep purple/orange gradients as accent colors, applied to text highlights, glowing button borders, and blurred background light spots
Titles are very large and centered, using gradient colors

The key here is that this step allows rapid iteration — you don't have to wait for the video to render just to discover the style is wrong.

Fifth, the typewriter effect is a game-changer

Just this one prompt made the effect I wanted click into place:

Scene demo text titles and descriptions use a typewriter effect.

Sometimes a simple animation can make the entire video come alive.

Sixth, find the BGM and sound effects yourself

Claude Code can help you generate prompts for this (like generating BGM prompts for Suno), but I'd recommend handling the downloads yourself.

Just pick a style, generate it on Suno, and choose the one you like best.

Having AI download music from the internet often fails due to network issues, wasting tokens for nothing. My approach: have AI generate the search terms and prompts, then I download everything myself.

About Exporting

When rendering videos, Remotion downloads a dedicated Chrome Headless Shell by default. However, this often fails in certain network environments with errors like read ECONNRESET when trying to connect to storage.googleapis.com.

The fix is simple — tell Remotion to use your locally installed Chrome:

npx remotion render src/index.ts MyComp out/video.mp4 --browser-executable "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"

Mac users just need to swap in the path to your own Chrome installation.

Final Thoughts

All in all, using Remotion for product videos is definitely a viable path. The key is patience and iterating multiple times.

My personal takeaway: AI tools are powerful, but they're not magic. The upfront work — script planning, asset preparation, visual style confirmation — if you do your homework thoroughly, the videos AI generates for you will be much higher quality.

If you're also planning to use Remotion for product promos, I hope my experience helps you avoid a few pitfalls.

Feel free to reach out if you have questions. Until next time!