create-motion-graphics

Solid

Use whenever the agent needs to add, create, hand-author, patch, or place Motion Graphic JSX assets in a OpenChatCut project. This is the direct-authoring path: use create_motion_graphic_from_code / edit_asset / edit_item, not motion-graphic-gen or submit_motion_graphic. Covers project/timeline intake, project visual language, editable properties, asset binding, inline JSX authoring, existing asset updates, timeline placement, and verification.

AI & Automation 573 stars 61 forks Updated today AGPL-3.0

Install

View on GitHub

Quality Score: 88/100

Stars 20%
92
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
50
License 10%
100
Description 5%
100

Skill Content

# Create Motion Graphics Use this skill when a OpenChatCut task requires a Motion Graphic asset that the agent will author or patch as inline JSX. This skill is for direct authoring. Do not translate the request into a Gemini prompt or generation brief, and do not call `submit_motion_graphic`, when this workflow is active. Even though `submit_motion_graphic` exists in the tool list, treat it as the generation route, not this one. Ignore that path for MG work; use `create_motion_graphic_from_code` for new JSX assets and `edit_asset` for existing MG JSX. If the direct-authoring tools are missing, stop and report that the OpenChatCut tool surface is out of date. Pass source inline through the asset code tools. Do not stage Motion Graphic code in the OpenChatCut repository, `ai-working/`, `/tmp`, a local HTTP server, generated code files, or guessed backend workspace paths. ## Core Principles - Inspect project state when canvas size, fps, existing visual language, placement, or timeline conflicts are not already known. - Identify the required inputs in **Before You Code** before authoring JSX. - Create or update Motion Graphic assets through the available inline-code asset workflow; use current tool schemas for exact payload shapes. - Place or move assets through the timeline editing workflow when the edit requires timeline placement. - Re-read project state and verify the visible frame after structural or visual changes. ## Before You Code Before writing JSX, identify on...

Details

Author
0xsline
Repository
0xsline/OpenChatCut
Created
1 weeks ago
Last Updated
today
Language
TypeScript
License
AGPL-3.0

Integrates with

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

motion-graphics

A short, design-led motion graphic where motion is the message — kinetic typography, stat count-up, chart/data-viz hit, logo sting / brand lockup, lower-third / callout / social overlay, animated map (highlight regions, connect places, zoom to a location), animated tweet / news-article / headline, webpage / UI animation (scroll, cursor, callouts), or fusing a real image's geometry into a chart. Usually under 10s (up to ~30s), no narration or live-action subject; renders to MP4 or transparent overlay. Longer / narrated / multi-scene → /general-video. Unclear → /hyperframes.

1 Updated today
jpratt9
AI & Automation Featured

higgsfield-motion-design

End-to-end motion-design / animated-ad creation flow on Higgsfield via the MCP connector. Use when the user wants to create motion design, animate a logo, make a video from an image, build an animated ad or brand promo, turn a product into motion, or says 'make a motion', 'motion design', 'animate this', 'make a video from my logo', 'animated brand', 'motion graphics', 'brand motion', 'kinetic graphics', 'promo video', or 'ad video'. Drives a storyboard-first pipeline: brief → storyboard sheet (GPT Image 2) → video (Seedance 2.0) — an AI-generated pixel video clip. Distinct from higgsfield-motion (the named camera/motion preset library) and from higgsfield-vibe-motion (deterministic Remotion code with crisp text); use vibe-motion instead when the text/logo must stay perfectly crisp, editable, and deployable as code.

224 Updated yesterday
OSideMedia
Web & Frontend Solid

motion-craft

Implement professional web animations in a target repo against an approved design blueprint or an explicit motion direction. Use when asked to "add animations", "improve the motion", "make it feel alive", "implement the motion plan", or when dispatched by the upgrade-site skill. Plans by default; modifies code only on explicit implement authority. For broad visual/reference research, see design-dna instead.

3 Updated 5 days ago
augchan42