skills.rest
Agentchengfeng
AgentchengfengCOMMUNITY
Explore all skills by this author →
𝕏@chengfeng240928GitHub

ian-xiaohei-svg-motion

Create Ian Xiaohei-style HTML/SVG comic motion illustrations with GSAP timelines.

3.0k|383|Updated Jan 14, 2026
Search Tags:#HTML#GSAP#SVG animation#Motion design#Storyboard#chinese narration#comic illustration
One-click install
npx skills add https://github.com/Agentchengfeng/chengfeng-videocut-skills --skill ian-xiaohei-svg-motion
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ian-xiaohei-svg-motion
Source: https://github.com/Agentchengfeng/chengfeng-videocut-skills/tree/main/plugins/chengfeng-videocut/skills/chengfeng-visual/animation-styles/ian-xiaohei-svg-motion
Command: npx skills add https://github.com/Agentchengfeng/chengfeng-videocut-skills --skill ian-xiaohei-svg-motion

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) and assets (resource) components.

What problem does it solve?

Turning Chinese articles, scripts, or storyboard scenes into hand-drawn comic-style motion illustrations usually means raster image generation that cannot be edited, timed to narration, or reused. This Skill rebuilds one cognitive idea from your content as a semantic, layered HTML/SVG scene animated with GSAP, so every element stays controllable and cue-aligned.

Core Features & Use Cases

  • Semantic SVG scene building: Rebuilds compositions as named SVG groups (Xiaohei, inputs, outputs, annotations) instead of auto-vectorized path soup, following strict style, layering, and motion rules.
  • GSAP timeline animation with cue mapping: Animates objects with x/y/rotation/scale and stroke drawing, maps timeline labels to spoken narration, and supports ?static=1 and ?frame=mid review modes.
  • Reusable assets and templates: Ships an icon library (ChatGPT, Claude, DeepSeek, Qwen, and common task icons) plus two starter templates for comic motion scenes and multi-variant series.
  • Use Case: Given a Chinese 口播 script about a workflow bottleneck, produce a 16:9 white-canvas animation where Xiaohei physically performs the metaphor (carrying, bridging, filtering), with staged red/blue/orange annotations aligned to subtitle timing.

Quick Start

Ask the agent to use ian-xiaohei-svg-motion to turn your Chinese article or script into a Xiaohei-style HTML/SVG motion illustration with a playable page and static preview.

Frequently Asked Questions about ian-xiaohei-svg-motion

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I create a Xiaohei-style SVG motion illustration from a Chinese article?▼

Extract one cognitive anchor from the article, pick a physical metaphor like sorting or bridging, then rebuild the scene as semantic SVG groups and animate it with a GSAP timeline. The Skill outputs a playable index.html plus a static preview screenshot.

What tool animates SVG scenes for narration-timed videos?▼

GSAP timelines animate SVG groups using x, y, rotation, scale, opacity, and stroke-dashoffset drawing. Timeline labels act as story beats, and a cue-map.md file aligns animation segments to subtitle or spoken-script timing.

Can I convert a generated PNG directly into an animated SVG?▼

No, auto-vectorizing a PNG produces meaningless path soup that cannot be animated reliably. Raster images should only serve as composition references while the scene is rebuilt as semantic SVG groups.

Why do SVG wheels or beams orbit away instead of spinning in place?▼

This happens when CSS transform-box or transform-origin conflicts with GSAP transforms, creating a double pivot. Drive fixed-pivot rotation through an SVG attribute transform via a proxy object and strip motion-layer classes from spinners.

What output files does the SVG motion workflow produce?▼

The default output folder contains index.html, README.md, preview.png, and vendor/gsap.min.js. Optional files include a source reference image and a cue-map.md when aligning animation to spoken narration.

Related Skills

Explore More Design & Creative Skills→
densondenson

conceptviz-prompt-generator

Generate six-part ConceptViz prompts for visualizing complex documents.

Community
Advanced
CDO-07-NewCDO-07-New

video-editing

Structure raw video footage into editing workflows with FFmpeg and Remotion.

Official
Advanced
phuhao00phuhao00
12

long-video-agent

Automate multi-scene planning, parallel segment generation, and timeline assembly for narrative videos.

Community
Advanced
garochee33garochee33
3

imagegen

Generate and edit raster image assets for design and creative workflows.

Community
Advanced