𝗧𝗵𝗲 𝗖𝗵𝗲𝗮𝗽𝗲𝘀𝘁 𝗣𝗮𝗿𝘁 𝗪𝗮𝘀 𝗧𝗵𝗲 𝗠𝗼𝘀𝘁 𝗪𝗼𝗿𝗸

I made a 90-second AI video for my project. The cinematic parts cost money. The demo part cost zero dollars.

The video has three parts:

  • A 14-second intro with a walking character.
  • A 66-second product demo.
  • A 10-second outro.

The intro and outro used AI models. AI video costs between 30 cents and 3 dollars per clip. I spent about 9 dollars on these parts.

The middle part is the core of the video. It shows a cursor moving across my web app. It shows text being typed into forms. It shows smooth scrolling and glowing highlights.

I did not use a screen recorder. I did not use an AI video model for this. Instead, I used code.

My system injects CSS animations directly into the live webpage. A tool drives the animation clock frame by frame. It takes a screenshot, moves the clock, and takes another screenshot. Then, ffmpeg stitches these stills into a video.

This method has major benefits:

  • It costs nothing.
  • The motion is perfectly smooth.
  • Every run is identical.
  • I can change any data on the page instantly.

The hard part was making the code look human. We had to solve three main problems:

  • Keeping the cursor visible during page changes.
  • Typing over existing text so the app did not show errors.
  • Finding the right container to scroll on the page.

The flashy cinematic parts are fun. But the demo part is what scales. The demo part is free.

Total cost breakdown:

  • Images: $4.41
  • Video: $8.95
  • Voice: $0.38
  • Total: $13.74

The 66-second demo cost $0.00.

Source: https://dev.to/hiper2d/the-cheapest-part-of-my-ai-video-was-the-part-that-does-the-most-work-4d30

Optional learning community: https://t.me/GyaanSetuAi