Animations with LLMs

As you might have noticed there is a lot if AI slop around these days. Many expensive AI models will charge you a lot of money for making a 10 seconds long video from one prompt. If you don't get exactly what you asked for after the first prompt and you ask it to fix something, they will generate another video and change the whole thing and when it is finally ready there is some totally different issue that was not in the first video. This is how all the AI slop videos that you can see on Social media has been generated.

Those who know how to use LLM models to manipulate files on their computer and code up videos with Three.js, GSAP and/or Canvas 2D, they can use their skills to have total controll over the whole process.

Knowing how to make such videos can be very beneficial to any web developers, for marketing their websites or apps, onboarding, explaining hard concepts on the page or just add something cool to your page.

This guide is all about how to make such videos. Looking forward to see what you do!

• How editable animation code differs from generated video clips.

• The roles of HTML/CSS, GSAP, Canvas 2D and Three.js in animated scenes.

• How timing, easing and scene sequencing guide attention and pacing.

• Why deterministic timelines produce consistent previews and rendered frames.

• How typography, contrast, captions and audio balance affect clarity.

• How visual complexity, resolution and frame rate affect rendering cost.

• Define an audience, message and visual direction in a clear creative brief.

• Direct a coding agent with scoped prompts and precise revision feedback.

• Develop and refine storyboards before building animated scenes.

• Use a coding agent to create and adjust animation code and timelines.

• Review animations for pacing, legibility, sound balance and muted viewing.

• Render video from web code and document reusable styles and fixes.

Just follow this guide and you will be golden