Motion Graphics

Describe a scene. ViralMint's AI writes a real HyperFrames composition — a GSAP timeline you can still edit by hand — and renders it locally to mp4.

ViralMint Motion Graphics page with the embedded HyperFrames studio — a live composition preview, the Code and timeline tabs, and the AI Compose panel on the right where a plain-language brief becomes an animated composition.
Motion Graphics — describe the video in the AI Compose panel, the embedded HyperFrames studio live-reloads the composition, export renders it locally.

What is AI Compose?

AI Compose is ViralMint's way of using HyperFrames without writing HTML. ViralMint embeds HeyGen's HyperFrames — the open-source (Apache-2.0) "write HTML, render video" engine — and writes the composition for you. On its own, HyperFrames expects you to hand-author a composition: an HTML document whose animation is a GSAP timeline the renderer can seek frame by frame. That is a developer's workflow.

AI Compose replaces the authoring step: you describe the video in plain language ("a kinetic-typography hook that counts up to 1M subscribers in my brand teal"), and ViralMint's cloud model writes the real composition — layout, palette, beat timing, GSAP tweens — into an embedded HyperFrames studio that live-reloads so you see it at once. Nothing is a template: the output is code you can open and edit, then render locally to mp4 — kinetic typography, animated headlines, count-up numbers. No After Effects, no npm install, no subscription. Each compose costs about 20¢ from prepaid credits, and the render itself runs on your own machine, so there is no per-second cloud bill and no watermark.

New to the engine? What is HyperFrames? explains how it renders (a headless browser seeking a paused GSAP timeline), why compositions have to be seekable, and the six ways one renders wrong with no error.

What is the Motion Graphics generator?

Motion Graphics turns a text prompt into an animated video — kinetic typography, animated headlines, count-up numbers and brand-colored scenes. Instead of locking you into templates, ViralMint's AI writes a real composition — HTML/CSS/JS with a GSAP animation timeline — into an embedded studio that live-reloads as it's written. You see the result instantly, edit any scene, and export to mp4.

The studio is HeyGen's open-source HyperFrames, installed on demand as a desktop plugin (like ViralMint's Chromium install) rather than bundled. Rendering is local and deterministic: a headless Chrome plays the paused GSAP timeline frame by frame and FFmpeg encodes a seekable mp4 — no cloud render farm, no watermark. Because the output is web code, it's fully editable, and it's the same engine that powers Website → Video.

How to make a motion-graphics video in 5 steps

  1. Open Motion Graphics. If it's your first time, install the one-time render plugin when prompted — it's on-demand (like the Chromium install), not bundled into the app.
  2. Describe the composition. Use AI Compose: "a kinetic-typography hook that counts up to 1M subscribers in my brand teal," or "three stat cards that slide in over a dark gradient."
  3. AI writes it live. ViralMint's cloud model writes the HTML/CSS/JS (a GSAP timeline keyed to a composition id) into the studio project, which live-reloads so you see it render immediately.
  4. Edit in the studio. Tweak the Code tab, swap assets, adjust the timeline, or ask AI to refine it — and keep multiple compositions side by side instead of overwriting.
  5. Export to mp4. A headless Chrome plays the timeline frame by frame; FFmpeg encodes a deterministic mp4 into your Library, ready to download in 9:16, 16:9 or 1:1.

What's in Motion Graphics

Prompt → composition

Describe the scene in plain language and AI writes a real GSAP composition — kinetic headlines, count-ups, shape transitions — not a fill-in-the-blank template.

Editable code, live preview

The embedded studio gives you a Code tab, live preview, assets panel and timeline. Hand-edit anything or ask AI to refine — the result is web code, not a locked render.

Multiple compositions

Keep several compositions in one project side by side instead of overwriting, so you can branch ideas and export the best one.

Local deterministic render

Headless Chrome plays the paused GSAP timeline frame by frame and FFmpeg encodes a seekable mp4 — reproducible output, no cloud render farm, no watermark.

On-demand plugin

The HyperFrames render engine installs on demand like the Chromium download — it doesn't bloat the base app for users who never touch motion graphics.

Powers Website → Video

The same engine auto-builds a promo from a URL in Website → Video — capture a site, read its brand, animate it.

What you can make with it

Motion Graphics makes designed video — pieces where animated type, shapes and data carry the message and there is no filmed footage at all. Each of these is authored as a real HyperFrames composition from a plain-language brief, then rendered on your own machine.

Close neighbours that use a different engine

These formats sound adjacent and people often ask for them in the same breath, but ViralMint produces them with other modes — no HyperFrames composition involved.

Frequently asked

What is the Motion Graphics generator?

A ViralMint video mode that turns a prompt into an animated motion-graphics video — kinetic typography, animated headlines, count-up numbers. AI writes a real HTML/CSS/GSAP composition into an embedded studio you can edit, then it renders locally to mp4.

How does it work?

ViralMint embeds the open-source HyperFrames studio. You describe a composition; AI writes the HTML/CSS/JS (a GSAP timeline) into the project, which live-reloads. Export plays the paused timeline frame by frame in headless Chrome and encodes an mp4 with FFmpeg — all local.

How much does it cost?

20¢ per AI Compose (write or refine a composition) and 3¢ per exported video, from prepaid credits — no subscription. The render runs locally, so the 3¢ is a flat per-video charge, not a per-minute cloud cost, and there's no watermark.

Can I edit the result?

Yes — the embedded studio has a Code tab, live preview, assets panel and timeline. Hand-edit any scene or ask AI to refine it, and keep multiple compositions side by side before exporting.

What's it good for?

Animated intros/outros, kinetic-typography hooks for Shorts, stat and data callouts, logo and brand animations, promo cards — and it's the engine behind Website → Video.

Make your first motion-graphics video

Motion Graphics ships in the open-source ViralMint desktop app for macOS, Windows and Linux. Free download, no watermark, prepaid credits — no subscription.

Technical summary

Motion Graphics at a glance

{
  "tool": "ViralMint Motion Graphics",
  "input": "text prompt (AI Compose) — refine in natural language",
  "engine": "embedded HeyGen HyperFrames studio (open-source plugin)",
  "output": "HTML/CSS/JS composition (GSAP timeline) rendered to mp4",
  "editable": "Code tab + live preview + assets + timeline",
  "render": "local (headless Chrome plays the GSAP timeline) + FFmpeg",
  "aspect_ratios": ["9:16", "16:9", "1:1"],
  "compose_usd": 0.20,
  "render_usd": 0.03,
  "subscription": false,
  "watermark": false
}

Runs in the open-source ViralMint desktop app. Powers Website → Video. See also Smart Video.

Enlarged screenshot