Turn div with changing text to a video in a few seconds

Question

EXPLANATION: I was doing a program that would generate text on top of the given video. (In React, NextJS).

I create a div that would display the text and positioned on top of a video. Also I have included motion.div to apply animation to text. Div changes the same time as the video. This is how it looks.

<div id="general-video" className="general-video-container text-center">
  <motion.div
    style={{
      scale: externalLineDurationPercent,
      opacity: externalLineDurationPercent,
    }}
  >
    <p style={{textAlign: 'center', backgroundColor: 'red',fontFamily: fontMode, fontWeight: myWeight, textTransform: caseMode,textShadow: `${offsetX}px ${offsetY}px ${blur}px ${shadowColor}`}} className='captions-words' dangerouslySetInnerHTML={{ __html: currentLine }} />
  </motion.div>
  <video
      id="input-video"
      data-video={0}
      ref={videoRef}
      src={serverVideoUrl}
      onTimeUpdate={handleProgress} 
      style={{ width: '100%', height: '100%', userSelect: 'none', pointerEvents: 'none', position: 'absolute', zIndex: 10 }}
    >
</video>
</div>

in p tag currentLine is basically the changing text.

PROBLEM: now I need to convert that div to a video. I already have a FFmpeg that would overlay the video of div text layer over input layer, to get the end video with captions on top. But I can't turn div with changing text to a video.

I have tried to use nearly everything. Html2canvas, domtoimage, rasterizehtml, selenium, webrtc. The problem with them all: poor quality, long capturing time, do not support css, deprecated package.

You can see the illustration of how I see this.

I need to convert that div to a video in a few seconds. Even if the video is 30, 40, 50 seconds. To satisfy user experience in export part.