visual-story-workflow

Generates interactive GSAP HTML video previews from scripts before optional rendering to MP4.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/Migeking/video-production-skills --skill visual-story-workflow-migeking
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: visual-story-workflow
Source: https://github.com/Migeking/video-production-skills/tree/main/visual-story-workflow
Command: npx skills add https://github.com/Migeking/video-production-skills --skill visual-story-workflow-migeking

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires gsap, hyperframes, ChatTTS, edge-tts, soundfile, torch.

What problem does it solve? Creating vertical short videos for platforms like Xiaohongshu and Douyin usually requires committing to a template and rendering pipeline before seeing any result. This Skill turns scripts or copy into interactive HTML previews first, so you can confirm the visual design before investing in voiceover and video rendering. ## Core Features & Use Cases - Preview-First Workflow: Generates a 1080x1920 vertical HTML animation with GSAP word-by-word motion, opened in HyperFrames for interactive playback and timeline inspection. - Dynamic Style Design: Offers six visual styles (industrial neon, ink wash, fresh literary, business minimal, cyberpunk, natural eco) chosen based on content type rather than fixed templates. - Optional Voiceover and BGM: Supports ChatTTS (fixed seed for consistent speaker), Edge TTS, user-supplied audio, and background music selection from local files. - Use Case: A creator pastes a knowledge-sharing script, picks the industrial neon style, previews the animated slides in HyperFrames, requests tweaks to one slide, then adds ChatTTS voiceover and renders the final MP4 with hyperframes render. ## Quick Start Ask the assistant to make a video from your script or article, then follow the prompts to pick a visual style, preview the generated HTML, and optionally add voiceover and render the video.

Frequently Asked Questions about visual-story-workflow

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

FAQPage Schema
How do I preview an HTML video animation before rendering?

Run npx hyperframes preview in the project directory to open an interactive browser preview with playback controls, timeline navigation, and audio sync verification. Avoid opening index.html directly since it lacks playback controls and may fail to load audio.

How to generate Chinese voiceover with ChatTTS for videos?

Load ChatTTS with source='huggingface' and fix torch.manual_seed(42) so all segments share a consistent speaker voice. Export each segment with soundfile as a WAV file into the assets directory and reference it in the HTML audio elements.

What video format does this workflow produce for Xiaohongshu?

The workflow targets vertical 1080x1920 HTML slides rendered to MP4 via npx hyperframes render. The first slide uses a clip class so the opening frame doubles as the video cover.

Why does hyperframes render fail with Chinese file paths?

Rendering can fail when the project path contains non-ASCII characters. Copy the project to a pure ASCII path such as C:\temp\project, run the render there, then copy the output MP4 back to the original location.

Can I use my own voiceover or BGM files instead of TTS?

Yes, place your audio files in the assets directory and reference them in the HTML audio elements with data-start and data-duration attributes. The workflow also supports skipping voiceover entirely and using BGM only.