Creating product demo videos with HTML, AI and Remotion

As a developer, felt overwhelmed to get into the details of motion design and use my clumsy hands with a mouse to generate animations. What's seemed even harder, though, was making the actual mocks of the software I wanted to create animations for.

I'm sure nothing beats the quality of industry leaders like Adobe After Effects when it comes to making professional-grade product demo videos. But for my little side project that I'm not even sure people want to use, nah, I'd rather stick to what I know.

And what I know is programming. The idea of creating videos programmatically came to me when I created a procedure to generate open graph images for my blog posts and free browser tools pages. Essentially, you create a page where the open graph image is generated as HTML, then run a job that uses Puppeteer to make a screenshot.

The next item for me became creating a demo video, and with my newfound confidence in my design skills , I thought about doing screen recordings of HTML mock animations and putting them together to get a video. I swear it was an original idea, but like most original ideas, someone else had already thought about it. As I was pitching my idea at 2 a.m. to ChatGPT, after it reassured me that I am a genius, it also mentioned that I might want to have a look at Remotion.

Not only did someone else come up with the same idea, but they also implemented a powerful solution and made it free for the world to use.

What is Remotion?

Imagine Remotion like this: there is a common timeline running through all your React components, represented by the current frame number. Now you can use this frame number to programmatically (using one of the many helper functions) fade in a React component at from frame 0 to 30 (or second 1 if you're using 30 fps), then zoom in on it from frame 30 to 60 (second 1 to 2), and make it fly away by dynamically changing its coordinates from frame 60 to 90 (second 2 to 3). The code below returns this result.

  // Animated Component
  export const AnimatedBox = ({ children }) => {
    const frame = useCurrentFrame();
    // Frame 0-30: Fade in
    const opacity = interpolate(frame, [0, 30], [0, 1]);
    // Frame 30-60: Zoom in
    const scale = interpolate(frame, [30, 60], [1, 1.5]);
    // Frame 60-90: Fly away
    const translateX = interpolate(frame, [60, 90], [0, 800]);
    const translateY = interpolate(frame, [60, 90], [0, -200]);
    return (
      <div style={{
        opacity,
        transform: `scale(${scale}) translate(${translateX}px, ${translateY}px)`
      }}>
        {children}
      </div>
    );
  };

There are a lot of useful helper functions, and you can use Remotion Studio to see a video editor-like preview. Of course use their official documentation if you actually want to learn it. 

Where the magic happens

Now, I could have sat down and meticulously animated each scene using CSS, but what entity do we know that can do it faster, with 90% of the accuracy of what a good frontend dev would implement, and do it based on my sloppy descriptions? Yep, I just told Cloud Code to generate an animation, and it created an almost perfect result. 

Example Prompt:

Create an animation, where each character in the text "Remotion is cool!" will fly-in one-by-one from the bottom, at first not being visible. Use a spring animation for the characters and make the animation lively. There should be a delay between each characters animation.

Example Result: click here. 

Doesn't that look nice? Like any self-respecting "side project haver", I was about to drop my current project and start something new with the new toy I found. This time I was able to show restraint, thankfully :)

Putting it all together

So, if you are in need of creating a video and have any type of front-end skills, I do recommend using Remotion. As for the audio, I used ElevenLabs with their latest model, which gave great results, I would say. And you can find copyright free music in the YouTube Audio Library.

The product demo video for HTMLSync was created with Remotion, except for the scene where I'm typing a prompt - that's just a video recording. The voiceover is done with ElevenLabs, and all the mocks and animations were created by Cloud Code.