How flavioduque/jsmotion-skill works
JSmotion is an agent-guided brand-video creation skill: a user supplies a logo and website, the agent researches and plans the video, then scripts support asset preparation, animation packaging, preview/review, and MP4 delivery. The README also describes reference-video styling, multiple aspect ratios, generated synchronized audio, and HTML download fallbacks. Source excerpts directly verify the renderer’s Chromium frame/audio capture and FFmpeg encoding/mastering; other script connections reflect the documented workflow, not inspected implementations.
Main entry points: render.py Frame and audio render · build_html.py Render page · scrape_site.py Site research · prep_assets.py Asset preparation
Components 18
Creative workflow
- Site research
scripts/scrape_site.py - Video planning
- Reference styling
scripts/snap.py - Animation code
templates/example_anim.js
Video production
- Asset preparation
scripts/prep_assets.py - Asset packaging
scripts/pack.py - Render page
scripts/build_html.py - Chromium
- Frame and audio render
scripts/render.py - FFmpeg
Review and delivery
- Mastered MP4
- Review snapshots
scripts/snap.py - HTML fallback
scripts/build_html.py - Next-video suggestions
Other components
- User
- AI agent
- Brand website
- Brand logo
Connections 27
- User → AI agent: requests video
- User → AI agent: provides logo
- AI agent → Site research: studies site
- Brand website → Site research: site content
- AI agent → Reference styling: examines reference
- AI agent → Video planning: asks and plans
- Site research → Video planning: informs plan
- Reference styling → Video planning: guides style
- Video planning → Animation code: writes animation
- AI agent → Asset preparation: prepares assets
- Brand logo → Asset preparation: brand input
- Asset preparation → Asset packaging: prepared assets
- AI agent → Asset packaging: packages project
- AI agent → Render page: builds page
- Animation code → Render page: animation code
- Asset packaging → Render page: assets
- AI agent → Frame and audio render: runs render
- Render page → Frame and audio render: page input
- Frame and audio render → Chromium: captures frames and audio
- Frame and audio render → FFmpeg: encodes and masters
- FFmpeg → Mastered MP4: writes MP4
- AI agent → Review snapshots: reviews output
- Mastered MP4 → Review snapshots: preview source
- AI agent → HTML fallback: provides fallback
- Mastered MP4 → HTML fallback: download target
- AI agent → Next-video suggestions: offers suggestions
- AI agent → User: delivers files