Turn a product, website or idea into a complete motion film.
Choose a look. Adapt the prompt. Generate with Higgsfield.
Codex + Claude Code / 10 motion styles / One shared skill
Get started · Explore the looks · Setup guide · How it works
From glass interfaces to product reveals, start with a visual direction you can actually watch. Click any image to play its source film.
 Glass UI launch Software & product launches |
 Tropical product Products & ingredients |
 Kinetic typography Announcements & animated type |
 Blueprint to building Architecture & property |
 Exploded product Hardware & component reveals |
 Flat vector explainer Apps & simple explanations |
Explore four more styles — hyper-motion, hybrid 2D + 3D, collage and footage
 Product hyper-motion Food & product assembly |
 Hybrid 2D + 3D Playful brand stories |
 Editorial collage Ideas & educational shorts |
 Footage + graphics Presenters & existing footage |
These are Higgsfield source examples that the skill adapts, not new results generated by this package. Source attribution.
Open the playable gallery locally to browse all ten styles, inspect their original prompts and copy a request for your app. You can also develop an original concept.
Inside the gallery
Choose a look, select Codex or Claude Code, add your brief and copy the request into chat. The page does not send your brief or start a generation. GitHub shows the gallery HTML as source; the setup guide explains how to open it locally.
Install the same skill in either app, then connect your own Higgsfield account for media generation. Browsing and prompt drafting work before you connect.
Paste into Codex:
$skill-installer
Install the skill from:
https://github.com/cth9191/motion-design/tree/main/skills/motion-design
Paste into Claude Code:
Install the skill from https://github.com/cth9191/motion-design.
Copy skills/motion-design into ~/.claude/skills/motion-design.
If it already exists, compare it, back up local customizations, and update it.
Connect Higgsfield using the setup guide. It includes Claude Code's MCP command, authentication and a read-only access check. Generation requires model access and credits or an applicable allowance.
Start with $motion-design in Codex or /motion-design in Claude Code, then add:
Use the kinetic typography preset for a 15-second announcement:
"Build your first AI workflow."
Use music and synchronized effects, without narration.
Show me the complete adapted prompt before generating anything.
Review the draft, then ask it to generate. A prompt-review request stops before images, uploads and video jobs; production can incur Higgsfield charges.
More things to try — a website promo, an explainer or a product film
Browse first
Show me the available motion-graphics styles with playable examples.
Turn a website into a launch concept
Use the website I provide to propose a 15-second promo.
Choose a suitable preset and focus on one main product benefit.
Show me the complete adapted prompt before generating anything.
Explain one idea
Use the flat vector explainer preset for a beginner-friendly,
15-second explanation of how an LLM generates an answer.
Use music and synchronized effects without narration.
Show me the full adapted prompt before generating anything.
Create a product film
Use the tropical product preset to make a 15-second film for the
product photo I attach. Keep its packaging recognizable.
Use instrumental music and sound effects, with no narration.
Generate the complete film and inspect the result.
You can also ask for reference images alone. Requesting images does not commission a video.
Choose → Adapt → Generate → Review
The skill starts from the closest example's complete original prompt and the takeaway your viewer should leave with. It retains the source's effective visual and motion techniques while adapting scenes, sequence, timing and transitions to your subject. The resolved timed sequence is submitted as one complete film through Higgsfield MCP.
Bring your own video: a supplied clip defaults to a new generation guided by its sequence, framing, timing and camera moves, with your message fitted into those beats. It uses video-reference conditioning and compares the result against the actual source. Editing existing footage is a separate request. Ask for loose inspiration when you want more freedom. See video references.
References are optional. A product photo can help preserve identity; a style frame can clarify appearance. Typography or abstract motion may need no images. After generation, the assistant checks the actual motion, product relevance, exact copy, audio and ending, then identifies any corrections needed.
| Codex | Claude Code | |
|---|---|---|
| Reference images | Built-in image generation when available; Higgsfield fallback | Higgsfield MCP, preferring GPT Image 2 |
| Complete film | Higgsfield MCP, suitable current Seedance preferred | Same |
| Prompt-only work | No generation connection required | Same |
New campaigns generally target 15 seconds · 16:9 · music + effects, without narration, and a 30fps delivery. Native fps and supported durations depend on the model. Portrait product and supplied-footage presets have their own starting settings; your choices take precedence. See tool routing for live model checks and asset handoff.
The package includes ten source examples, archived prompts with verified hashes, separate adaptation guides, a playable gallery and production review guidance. Both apps use the same skill folder.
Project status & validation
The shared workflow is implemented; source catalog and templates remain version 4. Package checks and connection discovery do not establish creative reliability across all ten styles. The validation plan separates implemented work from film trials and reference comparisons still needed.
Exact typography, charts, timing and product identity require output inspection. Supported finishing can repair some problems; automatic pixel-exact compositing and deterministic reproduction of Marketing Studio are not promised. GPT Image 2 was observed as gpt_image_2 in the connected catalog on September 5, 2026; the skill checks current availability and capabilities before use.
Maintain or update the skill
Edit skills/motion-design/, then rebuild:
python skills/motion-design/scripts/build_gallery.pyPython 3.10+ is needed only for the builder or serving the gallery. The builder checks preset IDs, linked recipes/templates, timeline coverage and archived source hashes, then refreshes the gallery and index. Commit generated changes with source edits; GitHub Actions repeats the check.
Keep original source prompts immutable. Update adaptation guides and workflow instructions for behavior changes. The catalog/template version tracks the source library; README and host-routing edits do not rewrite its provenance. Installed copies are separate from the repo: update the complete skill folder, including references and gallery, and preserve local customizations.