Why did Remotion choose to render Frames over just recording with Playwright?

[iaseth]

About a year ago, I made a few Lyric videos using React. I made a web app which accepted JSON script data in a textarea, and then rendered the 'video' in the browser. I then used Playwright to record the browser into an mp4. Some of the problems I encountered with this approach:

1. The start and end of the video needed to be trimmed using ffmpeg.
2. The duration of the video was never was never exactly the same as the JSON script, turns out the FPS varies with which browser (chrome/firefox) or tool (playwright/puppeteer/selenium) you use.
3. Time complexity was O (1), a 5 minute video needed 5 minutes to record.

I solved 1 and 2 with a python script that trimmed undesired frames from the video. 3 can be somewhat improved by recording with a higher FPS, but it also has the advantage that the recording time is independent of the resolution and number of videos. If you have a powerful enough system, you can record multiple 4k videos at the same time.

I tried Remotion recently and was impressed with how 'finished' the recorded video looked. Still, I was wondering if there are any drawbacks of rendering each frame and combining them into a video. Why did Remotion team chose this approach over recording the browser directly?

Also, does Remotion work properly with transition-duration? I thought it shouldn't work as the number of frames recorded per second may not be same as the FPS. But, I was surprised to see that Tailwind classes like duration-300 worked properly in a video I made.