BLOG
huashu-motion: Enabling Coding Agents to Generate Commercial Product Promotional Videos with One Click
TEXT
I. What is this?
huashu-motion is a newly launched open-source skill on GitHub, with the repository address github.com/alchaincyf/huashu-motion. It was created on October 18, 2026, and as of October 24, 2026, it had approximately 1536 stars. The license is MIT. This project has a specific purpose: to enable coding agents like Claude Code and Codex to instantly generate commercial product promotional videos.
Users don’t need to open any editing software or know how to animate. They simply say to the agent, “Generate a 30-second promotional video for my product,” and the agent takes care of the rest. The agent reads the product information or directly searches online to complete the materials, then offers three design options for users to choose from. After selecting an option, the agent generates a complete video, including visuals, animations, and background music.
It also has a “point-and-click editing” feature: when users press the C key and click on a specific part of the video, they can provide their modifications. The agent only modifies that part, avoiding retracing. The music is not generated using paid APIs but instead is locally produced by the agent using the ABC notation, further reducing costs.
From a project relationship perspective, huashu-motion is connected to the author’s previous work, huashu-design. Huashu-design is a design skill that focuses on generating high-fidelity prototypes, animations, and PPTs using native HTML technologies. Huashu-motion narrows this approach down to the “product promotional video” workflow, solving the same problem: enabling agents to directly produce usable visual content.
II. Core Mechanism
The core technology stack of huashu-motion is very clear: HTML, CSS, JavaScript, SVG, and Canvas. All animations are rendered in the browser and then exported as MP4 using Chromium and Playwright.
There are two specific export methods. The first is real-time recording: while the browser plays the animation, Playwright synchronously records it. This method is fast, but may result in inconsistent videos due to browser frame drops. The second method is deterministic frame rendering: screenshots are taken frame by frame based on timestamps, and then merged into an MP4 at 60fps. This method is more stable and suitable for commercial videos with higher quality requirements.
In terms of design rules, huashu-motion borrows the design language accumulated by huashu-design. This means that animation styles, colors, and typography are not invented from scratch but are based on a proven design system. When generating visuals, the agent reuses these rules to ensure that the output is not too arbitrary.
END
The rendering process from browsers to videos can be understood as follows: the agent first converts user input into executable web code, using HTML structure to carry visual elements, CSS animations and SVG paths to control movement curves, and Canvas for handling complex graphics. Then, Playwright launches a headless Chromium instance and captures page states at set frame rates. When real-time recording is chosen, Playwright directly records the screen; when deterministic frame rendering is selected, the script repeatedly seeks to the corresponding positions at fixed timestamps and takes screenshots, finally combining all the screenshots into a video. The core difference between the two approaches lies in the time reference: the former follows actual playback time, while the latter is completely controlled by the script.
Music generation is another highlight. It does not rely on commercial music APIs like Suno or Udio, but instead allows the agent to write melodies using the ABC notation system, which is then rendered into audio through a local synthesizer. The advantage of this approach is zero extra costs and no interruptions due to network or quota issues.
The installation is also simple, execute in the coding agent environment:
npx skills add alchaincyf/huashu-motion
The agent will automatically incorporate this workflow into the current project, and then users can drive subsequent steps using natural language.
III. Technical Evaluation
From the production process of product promotional videos, huashu-motion addresses a real problem. In traditional practices, even a 20-second release video requires planning scripts, designing visuals, producing animations, scoring, and exporting. This can take half a day at least and several days at most. huashu-motion compresses this series of steps into an agent workflow. The author’s own case is: a 22-second release video took about half an hour after three rounds of modifications, with Claude Code plus DeepSeek V4.1 Flash costing approximately 1.95 yuan.
This number shows that it indeed provides a viable alternative in terms of cost and time. For independent developers, early product teams, or those who need a demo video temporarily, this model is very attractive.
The author has tested huashu-motion on different products such as DeepSeek V4.1 Flash,小猫补光灯 Pro, huashu-design 3.0, and女娲. These products cover three scenarios: AI models, hardware accessories, and design tools, indicating that huashu-motion is not only effective in demo products but can also handle the basic information of real products. Of course, these cases are from the author’s own descriptions and have not been independently evaluated by third parties, so they are more suitable as a “feasibility reference” rather than a guarantee of universality.
However, technical evaluation cannot only consider the best-case scenario. The output quality of huashu-motion essentially depends on two factors: one is the agent’s understanding of design direction, and the other is the expressiveness of HTML/CSS/Canvas animations themselves. The former still requires user participation in selecting directions and modifying according to visual points, not being completely automated; the latter is limited by browser rendering capabilities, unable to produce 3D effects at the film level, making it more suitable for flat, lightweight product introduction styles.
Compared to professional video tools, its advantage is not to replace After Effects or Premiere, but to minimize the cost of creating a functional promotional video quickly. Its positioning is closer to an “agent-driven video prototype tool” rather than a complete post-production platform.
In terms of popularity, 1536 stars so far is not low for a repository that has been released in less than a week, indicating that there is a demand for “agents directly producing videos.” However, it has not yet made it to the top ranks on Hacker News, while promotion on Chinese social media such as 163.com and Instagram is already underway. This suggests that it is still in the early stages of dissemination, and its actual reputation and long-term usage cases remain to be seen.
IV. Value Judgment
The real problem huashu-motion solves is that small teams and individual developers want a decent product promotional video, but they cannot afford a professional team or find time to learn editing themselves.
In this context, its value is obvious. Users describe their needs in natural language, and the agent can provide solutions, generate videos, and support local modifications without opening any professional software. Local music generation further reduces the threshold and cost of use. For teams that need to quickly verify promotional materials before product release, this workflow can significantly shorten the distance from idea to finished product.
From a cost perspective, traditional product promotional video outsourcing often costs thousands to tens of thousands of yuan, with a cycle of at least a few days; whereas huashu-motion’s creator reduces the time required for a 22-second video to half an hour and less than two dollars. This difference is almost another world for early-stage teams and individual developers with tight budgets. It removes the psychological barrier of “first creating one to see the results.”
Its limitations are also clear. First, the current main testing environment is macOS, and the user experience on other platforms needs verification. Second, it relies on a coding agent environment, meaning users must at least be able to use tools like Claude Code and Codex, and be willing to let the agent execute code locally. Third, the video style is limited by huashu-design’s design rules, which ensure a minimum, but also mean that creativity is limited, making it difficult to create highly customized or groundbreaking visual effects.
Additionally, the “modify by frame point” feature sounds ideal, but the actual experience depends on the agent’s understanding of the modification intent. If the user’s description is not precise enough, the agent may modify the wrong position or spread local changes throughout the video. This interaction mode also has room for improvement.
V. How to Implement
If you want to try it yourself, the process is roughly as follows.
First, ensure you have a coding agent environment that supports skills locally, such as Claude Code or Codex. Then, run in the project directory:
npx skills add alchaincyf/huashu-motion
After installation, describe your product and the style of promotional video you want to create for the agent. The agent will first provide three design directions, and you choose one. After that, the agent starts generating the animation and music, with the final output being an MP4 file.
During the generation process, if you are not satisfied with a certain frame, press the C key, click on the specific location of the frame, and enter your modification suggestions. The agent will only modify that one spot. When exporting, you can choose between real-time recording and deterministic frame rendering as needed: use the former when you’re in a hurry, and the latter for stable results.
Points to note: Currently, it is best practice to run it on macOS; users of Windows and Linux may need to handle Chromium and Playwright dependencies separately; the agent does not consume external API quotas when generating music, but LLM calls are still billed according to each model’s specifications.
VI. How to Build a Similar Solution Yourself
If you don’t want to install huashu-motion directly, you can also build a similar agent-based video generation workflow based on its concept. The key steps are as follows:
- Prepare an animation template based on HTML/CSS/JavaScript, using SVG and Canvas for graphics and animations.
- Use Playwright or Puppeteer to render animations in the browser and record videos or take frame-by-frame screenshots.
- Implement deterministic frame rendering logic, taking screenshots at fixed timestamps and compressing them into 60fps MP4 to avoid frame drops.
- Design a natural language interface that the agent can understand, allowing it to recommend style directions based on product information.
- Support local modifications: record the coordinates and modification suggestions when the user clicks, and only render the corresponding layers or segments.
- Generate background music locally using ABC notation or Web Audio to avoid relying on external music APIs.
The most challenging steps in terms of engineering skills are step 3 and step 5. Frame-by-frame rendering requires precise timestamps and consistent states for each frame; local modifications require breaking the image into independently adjustable layers so that the agent can modify only one part without affecting the whole. If these two steps are not done well, the so-called “one-click generation” can easily turn into “one-click generation followed by repeated work.”
Conclusion
huashu-motion is an agent skill with a clear use case, encapsulating the production process of product promotional videos into a coding agent’s executable workflow, reducing costs and time to a fraction of traditional solutions. Its value lies in lowering the barrier to entry and producing videos quickly, rather than replacing professional video production. For early product teams and independent developers on macOS, it’s worth trying; for teams seeking high customization or cross-platform stability, it’s recommended to wait until the ecosystem is more mature before making a decision.
Reference Sources
- Fact package: huashu-motion (product promotional video agent skill), locally verified
- GitHub repository: alchaincyf/huashu-motion, https://github.com/alchaincyf/huashu-motion
【Column】