About this skill

Problem Solved

Turning spoken-word scripts into short videos usually stalls on audio, subtitle, and animation timing drift: estimated speech duration can differ from TTS output by over 30%, causing late subtitles to desync; web-based animation also requires CSS and GSAP sequencing that can fall out of sync with narration.

How It Works

Zhiying HyperFrames splits copy into 10–18 second spoken segments, generates narration and 0.1-second timestamps with tts.py --timed, and writes those timestamps into the SUBTITLES array. Frames render from HTML/CSS, scene changes and text motion are controlled with GSAP timelines, and the project exports MP4 via npx hyperframes render. The template includes hyperframes.json, index.html, narration.wav, and a douyin-copy.md publishing-copy skeleton.

Scope and Notes

It fits narration-driven short explainer videos, not live-action editing or footage without scripts. Rendering depends on Chrome system permissions and should be run in a system terminal; TTS credentials must come from environment variables and must not be hardcoded.

Screenshots

Use Cases

Split tech explainer copy into 90–180 second spoken segments, then generate TTS, subtitle timing, and an HTML animation project.
Produce a deep-space particle-style short video for low-code or AI chips, syncing scene changes, text motion, and narration boundaries.
Before delivery, verify lint structure, audio duration, the duration field, and subtitle alignment, then render MP4 in a system terminal.
Write Douyin or video-channel copy with title, body, tags, cover note, posting time, and pinned comment into douyin-copy.md.

Best For

Tech video editors who need to turn spoken scripts into subtitled, animated video projects quickly.
Independent creators making product explainers who need TTS, GSAP animation, and Douyin copy aligned.
Frontend or full-stack engineers who want to build procedural video with HTML, CSS, GSAP, and lint fixes.
Content operations owners producing short videos on AI or low-code with scripts, visuals, and comment prompts.