|
•••
|
|
For three months I have been making videos that never touched Sora or Runway. No per-second generation cost. No watermarks. No queues. The output renders in a browser, plays as smoothly as anything I have generated through a video model, and in one specific area produces results the AI video tools cannot match. The text inside my videos is always perfect. Every letter, every kerning, every line break.
The trick is that they are not really videos in the traditional sense. They are HTML and CSS animations generated by Claude Code or ChatGPT, rendered in a browser, screen-recorded if I need to export to a platform that wants MP4. The motion is real. The frames are interpolated by the browser. The output looks like motion graphics because that is what it is. The price for ten seconds of animation is the cost of a few thousand tokens, which works out to a dime or two depending on the model.
If you have been generating videos at three to five dollars per ten seconds in Sora, Runway, or Kling, this is going to feel like a different category of tool. It is. It will not replace those tools for cinematic narrative work. It will replace them entirely for a specific kind of video that is harder than people realize: motion graphics, data visualizations, kinetic typography, and explainer animations. The category that pays well in client work and that AI video tools handle worst.
|
|
One
What this is, and what it is not.
|
|
A code-generated video is not a generated video in the way Sora produces a generated video. There is no diffusion process inventing pixels. The model writes a file. The file describes shapes, colors, motion paths, timing, and easing curves. A browser reads the file and animates it in real time. What you record from your screen is the result of those instructions playing out frame by frame in your browser.
The implications are significant. Every element is editable because every element is code. If you do not like the timing, you change a number. If a color is off, you change one line. If a shape needs to move differently, you change the easing function. None of this is possible with Sora or Runway output, where you generate, accept, or regenerate. The code-based version invites the kind of revision that real production work requires.
It is also not photorealistic. You will not generate a person walking through Tokyo at night this way. The aesthetic is graphic, illustrative, motion design. Geometric shapes, animated gradients, kinetic text, data visualizations, charts that build themselves, logos that resolve. If your output category is closer to After Effects than to film, this is the workflow.
|
|
Two
What it does that AI video tools cannot.
|
|
The single largest weakness of every AI video tool right now is text. Sora struggles with letters. Runway garbles words. Kling produces nonsense in any frame that includes typography. This is not a bug to be fixed soon. It is a fundamental property of how these models work. They are predicting pixel patterns, and text rendered as pixels at video scale is consistently the hardest pixel pattern to produce reliably.
A code-based animation does not have this problem. The text is text. The browser renders it the same way it renders text on this email. Every kerning pair is exact. Every line wraps where you want it to. The text scales smoothly and animates with whatever motion you describe. For any video that includes a logo, a title sequence, lower thirds, captions, or any kind of typography, code-based animation produces output that AI video tools simply cannot match yet.
The second thing is precise timing. AI video tools produce ten seconds of motion without giving you control over what happens at the three-second mark. Code lets you specify that at exactly three seconds, this element fades in, that element rotates twenty degrees, the background color shifts. The control is mechanical, which is the point. Motion graphics work requires that level of control.
The third thing is iteration cost. A revision in Sora means generating again at full price. A revision in code means changing a number. The cost of iterating ten times in code is essentially zero compared to the cost of iterating ten times in a video model.
|
|
Three
The prompts that actually work.
|
|
A working prompt for a code-based animation looks more like a creative brief for a motion designer than a prompt for an image model. Specify the duration. Specify what happens at each beat. Specify the easing. Specify the typography. The model then writes a single self-contained HTML file you store and open in any browser.
A real prompt that produced strong output the first time:
Create a single self-contained HTML file that animates a kinetic typography sequence. Background is deep navy with a subtle animated gradient. The text "Less is More" appears one word at a time, each word fading in and scaling up gently over 600ms. Words use a serif typeface like Playfair Display, white color. After all three words appear, hold for one second, then animate them sliding off to the left in sequence. Total duration ten seconds, looping. Smooth easing throughout, nothing harsh. Modern, editorial feel.
Paste that into Claude Code or ChatGPT. Store the response as an .html file. Open it in any browser. The animation plays in your browser. To export it as a video, use any screen recorder or, if you need a clean MP4, a tool that captures the page as video. The whole loop, prompt to playable file to recorded MP4, takes about three minutes.
The breadth of what works is wider than you would expect. Animated logo reveals. Charts that build themselves frame by frame. Title cards. Lower thirds for video editing. Looping social media graphics. Animated data visualizations for explainer videos. The kind of content motion designers used to spend hours in After Effects on, generated in a minute, editable in a text file.
|
|
Four
Where each tool excels.
|
|
Claude is my preferred tool for this workflow. The output tends to be cleaner, the easing curves feel more considered, and Claude has internalized real animation principles in a way that shows up in subtle decisions about timing and hierarchy. The web version at claude.ai handles this well, and Claude Code in a terminal handles it even better if you are comfortable there.
ChatGPT is the most accessible entry point. The chat interface is familiar to almost everyone, and the output is solid. The default model writes good HTML and CSS animation. For more sophisticated motion sequences, switch to a reasoning model and ask for the same thing. The output quality jumps noticeably.
Gemini handles this category surprisingly well, especially for chart animations and data visualizations. Google has invested heavily in Gemini's coding ability, and it tends to produce robust, well-commented code that runs reliably the first time. If you are already in the Google ecosystem or use AI Studio, Gemini is a strong third option that nobody talks about for this use case.
For more advanced motion across any of these three tools, GSAP is the JavaScript animation library most pros use, and all three chatbots know it well. If you ask for "GSAP timeline animation" in your prompt, you get more sophisticated easing, scroll-triggered effects, and complex sequences. Worth knowing once the simple animations stop being enough.
|
|
Five
When the AI video tools still win.
|
|
Code is not a replacement for diffusion-based video tools. It is a different category for different work. Sora and Runway and Kling are unmatched for narrative cinematic content. A character walking down a rainy street. A scene from an imagined film. Anything that requires photorealism, naturalistic motion, or the texture of real video. Code cannot produce that, and trying to fight it into doing so produces the same kind of disappointment you get when you try to make a portrait camera paint a watercolor.
Use the AI video tools when the work needs to look photographed. Use code when the work is design. Use both, on the same project, when the work is hybrid. A common workflow now is to generate a cinematic background plate in Sora, then layer animated typography from a code-based animation over it in a video editor. The plate is photorealistic. The text is perfect. Each tool does what it was made for.
The category I would not still be using AI video tools for is anything text-heavy. Title cards, lower thirds, kinetic typography, animated quotes, social cards with copy on them. All of those used to require a video tool by default. None of them should anymore. Code does it faster, with less expense, and more reliably.
|
|
•••
I am putting together a pack of fifteen prompts for code-based animations across logos, kinetic type, data viz, and explainer scenes. Each one tested, each one ready to paste.
Want it when it ships? Reply with send me the animation pack and I will get it to you.
|
|
A QUESTION FOR YOU
What is the first animation you would try this on?
Reply and tell me. I will write you a starter prompt for it. The replies determine which categories I expand next.
If this issue resonated, forward it to a friend who works in motion or design.
|
|
Until next time,
Luxe Prompting
|
|
Luxe Prompting
AI Image Generation for Creators
|
|
