How to Make a 30-Second Video Ad Without AI

Two sample ads

Both samples are 30 seconds, 1920×1080, 30 fps and H.264. They are silent motion graphics: the visual assets are code-drawn illustrations, not AI-generated video or official product photography.

What HyperFrames does

HyperFrames is an open-source framework that treats a video composition like a web page. HTML and CSS define the scenes; a seekable animation library such as GSAP defines motion; HyperFrames captures the page at precise timestamps; FFmpeg encodes the frames into a video.

That makes it useful for ads with animated typography, product explainers, UI walkthroughs, charts, captions, and repeated versions. The source stays editable, so a headline or product detail can be changed without recreating the whole video in a timeline editor.

1. Plan the message before the motion

Start with one audience, one promise you can support, and one action you want viewers to take. For a 30-second ad, six short beats provide enough structure without turning the video into a list of services.

We used information already published on each company site. For clinical products, keep the language about the equipment and its stated features; do not turn it into unverified patient-outcome claims.

2. Set up the local project

HyperFrames needs Node.js 22 or newer and FFmpeg. Install the CLI and GSAP in the project, then install HyperFrames’ local headless Chrome renderer once:

npx --yes hyperframes@0.9.2 init my-video-ad
cd my-video-ad
npm install gsap@3.15.0
npm install --save-dev hyperframes@0.9.2
npx hyperframes browser ensure

On macOS with Homebrew, the prerequisites can be installed with brew install node@22 ffmpeg. If another Node version is active, put Homebrew Node 22 first on the PATH before running npm or HyperFrames.

3. Compose each scene in HTML and CSS

Use a 1920×1080 composition root and give each scene an explicit start time and duration. Typography, gradients, shapes and inline SVG are enough for clean motion graphics; add local product photos or footage when the project needs literal product detail.

<main id="root" data-composition-id="main"
  data-duration="30" data-width="1920" data-height="1080">
  <section class="clip" data-start="0"
    data-duration="5" data-track-index="1">
    <h1>Built around your business.</h1>
  </section>
</main>

Keep on-screen copy short enough to read at phone size. Use a consistent color system, reserve space for subtitles if you may add narration later, and build the final CTA early so it is not squeezed in at the end.

4. Animate with a seekable timeline

Frame rendering may jump directly to any timestamp. A paused timeline lets HyperFrames seek to the exact animation state for every frame rather than depending on how long the browser has been playing.

const tl = gsap.timeline({ paused: true });
tl.fromTo("#headline",
  { opacity: 0, y: 24 },
  { opacity: 1, y: 0, duration: 0.6, ease: "power3.out" },
  0
);
window.__timelines = window.__timelines || {};
window.__timelines.main = tl;
tl.seek(0);

Animate opacity and position to create entrances; use scene-level fades to transition between beats. Keep the source assets local when possible so a render does not depend on a remote script or image being available.

5. Preview, render and review the MP4

Preview while editing, then render a delivery-quality file:

npx hyperframes preview
# Stop the preview with Ctrl+C when finished.
npx hyperframes render --quality delivery --fps 30 \
  --no-browser-gpu --output renders/my-video-ad.mp4

Check the exported duration, dimensions and frame rate with FFprobe, and inspect a few frames from the opening, middle and CTA. A contact sheet makes it easy to catch unreadable text, clipping or a transition that hides a scene.

ffprobe -v error \
  -show_entries format=duration \
  -show_entries stream=codec_name,width,height,r_frame_rate \
  -of default=noprint_wrappers=1 renders/my-video-ad.mp4

What this approach is—and is not

HyperFrames is a practical fit when the ad is built from text, vector graphics, UI, data and repeatable motion. HTML makes those pieces quick to revise, and the command line makes the render reproducible. For live-action footage, advanced color grading, detailed sound design or frame-by-frame hand animation, a traditional video editor may be a better fit.

The two examples here intentionally use illustrated equipment visuals and contain no voiceover or music. For a production campaign, replace the illustrative shapes with approved product photography, confirm every technical claim and contact detail, add licensed audio if needed, and make aspect-ratio versions for each placement.