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
Что это?Продакшн-набор для создания промо- и моушн-видео для программных продуктов с помощью HyperFrames и Claude Code, построенный вокруг одного правила: никакие два фильма не должны выглядеть одинаково. Он даёт плейбук из 7 этапов, атлас из 24 переходов, 100 тем раскадровок и скрипт variety-audit, который отмечает повторяющиеся эффекты ещё до сборки.
Это приложение или скорее набор инструментов, который я кладу в репозиторий?Это репозиторий-шаблон: навык Claude Code плюс инструменты на Python (variety audit, выбор тем, отчёт по истории, скрипты поставки), плейбук, галерея тем и атлас переходов — его клонируют или используют как шаблон GitHub для собственного кино-проекта.
Как начать с этим новый видео-проект?Нажмите 'Use this template' на GitHub, чтобы развернуть свой репозиторий фильма с уже подключённым GitHub Action для variety-audit, или просто клонируйте набор. Затем откройте Claude Code в корне репозитория и запустите навык /saas-motion-video — он проведёт вас через все семь этапов и будет останавливаться на каждом этапе ревью.
Что нужно установить перед началом?Node.js 22+, ffmpeg и Claude Code. HyperFrames (от HeyGen) устанавливается как навык Claude Code через npx и сам скачивает headless Chrome, так что отдельно его настраивать не нужно.
В чём подвох с рендерингом и компонентами?Каждый кадр должен быть чистой функцией времени (никаких Date.now(), никакого случайного random без seed, одна приостановленная таймлайн-анимация GSAP), иначе ломается прокрутка, а фоновые циклы должны содержать целое число повторений, иначе будет виден шов. К компонентам тоже строгое правило: либо анимировать настоящий, чистый UI продукта, либо нарисовать явно упрощённый вымышленный UI — никогда нельзя подделывать возможности, цифры или клиентов.
Что такое HyperFrames?HyperFrames — это инструмент рендеринга от HeyGen на основе Three.js и GSAP, безопасный при перемотке (seek-safe); этот набор использует его для покадрово точного моушн-видео, управляемого таймлайном, а не воспроизведением в реальном времени.
Что именно проверяет variety audit?tools/varietyaudit.py читает реестр кадров вашей раскадровки и отмечает повторяющиеся переходы, появления, easing, направления, одинаковую длину кадров, отсутствие сюрпризов, чрезмерное использование акцентов и несовпадения тона; при желании сравнивает с историей ваших прошлых фильмов.
Для чего нужны 100 тем раскадровок?Это галерея визуальных языков (продуктовый UI, типографика, 3D, свет, метафора, данные, маскоты, художественные направления, грамматика камеры) в 10 семействах; каждый лист показывает структуру hook-reveal-proof-CTA, шесть компонентов и техники моушна — их выбирают и комбинируют в вашем брифе.
Почему набор настаивает на придумывании нового компонента для каждого фильма?Автор обнаружил, что переиспользованные эффекты и компоненты делают все промо-фильмы одинаковыми; принуждение каждый раз выбирать свежий компонент и переход, проверяемое variety audit, должно тренировать эту творческую мышцу и сохранять ощущение, что фильмы сделаны человеком.
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