saas-motion-kit
Promo & motion videos for software products with HyperFrames + Claude Code — a staged process, clean-or-imaginary components and 100 storyboard themes.
61stars
4forks
Python
Added 9/26/2026
⚠️ Third-Party Software Notice
This skill is third-party open-source software developed and hosted independently on GitHub. SkillsLLM is an informational directory and does not control or maintain the underlying repository.
Any security checks, ratings, or warnings displayed by SkillsLLM are automated and limited in scope. They do not constitute a security certification or guarantee that the software is safe, error-free, or free from malicious code, vulnerabilities, compromised dependencies, or prompt-injection risks.
Review the source code, permissions, dependencies, and configuration before installing or running any third-party skill. Use is at your own risk. To the maximum extent permitted by applicable law, SkillsLLM is not liable for losses arising from third-party software.
The deep catalog scan for this skill is still queued. Run an instant dependency check now instead.
Installation
# Add to your Claude Code skills
git clone https://github.com/tugrawork-creator/saas-motion-kitGetting Started
Guides for using ide extensions skills like saas-motion-kit.
Compare with similar skills
See how saas-motion-kit compares with popular alternatives.
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
| Path | What it is |
|---|---|
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/ |
The theme gallery (GitHub Pages). It holds 100 theme sheets, each with 4 key frames, a component kit, motion notes and references |
examples/acme-suite-loop/ |
A complete HyperFrames project: a silent, seamless 40 s 3D loop for a booth screen (Three.js and GSAP) |
.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 |
tools/ |
Delivery (4K → 1080p/2K), loop-seam check, warm UI SFX synth, gallery builders |
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:
- 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.
- 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.
- 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.
# 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-4korsquare-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, noDate.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 withtools/loop_check.py. - Fonts with non-Latin characters: ship
latin-extsubsets locally. Built-in fallbacks silently lose glyphs such as ş, ğ and İ. - Uppercase text: in some languages (for example Turkish) CSS
text-transform: uppercasechanges "i" into "İ". Type display text in uppercase yourself and setlangper 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/fontsandexamples/*/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.
Frequently Asked Questions
What is saas-motion-kit?
saas-motion-kit is an open-source ide extensions skill for AI coding assistants such as Claude Code, Codex CLI, and ChatGPT, built by tugrawork-creator. Promo & motion videos for software products with HyperFrames + Claude Code — a staged process, clean-or-imaginary components and 100 storyboard themes. It has 61 GitHub stars.
Is saas-motion-kit safe to use?
saas-motion-kit's catalog security scan is still queued. You can run an instant dependency and prompt-injection check now with the "Scan for vulnerabilities" button above.
How do I install saas-motion-kit?
Clone the repository with "git clone https://github.com/tugrawork-creator/saas-motion-kit" and add it to your Claude Code skills directory (see the Installation section above).
What programming language is saas-motion-kit written in?
saas-motion-kit is primarily written in Python. It is open-source under tugrawork-creator on GitHub, so you can review or fork the full source.
Are there alternatives to saas-motion-kit?
Yes. SkillsLLM lists many other IDE Extensions skills you can browse and compare side by side. Open the IDE Extensions category from the badge at the top of this page, or use the Related Skills and comparison links further down to weigh saas-motion-kit against similar tools.
Comments (0)
to leave a comment.
No comments yet. Be the first to share your thoughts!
Related Skills
The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
267,101
39,908
JavaScript
AI Agentsai-agentsanthropic
The agent harness performance optimization system. Skills, instincts, memory, security, and research-first development for Claude Code, Codex, Opencode, Cursor and beyond.
185,940
28,768
JavaScript
AI Agentsai-agentsanthropic
Makes your AI agent think like the laziest senior dev in the room. The best code is the code you never wrote.
145,668
7,810
JavaScript
AI Agentsagent-skillsai-agents
A cross-platform desktop All-in-One assistant for Claude Code, Codex, OpenCode, OpenClaw, Grok Build & Hermes Agent. Only official website: ccswitch.io
136,644
9,315
Rust
AI Agentsai-toolsclaude-code
An AI skill that provides design intelligence for building professional UI/UX across multiple platforms.
130,493
13,881
Python
CLI Toolsai-skillsantigravity
Popular in IDE Extensions
Top skills in this category by stars
An Obsidian plugin that embeds Claude Code/Codex as an AI collaborator in your vault
15,498
1,043
TypeScript
IDE Extensionsclaude-codecodex
A theoretical reconstruction of the Claude Mythos architecture, built from first principles using the available research literature.
14,906
3,296
Python
IDE Extensionsaianthropic
Claude Code plugin that generates individualized knowledge systems from conversation. You describe how you think and work, have a conversation and get a complete second brain as markdown files you own.
3,495
231
Shell
IDE Extensionsclaude-codeclaude-code-plugin