saas-motion-kit README

The project's README from github.com/tugrawork-creator/saas-motion-kit. As one markdown file: README.md.

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.

What's new in v1.2: same story, six films

The same 12-second script told in six themes, all six playing in sync

What was new in v1.1: the creative muscle
  • creative/ is the new heart of the kit: seven questions to ask at every storyboard, a tone matrix ("I want to say ___ in a ___ tone") that maps tone to speed, eases, camera, colour, type, transitions and sound, the variety rules, and a component forge for inventing a new component in 15 minutes.
  • Transition atlas: 24 narrative transitions (match cuts, carries, camera moves, masks, materials, time), each with a live demo, the tone it fits and what not to pair it with.
  • tools/variety_audit.py reads the storyboard ledger and flags repeated transitions, entrances, eases, directions, uniform shot lengths, missing surprises, accent overuse, tone mismatches and missing new components. With --history it remembers your previous films, so you don't repeat your last three.
  • The Acme example, rebuilt as a lesson. We ran the audit on our own first draft. It caught 11 repetitions: the same turntable turn five times, the same title entrance, one ease everywhere, equal shot lengths and no surprise. v2 gives every product its own entrance (letters out of blur, mask wipe, a word carried between shots, drop from above), varies the turns (whip with motion blur, slow sine), uneven shot lengths, and one surprise where Forecast floods teal while the camera dollies in. Before and after are in examples/acme-suite-loop, and the new render is on the v1.1 release.
  • The storyboard template now opens with a Message & tone sentence and a one-row-per-shot ledger, and the /saas-motion-video skill runs a creative pass gate before any build.

Six of the 100 themes

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

What's inside

Path What it is
creative/ The creative muscle: the seven questions, tone matrix, variety rules, component forge and transition atlas
playbook/ A 7-stage production playbook with a review gate at each stage
components/ The clean-or-imaginary component rule: use the product's real UI when it is clean, otherwise design imaginary UI
docs/ GitHub Pages: the 100-theme gallery (4 key frames, component kit, motion notes and references per theme) and the live transition atlas
examples/six-films/ Same story, six films: one 12 s script built in six themes, each with its storyboard, ledger and new component, plus the shared brief
examples/acme-suite-loop/ A complete HyperFrames project: a silent, seamless 40 s 3D booth loop, with its v1 → v2 variety-audit lesson
.claude/skills/saas-motion-video/ A Claude Code skill that runs the whole process with you
templates/ BRIEF.md, STORYBOARD.md and the theme-sheet template
examples/prompts/ Real prompts that produced finished films, each with a fill-in template
tools/ Variety audit, theme picker, history report, delivery (4K → 1080p/2K), loop-seam check, warm UI SFX synth, gallery builders
.github/workflows/ The variety audit as a GitHub Action: every storyboard is checked on push and pull request

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

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.

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:

Family Themes
Product UI as the stage 001–010
Typography & graphic systems 011–020
Material & 3D 021–030
Light, optics & texture 031–040
Metaphor concepts 041–050
Signature directions 051–062
Data storytelling 063–072
Characters & mascots 073–082
Art movements & eras 083–092
Camera & edit grammar 093–100

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.

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 examples

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.

Lessons that save hours

Credits and licenses

saas-motion-kit (tugrawork-creator/saas-motion-kit)

Searching Database…

238 ·GitHub
Saas-motion-kit
What is this?A production kit for making promo and motion videos for software products with HyperFrames and Claude Code, built around one rule: no two films should look the same. It gives you a 7-stage playbook, a 24-transition atlas, 100 storyboard themes and a variety-audit script that flags repeated effects before you build.
Is this an app, or more of a toolkit I drop into a repo?It is a template repository: a Claude Code skill plus Python tools (variety audit, theme picker, history report, delivery scripts), a playbook, a theme gallery and a transition atlas, meant to be cloned or used as a GitHub template for your own film project.
How do I start a new video project with this?Click 'Use this template' on GitHub to spin up your own film repo with the variety-audit GitHub Action already wired in, or clone the kit directly. Then open Claude Code in the repo root and start the /saas-motion-video skill, which walks you through all seven stages and stops at each review gate.
What do I need installed before I start?Node.js 22+, ffmpeg and Claude Code. HyperFrames (by HeyGen) is installed as a Claude Code skill via npx and downloads its own headless Chrome, so you don't need to set that up separately.
What's the catch with rendering and components?Every frame must be a pure function of time (no Date.now(), no unseeded random, one paused GSAP timeline) or scrubbing breaks, and ambient loops need a whole number of cycles or the seam shows. Components also follow a strict rule: either animate the product's real, clean UI, or design clearly simplified imaginary UI — you can never fake capabilities, numbers or customers.
What is HyperFrames?HyperFrames is a seek-safe, Three.js-and-GSAP-based rendering tool by HeyGen that this kit uses to build frame-accurate motion video, driven from a timeline rather than real-time playback.
What does the variety audit actually check?tools/varietyaudit.py reads your storyboard's shot ledger and flags repeated transitions, entrances, eases, directions, uniform shot lengths, missing surprises, accent overuse and tone mismatches, optionally comparing against a history of your past films.
What are the 100 storyboard themes for?They are a gallery of visual languages (product UI, typography, 3D, light, metaphor, data, mascots, art movements, camera grammar) across 10 families, each sheet showing a hook-reveal-proof-CTA structure, six components and motion techniques, meant to be picked and combined in your brief.
Why does the kit insist on inventing a new component for every film?The author found that reused effects and components make every promo film feel the same; forcing a fresh component and transition choice each time, checked by the variety audit, is meant to train that creative muscle and keep films feeling human-made.
What are similar projects?motion-video-kit, herk-edit-kit, guizang-product-video-skill, lemo-opuscar, huashu-art-motion, onetake, eian-riso-broll, procedural-film
Which topics is it in?hyperframes, storyboarding, storyboard, motion-design, video-production, motion-graphics, creative-coding, marketing, threejs, webgl, claude-code-skill, template
Creator
tugrawork-creator
Size
16.5 MB
Stars
238
Updated
CommitOct 04Releasev1.4Oct 04
Age
22d
Commits · 90 Days