saas-motion-kit

Promo and motion videos for software products, made with HyperFrames and Claude Code.

This kit is a staged process, a component strategy and 100 visual themes. Together they take you from "we need a launch video" to a rendered MP4 without making it look AI-generated.

Türkçe README → · Theme gallery (100 themes) → · Example project →

Every example in this repo uses Acme, a fictional company, and its fictional products. All numbers are invented.

What's inside

The process in one picture

1 Brief ──▶ 2 Components ──▶ 3 Theme ──▶ 4 Storyboard ──▶ 5 Build ──▶ 6 Sound ──▶ 7 Deliver
   ▲ gate      ▲ gate          ▲ gate      ▲ gate           ▲ gate      ▲ gate      ▲ gate

Each stage ends with a human decision. The agent does the production work; you bring taste at the gates. That split is what makes the result feel made by a person. See playbook/.

Clean components, or imaginary ones

Promo videos for software live or die on the UI you show. The rule:

1. The product has clean UI (consistent, uncluttered, current): capture it and animate the real components. Cards, tables, charts and toasts are rebuilt in HTML from your design tokens, not pasted in as screenshots.
2. It doesn't (legacy screens, dense admin panels, nothing designed yet): design imaginary components. These are simplified, idealised pieces of UI that tell the truth about what the product does, drawn in the brand's tokens.
3. Never fake capabilities, numbers or customers. An imaginary component may simplify the product but must not claim anything it doesn't do.

Details, a decision checklist and examples: components/.

100 themes, one story

The same 45-second story about the fictional Acme Pulse, an AI that watches product metrics and flags anomalies, is drawn in 100 different visual languages across 10 families:

Each sheet shows Hook → Reveal → Proof moment → CTA. It also lists six components, three motion techniques with timings, the risk to watch for, how to adapt the theme to your own product, and references. Open the gallery, pick two or three themes, and put them in your brief.

Quick start

Requirements: Node.js 22+, ffmpeg, Claude Code. HyperFrames downloads its own headless Chrome.

# 1. get the kit
git clone https://github.com/tugrawork-creator/saas-motion-kit && cd saas-motion-kit

# 2. install the HyperFrames skills for Claude Code (not vendored here)
npx skills add heygen-com/hyperframes

# 3. try the example
cd examples/acme-suite-loop
npx hyperframes preview          # live preview in the Studio
npx hyperframes render --quality delivery --resolution landscape-4k --output renders/loop-2160.mp4

Then open Claude Code in the repo root and start a video:

/saas-motion-video  Make a 45 s LinkedIn promo for https://your-product.com — theme 055 (Bento Grid), music-driven, no voiceover.

The skill walks you through the seven stages and stops at each gate.

Rendered examples

Rendered MP4s are attached to the Releases page, so the repository stays small.

Lessons that save hours

• Render at 4K, deliver smaller. Render landscape-4k or square-4k, then downscale with Lanczos (tools/deliver.sh). Edges, text and 3D come out visibly cleaner than a native 1080p render.
• Seek-safe or it breaks. Every frame must be a pure function of time: one paused GSAP timeline, Three.js driven from hf-seek, no Date.now(), no unseeded random.
• Loops: give every ambient motion a whole number of cycles per loop (sin(2π·n·t/LOOP)), and verify the seam with tools/loop_check.py.
• Fonts with non-Latin characters: ship latin-ext subsets locally. Built-in fallbacks silently lose glyphs such as ş, ğ and İ.
• Uppercase text: in some languages (for example Turkish) CSS text-transform: uppercase changes "i" into "İ". Type display text in uppercase yourself and set lang per word.
• Sound: pure sine blips sound thin and eerie. Warm tuned timbres (marimba or wood block in one key, short room reverb) feel friendly (tools/warm_sfx.py).
• Less text. If a viewer needs to read to follow the story, the visuals aren't doing their job. Keep on-screen words to labels and one line per beat.
• No progress bars. A timeline bar at the bottom makes a brand film look like a screen recording.

Credits and licenses

• Code and docs: MIT.
• Fonts in docs/assets/fonts and examples/*/assets/fonts (Manrope, Instrument Serif, JetBrains Mono): SIL Open Font License 1.1, see LICENSES.
• HyperFrames is by HeyGen. Install its skills with npx skills add heygen-com/hyperframes.
• If you generate music locally with Meta's MusicGen, note that its weights are CC-BY-NC 4.0 (non-commercial). Use licensed music for commercial work.
• Acme, Acme Pulse and Acme Suite are fictional. Any resemblance to real products is coincidental.