Problem
Manually creating and updating promotional videos for a dynamic application like Low was time-consuming and error-prone. Traditional approaches lacked automation and could not ensure videos remained up-to-date with the latest application data, leading to inefficiencies in showcasing features and functionality.
Action
Developed Dyna-Motion, an automated video generation system built using Remotion. When a card in Trello is moved to a specific list, a webhook triggers a serverless function that activates a GitHub Action pipeline. This pipeline generates a video using up-to-date data retrieved from a separate serverless API hosted on Vercel.
The video seamlessly integrates React components from Low to accurately recreate its UI, providing a dynamic demo or walkthrough of its features. The application is powered by modern technologies like TypeScript, React, Node.js serverless functions, and Vercel for efficient hosting and scalability.
Results
-
Automated video generation, eliminating the need for manual effort and ensuring promotional videos are always current with the latest application data.
-
Enhanced reusability by leveraging React components from Low, creating consistent and accurate demos or walkthroughs.
-
Improved efficiency and scalability through serverless functions and a streamlined pipeline using Trello webhooks and GitHub Actions.
-
Delivered a robust, low-maintenance system for producing high-quality, up-to-date promotional videos, significantly reducing time and effort for the marketing team.