Motion Web
feitangyuan/motion-web
Design and build motion-first creative websites — page design (structure, type scale, palette, spacing) plus interaction choreography: scroll animation, Framer Motion, GSAP, and light 3D via…
Plan, build and quality-check a premium short commercial for a real business (roofing, property, ecommerce, B2B software) using AI-generated footage, code-built motion (HTML/GSAP), selective…
Install Business Motion Film
$ npx skills add echris6/motion-video-kit --skill business-motion-film -a claude-codeProject install by default; add -g for ~/.claude/skills/.
$ gh skill install echris6/motion-video-kit business-motion-film --agent claude-codeProject scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).
$ git clone --depth 1 https://github.com/echris6/motion-video-kit.git skills-src && mkdir -p .claude/skills && cp -r skills-src/business-motion-film .claude/skills/business-motion-film && rm -rf skills-srcUse ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.
Claude Code skills documentation · loads skills from .claude/skills/
Install the "business-motion-film" agent skill from https://github.com/echris6/motion-video-kit/tree/main/business-motion-film into .claude/skills/business-motion-film/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "business-motion-film", then confirm the skill loads.Claude Code copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$skill-installer install https://github.com/echris6/motion-video-kit/tree/main/business-motion-filmType this inside Codex. $skill-installer <name> installs a curated skill from openai/skills. The installer writes to $CODEX_HOME/skills (default ~/.codex/skills). Restart Codex if the skill does not show up.
$ npx skills add echris6/motion-video-kit --skill business-motion-film -a codexProject install goes to .agents/skills/; add -g for ~/.codex/skills/.
$ gh skill install echris6/motion-video-kit business-motion-film --agent codexProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/echris6/motion-video-kit.git skills-src && mkdir -p .agents/skills && cp -r skills-src/business-motion-film .agents/skills/business-motion-film && rm -rf skills-srcUse ~/.agents/skills/ instead of .agents/skills for a personal install.
Codex skills documentation · loads skills from .agents/skills/
Install the "business-motion-film" agent skill from https://github.com/echris6/motion-video-kit/tree/main/business-motion-film into .agents/skills/business-motion-film/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "business-motion-film", then confirm the skill loads.Codex copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add echris6/motion-video-kit --skill business-motion-film -a cursorProject install goes to .agents/skills/; add -g for ~/.cursor/skills/.
$ gh skill install echris6/motion-video-kit business-motion-film --agent cursorProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/echris6/motion-video-kit.git skills-src && mkdir -p .cursor/skills && cp -r skills-src/business-motion-film .cursor/skills/business-motion-film && rm -rf skills-srcUse ~/.cursor/skills/ instead of .cursor/skills for a personal install.
Cursor skills documentation · loads skills from .cursor/skills/, .agents/skills/, .claude/skills/, .codex/skills/
Install the "business-motion-film" agent skill from https://github.com/echris6/motion-video-kit/tree/main/business-motion-film into .cursor/skills/business-motion-film/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "business-motion-film", then confirm the skill loads.Cursor copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gemini skills install https://github.com/echris6/motion-video-kit.git --path business-motion-film--scope user (default) or --scope workspace; --path is the subfolder of the repo that holds the skill; --consent skips the security confirmation prompt.
$ npx skills add echris6/motion-video-kit --skill business-motion-film -a gemini-cliProject install goes to .agents/skills/; add -g for ~/.gemini/skills/.
$ gh skill install echris6/motion-video-kit business-motion-film --agent gemini-cliProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/echris6/motion-video-kit.git skills-src && mkdir -p .gemini/skills && cp -r skills-src/business-motion-film .gemini/skills/business-motion-film && rm -rf skills-srcUse ~/.gemini/skills/ instead of .gemini/skills for a personal install, then run /skills reload.
Gemini CLI skills documentation · loads skills from .gemini/skills/, .agents/skills/
Install the "business-motion-film" agent skill from https://github.com/echris6/motion-video-kit/tree/main/business-motion-film into .gemini/skills/business-motion-film/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "business-motion-film", then confirm the skill loads.Gemini CLI copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ gh skill install echris6/motion-video-kit business-motion-filmInstalls for Copilot at project scope by default; add --scope user for a personal install. Preview a skill first with gh skill preview. Needs GitHub CLI 2.90.0 or later (public preview).
$ npx skills add echris6/motion-video-kit --skill business-motion-film -a github-copilotProject install goes to .agents/skills/; add -g for ~/.copilot/skills/.
$ git clone --depth 1 https://github.com/echris6/motion-video-kit.git skills-src && mkdir -p .github/skills && cp -r skills-src/business-motion-film .github/skills/business-motion-film && rm -rf skills-srcUse ~/.copilot/skills/ instead of .github/skills for a personal install. Commit .github/skills so cloud agent and code review can use it.
GitHub Copilot skills documentation · loads skills from .github/skills/, .claude/skills/, .agents/skills/
Install the "business-motion-film" agent skill from https://github.com/echris6/motion-video-kit/tree/main/business-motion-film into .github/skills/business-motion-film/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "business-motion-film", then confirm the skill loads.GitHub Copilot copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
$ npx skills add echris6/motion-video-kit --skill business-motion-film -a opencodeOpenCode documents no install command of its own. Project install goes to .agents/skills/; add -g for ~/.config/opencode/skills/.
$ gh skill install echris6/motion-video-kit business-motion-film --agent opencodeProject scope by default (.agents/skills/); add --scope user for a personal install.
$ git clone --depth 1 https://github.com/echris6/motion-video-kit.git skills-src && mkdir -p .opencode/skills && cp -r skills-src/business-motion-film .opencode/skills/business-motion-film && rm -rf skills-srcUse ~/.config/opencode/skills/ instead of .opencode/skills for a personal install.
OpenCode skills documentation · loads skills from .opencode/skills/, .claude/skills/, .agents/skills/
Install the "business-motion-film" agent skill from https://github.com/echris6/motion-video-kit/tree/main/business-motion-film into .opencode/skills/business-motion-film/ in this project. Copy the whole folder (SKILL.md and every file beside it), keep the folder name "business-motion-film", then confirm the skill loads.OpenCode copies the folder itself, the same result as the manual copy. Check what it changed before you commit it.
Facts
- Skill name
business-motion-film- GitHub stars
- 1.1k
- Token cost
- ~1.8k tokens
- SKILL.md length
- 901 words
- Files
- 22 (incl. scripts, references)
- Skills in repo
- 1
- Repo updated
- First seen
- Licence
- MIT
At a glance
Plan, build and quality-check a premium short commercial for a real business (roofing, property, ecommerce, B2B software) using AI-generated footage, code-built motion (HTML/GSAP), selective…
- Works in 9 steps: Brief (15 min) → References → Storyboard before building → …
- Asked to make a launch-style / SaaS-style video
- SKILL.md covers Non-negotiables, Workflow and Working style the clients in…
- Runs Shell and Python scripts from its folder
What it does
Business Motion Film is an agent skill from echris6/motion-video-kit. Plan, build and quality-check a premium short commercial for a real business (roofing, property, ecommerce, B2B software) using AI-generated footage, code-built motion (HTML/GSAP), selective Three.js and an independent-critic "Gauntlet" loop. Use when asked to make a launch-style / SaaS-style video, business ad, explainer, sample reel or pitch video, or to review and improve one. Encodes motion principles distilled from 28 professional launch films, a quality bar, audio rules and a business-offer playbook.
Its SKILL.md is about 1.8k tokens, which your agent loads only when the skill is triggered. The skill folder holds 23 other files, including scripts and reference files (for example `references/audio.md`, `references/business-offers.md` and `references/case-study-alder.md`).
It sits in Game Development, covering 3D graphics and WebGL, Web animation and motion and E-commerce operations. It works with Three.js and GSAP. The repository describes itself as: Claude Code skill kit for premium AI-assisted business videos: independent critic loop, motion principles from 28 launch films, quality bar, sound design, business offers…. The licence is MIT.
When your agent uses it
- Asked to make a launch-style / SaaS-style video
- Review and improve one
Example prompts
- “Gauntlet”
- “/business-motion-film”
Requirements
- Python 3
- A Bash shell
Workflow steps
9 steps, taken from the step headings in SKILL.md.
What it can do on your machine
Read from SKILL.md and the folder at commit 255562b. It shows what the files ask for, not the result of running them.
Tool permissions
Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.
From allowed-tools in the SKILL.md frontmatter.
Runs code
Ships 7 files in scripts/ (Shell and Python, from the files we listed), which the agent can run.
From the folder's file list and the shell code blocks in SKILL.md.
Network
No URLs in SKILL.md.
From URLs in SKILL.md, links to its own repository left out.
Credentials
Names no API keys, tokens, secrets or passwords.
From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.
Context cost
Business Motion Film loads about 1.8k tokens when it runs, and up to ~17k if it reads all its reference files. Until then it costs about 133 tokens; SKILL.md has 901 words of instructions outside code blocks.
Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.
Safety
Auto-check passed
The automated check found no risky patterns in SKILL.md.
Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); the scripts in this folder are not scanned.
SKILL.md
The full file from echris6/motion-video-kit at commit 255562b, republished under its MIT licence (© echris6). 901 words, ~1,757 tokens.
Download SKILL.mdSave it as
.claude/skills/business-motion-film/SKILL.md (or your agent's skills folder). This skill also uses 21 other files; get the full folder from GitHub.- name
- business-motion-film
- description
- Plan, build and quality-check a premium short commercial for a real business (roofing, property, ecommerce, B2B software) using AI-generated footage, code-built motion (HTML/GSAP), selective Three.js and an independent-critic "Gauntlet" loop. Use when asked to make a launch-style / SaaS-style video, business ad, explainer, sample reel or pitch video, or to review and improve one. Encodes motion principles distilled from 28 professional launch films, a quality bar, audio rules and a business-offer playbook.
Business motion film
Make short (15–40s) commercials that look like premium SaaS launch films but sell a real business outcome: explain a service, earn a quote request, follow up on a quote, or refresh an ad. The visuals can be ambitious; the claims must be true.
Read only the reference file your current step needs:
| Step | Read |
|---|---|
| Choosing a vertical, offer, pilot scope, pricing anchors | references/business-offers.md |
| Storyboarding and motion design | references/motion-grammar.md, then references/launch-film-notes.md for concrete moments |
| Building 3D components | references/three-js-patterns.md, templates/component-lab.html, templates/projected-overlays.js |
| A 3D product hero that must move like the real thing (unfolds, closes, reveals) | references/product-hero-realism.md |
| Any review round | references/gauntlet.md, references/critic-prompts.md, references/quality-bar.md |
| Music, sound effects, mix | references/audio.md |
| A worked example end to end | references/case-study-alder.md (calm service film), references/case-study-duo.md (Three.js product film) |
Non-negotiables
- Truth. Never invent testimonials, ratings, completed jobs, diagnoses, savings, warranties or confirmed appointments. A concept film says it is a concept ("Fictional brand · Concept film · AI-generated imagery"). A client film uses the client's approved footage and facts.
- Business purpose on mute. A first-time viewer must be able to say what the business does and what to do next, with the sound off, by the end.
- Independent judging. The builder never grades its own work. Every component and every full cut goes to a fresh critic that sees only the render, the brief and the references (
references/gauntlet.md). - Deterministic motion. Every animated state is a pure function of timeline time: no free-running
requestAnimationFrame,Date.now(), unseeded randomness or physics history. Seek to any frame and get the same pixels. - "No bugs" is not "good". Clean, smooth and error-free versions still get rejected for being basic, empty or slow. Measure (
scripts/) and judge creatively.
Workflow
1. Brief (15 min)
Write BRIEF.md: business, buyer, the viewer's problem, the single action (CTA), what is provably true, available real assets, length, aspect ratios, brand (palette, type), and what must never be claimed. If the user has no real assets, agree it is a labelled concept.
2. References
Pick 3–6 moments from references/launch-film-notes.md whose mechanism fits the story, e.g. a foreground fly-through, a persistent selected object, or a layered exploded view. If the user supplies reference videos, extract frames (scripts/contact-sheet.sh) and cite exact timestamps. Borrow mechanisms, never layouts, logos or footage.
3. Storyboard before building
One table: time → what the viewer sees → business job of the beat → the transition out, including which object survives it. Rules:
- 12–15 distinct compositions for a 30s film. Vary scale: macro → wide → overhead → UI close-up → type impact.
- The lead subject fills 60–85% of the usable frame in feature beats. No small card floating in a big empty field.
- Every beat has a readable landing, then an accelerating exit. No holds without motion over ~0.6s.
- Name 3 signature transformations you can describe without effect names, e.g. "the inspection photo becomes the report's hero image".
- 3D only where it explains something physical or spatial. Typography and UI stay crisp HTML/SVG. Get a quick critic pass on the storyboard itself (chronology, business logic, truthfulness).
Show full SKILL.md (405 more words)Show less
4. Assets
- AI stills: generate the key frame first, then animate it with image-to-video. Prompt as a production brief: lens, light, exposure ("bright, airy, nothing crushed to black"), negative space reserved for type, "no people / no text / no logos / no watermark" when needed.
- AI video: short (4–5s) clips with restrained camera moves ("a steady gimbal dolly, about 25 cm of travel, preserve the exact geometry, no morphing"). Expect 720p/24fps and interpolate/upscale, which is not native detail. Reject clips whose geometry warps; regenerate rather than hide.
- Keep a generation ledger: model, prompt, seed, job id, accepted window. Never commit API keys.
5. Build components in isolation
Each custom component (3D scene, report UI, booking flow, logo mark) gets its own lab page (templates/component-lab.html), is rendered to stills plus a short motion proof, and goes through a component Gauntlet round before it joins the film.
6. Assemble
One root timeline; each scene is a sub-composition; Three.js scenes are rendered from the root seek clock; overlays such as labels, pins and leader lines are positioned from projected 3D anchors every frame (templates/projected-overlays.js). Hand objects across scenes at exact pixel coordinates, so the last frame of scene A equals the first frame of scene B for the carried object.
7. Full-film Gauntlet
Render the whole film. Run scripts/frozen-time.sh and scripts/loudness.sh. Send to a fresh critic with references/critic-prompts.md (full-film prompt). Fix the highest-impact items, re-render, and send to a new critic that verifies the previous list item by item. Stop at the quality bar or when gains become cosmetic (usually 3–5 rounds).
8. Audio last, but not an afterthought
Follow references/audio.md: music matched to the buyer's customer and kept well under the effects (lo-fi or warm acoustic for home services); one soft, rumble-free whoosh per real transition; clean UI sounds only on real actions; per-event levels solved in each effect's band (scripts/solve-sfx-gains.py); candidates screened with scripts/sfx-candidates.py. Always deliver a music-only fallback, and isolate complaints with it.
9. Deliver
Master MP4 (1080p60 for motion work), poster frame, contact sheet, editable source, generation ledger, and a Gauntlet ledger (what each critic found → what changed → measured before/after). State limits honestly: what was measured versus listened to, and sampled versus exhaustive review.
Working style the clients in this playbook expected
- Plan visibly (storyboard), then build without stopping to ask for approval of every step.
- Report status in one line when working for a long time.
- Show the work: contact sheets, measured numbers, critic verdicts.
© echris6, MIT. Rendered from Markdown: HTML in the file is shown as text, images as links, and headings moved down two levels. Raw file
Files
SKILL.md and 21 other files (scripts, references) in business-motion-film of echris6/motion-video-kit.
- SKILL.md
- references/audio.md
- references/business-offers.md
- references/case-study-alder.md
- references/case-study-duo.md
- references/critic-prompts.md
- references/gauntlet.md
- references/launch-film-notes.md
- references/motion-grammar.md
- references/product-hero-realism.md
- references/quality-bar.md
- references/three-js-patterns.md
- scripts/contact-sheet.sh
- scripts/frozen-time.sh
- scripts/loudness.sh
- scripts/offline-mix.py
- scripts/sfx-candidates.py
- scripts/soften-sfx.sh
- scripts/solve-sfx-gains.py
- … and 3 more
Open the folder on GitHubat commit 255562b
Compare with similar skills
Business Motion Film next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.
| Skill | Stars | Used in | Tokens | Auto-check | Licence | Repo updated |
|---|---|---|---|---|---|---|
| Business Motion Film this skillechris6/motion-video-kit | 1.1k | — | ~1.8k | Automated safety check: Pass | MIT | |
| Motion Webfeitangyuan/motion-web | 696 | — | ~18k | Automated safety check: Pass | CC-BY-NC-4.0 | |
| Motion DesignWrongStack/WrongStack | 371 | — | ~852 | Automated safety check: Pass | MIT | |
| Web3d Integration Patternsfreshtechbro/claudedesignskills | 1k | — | ~5.3k | Automated safety check: Pass | MIT | |
| Build Awwwards Quality Sitesnirholas/three.ws | 229 | 1 repos | ~1.8k | Automated safety check: Pass | Apache-2.0 | |
| Guizang Product Video Skillop7418/guizang-product-video-skill | 753 | — | ~1.1k | Automated safety check: Pass | AGPL-3.0 |
Similar skills
Motion Design
WrongStack/WrongStack
Implement web and React animation, gesture feedback, layout transitions and scroll sequences.
Web3d Integration Patterns
freshtechbro/claudedesignskills
Meta-skill for combining Three.js, GSAP ScrollTrigger, React Three Fiber, Motion, and React Spring for complex 3D web experiences.
Build Awwwards Quality Sites
nirholas/three.ws
Art-direct and implement distinctive, motion-rich marketing, editorial, portfolio, and landing websites with original reference-inspired imagery, standout heroes, GSAP choreography, one…
Guizang Product Video Skill
op7418/guizang-product-video-skill
制作代码驱动的软件产品宣传片和版本更新片（product promo、release notes video、changelog promo）。从真实功能和产品设计出发定方向，用真实组件、GSAP/Three.js 动效、原创配乐和动作音效完成影片，每支片子的视觉手法都从产品本身推导，不套模板。
Inspira UI
secondsky/claude-skills
120+ Vue/Nuxt animated components with TailwindCSS v4, motion-v, GSAP, Three.js.
Related
Categories
Questions about Business Motion Film
What does Business Motion Film do?
Plan, build and quality-check a premium short commercial for a real business (roofing, property, ecommerce, B2B software) using AI-generated footage, code-built motion (HTML/GSAP), selective…. Business Motion Film is an agent skill from echris6/motion-video-kit.js and an independent-critic "Gauntlet" loop.
When should I use Business Motion Film?
Business Motion Film fits situations like: asked to make a launch-style / SaaS-style video; review and improve one.
How do I install Business Motion Film in Claude Code?
Run `npx skills add echris6/motion-video-kit --skill business-motion-film -a claude-code`. Or copy the skill folder (business-motion-film in echris6/motion-video-kit) into .claude/skills/business-motion-film in your project. Claude Code loads it when a task matches its description.
How do I install Business Motion Film in Codex?
Run `npx skills add echris6/motion-video-kit --skill business-motion-film -a codex`. Or copy the skill folder (business-motion-film in echris6/motion-video-kit) into .agents/skills/business-motion-film in your project. Codex loads it when a task matches its description.
Can I use Business Motion Film in Cursor, Gemini CLI or GitHub Copilot?
Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add echris6/motion-video-kit --skill business-motion-film -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/business-motion-film, .gemini/skills/business-motion-film, .github/skills/business-motion-film and .opencode/skills/business-motion-film in your project.
What does Business Motion Film need to run?
Going by SKILL.md and its folder, Business Motion Film needs a shell and Python for the scripts in its folder. Our summary lists: Python 3; A Bash shell.
Does Business Motion Film access the network?
SKILL.md contains no URLs. Any network use would come from the scripts or tools the agent runs. This is read from the text; nothing was executed.
Is Business Motion Film safe to install?
Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. The check reads SKILL.md only: the scripts in the folder are not scanned, so read them before running anything.
What licence does Business Motion Film use?
Business Motion Film is published under the MIT licence (the repository's licence). It allows redistribution, so the full SKILL.md is shown on this page.
How many tokens does Business Motion Film use?
About 1.8k tokens (SKILL.md is roughly 7k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full. Its references folder adds about 15k tokens, read only when the agent opens those files.
What are the alternatives to Business Motion Film?
Skills that share tags, products or a category with Business Motion Film: Motion Web (feitangyuan/motion-web, 696 stars), Motion Design (WrongStack/WrongStack, 371 stars), Web3d Integration Patterns (freshtechbro/claudedesignskills, 1k stars) and Build Awwwards Quality Sites (nirholas/three.ws, 229 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.
Who maintains Business Motion Film?
echris6 (a GitHub user) maintains it in echris6/motion-video-kit, which has 1,076 GitHub stars. The repository was last updated on September 28, 2026.
Source: echris6/motion-video-kit on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.