Agentic AI Video Motion Graphics and HTML Presentations - Create Multimedia with Free Fast Web Dev Tools and AI
My instructional design workflow always starts with stripping all content back down to markdown formatted text because it’s such a great starting point for building it back up into different formats – documents, presentations, websites… and now VIDEO.
I have been exploring the new frontier of developing motion graphics using the tools of web animators such as GSAP and anime.js, assisted by a local agentic AI workflow (in my case Zed editor assisted by Google Antigravity AI agent). Rather than finding ways to get AI to play nicely with traditional video editing tools like Premiere and AfterEffects, I am able to route around them completely, developing equivalent quality experiences in a fraction of the time and expense.
This way of working enables me to write out and organize my content in markdown‐formatted text first, where I can solely focus on the quality of the content in its purest form, easily organizing paragraphs and bullets using simple text‐based tools. I can use any number of markdown editors, with or without AI assistance, to ensure the core learning experience is just right for the project.
I can then save that markdown source file as content.md in a folder on on my desktop, open that folder in Zed, and tell Gemini to turn it into a motion graphic video presentation.
This HTML5 motion graphic presentation was vibecoded for zero dollars in under an hour
Click to read the details of my dev process…
For a job interview, I was given a prompt about previous projects I’ve worked on and how I handled them. I wrote a full page of content in Markdown which Gemini summarized into presentation bullets. Then I used Gemini, Antigravity, and Pencil to design and build this GSAP motion graphics “scrollytelling” presentation in responsive HTML5 without the use of any kind of eLearning authoring platform. The content all lives in markdown‐formatted text (seen at the end) and can be updated on the fly or reused in another project without wrestling with a GUI tool. This is the future, my friends.
The Presentation Tech Stack
The look and feel of the presentation was developed to my specifications in a collaborative process with Google Gemini AI. I first described that I wanted to create a responsive HTML5 presentation “stack” where I could feed markdown in and get full‐screen browser‐based slide presentations back. I designed a mockup layout in Pencil.dev and gave it to the AI to use as a template. Gemini recommended the most popular Javascript libraries for developing animated text experiences on the web, and built a directory of HTML, CSS, and Javascript on my machine that can ingest my markdown‐formatted content and generate an HTML page with this visual look and feel.
I selected the looping video background from Pexels and told Gemini to use it with a semitransparent CSS filter layer over it, ensuring text legibility meets WCAG accessibility standards. In fact, I had the AI evaluate the entire stack to ensure that it’s fully accessible. Unlike video motion graphics, this presentation deck can be read with any standard web screen reader for users with visual impairments.
Go Straight from Text to Video
By default, the output of this presentation stack is a website, not a video. The video you see here is a screenshot recording of it. But I have also discovered a complete text‐to‐video solution called ReMotion where you can write markdown and then compile your content into a visual video editing timeline interface for further editing. Again you can apply any CSS theme you can dream of to your work without manually editing the colors and fonts of every little element on the screen.
Here’s a beginner friendly demonstration of how to get started with Remotion:
I’ve been experimenting with this technology in my time between jobs and am envisioning a hybrid approach where I still work in my beloved DaVinci Resolve Studio but where the time‐intensive sections of any given timeline (like animated graphs or text explainers) are generated as video and integrated into my existing timelines. Going forward this way of working is sure to become ubiquitous, its AI look and feel will be easily identified as “slop”, but skillfully integrating it into something that looks bespoke but takes half the time feels like a great way to stand out in a crowded market.
Before the AI Backlash Starts…
Many people are rightly uncomfortable with the ways that AI is moving into our creative processes. Yes this process could dramatically speed up the whole creative process for instructional designers, and if we’re not careful we could certainly use this kind of technology to do all the hard work FOR US. The right way forward, I think, is to use this kind of tech so that we spend less time wrestling with pro‐level multimedia software and more time designing rich and effective learning experiences.
It’s no secret that we IDs are often treated like the “turn this presentation into a video” department. This is the part of our job that can be completely automated, and the way we stay relevant is to continue to keep measurable learning outcomes, retention and transference, and learner experience core to the learning content development process since these are the parts of the work that our stakeholders routinely fail to consider. I generally skip the wailing and gnashing of teeth when a new disruptive technology comes along because I’m still always the lone voice in the meeting who remembers that we’re teaching human beings here, and the way we’re successful is not just about pumping out pretty videos but about improving learners’ performance in their roles. I say “give the bosses their pretty pictures, but use all the time you save to design experiences people will remember and grow from.”