saas-motion-kit

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

The one rule: no two films should feel like the same film. Don't repeat effects, transitions or components. Invent a new component for every film. Decide the message and the tone before you pick a single effect.

This kit trains that creative muscle. It combines a staged process, a component strategy, 100 visual themes, a 24-transition atlas and a variety audit that catches repetition in your storyboard before you build it.

Türkçe README → · Theme gallery → · Transition atlas → · Creative muscle → · Six films → · Example →

New: start from a real prompt. The exact prompt behind a finished 35 s mascot promo, plus a fill-in template and what happened at each gate.

• Same story, six films. One 12-second Acme Pulse script, six themes from the gallery, and six films that share the story and nothing else. Every storyboard passed the variety audit, and every film invented its own component: a metric stave (⌘K Keyboard Symphony), a rollback rolling pin (Clay Studio), a fineliner seismograph (Hand-Drawn Marker), a spot cue (Dark Keynote), a P1 gamepad (8-Bit Sidekick) and a halftone chart (Pop-Art Ben-Day). The shared brief is included, so you can give it to your agent with a seventh theme. Watch the films on the v1.2 release.
• tools/pick_themes.py shortlists gallery themes for a tone and an audience, and skips the ones you used in your last five films:

  python tools/pick_themes.py --tone playful --audience "developers" --history ~/.motion-ledger.json

• tools/history_report.py turns your motion history into a one-page report: the transitions, entrances and eases you keep reaching for, and the atlas transitions and themes you have never tried. variety_audit.py --append now also takes --theme NNN, so the history knows which theme each film used.
• A GitHub Action (variety-audit.yml) audits every STORYBOARD.md on each push and pull request. A storyboard that repeats itself fails the check.
• Template repository. Click Use this template to start your own film repo with the tools, the creative rules and the audit Action already in place.
• Before and after, side by side: the Acme Suite loop's v1 and v2 play next to each other on the v1.2 release.

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

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/.

At stage 4 the creative pass is mandatory: write the message-and-tone sentence, fill the ledger, run python tools/variety_audit.py STORYBOARD.md, then fix the repeats or mark them as deliberate motif:s.

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/.

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.

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

Click Use this template on GitHub to start your own film repo with the audit Action already wired in, or clone the kit:

# 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 MP4s are attached to the Releases page, so the repository stays small. The v1.2 release has the six films, their synced grid and the Acme v1/v2 comparison.

• 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.

• 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.