How to Make a Promo Video With Code (No Editor Needed)

You can make a promo video with code — no Premiere, no After Effects, no timeline scrubbing. Write each scene as plain HTML, animate it with CSS and GSAP, then render the page straight to a 1080p MP4 with an open-source HTML-to-video framework. The loop is edit → preview in your browser → export, and a 30-second promo typically goes from idea to finished file in under an hour.

This guide walks through the whole workflow, step by step. By the end you'll know how to structure scenes, animate them deterministically, render them to video, and — the real superpower — reuse the whole thing for your next product by changing text in a config file.

Why make a promo video with code instead of a timeline editor

Timeline editors are great for documentaries. For short promos — product launches, feature announcements, social ads — they fight you:

• Revision pain. The client changes one line of copy; you reopen the project, re-sync captions, re-export.
• Brand drift. Every designer nudges the colors and fonts a little; nothing is version-controlled.
• Localization cost. A Chinese version of your English promo means rebuilding the entire timeline.

With code, the video is a webpage. Copy changes are text edits. Brand colors are CSS variables. The English and Chinese versions are the same file with different strings. Everything is deterministic: render the same HTML twice and you get the same MP4 twice — try that with a keyframed After Effects project.

What you need (15-minute setup)

You need three things:

1. A browser (Chrome or Chromium) to preview your scenes.
2. An HTML-to-video renderer. The HyperFrames framework (Apache-2.0, open source) renders an HTML composition to MP4 at a fixed framerate — this is the engine behind the workflow described here. It walks through your scenes, captures frames, and encodes them, so animations behave exactly as they do in the browser.
3. A starting template. If you want a working structure instead of a blank page, the HyperFrames Video skill teaches the full composition contract — scenes, timelines, deterministic animation rules — with a complete 20-second product promo example. There are also ready-made templates like the Solbeam desk lamp promo, a six-act product video you can dissect line by line.

Step 1: Structure your video as HTML scenes

Think of your promo as a sequence of acts, like a tiny play. A classic 30-second structure:

1. Hook (0–4s): one bold claim, full-screen.
2. Problem (4–10s): the pain your product solves.
3. Brand beat (10–14s): logo and name, a visual breather.
4. Proof (14–24s): two or three features or numbers.
5. CTA (24–30s): what to do next, held long enough to read.

Each act is a <section> in one HTML file, stacked or sequenced by a tiny timeline. Keep on-screen text ruthlessly short — five to eight words per screen. If a sentence needs a paragraph, it needs its own scene.

A minimal scene looks like this:

<section class="scene hook">
  <h1 class="line">Your product, in 30 seconds.</h1>
  <p class="sub">No camera. No crew. Just code.</p>
</section>

The rule that saves you later: no randomness, no wall-clock timers. Express every animation as a function of time t (seconds since the scene started), not as setInterval or Math.random(). This makes each frame reproducible, which is what a renderer needs to capture frames one by one.

Step 2: Animate with CSS and GSAP

Two layers cover almost every promo:

• CSS transitions and keyframes for entrances: fades, slides, blur reveals. Cheap, predictable, easy to tweak.
• GSAP (the de facto JS animation library) for anything timed: staggered word reveals, progress bars, counters, parallax. Drive everything from one master timeline per scene so the whole video is a single deterministic script.

Practical tips from real renders:

• Prefer opacity and transform over layout properties — they stay smooth at 1080p/24fps.
• Keep text animations word-by-word, not letter-by-letter, for body copy. Letter-splitting looks great in a browser demo but often breaks word spacing under transforms when rendered to video — use margin-based spacing on word spans.
• Design your CTA to hold for at least 3 seconds with no motion at the end. Viewers need a still moment to read the URL.
• Add prefers-reduced-motion fallbacks even though you're rendering video — it's good practice and costs nothing.

If animation isn't your thing, the HyperFrames Video skill includes an animation reference with copy-paste patterns for exactly these cases: scroll-free scene entrances, counter scrubs, and CTA holds.

Step 3: Render scenes to MP4

Rendering is the unglamorous but satisfying part. The HyperFrames CLI loads your composition in headless Chromium, steps through time at a fixed framerate (typically 24 or 30fps), captures each frame, and pipes them to ffmpeg for encoding. A 30-second 1080p video is 720 frames — a couple of minutes on a modest machine.

The practical checklist before you hit render:

• Set your resolution explicitly (1920×1080) and verify it matches your CSS canvas — mismatches cause blurry upscales.
• Watch out for disk space in /tmp. Frame extraction is I/O-heavy; point your temp directory somewhere with room.
• Extract test frames first (--at snapshots in HyperFrames terms) and eyeball them. Checking 3–4 stills is faster than re-rendering a whole video because of one typo.
• Check your fonts. Browsers fall back silently; video doesn't forgive. Bundle local font files so the render machine has exactly what you designed with.

One honest caveat: this pipeline shines for motion graphics, kinetic typography, and UI-style product videos. It does not generate photorealistic footage — if your promo needs a sunset over the ocean, shoot it or buy stock. Code is for everything that is text, shapes, and interface.

Step 4: Reuse everything — change text, re-render

Here's where the code approach pulls away from editors. Wrap every editable string in a config block at the top of your template:

<!-- CONFIG -->
<script>
const CONFIG = {
  brandName: "Solbeam",
  headline: "Light that thinks.",
  ctaUrl: "solbeam.example.com"
};
</script>

Now your next promo is: duplicate the folder, change the config, re-render. Your next language version is: translate the config, re-render. A client who wants "the same video but for the spring sale" gets it in ten minutes instead of ten billable hours.

This is also why templates are valuable: a well-built one, like the Solbeam desk lamp promo template or the Deep Cut podcast audiogram template, is a reusable machine. Buy it once (they're $5 on SkillStack), and every future video in that style is a config change away.

FAQ

Is this the same as AI text-to-video tools like Sora or Runway? No — and that's the point. AI generators hallucinate footage from a prompt; you get what you get. Code-to-video is deterministic: every pixel is placed by your CSS, every word is spelled exactly right, and brand colors are exact hex values. Use AI for footage you can't shoot; use code for everything that must be precise.

Do I need to know JavaScript well? Basic HTML/CSS is enough for simple kinetic-type promos. GSAP helps for fancier timing, but its API reads like English (gsap.to(".line", {y: 0, opacity: 1, duration: 0.8})). The HyperFrames Video skill is written for people who can read code but aren't animators.

How long does a video take to render? A 30-second 1080p video at 24fps is 720 frames; on a typical machine, expect a few minutes of rendering. Most of your time goes into design and copy, not the render.

Can I add voiceover or music? Yes — compose the silent video first, then mix audio with ffmpeg in one command (-i video.mp4 -i audio.mp3 -c:v copy -shortest out.mp4). Keeping audio out of the browser render keeps timing deterministic.

Conclusion

Making a promo video with code flips the usual economics: the expensive part stops being editing and starts being thinking. Structure your acts, write short copy, animate deterministically, render to MP4, and from then on every new video is a config edit. Start with the HyperFrames Video skill to learn the full workflow, grab a ready-made promo template to skip the blank page, and your next product launch can ship its video the same day the copy is approved.