{"slug":"jianshuo-wjs-converting-text-to-video-b319e1","title":"\u6587\u7ae0\u8f6c\u7ad6\u5c4f\u89e3\u8bf4\u89c6\u9891","description":"\u628a\u4e00\u7bc7\u4e2d\u6587\u6587\u7ae0\u62c6\u62105-10\u4e2a\u89c6\u89c9\u65f6\u523b\uff0c\u7528\u706b\u5c71\u5f15\u64ceTTS\u751f\u6210\u65c1\u767d\u3001HyperFrames\u505aCSS/GSAP\u52a8\u753b\u3001\u62bd\u8c61\u6c34\u5f69\u80cc\u666f\u4e0e\u8f6c\u573a\u97f3\u6548\uff0c\u6e32\u67d31080\u00d71920\u7ad6\u5c4fMP4\u3002\u542bscene\u6a21\u677f\u914d\u6bd4\u786c\u89c4\u5219\u3001\u914d\u8272\u5b57\u4f53\u89c4\u8303\u3001\u6e32\u67d3\u524dlint\u4e0e\u6ea2\u51fa\u68c0\u67e5\u3001\u5e38\u89c1\u8e29\u5751\u3002\u4e0d\u542b\u6587\u7ae0\u5199\u4f5c\u4e0e\u6a2a\u5c4f\u89c6\u9891\u3002","category":"\u526a\u8f91\u4e0e\u5305\u88c5","tags":["jianshuo","\u5efa\u7855","\u526a\u8f91\u4e0e\u5305\u88c5"],"author":"\u5efa\u7855 \u00b7 jianshuo","source_url":"https://github.com/jianshuo/claude-skills/blob/d36bc423286a34eb32adc604121e5c7714b08740/wjs-converting-text-to-video/SKILL.md","license":"MIT","status":"published","verification":"source_reviewed","verification_notes":"\u5df2\u6838\u5bf9\u539f\u59cb\u4ed3\u5e93\u3001\u56fa\u5b9a\u63d0\u4ea4\u3001\u8bb8\u53ef\u3001\u6280\u80fd\u6b63\u6587\u4e0e\u5305\u7ed3\u6784\uff0c\u5e76\u8865\u5145\u4e2d\u6587\u6267\u884c\u9a8c\u6536\u8bf4\u660e\uff1b\u672a\u8fd0\u884c\u5305\u5185\u811a\u672c\u3002","revision":"60577054ee134ddd8bc2b5ff21064c3f","created_at":"2026-11-02T14:47:08+00:00","updated_at":"2026-11-02T14:47:08+00:00","source_repo":"jianshuo/claude-skills","source_path":"wjs-converting-text-to-video/SKILL.md","source_commit":"d36bc423286a34eb32adc604121e5c7714b08740","source_updated_at":"2026-11-02T14:46:04+00:00","stars":0,"proxy_score":null,"score":null,"grade":null,"dimensions":{},"evaluation":{},"installs":0,"platforms":[],"formats":[],"category_slug":"packaging","category_name":"\u526a\u8f91\u4e0e\u5305\u88c5","quality":{"review_type":"text_and_package_review","readiness":"requires_setup","reviewed_at":"2026-11-02T14:46:04+00:00","review_summary":"\u89c6\u9891\u5236\u4f5c\u65b9\u6cd5\u4e0e\u914d\u6bd4\u89c4\u5219\u5177\u4f53\u3001\u53ef\u64cd\u4f5c\uff0c\u4f46\u4f9d\u8d56\u591a\u4e2a\u672a\u968f\u5305\u63d0\u4f9b\u7684\u5916\u90e8\u6280\u80fd\u4e0e\u672c\u673a\u8def\u5f84\uff0c\u9700\u7528\u6237\u81ea\u5907TTS\u3001\u56fe\u50cf\u751f\u6210\u4e0e\u5b57\u4f53\u73af\u5883\u540e\u624d\u80fd\u6267\u884c\uff1b\u53d1\u5e03\u73af\u8282\u5e94\u9ed8\u8ba4\u5173\u95ed\u3002","cost_notes":"\u706b\u5c71\u5f15\u64ceTTS\u6309\u8c03\u7528\u8ba1\u8d39\u3001\u56fe\u50cf\u751f\u6210\u6309\u5f20\u8ba1\u8d39\u3001YouTube\u4e0a\u4f20\u53d7\u6bcf\u65e5\u914d\u989d\u9650\u5236\uff0c\u5747\u9700\u7528\u6237\u81ea\u884c\u786e\u8ba4\u8d26\u6237\u4e0e\u989d\u5ea6\uff1b\u6280\u80fd\u672a\u63d0\u4f9b\u4ef7\u683c\u3002","source_sha256":"0230916514982f045fb7a51219cc19c4061f85a039283211f27bf40178bd5e5c","prerequisites":["Node.js\u4e0enpx\uff08\u8fd0\u884chyperframes lint/inspect/snapshot/render\uff09","ffmpeg\uff08\u97f3\u6548\u5408\u6210\u3001\u97f3\u9891\u62fc\u63a5\u3001\u753b\u5e45\u68c0\u6d4b\uff09","\u706b\u5c71\u5f15\u64ceTTS\u8d26\u53f7\u4e0eVOLC_TTS_APPID/VOLC_TTS_ACCESS_TOKEN\uff0c\u7531\u7528\u6237\u81ea\u884c\u914d\u7f6e","\u56fe\u50cf\u751f\u6210\u5de5\u5177\uff08\u6280\u80fd\u5f15\u7528\u5916\u90e8gpt-image-2-skill\u8def\u5f84\uff0c\u9700\u7528\u6237\u81ea\u5907\u5e76\u786e\u8ba4\u53ef\u7528\uff09","Noto Sans SC\u5b57\u4f53\u5df2\u5b89\u88c5","YouTube\u4e0a\u4f20\u4e3a\u53ef\u9009\uff0c\u9700\u7528\u6237\u81ea\u884c\u5b8c\u6210OAuth\u6388\u6743"],"checks":["narration_chunks.json \u7684scene\u6570\u4e0e\u603b\u65f6\u957f\u843d\u572830-90\u79d2\uff0c\u4e14scene\u65f6\u957f\u8de8\u5ea6\u22656\u79d2\uff08\u6700\u77ed\u22644\u79d2\u3001\u6700\u957f\u22659\u79d2\uff09","\u5bf9\u7167Step 1b\u914d\u6bd4\u6e05\u5355\u9010\u6761\u6838\u5bf9\uff1a\u22642\u4e2aB1\u53cc\u884c\u5bf9\u7167\u3001\u22651\u4e2aA3\u4eae\u8272\u53cd\u8f6c\u3001\u22654\u79cd\u6a21\u677f\u7c7b\u578b\u3001\u22652\u4e2a\u975e\u5c45\u4e2d\u5e03\u5c40","index.html\u4e2d\u6bcf\u4e2a<audio>\u5747\u6709id\uff0cbg.png\u4f4d\u4e8evideo/\u76ee\u5f55\u5185\u4e14\u4ee5\u76f8\u5bf9\u8def\u5f84\u5f15\u7528","npx hyperframes lint \u4e0e inspect \u5747\u8fd4\u56de0 errors\u540e\u624d\u6267\u884crender","\u62bd\u67e5\u6210\u7247\u9996\u5e27\uff1a\u80cc\u666f\u6c34\u5f69\u53ef\u89c1\u3001s1\u6807\u9898\u53ef\u89c1\u3001s1\u975e\u4eae\u8272\u53cd\u8f6cscene"],"limitations":["\u6e05\u5355\u4e2d\u7684\u811a\u672c\uff08tts.py\u3001generate-bg.sh\u3001synth-sfx.sh\u3001publish-to-youtube.py\u7b49\uff09\u672a\u8fd0\u884c\uff0c\u4ec5\u4f5c\u6587\u672c\u5ba1\u9605\uff0c\u5b9e\u9645\u53ef\u7528\u6027\u5f85\u9a8c\u8bc1","\u4f9d\u8d56\u5916\u90e8\u6280\u80fd\u76ee\u5f55~/.claude/skills/gpt-image-2-skill\u4e0ewjs-uploading-video\uff0c\u672a\u968f\u5305\u63d0\u4f9b\uff0c\u8def\u5f84\u4e0e\u63a5\u53e3\u9700\u7528\u6237\u6838\u5b9e","TTS\u97f3\u8272\u53ef\u7528\u6027\u3001\u82f1\u6587\u4e13\u540d\u6717\u8bfb\u7a33\u5b9a\u6027\u4f9d\u8d56\u706b\u5c71\u5f15\u64ce\u670d\u52a1\u7aef\u884c\u4e3a\uff0c\u6280\u80fd\u4e2d\u7684\u7ecf\u9a8c\u63cf\u8ff0\u672a\u7ecf\u590d\u6d4b","YouTube\u81ea\u52a8\u4e0a\u4f20\u6d89\u53ca\u5220\u9664\u65e7\u89c6\u9891\u4e0e\u914d\u989d\uff0c\u9700\u7528\u6237\u660e\u786e\u6388\u6743\u540e\u624d\u53ef\u6267\u884c"],"issues":["SKILL.md\u591a\u5904\u786c\u7f16\u7801\u4f5c\u8005\u672c\u673a\u8def\u5f84\uff08~/.claude/skills/...\u3001~/code/.env\u3001~/.config/youtube/token.json\uff09\uff0c\u6362\u73af\u5883\u9700\u6539\u5199","Step 9\u7684cron\u6ce8\u518c\u4e0e\u81ea\u52a8\u4e0a\u4f20\u5c5e\u4e8e\u7528\u6237\u79c1\u6709\u53d1\u5e03\u6d41\u7a0b\uff0c\u4e0e\u89c6\u9891\u5236\u4f5c\u4e3b\u6d41\u7a0b\u8026\u5408\uff0c\u6613\u88ab\u8bef\u6267\u884c","Step 3\u5f15\u7528tts_narration.py\uff0c\u4f46\u5305\u5185\u811a\u672c\u540d\u4e3atts.py\uff0c\u547d\u540d\u4e0d\u4e00\u81f4\uff0c\u9700\u6838\u5b9ebootstrap\u662f\u5426\u590d\u5236\u5e76\u6539\u540d","Step 2\u8981\u6c42\u5265\u79bb\u300c\u767e\u59d3\u7f51\u300d\u76f8\u5173\u4e8b\u5b9e\uff0c\u5c5e\u4f5c\u8005\u4e2a\u4eba\u5185\u5bb9\u7ea6\u675f\uff0c\u5bf9\u901a\u7528\u7528\u6237\u65e0\u610f\u4e49\u4e14\u53ef\u80fd\u8bef\u5220\u539f\u6587\u4fe1\u606f"],"missing_files":[]},"quality_url":"https://shiliuai.cn/api/v2/skills/jianshuo-wjs-converting-text-to-video-b319e1/files/SHILIU-QUALITY.md","usage_guide":{"task":"\u5c06\u5df2\u6709article.md\u91cd\u6784\u4e3a30-90\u79d2\u7ad6\u5c4f\u4e2d\u6587\u89e3\u8bf4\u77ed\u89c6\u9891\uff0c\u5e76\u5b8c\u6210\u6e32\u67d3\u524d\u68c0\u67e5\u4e0e\u672c\u5730MP4\u8f93\u51fa\u3002","inputs":"\u5fc5\u9700\uff1aarticle.md\uff08\u542b\u53ef\u63d0\u70bc\u7684\u8bba\u70b9\u7ed3\u6784\uff09\uff1b\u706b\u5c71\u5f15\u64ceTTS\u7684APPID\u4e0eAccess Token\uff08\u7528\u6237\u81ea\u5907\uff0c\u52ff\u5199\u5165\u6280\u80fd\u5305\uff09\uff1b\u672c\u673affmpeg\uff1bHyperFrames CLI\uff08npx\u53ef\u83b7\u53d6\uff09\uff1b\u751f\u6210\u80cc\u666f\u56fe\u6240\u7528\u7684\u56fe\u50cf\u751f\u6210\u5de5\u5177\u53ca\u5176\u6388\u6743\u65b9\u5f0f\uff1b\u4e2d\u6587\u5b57\u4f53Noto Sans SC\u3002\u53ef\u9009\uff1aYouTube\u4e0a\u4f20\u51ed\u636e\uff08\u4ec5\u53d1\u5e03\u73af\u8282\u9700\u8981\uff0c\u987b\u7528\u6237\u81ea\u884c\u6388\u6743\uff09\u3002","outputs":"<article-folder>/<slug>.mp4\uff081080\u00d71920\u300130fps\u300130-90\u79d2\uff09\uff1bvideo/\u76ee\u5f55\u4e0bnarration_chunks.json\u3001narration.mp3\u3001timing.json\u3001bg.png\u3001sfx/\u3001index.html\u3001snapshots/\uff1blint\u4e0einspect\u5747\u4e3a0\u9519\u8bef\u7684\u8bb0\u5f55\u3002","example_input":"\u628a\u8fd9\u7bc7\u6587\u7ae0\u505a\u6210\u7ad6\u5c4f\u89e3\u8bf4\u89c6\u9891\uff1a<article-folder>/posts/2024-06-ai-repair/article.md\uff0c\u4e3b\u9898\u504f\u6280\u672f\uff0c\u7528tech\u8272\u677f\uff0c\u63a7\u5236\u572860\u79d2\u5185\u3002","example_output":"\u793a\u610f\uff08\u975e\u771f\u5b9e\u7ed3\u679c\uff09\uff1avideo/narration_chunks.json \u542b s01-s08 \u51718\u6bb5\u65c1\u767d\uff1bvideo/timing.json \u8bb0\u5f55\u6bcf\u6bb5\u8d77\u6b62\uff1bvideo/bg.png \u4e3a\u6c34\u5f69\u80cc\u666f\uff1bvideo/index.html \u4e3acomposition\uff1blint 0 errors\u3001inspect 0 errors\uff1b\u6700\u7ec8\u8f93\u51fa posts/2024-06-ai-repair/ai-repair.mp4\u3002"},"read_url":"https://shiliuai.cn/api/v2/skills/jianshuo-wjs-converting-text-to-video-b319e1","skill_url":"https://shiliuai.cn/api/v2/skills/jianshuo-wjs-converting-text-to-video-b319e1/files/SKILL.md","download_url":"https://shiliuai.cn/api/v2/skills/jianshuo-wjs-converting-text-to-video-b319e1/download","install_url":"https://shiliuai.cn/api/v2/skills/jianshuo-wjs-converting-text-to-video-b319e1/install","files":[{"path":"LICENSE","bytes":1082,"url":"https://shiliuai.cn/api/v2/skills/jianshuo-wjs-converting-text-to-video-b319e1/files/LICENSE"},{"path":"SHILIU-QUALITY.md","bytes":2666,"url":"https://shiliuai.cn/api/v2/skills/jianshuo-wjs-converting-text-to-video-b319e1/files/SHILIU-QUALITY.md"},{"path":"SKILL.md","bytes":30514,"url":"https://shiliuai.cn/api/v2/skills/jianshuo-wjs-converting-text-to-video-b319e1/files/SKILL.md"},{"path":"scripts/bootstrap-project.sh","bytes":2517,"url":"https://shiliuai.cn/api/v2/skills/jianshuo-wjs-converting-text-to-video-b319e1/files/scripts/bootstrap-project.sh"},{"path":"scripts/daily-upload-batch.sh","bytes":2591,"url":"https://shiliuai.cn/api/v2/skills/jianshuo-wjs-converting-text-to-video-b319e1/files/scripts/daily-upload-batch.sh"},{"path":"scripts/generate-bg.sh","bytes":2192,"url":"https://shiliuai.cn/api/v2/skills/jianshuo-wjs-converting-text-to-video-b319e1/files/scripts/generate-bg.sh"},{"path":"scripts/publish-to-youtube.py","bytes":8565,"url":"https://shiliuai.cn/api/v2/skills/jianshuo-wjs-converting-text-to-video-b319e1/files/scripts/publish-to-youtube.py"},{"path":"scripts/retrofit-bg-image.py","bytes":4023,"url":"https://shiliuai.cn/api/v2/skills/jianshuo-wjs-converting-text-to-video-b319e1/files/scripts/retrofit-bg-image.py"},{"path":"scripts/strip-dark-scene-bgs.py","bytes":3491,"url":"https://shiliuai.cn/api/v2/skills/jianshuo-wjs-converting-text-to-video-b319e1/files/scripts/strip-dark-scene-bgs.py"},{"path":"scripts/synth-sfx.sh","bytes":1451,"url":"https://shiliuai.cn/api/v2/skills/jianshuo-wjs-converting-text-to-video-b319e1/files/scripts/synth-sfx.sh"},{"path":"scripts/tts.py","bytes":5831,"url":"https://shiliuai.cn/api/v2/skills/jianshuo-wjs-converting-text-to-video-b319e1/files/scripts/tts.py"},{"path":"shiliu-quality.json","bytes":2633,"url":"https://shiliuai.cn/api/v2/skills/jianshuo-wjs-converting-text-to-video-b319e1/files/shiliu-quality.json"},{"path":"shiliu-source.json","bytes":280,"url":"https://shiliuai.cn/api/v2/skills/jianshuo-wjs-converting-text-to-video-b319e1/files/shiliu-source.json"},{"path":"usage.json","bytes":1196,"url":"https://shiliuai.cn/api/v2/skills/jianshuo-wjs-converting-text-to-video-b319e1/files/usage.json"}],"content":"---\nname: wjs-converting-text-to-video\ndescription: Use when the user wants a \u738b\u5efa\u7855-style WeChat article (article.md) turned into a narrated short MP4 video \u2014 TTS voiceover via \u706b\u5c71\u5f15\u64ce Volcano TTS, HyperFrames CSS/GSAP animation per scene, subtle SFX, abstract watercolor background, full pipeline rendering to 1080\u00d71920 portrait MP4 (30-90s). Triggers \u2014 \"\u628a\u8fd9\u7bc7\u6587\u7ae0\u505a\u6210\u89c6\u9891\", \"\u505a\u4e00\u4e2a\u89e3\u8bf4\u89c6\u9891\", \"\u8bb2\u89e3\u89c6\u9891\", \"/wjs-converting-text-to-video\".\n---\n\n# wjs-converting-text-to-video\n\n\u628a\u4e00\u7bc7\u738b\u5efa\u7855\u98ce\u683c\u7684\u5fae\u4fe1\u516c\u4f17\u53f7 `article.md` \u505a\u6210 **1080\u00d71920 \u7ad6\u5c4f\u300130-90 \u79d2** \u7684\u4e2d\u6587\u89e3\u8bf4\u77ed\u89c6\u9891\uff1aTTS \u65c1\u767d + HyperFrames CSS/GSAP \u52a8\u753b + \u62bd\u8c61\u6c34\u5f69\u80cc\u666f + \u8f6c\u573a SFX\u3002\u8f93\u51fa MP4 \u7ed9\u89c6\u9891\u53f7 / \u6296\u97f3 / \u5c0f\u7ea2\u4e66 / Reels\u3002\n\n## What this skill produces\n\n| \u7ef4\u5ea6 | \u9ed8\u8ba4 |\n|---|---|\n| \u5c3a\u5bf8 | 1080\u00d71920 \u7ad6\u5c4f (9:16) |\n| \u65f6\u957f | 30-90 \u79d2 |\n| Scene \u6570 | 5-10 |\n| \u65c1\u767d | \u706b\u5c71\u5f15\u64ce Volcano TTS\uff0c\u9ed8\u8ba4\u963f\u864e\u5bf9\u8bdd\u7537\u58f0 |\n| \u80cc\u666f | GPT Image 2 \u751f\u6210\u7684\u62bd\u8c61\u6c34\u5f69 (`bg.png`) + blur 30 + \u6696\u9ed1\u534a\u900f\u660e overlay |\n| \u5b57\u4f53 | Noto Sans SC\uff0chero 900\uff0c\u4e3b\u6587\u5b57\u6696\u5976\u767d |\n| \u8f93\u51fa | `<article-folder>/<slug>.mp4`\uff08\u4e0e `video/` \u5e73\u884c\uff0c\u4e0d\u653e `video/` \u91cc\uff09|\n| \u53d1\u5e03 | \u81ea\u52a8\u4e0a\u4f20\u5230 YouTube \u2014 Portrait \u2192 Shorts\uff0cLandscape \u2192 \u666e\u901a video\uff1b\u91cd\u65b0\u6e32\u67d3\u4f1a\u66ff\u6362\u8001\u89c6\u9891\uff08\u4e0d\u7d2f\u79ef\uff09|\n\n## When this skill fires\n\n- \u7528\u6237\u5df2\u6709 `article.md`\uff0c\u8bf4\u300c\u505a\u6210\u89c6\u9891\u300d\u300c\u505a\u4e00\u4e2a\u89e3\u8bf4\u300d\u300c\u8bb2\u4e00\u904d\u300d\n- \u7528\u6237\u8dd1 `/wjs-converting-text-to-video <article-folder>`\n- \u7528\u6237\u8bf4\u300c\u628a\u6628\u5929\u53d1\u7684\u90a3 X \u7bc7\u90fd\u505a\u6210\u89c6\u9891\u300d\u4e4b\u7c7b\u7684\u6279\u91cf\u8bf7\u6c42\n\n## When NOT to use\n\n- \u6ca1\u6709\u6587\u7ae0\u7a3f\uff0c\u53ea\u662f\u4e00\u4e2a\u60f3\u6cd5 \u2192 \u5148\u7528 `/wjs-publishing-wechat` \u5199\u51fa article.md\uff0c\u518d\u6765\n- \u7528\u6237\u8981\u7684\u662f\u5b57\u5e55\u70e7\u5f55 / \u7ffb\u8bd1 / \u914d\u97f3\u66ff\u6362 \u2192 \u7528 `/wjs-burning-subtitles` / `/wjs-dubbing-video` / `/wjs-localizing-video`\n- \u89c6\u9891\u8981\u82f1\u6587 / \u897f\u8bed\u7b49\u975e\u4e2d\u6587 \u2192 \u672c skill \u4e13\u6ce8\u4e2d\u6587 TTS (Volcano \u706b\u5c71\u5f15\u64ce)\uff1b\u975e\u4e2d\u6587\u8d70 hyperframes \u81ea\u5e26 tts \u547d\u4ee4 (kokoro \u82f1\u6587\u8fd8\u53ef\u4ee5)\n- \u6a2a\u5c4f 16:9 \u2192 \u672c skill \u9ed8\u8ba4\u7ad6\u5c4f\uff1b\u6a2a\u5c4f\u4ec5\u5728\u7528\u6237\u660e\u786e\u8981\u6c42\u65f6\u6539\n\n## Core Principle\n\n**\u89c6\u9891\u4e0d\u662f\u6587\u7ae0\u7684\u53ef\u89c6\u5316\u6717\u8bfb\uff0c\u800c\u662f\u6587\u7ae0\u7684\u89c6\u89c9\u91cd\u6784\u3002**\n\n\u6bcf\u4e2a scene \u662f\u4e00\u4e2a\u72ec\u7acb\u7684\u89c6\u89c9\u65f6\u523b \u2014\u2014 \u4e00\u4e2a\u5bf9\u6bd4\u3001\u4e00\u4e2a\u6392\u6bd4\u3001\u4e00\u4e2a\u6570\u5b57\u3001\u4e00\u4e2a\u6bd4\u55bb\u3002\u6587\u5b57\u6491\u6ee1\u5c4f\u5e55\uff0c\u9ed1\u4f53\u52a0\u7c97\uff0c\u91cd\u70b9\u5b57\u6a59\u8272\u9ad8\u4eae\u3002\u80cc\u666f\u662f\u62bd\u8c61\u6c34\u5f69 (blur \u540e\u67d4\u5316)\uff0c\u6574\u4f53\u8c03\u5b50\u7a33\u91cd\u3001\u514b\u5236\u3001\u6709\u51b2\u51fb\u529b\u3002\n\n**\u8282\u594f > \u6a21\u677f**\u3002\u4e00\u6bb5 5-10 scene \u7684\u89c6\u9891\uff0c\u5982\u679c\u4ece\u5934\u5230\u5c3e\u90fd\u662f\"\u4e24\u884c\u5bf9\u7167\"\u7684\u540c\u4e00\u79cd\u6392\u7248\uff0c\u5c31\u4e0d\u662f\u89c6\u9891\uff0c\u662f slideshow\u3002**\u73b0\u4ee3\u611f\u6765\u81ea\u5bf9\u6bd4** \u2014\u2014 \u6781\u7aef\u5b57\u53f7\u5dee\u3001\u4e0d\u5bf9\u79f0\u5e03\u5c40\u3001\u77ed scene \u4e0e\u957f scene \u4ea4\u66ff\u3001\u7eaf\u6587\u5b57 scene \u4e0e\u51e0\u4f55\u5143\u7d20 scene \u4ea4\u66ff\u3001\u6c34\u5f69\u5e95 scene \u4e0e\u4eae\u8272 punch scene \u4ea4\u66ff\u3002\n\n**\u9ed8\u8ba4\u662f\u5e73\u5eb8\u7684**\u3002\u5982\u679c\u53ea\u662f\u4ece\u6a21\u677f\u8868\u9876\u7aef\u6311\u51e0\u79cd\u6700\u5bb9\u6613\u7684\uff0c\u7ed3\u679c\u4e00\u5b9a\u662f\"\u5e73\u94fa\u76f4\u53d9\u7684\u4e24\u884c\u683c\u5f0f\"\u3002\u5f3a\u5236\u8d70 [Step 1b Scene Mix Rule](#step-1b-scene-mix-rule\u5f3a\u5236) \u914d\u6bd4\u3002\n\n## Workflow\n\n### Step 1: \u8bbe\u8ba1 5-10 \u4e2a\u89c6\u89c9\u65f6\u523b\n\n\u8bfb `<article-folder>/article.md`\uff0c\u6309\u8bba\u8bc1\u7ed3\u6784\u62c6\u6210 5-10 \u4e2a scene\uff08\u63a7\u5236\u5728 30-90 \u79d2\u603b\u65f6\u957f\uff09\u3002\u77ed\u6587\uff08\u6838\u5fc3 1-2 \u4e2a\u8981\u70b9\uff09\u505a 5-6 scene / 30-50s\uff1b\u957f\u6587 8-10 scene / 60-90s\u3002\u6bcf\u4e2a scene \u4e00\u6bb5\u53d9\u8ff0\uff08\u65c1\u767d\uff09+ \u4e00\u4e2a\u6e05\u6670\u7684\u89c6\u89c9\u9aa8\u67b6\u3002\n\n**\u6a21\u677f\u8868 \u2014\u2014 6 \u7c7b\u5171 16 \u79cd\uff0c\u6309\u9700\u6df7\u642d**\uff1a\n\n#### A. Hero / Punch\uff08\u5f3a\u5bf9\u6bd4 climax\uff0c\u6bcf\u7247 \u22651\uff0c\u65f6\u957f \u22644s\uff09\n| \u6a21\u677f | \u9002\u5408 |\n|---|---|\n| **A1. \u5168\u5c4f\u5355\u5b57 hero** | 1-3 \u5b57 climax \u8bcd\u6491\u6ee1\u5c4f\uff0c\u5b57\u53f7 280-400px |\n| **A2. Outline hero** | \u7a7a\u5fc3\u5b57 `-webkit-text-stroke: 4px #f5efe5; color: transparent;` |\n| **A3. Color-flip punch** | \u6574\u5c4f\u80cc\u666f\u6362\u4eae\u8272\uff08\u6a59/\u7ea2/\u91d1/\u7fe0\u7eff\u7b49\uff09\uff0c\u53cd\u767d\u5b57 |\n| **A4. Gradient text hero** | \u5927\u5b57\u52a0 `background: linear-gradient(...); -webkit-background-clip: text;` |\n\n#### B. Contrast / \u5bf9\u7167\uff08\u53cd\u5dee\u7ed3\u6784\uff0c\u6bcf\u7247 1-2 \u4e2a\uff0c\u65f6\u957f 5-8s\uff09\n| \u6a21\u677f | \u9002\u5408 |\n|---|---|\n| **B1. \u53cc\u884c\u5bf9\u7167 + strikethrough** | \u300c\u4ee5\u524d X\uff0c\u73b0\u5728 Y\u300d\u300c\u4e0d\u662f A\uff0c\u662f B\u300d \u2014 **\u6574\u7247\u6700\u591a 2 \u4e2a** |\n| **B2. \u5de6\u53f3\u5206\u5c4f\u5bf9\u7167** | \u5c4f\u5e55\u4e00\u5206\u4e3a\u4e8c\uff08\u53ef\u52a0\u7ad6\u7ebf\u5206\u9694\uff09 |\n| **B3. \u5bf9\u89d2\u7ebf\u5bf9\u7167** | \u5de6\u4e0a \u2194 \u53f3\u4e0b\uff0c\u4e2d\u95f4\u5927\u91cf\u7559\u767d |\n\n#### C. List / \u7ed3\u6784\uff08\u591a\u9879\u5e76\u5217\uff0c\u6bcf\u7247 1-2 \u4e2a\uff0c\u65f6\u957f 6-10s\uff09\n| \u6a21\u677f | \u9002\u5408 |\n|---|---|\n| **C1. N \u4e2a\u5361\u7247\u6a2a\u6392** | 3-5 \u4e2a\u5e76\u5217\uff0c\u7528\u6df1\u6696\u9ed1 + \u5355\u8272\u8fb9\u6846 |\n| **C2. \u5782\u76f4\u5806\u53e0\u5173\u952e\u8bcd** | 6-8 \u4e2a\u6392\u6bd4\u9879\uff0c\u53ef\u52a0\u5927\u6570\u5b57\u7f16\u53f7 01-08 |\n| **C3. \u771f\u7f51\u683c** | 2\u00d72 / 3\u00d72 \u7f51\u683c\uff0c\u6bcf\u683c\u56fe\u6807 + \u6807\u7b7e\uff08\u7ad6\u5c4f\u5bbd\u5ea6\u6709\u9650\uff0c4 \u5217\u6a2a\u6392\u4f1a\u6324\uff09 |\n| **C4. \u9636\u68af / \u9519\u4f4d\u5217\u8868** | \u6bcf\u9879 `margin-left` \u9012\u589e |\n\n#### D. Stat / \u6570\u636e\uff08\u6570\u5b57 climax\uff0c\u6bcf\u7247 \u22651\uff0c\u65f6\u957f 4-6s\uff09\n| \u6a21\u677f | \u9002\u5408 |\n|---|---|\n| **D1. \u6570\u5b57 ticker** | 0 \u2192 N \u6eda\u52a8\u52a8\u753b\uff08`gsap.to({textContent})`\uff09|\n| **D2. \u6570\u5b57 + \u6807\u7b7e** | \u4e3b\u6570\u5b57 200-400px + 60-80px \u89e3\u91ca |\n| **D3. \u8fdb\u5ea6\u6761 / \u65f6\u95f4\u8f74** | \u6a2a\u5411 progress bar + \u8282\u70b9 |\n\n#### E. Quote / Climax\uff08\u91d1\u53e5\u843d\u70b9\uff0c\u6bcf\u7247 1-2 \u4e2a\uff0c\u65f6\u957f 6-10s\uff09\n| \u6a21\u677f | \u9002\u5408 |\n|---|---|\n| **E1. \u6bb5\u843d\u7ea7 hero text** | \u4e00\u53e5 60-100px \u91d1\u53e5\uff0c\u5de6\u5bf9\u9f50 + \u5de6\u4fa7 emphasis bar |\n| **E2. \u5927\u5f15\u53f7 + \u5185\u6587** | \u5de8\u5927\u534a\u900f\u660e\u5f00\u5f15\u53f7\u4f5c\u80cc\u666f\u88c5\u9970 |\n\n#### F. \u88c5\u9970 / \u51e0\u4f55\uff08\u8282\u594f\u8c03\u5473\uff0c\u53ef\u9009\uff09\n| \u6a21\u677f | \u9002\u5408 |\n|---|---|\n| **F1. \u683c\u5b50 + spinner / \u8fdb\u5ea6\u6761** | \u591a\u5e76\u53d1\u753b\u9762 |\n| **F2. \u5bf9\u8bdd\u6c14\u6ce1 \u2194 \u56de\u5e94** | \u89d2\u8272 A \u8bf4 \u2192 \u89d2\u8272 B \u505a |\n\n**\u6bcf\u4e2a scene \u7684\u65c1\u767d\u63a7\u5236\u5728 3-12 \u79d2**\uff08\u77ed punch 3-4s\uff0c\u957f breath 10-12s\uff0c**\u4e0d\u8981\u5168\u90e8\u90fd\u662f 5-7s**\uff09\u3002\u6240\u6709 scene \u52a0\u8d77\u6765 **30-90 \u79d2**\uff0c\u4e0d\u8981\u8d85\u8fc7 90 \u79d2\u3002\u6587\u7ae0\u77ed\u5c31\u505a\u77ed\uff0c5 \u4e2a scene \u00d7 6s = 30s \u4e5f\u662f\u5408\u683c\u3002\n\n### Step 1b: Scene Mix Rule\uff08\u5f3a\u5236\uff09\n\n**\u5199\u5b8c 5-10 \u4e2a scene \u8bbe\u8ba1\u540e\uff0c\u6309\u4e0b\u9762 checklist \u81ea\u67e5\u3002\u4efb\u4f55\u4e00\u6761\u4e0d\u6ee1\u8db3 \u2192 \u56de\u53bb\u8c03\u6574\u3002**\n\n#### \u914d\u6bd4\u786c\u89c4\u5219\n- [ ] \u22651 \u4e2a A \u7c7b / D \u7c7b / C \u7c7b / E \u7c7b\n- [ ] \u22642 \u4e2a B1 \u6a21\u677f\uff08\u53cc\u884c strikethrough \u2014 \u5386\u53f2\u4e0a\u6700\u5bb9\u6613\u88ab\u6ee5\u7528\uff09\n- [ ] \u22651 \u4e2a A3 color-flip scene\uff08\u4eae\u8272\u80cc\u666f\u53cd\u767d\u5b57\uff09\n- [ ] \u22654 \u79cd\u4e0d\u540c\u7684\u6a21\u677f\u7c7b\u578b\uff08A/B/C/D/E/F \u81f3\u5c11 4 \u7c7b\uff09\n- [ ] \u22642 \u4e2a\u8fde\u7eed scene \u7528\u540c\u4e00\u7c7b\n\n#### \u8282\u594f\u786c\u89c4\u5219\n- [ ] scene \u65f6\u957f\u8de8\u5ea6 \u2265 6s\uff08\u6700\u77ed \u2264 4s\u3001\u6700\u957f \u2265 9s\uff09\n- [ ] \u22652 \u6b21\"\u77ed \u2192 \u957f \u2192 \u77ed\"\u6216\"\u957f \u2192 \u77ed\"\u8282\u594f\u5207\u6362\n- [ ] \u5b57\u53f7\u8de8\u5ea6 \u2265 240px\uff08\u6700\u5927 hero \u2265 320px\uff0c\u6700\u5c0f \u2264 80px\uff09\n\n#### \u5e03\u5c40\u786c\u89c4\u5219\n- [ ] \u22652 \u4e2a scene \u975e\u5c45\u4e2d\uff08\u8d34\u89d2\u3001\u5bf9\u89d2\u3001\u5de6\u5bf9\u9f50\u3001\u9636\u68af\u7b49\uff09\n- [ ] \u22651 \u4e2a scene \u7559\u767d\u5360 \u2265 60% \u5c4f\u5e55\uff08\u547c\u5438\uff09\n- [ ] \u22651 \u4e2a scene \u542b\u51e0\u4f55\u88c5\u9970\uff08\u7c97\u7ebf\u3001\u8272\u5757\u3001\u7bad\u5934\u3001\u5706\u70b9\u3001\u5927\u7f16\u53f7\uff09\n\n#### \u914d\u8272\u786c\u89c4\u5219\n- [ ] **\u5927\u90e8\u5206 scene \u6ca1\u6709 `background:` \u8272** \u2014 \u8ba9\u6c34\u5f69 bg-image \u900f\u51fa\uff1b\u53ea\u6709 A3 color-flip \u624d\u7528\u7eaf\u8272 bg\n- [ ] color-flip scene \u989c\u8272\u4e0d\u53ea\u662f\u6a59/\u84dd/\u767d\uff08\u6df1\u7ea2 / \u6df1\u91d1 / \u7fe0\u7eff / \u9752\u677e / \u6697\u7d2b \u7b49\u90fd\u53ef\uff09\n- [ ] emphasis \u81f3\u5c11 2-3 \u79cd\u989c\u8272\uff08\u6280\u672f\u8bcd\u7528\u84dd\u3001\u4ef7\u503c\u8bcd\u7528\u91d1\u3001\u589e\u957f\u8bcd\u7528\u7eff\u3001\u8b66\u544a\u8bcd\u7528\u7ea2\uff09\n\n#### \u53cd\u5355\u8c03\u81ea\u68c0\n1. \u628a\u6240\u6709 scene \u622a\u56fe\u7f29\u6210\u7f29\u7565\u56fe\u5e76\u6392 \u2014 **\u80fd\u4e00\u773c\u5206\u8fa8\u5417**\uff1f\u5982\u679c 8 \u4e2a\u770b\u8d77\u6765\u4e00\u6837 \u2192 \u91cd\u505a\n2. \u7b2c 1\u30014\u30017 scene \u7684\u89c6\u89c9\u5bc6\u5ea6\u662f\u4e0d\u662f\u4e0d\u4e00\u6837\uff1f\u5e94\u8be5\u6709\u7684\u5bc6\u3001\u6709\u7684\u6781\u7b80\n3. \u6709\"meta-rhythm\"\u5417\uff1f\u6bd4\u5982 A \u5f00\u573a \u2192 3 \u4e2a B/C \u5c55\u5f00 \u2192 D climax \u2192 E \u6536\u5c3e \u2014 \u6bd4\u7ebf\u6027\u94fa\u66f4\u6709\u620f\u5267\u5f27\n\n### Step 2: \u5199 `narration_chunks.json`\n\n```json\n[\n  {\"id\": \"s01\", \"text\": \"\u6211\u4eec\u4ee5\u524d\uff0c\u662f AI \u7684\u9886\u5bfc\u3002\u73b0\u5728\uff0c\u6211\u4eec\u5c31\u662f\u5b83\u7684\u7ef4\u4fee\u5de5\u3002\"},\n  {\"id\": \"s02\", \"text\": \"...\"}\n]\n```\n\n**\u5199\u65c1\u767d\u7ec6\u8282**\uff1a\n- \u6bd4 article.md \u66f4\u53e3\u8bed\u3001\u66f4\u77ed\u4fc3\uff0c\u9017\u53f7/\u53e5\u53f7\u591a\u7528\u8ba9 TTS \u81ea\u7136\u505c\u987f\n- \u6570\u5b57 / \u82f1\u6587\u6df7\u6392 OK\uff08\"Claude Code\"\u3001\"100 \u500d\"\uff09\uff0cVolcano \u90fd\u80fd\u8bfb\n- \u4e0d\u5199\u62ec\u53f7\u6ce8\u91ca\u3001\u4e0d\u5199 `...`\u3001\u4e0d\u5199\u7834\u6298\u53f7 `\u2014\u2014`\uff08TTS \u4f1a\u5ff5\u51fa \"\u7834\u6298\u53f7\" \u4e09\u5b57\uff09\n- \u5220\u6389 article.md \u91cc\u7684 `**\u52a0\u7c97 markdown**`\uff0c\u53ea\u7559\u7eaf\u6587\u5b57\n- **\u53bb\u6389\u767e\u59d3\u7f51\u76f8\u5173 facts**\uff1aarticle.md \u91cc\u5982\u51fa\u73b0\u300c\u767e\u59d3\u7f51\u300d\u300c\u767e\u59d3\u7f51\u73b0\u5728 X \u4eba\u300d\u300c\u767e\u59d3\u7f51\u5458\u5de5\u300d\u7b49\u90fd\u8981 strip \u6216\u6cdb\u5316\uff08\"\u767e\u59d3\u7f51\u73b0\u5728 158 \u4e2a\u4eba\" \u2192 \"\u73b0\u5b9e\u91cc\u6ca1\u51e0\u4e2a\u771f\u4eba\"\uff09\u3002\u8fd9\u662f\u8fc7\u65f6\u4fe1\u606f\uff0c\u4e0d\u8981\u8fdb\u89c6\u9891\u3002\u540c\u7406 visuals \u4e0d\u8981\u51fa\u73b0 \"\u767e\u59d3\u7f51\" label \u6216 \"158 \u4eba\" stat\u3002\u8be6\u89c1 [[no-baixing-facts]]\n\n### Step 3: \u751f\u6210 TTS narration\n\n```bash\ncd <article-folder>/video\npython3 tts_narration.py\n```\n\n\u811a\u672c\u9ed8\u8ba4\u7528 `zh_male_ahu_conversation_wvae_bigtts`\uff08\u963f\u864e\u5bf9\u8bdd\uff09\u2014 \u6bb5\u95f4\u63d2 0.35s \u9759\u97f3\uff0c\u8f93\u51fa `narration.mp3` + `timing.json`\u3002\n\n**Volcano TTS \u6ce8\u610f\u4e8b\u9879\uff08\u8e29\u8fc7\u7684\u5751\uff09**\uff1a\n- \u7528 resource `volc.service_type.10029`\uff0cspeaker \u9009 `zh_*_*_bigtts`\n- **\u7edd\u5bf9\u4e0d\u8981\u4f20 `emotion` / `emotion_scale`** \u2014 \u5927\u90e8\u5206 `_bigtts` \u58f0\u97f3\u4f1a\u8fd4\u56de `data: null` \u9759\u9ed8\u5931\u8d25\n- **\u7edd\u5bf9\u4e0d\u8981\u7528 kokoro**\uff08hyperframes \u81ea\u5e26 tts\uff09\u2014 \u4e2d\u6587\u8d28\u91cf\u5dee\uff0c\u7528\u6237\u660e\u786e\u4e0d\u63a5\u53d7\n- **\u907f\u514d** `zh_male_jieshuonansheng_mars_bigtts` \u2014 \u542b\u82f1\u6587\u4e13\u540d\uff08\u5982 \"Claude Code\"\uff09\u4f1a\u5faa\u73af hallucinate\n\n**\u5907\u7528\u58f0\u97f3**\uff08\u6309\u63a8\u8350\u987a\u5e8f\uff09\uff1a\n- `zh_male_ahu_conversation_wvae_bigtts` (\u963f\u864e\u5bf9\u8bdd) \u2014 \u9ed8\u8ba4\uff0c\u81ea\u7136\u53e3\u8bed\n- `zh_male_M392_conversation_wvae_bigtts` \u2014 \u540c wvae \u7cfb\u5217\n- `zh_male_wennuanahu_moon_bigtts` (\u6e29\u6696\u963f\u864e) \u2014 \u66f4\u6696\u3001\u64ad\u97f3\u611f\n- `zh_male_silang_mars_bigtts` (\u601d\u6717) \u2014 \u6c89\u7a33\u601d\u8003\uff0c\u620f\u5267\u611f\u5f3a\n- `zh_male_baqiqingshu_mars_bigtts` (\u9738\u6c14) \u2014 \u66f4\u6709\u529b\u5ea6\n\n\u5207\u58f0\u97f3\uff1a`python3 tts_narration.py --voice zh_male_silang_mars_bigtts`\n\n### Step 4: \u751f\u6210\u6c34\u5f69\u80cc\u666f\u56fe\n\nbg-image \u662f\u89c6\u89c9\u4e3b\u57fa\u8c03\uff08\u67d4\u5316\u7684\u62bd\u8c61\u6c34\u5f69\uff09\u3002**\u4e0d\u8981\u7528 article \u7684 `illustration.png`** \u2014 \u624b\u7ed8\u793a\u610f\u56fe\u7ec6\u8282\u592a\u591a\uff0cblur \u540e\u53d8\u6210\u5747\u5300\u6df1\u8272\u6ce5\uff08\u89c6\u89c9\u4e0a\u4ecd\u662f\u7eaf\u9ed1\uff09\u3002\u5fc5\u987b\u7528\u4e13\u95e8\u751f\u6210\u7684\u62bd\u8c61\u6c34\u5f69\u3002\n\n```bash\n~/.claude/skills/wjs-converting-text-to-video/scripts/generate-bg.sh <article-folder> <theme>\n```\n\n`<theme>` \u9009\uff08\u6839\u636e\u6587\u7ae0\u4e3b\u9898\uff09\uff1a\n\n| theme | \u8272\u677f | \u9002\u5408 |\n|---|---|---|\n| `personal` | bright warm yellow, soft coral pink, terracotta, sage green, cream | \u4e2a\u4eba\u3001\u624b\u4f5c\u3001\u6e29\u6696 |\n| `tech` | cool teal, electric blue, deep purple, mint, white | AI\u3001\u6280\u672f\u3001\u6570\u636e |\n| `reflection` | sage green, dusty blue, lavender, pearl, cream | \u53cd\u601d\u3001\u6c89\u9759 |\n| `warning` | burnt orange, deep red, mustard, charcoal | \u8b66\u793a\u3001\u5f20\u529b |\n| `growth` | fresh green, gold, soft yellow, sky blue | \u589e\u957f\u3001\u590d\u5229 |\n| `abstract` | lavender, dusty rose, sage, soft amber | \u62bd\u8c61\u3001\u54f2\u601d |\n\n\u8f93\u51fa\uff1a`<article-folder>/video/bg.png` (1088\u00d71920, ~3MB)\u3002\n\n**\u26a0\ufe0f \u56fe\u7247\u5fc5\u987b\u5728 `video/` \u76ee\u5f55\u5185** \u2014 \u4e0d\u80fd\u7528 `../illustration.png`\uff0chyperframes render \u4e0d\u89e3\u6790\u8de8\u76ee\u5f55\u76f8\u5bf9\u8def\u5f84\uff0c\u4f1a\u6e32\u67d3\u6210\u7eaf\u9ed1\u3002\n\n### Step 5: \u5199 HyperFrames composition (`index.html`)\n\n\u8bfb `timing.json`\uff0c\u6309\u6bcf\u4e2a chunk \u7684 start/end \u8bbe\u8ba1 scene\u3002\u7ad6\u5c4f 1080\u00d71920 \u7ed3\u6784\uff1a\n\n```html\n<html><head><script src=\"https://cdn.jsdelivr.net/npm/gsap@3.14.2/dist/gsap.min.js\"></script>\n<style>\n  html, body {\n    width: 1080px; height: 1920px; margin: 0; overflow: hidden;\n    background: #0e0b08;\n    font-family: 'Noto Sans SC', 'PingFang SC', 'Heiti SC', sans-serif;\n    font-weight: 900;\n    color: #f5efe5;\n    letter-spacing: -0.02em;\n    -webkit-font-smoothing: antialiased;\n  }\n  #bg-image {\n    position: absolute; inset: 0;\n    background-image: url('bg.png');\n    background-size: cover;\n    background-position: center;\n    filter: blur(30px) brightness(0.65) saturate(0.85);\n    z-index: 0;\n    transform: scale(1.1);\n  }\n  #bg-overlay {\n    position: absolute; inset: 0;\n    background: rgba(14, 11, 8, 0.28);\n    z-index: 1;\n  }\n  .scene { position: absolute; inset: 0; overflow: hidden; opacity: 0; z-index: 2; }\n  #s1 { opacity: 1; }\n  /* ... scene-specific styles ... */\n</style></head>\n<body>\n  <div id=\"root\" data-composition-id=\"main\" data-start=\"0\" data-duration=\"<total+2>\" data-width=\"1080\" data-height=\"1920\">\n    <div id=\"bg-image\"></div>\n    <div id=\"bg-overlay\"></div>\n    <!-- scene divs s1..sN -->\n    <!-- audio: narration + ticks + chimes + bell -->\n  </div>\n  <script>\n    /* GSAP timeline: paused + register to window.__timelines['main'] */\n  </script>\n</body></html>\n```\n\n#### \ud83c\udfac \u7b2c\u4e00\u5e27\u89c4\u5219\uff08\u786c\u6027\uff09\n\n\u89c6\u9891 **t=0** \u5fc5\u987b\u5305\u542b\uff1a\n1. **bg-image \u5b8c\u5168\u53ef\u89c1** \u2014 \u6c38\u8fdc opacity 1\uff0c\u4ece\u4e0d fade-in\uff08CSS \u9ed8\u8ba4\u5c31\u53ef\u89c1\uff0c\u522b\u5728 GSAP \u91cc\u6539\u5b83\u7684 opacity\uff09\n2. **\u6807\u9898\u5143\u7d20\u53ef\u89c1** \u2014 s1 \u7684\u4e3b\u8981\u6807\u9898\u5143\u7d20 `tl.from({y:30, scale:0.95})` \u53ef\uff0c\u4f46 **\u4e0d\u8981** `tl.from({opacity:0})`\uff0c\u5426\u5219 t=0 \u5c31\u662f\u9ed1\u5c4f\n3. **s1 \u4e0d\u80fd\u662f A3 color-flip** \u2014 \u5426\u5219\u76d6\u4f4f bg-image\uff0c\u7b2c\u4e00\u5e27\u5c31\u770b\u4e0d\u5230\u6c34\u5f69\u3002color-flip \u7559\u7ed9 s2+\n\n#### \u8272\u5f69\u7cfb\u7edf\n\n**\u4e3b\u6587\u5b57 / \u951a\u5b9a\u8272\uff08design system\uff0c\u5168\u7247\u4e00\u81f4\uff09**\uff1a\n\n| \u89d2\u8272 | \u503c | \u7528\u6cd5 |\n|---|---|---|\n| \u4e3b\u6587\u5b57 | `#f5efe5` \u6696\u5976\u767d | hero / \u4e3b\u8981\u5185\u5bb9 |\n| \u4e8c\u7ea7\u6587\u5b57\uff08\u526f\u6807\u9898\u3001caption\uff09| `#f5efe5` + `opacity: 0.7` + \u5c0f\u5b57\u53f7 | **\u4e0d\u8981\u7528\u7070\u8272**\uff08`#8a7e72` \u5728\u6c34\u5f69\u5e95\u4e0a\u770b\u4e0d\u6e05\uff09\u3002\u7528 opacity + \u7f29\u5b57\u53f7\u505a hierarchy |\n| \u5212\u6389\u6587\u5b57\u672c\u8eab | `#f5efe5` + `opacity: 0.5` + strikethrough line | **\u4e0d\u8981\u7528 `#6d635a` \u6697\u7070** \u2014 \u5728\u6c34\u5f69\u5e95\u4e0a\u770b\u4e0d\u6e05\u3002\u6539\u7528 opacity \u5f31\u5316 + \u6a59\u8272 strike line |\n| \u88c5\u9970\u5927\u7f16\u53f7\uff0801-08\uff09| `#f5efe5` + `opacity: 0.18` \u6216 `#e87a3e` + `opacity: 0.35` | **\u4e0d\u8981\u7528 `#2b2620` \u7b49\u6df1\u7070**\uff08\u6c34\u5f69\u5e95\u4e0a\u5b8c\u5168\u6d88\u5931\uff09|\n| Outline \u63cf\u8fb9 | `#f5efe5` 4-8px stroke + `color: transparent` | A2 \u7a7a\u5fc3\u5b57 |\n| \u9ed8\u8ba4 fallback bg | `#0e0b08` \u6df1\u6696\u9ed1 | \u88ab bg-image + overlay \u8986\u76d6\uff1bcolor-flip \u4e0d\u7528 |\n\n**\u6838\u5fc3\u539f\u5219\uff1a\u6240\u6709\u6587\u5b57\u7528 `#f5efe5` cream \u6216 `#e87a3e` \u6a59\u7cfb\uff08accent palette\uff09\uff0c\u7528 opacity + size \u505a hierarchy\uff0c\u4e0d\u7528\u8272\u76f8\u53d8\u5316\u3002\u7070\u8272\u662f\u9ed1\u5e95\u65f6\u4ee3\u7684\u9057\u7269\uff0c\u6c34\u5f69\u5e95\u4e0a\u4e00\u5f8b\u4e0d\u7528\u3002** \u8be6\u89c1 [[no-low-contrast-text]]\n\n**Color-flip \u80cc\u666f palette\uff08A3\uff0c\u4e0d\u53ea\u662f\u6a59/\u84dd/\u767d\uff09**\uff1a\n\n| hex | \u9002\u5408 |\n|---|---|\n| `#e87a3e` \u7ecf\u5178\u6a59 | \u8b66\u793a\u3001\u5f3a\u8c03\u3001climax punch |\n| `#6b9bc4` \u4eae\u84dd | \u6570\u636e\u3001\u6280\u672f climax |\n| `#f5efe5` \u6696\u5976\u767d | \u6536\u5c3e\u3001\u5b89\u9759\u7684\u53cd\u5dee |\n| `#c45c3e` \u6df1\u7ea2 | \u8b66\u544a\u3001\u9519\u8bef climax |\n| `#d4a040` \u6df1\u91d1 | \u6210\u5c31\u3001\u4ef7\u503c climax |\n| `#5a8c6a` \u7fe0\u7eff | \u589e\u957f\u3001\u590d\u5229\u3001\u751f\u547d\u529b |\n| `#4a8a8a` \u9752\u677e | \u51b7\u9759\u3001\u957f\u671f\u4e3b\u4e49 |\n| `#7a5a8a` \u6697\u7d2b | \u667a\u6167\u3001\u795e\u79d8 climax |\n| `#c48a8a` \u6697\u7c89 | \u67d4\u8f6f\u3001\u4eba\u6027 |\n\ncolor-flip \u4e0a\u7684\u6587\u5b57\u7528 `#0e0b08` \u6216 `#f5efe5` \u53cd\u76f8\u3002\n\n**Emphasis / Accent palette\uff08\u4e0d\u53ea\u662f\u6a59\uff09**\uff1a\n\n| hex | \u9002\u5408 |\n|---|---|\n| `#e87a3e` \u6a59 | \u9ed8\u8ba4 emphasis |\n| `#6b9bc4` \u84dd | \u6570\u636e\u3001\u6280\u672f\u8bcd\u3001AI |\n| `#d4a040` \u91d1 | \u4ef7\u503c\u3001\u6210\u5c31 |\n| `#5a8c6a` \u7fe0\u7eff | \u589e\u957f\u3001\u597d\u7ed3\u679c |\n| `#4a8a8a` \u9752\u677e | \u957f\u671f\u3001\u7a33\u5b9a |\n| `#c45c3e` \u6df1\u7ea2 | \u8b66\u544a\u3001\u53cd\u5dee |\n| `#8a7aaa` \u6697\u7d2b | \u62bd\u8c61\u3001\u667a\u6167 |\n| `#c48a8a` \u6697\u7c89 | \u67d4\u8f6f\u3001\u4eba\u6027\u5316 |\n\n**\u6574\u7247 emphasis \u2265 2-3 \u79cd**\uff0c\u6839\u636e scene \u4e3b\u9898\u9009 accent\u3002\n\n#### \u5b57\u4f53\u7cfb\u7edf\uff08**\u7ad6\u5c4f 1080 \u5bbd**\uff09\n\n| \u9879 | \u503c |\n|---|---|\n| \u5b57\u91cd | hero 900 / \u4e3b\u6587 800 / \u4e8c\u7ea7 600-700 / caption 500 |\n| \u5b57\u8ddd | hero `-0.04em` \u5230 `-0.06em` / \u4e3b\u6587 `-0.02em` / caption `0` |\n| Punch hero (A1/A2\uff0c1-3 \u5b57) | 280-400px |\n| \u77ed\u53e5 hero (4-6 \u5b57) | 160-240px |\n| \u957f\u53e5 hero (7-10 \u5b57) | 100-150px |\n| \u5361\u7247\u5185\u5bb9 | 56-130px |\n| \u526f\u6807\u9898 | 40-72px |\n| Caption / \u5e8f\u53f7 / \u6807\u7b7e | 20-40px |\n\n#### \u5e03\u5c40\u7cfb\u7edf\uff08**\u53cd\u5c45\u4e2d\u60ef\u6027**\uff09\n\n| \u5e03\u5c40 | CSS \u5173\u952e | \u9002\u5408 |\n|---|---|---|\n| \u5c45\u4e2d | `flex; center; center;` | A \u7c7b hero\uff0c\u4f46 \u226450% scene |\n| \u5de6\u5bf9\u9f50\u8d34\u9876 | `padding: 80px 80px 0 80px;` | E \u7c7b\u91d1\u53e5\u3001\u957f quote |\n| \u53f3\u4e0b\u89d2\u951a\u5b9a | `position: absolute; right: 80px; bottom: 80px;` | \u843d\u6b3e\u3001climax \u8bcd |\n| \u5bf9\u89d2\u7ebf | top-left / bottom-right | B3 \u5bf9\u89d2\u5bf9\u7167 |\n| \u7f51\u683c | `display: grid; grid-template-columns: repeat(2, 1fr);` | C3\uff08\u7ad6\u5c4f 2\u00d7N \u800c\u975e 3\u00d7N\uff09|\n| \u9636\u68af | \u6bcf\u9879 `margin-left: calc(60px * var(--i));` | C4 \u9519\u4f4d\u5217\u8868 |\n| \u8d34\u5e95 + \u4e0a\u65b9\u7559\u767d | `position: absolute; bottom: 60px;` \u4e0a\u65b9\u7a7a\u767d | \u547c\u5438 scene |\n| \u8fb9\u89d2\u5c0f\u5143\u7d20 | \u6587\u5b57\u5c0f\u8d34\u4e00\u89d2\uff0c\u5176\u4ed6\u5168\u7a7a | \u6781\u7b80 / \u7559\u767d punch |\n\n**Padding**\uff1a\u6491\u6ee1\u578b 40-80px\uff0c\u547c\u5438\u578b 120-200px\u3002\u4e0d\u8981\u6240\u6709 scene \u90fd\u7528\u540c\u4e00\u4e2a padding\u3002\n\n#### \u51e0\u4f55\u88c5\u9970\u5143\u7d20\n\n\u6bcf\u9694\u51e0\u4e2a scene \u7528\u4e00\u4e2a\uff1a\n\n- **\u7c97\u77ed\u7ebf** 8-16px \u00d7 40-200px\uff0cemphasis bar\uff0c\u6a59\u8272\n- **\u5de6\u4fa7 emphasis bar** 6px \u00d7 100%\uff0c\u914d\u957f quote\n- **\u5927\u6570\u5b57\u7f16\u53f7** 01-08\uff0clist \u9879\u5e8f\u53f7\uff08\u6de1\u7070\u3001\u5de8\u5927\u3001\u88c5\u9970\u6027\uff09\n- **\u5927\u5f15\u53f7\u5b57\u7b26** `\"` \u534a\u900f\u660e\u8d85\u5927\u7f6e\u5de6\u4e0a\n- **\u6a2a\u5411\u5206\u9694\u7ebf** 2-4px \u5976\u767d 30% \u900f\u660e\n- **\u5706\u70b9 / \u65b9\u5757** 12-20px\u3001\u6a59\u8272\uff0clist bullet\n- **\u7bad\u5934** \u279c \u6216\u81ea\u7ed8 SVG\n\n#### Scene \u8f6c\u573a\uff084 \u79cd + \u6df7\u7528\u89c4\u5219\uff09\n\n**\u4e0d\u8981\u5168\u7247\u90fd blur crossfade**\u3002\u6bcf 4 \u4e2a\u8f6c\u573a\u5fc5\u987b \u22652 \u79cd\u7c7b\u578b\u3002\n\n**T1. Blur crossfade**\uff08\u9ed8\u8ba4\u67d4\u548c\uff09\n- 0.6s\uff0c`sine.inOut`\n- \u540e scene `opacity: 0, filter: blur(24px)` \u2192 `opacity: 1, filter: blur(0)`\n- \u524d scene \u540c\u65f6 fade-out + blur\n\n**T2. White flash cut**\uff08punch \u5207\uff0c\u6700\u73b0\u4ee3\uff09\n- 0.18s \u603b\u957f\uff1a60ms \u767d\u95ea \u2192 \u5207 \u2192 40ms \u65b0 scene scale 1.05 \u2192 1\n- \u9002\u5408\uff1a\u8fdb\u5165 A \u7c7b hero\u3001D \u7c7b stat\u3001climax \u5207\u6362\n```js\ntl.to('.flash', { opacity: 1, duration: 0.06, ease: 'none' }, T - 0.06)\n  .set(prevScene, { opacity: 0 }, T)\n  .set(nextScene, { opacity: 1 }, T)\n  .to('.flash', { opacity: 0, duration: 0.12, ease: 'power2.out' }, T)\n  .from(nextScene, { scale: 1.05, duration: 0.25, ease: 'expo.out' }, T);\n```\n\n**T3. Scale push**\uff08\u63a8\u8fdb\u611f\uff09\n- 0.55s\uff0c\u524d scene `scale: 1 \u2192 0.85`\uff0c\u540e scene `scale: 1.15 \u2192 1`\n- \u9002\u5408\uff1a\u4ece\u6982\u89c8\u63a8\u5230\u7ec6\u8282\n\n**T4. Color flash cut**\uff08\u6a59/\u84dd\u95ea\u4e00\u4e0b\uff0c\u5f3a\u70c8\u8282\u594f\uff09\n- 0.22s \u603b\u957f\uff1a80ms \u5168\u5c4f\u6a59 \u2192 \u5207 \u2192 40ms \u6536\n- \u9002\u5408\uff1a\u8fdb\u5165 A3 color-flip \u6216\u5173\u952e\u8f6c\u6298\n- **\u5168\u7247\u6700\u591a 2 \u6b21**\n\nflash overlay \u5728 HTML \u91cc\u52a0 `<div class=\"flash\">` \u5168\u5c4f\u5b9a\u4f4d\u3001\u9ed8\u8ba4 opacity 0\u3001z-index 100\u3002\n\n#### \u5165\u573a\u52a8\u753b\u89c4\u5219\n\n- \u6bcf\u4e2a scene \u7684\u6bcf\u4e2a\u5143\u7d20\u90fd\u7528 `tl.from(...)` \u5165\u573a\uff08y/opacity/scale\uff09\n- \u5165\u573a stagger 0.1-0.3s\uff1b\u9996\u5143\u7d20 t = scene.start + 0.3 \u8d77\n- \u22653 \u79cd\u4e0d\u540c ease\uff08`power3.out` / `back.out(1.3)` / `expo.out` / `elastic.out(1, 0.5)`\uff09\n- **\u4e0d\u8981 `gsap.to({opacity: 0})` \u9000\u573a** \u2014 \u8f6c\u573a\u5df2\u5904\u7406\u3002\u53ea\u6709\u6700\u540e scene \u53ef fade-to-black\n- **\u6574\u7247\u5fc5\u987b\u7528\u5230 \u22653 \u79cd** [Modern Motion Techniques](#modern-motion-techniques)\n\n### Modern Motion Techniques\n\n\u5e73\u5eb8\u89c6\u9891\u548c\u73b0\u4ee3\u89c6\u9891\u7684\u5dee\u522b\u4e00\u534a\u5728\u6392\u7248\u3001\u4e00\u534a\u5728 motion\u3002\u4e0b\u9762 7 \u79cd\u6bcf\u7247\u5fc5\u987b\u7528 \u22653 \u79cd\uff08\u7279\u5b9a scene \u7528\uff0c\u4e0d\u8981\u5168\u7247\u5806\uff09\u3002\n\n#### 1. Kinetic Typography\uff08\u5b57\u7b26 stagger \u5165\u573a\uff09\u2014\u2014 A \u7c7b hero\n```html\n<h1 class=\"kinetic\">\u7ef4 \u4fee \u5de5</h1>\n```\n```js\ntl.from('.kinetic span', {\n  y: 180, opacity: 0, rotateX: -90,\n  duration: 0.7, stagger: 0.06,\n  ease: 'back.out(1.4)',\n  transformOrigin: '50% 100%',\n}, T);\n```\n\n#### 2. Camera Punch\uff08\u63a8\u8fd1 / \u62c9\u8fdc\uff09\u2014\u2014 A3\u3001D \u7c7b\n```js\ntl.from(scene, { scale: 1.15, opacity: 0, duration: 0.5, ease: 'expo.out' }, sceneStart);\n```\n\n#### 3. Mask Reveal\uff08clip-path \u63ed\u793a\uff09\u2014\u2014 E \u7c7b quote\n```css\n.reveal { clip-path: inset(0 100% 0 0); }\n```\n```js\ntl.to('.reveal', { clipPath: 'inset(0 0% 0 0)', duration: 0.9, ease: 'expo.inOut' }, T);\n```\n\n#### 4. Number Ticker\uff08\u6570\u5b57\u6eda\u52a8\uff09\u2014\u2014 D1\n```html\n<div class=\"ticker\" data-end=\"3600\">0</div>\n```\n```js\nconst ticker = document.querySelector('.ticker');\nconst obj = { val: 0 };\ntl.to(obj, {\n  val: parseInt(ticker.dataset.end),\n  duration: 1.8, ease: 'power2.out',\n  onUpdate: () => { ticker.textContent = Math.round(obj.val).toLocaleString(); },\n}, T);\n```\n\n#### 5. Outline \u2192 Fill\uff08\u7a7a\u5fc3\u5b57\u53d8\u5b9e\u5fc3\uff09\u2014\u2014 A2\n```css\n.morph { -webkit-text-stroke: 4px #f5efe5; color: transparent; }\n```\n```js\ntl.to('.morph', { color: '#e87a3e', webkitTextStrokeColor: '#e87a3e', duration: 0.5, ease: 'power2.out' }, T);\n```\n\n#### 6. Letter Highlight Sweep\uff08\u5173\u952e\u8bcd\u626b\u5149\uff09\u2014\u2014 E \u7c7b climax \u8bcd\n```html\n<span class=\"sweep\"><span class=\"sweep-bg\"></span>\u642d\u6863</span>\n```\n```css\n.sweep { position: relative; display: inline-block; padding: 0 8px; }\n.sweep-bg { position: absolute; inset: 0; background: #e87a3e; transform: scaleX(0); transform-origin: left; z-index: -1; }\n```\n```js\ntl.to('.sweep-bg', { scaleX: 1, duration: 0.5, ease: 'power3.inOut' }, T);\ntl.to('.sweep', { color: '#0e0b08', duration: 0.1 }, T + 0.25);\n```\n\n#### 7. Background Color Punch\uff08\u80cc\u666f\u95ea\u53d8\uff09\u2014\u2014 \u5168\u7247 1-2 \u6b21\n```js\ntl.to(scene, { backgroundColor: '#e87a3e', duration: 0.08 }, T)\n  .to(scene, { backgroundColor: '#0e0b08', duration: 0.4, ease: 'power2.out' }, T + 0.1);\n```\n\n**Strike-through \u52a8\u753b**\uff1a\u7528\u771f\u5b9e DOM `<span class=\"strike-line\">` \u800c\u4e0d\u662f `::after`\u3002\u4f2a\u5143\u7d20 + CSS \u53d8\u91cf\u5728 hyperframes \u67d0\u4e9b\u6e32\u67d3\u8def\u5f84\u4e0b\u4e0d\u5de5\u4f5c\u3002\n```html\n<span class=\"strike\">\u9886\u5bfc<span class=\"strike-line\"></span></span>\n```\n```css\n.strike-line { position: absolute; left: -10px; right: -10px; top: 56%; height: 10px; background: #e87a3e; transform: scaleX(0); transform-origin: left; }\n```\n```js\ntl.to('.strike .strike-line', { scaleX: 1, duration: 0.55, ease: 'power2.inOut' }, T);\n```\n\n### Step 6: \u52a0 SFX\n\n```bash\n~/.claude/skills/wjs-converting-text-to-video/scripts/synth-sfx.sh <article-folder>/video\n```\n\n\u751f\u6210 `video/sfx/{tick,chime,bell}.mp3`\uff1a\n- `tick.mp3` \u2014 80ms 1.2kHz sine\uff0c**\u8f6c\u573a\u7528**\uff08\u6bcf\u6b21 scene \u5207\u6362\u524d 0.3s\uff09\n- `chime.mp3` \u2014 220ms 880+1320Hz \u53cc\u97f3\uff0c\u5bf9\u8bdd/\u5217\u8868\u67d0\u9879\u4eae\u8d77\u65f6\uff08**\u53ef\u9009**\uff09\n- `bell.mp3` \u2014 1.5s \u4f4e\u9891\u949f\uff0c\u6700\u540e climax \u8bcd\u51fa\u6765\u65f6\uff08**\u5168\u7247\u6700\u591a 1 \u6b21**\uff09\n\n**\u63a5\u5165 timeline**\uff1a\n```html\n<audio id=\"aud-narration\" src=\"narration.mp3\" data-start=\"0\" data-duration=\"<total>\" data-track-index=\"0\" data-volume=\"1\"></audio>\n\n<audio id=\"aud-tick-s02\" src=\"sfx/tick.mp3\" data-start=\"<scene2.start - 0.3>\" data-duration=\"0.1\" data-track-index=\"2\" data-volume=\"0.55\"></audio>\n<!-- \u91cd\u590d\u6bcf\u4e2a scene \u5207\u6362\uff1bT2/T4 flash \u8f6c\u573a\u53ef\u4e0d\u52a0 tick -->\n\n<audio id=\"aud-chime-s08-1\" src=\"sfx/chime.mp3\" data-start=\"<T>\" data-duration=\"0.3\" data-track-index=\"3\" data-volume=\"0.45\"></audio>\n<audio id=\"aud-bell-s12\" src=\"sfx/bell.mp3\" data-start=\"<climax-T>\" data-duration=\"1.6\" data-track-index=\"4\" data-volume=\"0.55\"></audio>\n```\n\n**\u26a0\ufe0f \u6bcf\u4e2a `<audio>` \u5fc5\u987b\u6709 `id`**\uff0c\u5426\u5219 render \u51fa silent\uff08hyperframes \u5f3a\u5236\u8981\u6c42\uff09\u3002\n\n\u4e0d\u540c `track-index` \u4e0d\u51b2\u7a81\uff0c\u540c track \u4e0d\u80fd\u65f6\u95f4\u91cd\u53e0\u3002\n\n**SFX \u7528\u91cf\u8282\u5236**\uff1a\u8f6c\u573a tick \u5fc5\u987b\uff1bchime / bell \u662f\u88c5\u9970\uff0cscene \u5185\u5bb9\u7b80\u5355\u65f6\u4e0d\u52a0\uff1bbell \u5168\u7247\u53ea 1 \u6b21\u3002\n\n### Step 7: Lint + Inspect + Render\uff08\u5fc5\u987b\u6309\u987a\u5e8f\uff09\n\n```bash\ncd <article-folder>/video\n\n# \u5fc5\u8dd1 1\uff1alinter\uff08\u5fc5\u987b 0 errors\uff09\nnpx hyperframes lint\n\n# \u5fc5\u8dd1 2\uff1alayout inspect \u627e\u6ea2\u51fa\uff08\u5fc5\u987b 0 errors\uff09\nnpx hyperframes inspect --at 1,8,15,25,35,45,55,65\n\n# \u63a8\u8350\uff1asnapshot \u770b\u6392\u7248\nnpx hyperframes snapshot --at <t1>,<t2>,<t3> .\n\n# \u6e32\u67d3\uff08lint + inspect \u90fd\u901a\u8fc7\u624d\u80fd\u8dd1\uff09\n# \u26a0\ufe0f \u8f93\u51fa\u5230\u4e0a\u7ea7\u76ee\u5f55\uff0c\u4e0e video/ \u5e73\u884c \u2014\u2014 \u6700\u7ec8 MP4 \u4e0d\u653e video/ \u91cc\nnpx hyperframes render --quality standard --fps 30 --output ../<slug>.mp4\n```\n\n**\u4e3a\u4ec0\u4e48 inspect \u5fc5\u8dd1**\uff1a\u7ad6\u5c4f 1080 \u5bbd\u5f88\u7a84\uff0c3-4 \u5b57 hero \u5728 280-400px \u5b57\u53f7\u4e0b\u5c31\u63a5\u8fd1\u6ea2\u51fa\u3002\u6bcf\u6b21\u5fc5\u987b inspect\uff0c**0 errors \u624d\u80fd render**\u3002\n\n**fix overflow**\uff1a\n- \u5b57\u53f7\u7f29\u5c0f\uff08inspect \u7ed9\u5177\u4f53\u5efa\u8bae\uff09\n- \u957f hero \u5206\u884c\uff08\"\u6ca1\u6cd5\u79ef\u7d2f\" \u2192 \u4e24\u884c \"\u6ca1\u6cd5\" / \"\u79ef\u7d2f\"\uff09\n- `white-space: nowrap` \u53ea\u5728\u786e\u8ba4\u5b57\u6570 \u00d7 \u5b57\u53f7 < \u5c4f\u5bbd\u65f6\n- \u82e5 `.em` \u5728 `reveal-wrap` \u5185\u6ea2\u51fa \u2192 \u52a0 `line-height: 1` \u5230 `.em`\n\n**\u6e32\u67d3\u8d28\u91cf**\uff1a\n- `--quality draft` ~30s \u6e32\u67d3 \u2014 \u8fed\u4ee3\u7528\n- `--quality standard` ~1.5min \u2014 \u9ed8\u8ba4\uff0c\u53d1\u5e03\u591f\u7528\n- `--quality high` ~3min \u2014 \u6295\u5927\u5c4f / \u5546\u52a1\n\n### Step 8: \u9884\u89c8\n\n\u8f93\u51fa\uff1a`<article-folder>/<slug>.mp4`\uff08**\u4e0e `video/` \u5e73\u884c**\uff0c\u4e0d\u5728 `video/` \u5185 \u2014\u2014 `video/` \u7559\u7ed9\u4e2d\u95f4\u6587\u4ef6\uff09\u3002\n\n`open <article-folder>/<slug>.mp4` \u7ed9\u7528\u6237\u9884\u89c8\u3002**\u4e0d\u8981\u81ea\u52a8\u4e0a\u4f20\u5230\u89c6\u9891\u53f7**\uff08\u7528\u6237\u53ef\u80fd\u60f3\u5148\u526a/\u8c03\uff09\u3002\n\n### Step 9: \u53d1\u5e03\u5230 YouTube\uff08\u81ea\u52a8 cron\uff0c**\u4e0d\u5728 render \u6d41\u7a0b\u5185**\uff09\n\n\u65b0\u89c6\u9891 render \u5b8c\u6210\u540e**\u4e0d\u7acb\u5373\u4e0a\u4f20** \u2014\u2014 YouTube \u6709 daily quota \u9650\u5236\uff08\u9ed8\u8ba4 6 \u4e2a/\u5929 @ 1600 \u914d\u989d\u70b9/\u4e0a\u4f20\uff09\uff0c\u6e32\u67d3\u591a\u4e86\u4f1a\u5361 quota\u3002\n\n**\u505a\u6cd5**\uff1acron \u6bcf\u5929 10:00 \u81ea\u52a8\u8dd1 `daily-upload-batch.sh`\uff0c\u6311\u6700\u591a 5 \u4e2a\u8fd8\u6ca1\u4e0a\u4f20\u8fc7\u7684 MP4\uff08\u6309\u6587\u7ae0\u65e5\u671f\u5347\u5e8f\uff09\uff0c\u4e0a\u4f20\u540e\u5199 `.youtube.json` \u8bb0\u5f55\u3002\n\n**cron \u5df2\u6ce8\u518c**\uff08\u4e00\u6b21\u6027\uff0c\u4e0d\u7528\u91cd\u590d\u8dd1\uff09\uff1a\n```\n0 10 * * * /Users/jianshuo/.claude/skills/wjs-converting-text-to-video/scripts/daily-upload-batch.sh\n```\n\n**\u624b\u52a8\u89e6\u53d1**\uff08**\u4e0d\u8981\u5728 wjs-converting-text-to-video \u6d41\u7a0b\u91cc\u8dd1** \u2014 \u8ba9 cron \u5904\u7406\uff09\uff1a\n```bash\n~/.claude/skills/wjs-converting-text-to-video/scripts/daily-upload-batch.sh\n# \u6216\u5355\u4e2a\u6587\u7ae0\u7acb\u5373\u4e0a\u4f20\n~/.claude/skills/wjs-converting-text-to-video/scripts/publish-to-youtube.py <article-folder>\n```\n\n\u6bcf\u4e2a\u4e0a\u4f20\u7684\u811a\u672c\u884c\u4e3a\uff1a\n1. \u68c0\u6d4b MP4 portrait/landscape \u2192 portrait \u6807\u9898\u52a0 `#shorts`\u3001landscape \u666e\u901a video\n2. title \u4ece article.md H1 / description \u4ece\u524d\u51e0\u6bb5\n3. \u68c0\u67e5 `<article-folder>/.youtube.json`\uff1a\u5b58\u5728 \u2192 \u5c1d\u8bd5\u5220\u8001\u518d\u4f20\u65b0\uff08\u9700 `youtube.force-ssl` scope\uff0c\u5f53\u524d token \u6ca1\u8fd9\u4e2a scope \u2192 \u8df3\u8fc7 delete + \u4e0a\u4f20\u65b0\uff09\n4. \u5199 `.youtube.json` \u8bb0\u5f55\n\n\u8be6\u89c1 memory: [[auto-publish-youtube]]\n\n## \u76ee\u5f55\u7ed3\u6784\n\n```\n<article-folder>/\n\u251c\u2500\u2500 article.md\n\u251c\u2500\u2500 illustration.png            # \u7528\u6237\u539f\u59cb\u793a\u610f\u56fe\uff0c\u4e0d\u76f4\u63a5\u7528\u4f5c bg\n\u251c\u2500\u2500 <slug>.mp4                  # \u2b50 \u6700\u7ec8\u89c6\u9891\uff08\u4e0e video/ \u5e73\u884c\uff0c\u4e0d\u653e video/ \u91cc\uff09\n\u2514\u2500\u2500 video/                      # \u6240\u6709\u4e2d\u95f4\u4ea7\u7269\n    \u251c\u2500\u2500 narration_chunks.json   # 5-10 \u4e2a scene \u7684\u65c1\u767d\u6587\u672c\n    \u251c\u2500\u2500 tts_narration.py        # bootstrap \u590d\u5236\u8fdb\u6765\n    \u251c\u2500\u2500 narration.mp3           # \u5408\u5e76\u7684\u5168\u6bb5 TTS\n    \u251c\u2500\u2500 narration/              # \u5355\u6bb5 mp3 (s01..sN)\n    \u251c\u2500\u2500 timing.json             # \u6bcf\u6bb5 start/end/duration\n    \u251c\u2500\u2500 bg.png                  # GPT Image 2 \u751f\u6210\u7684\u6c34\u5f69\u80cc\u666f\n    \u251c\u2500\u2500 sfx/{tick,chime,bell}.mp3\n    \u251c\u2500\u2500 index.html              # HyperFrames composition\n    \u251c\u2500\u2500 hyperframes.json\n    \u251c\u2500\u2500 meta.json\n    \u251c\u2500\u2500 package.json\n    \u2514\u2500\u2500 snapshots/              # \u6e32\u67d3\u524d\u5feb\u7167\n```\n\n## Skill \u81ea\u8eab\u6587\u4ef6\n\n```\n~/.claude/skills/wjs-converting-text-to-video/\n\u251c\u2500\u2500 SKILL.md\n\u2514\u2500\u2500 scripts/\n    \u251c\u2500\u2500 bootstrap-project.sh        # init video/ \u76ee\u5f55 + \u590d\u5236 helper + \u751f\u6210 sfx\n    \u251c\u2500\u2500 generate-bg.sh              # \u8c03 GPT Image 2 \u751f\u6210\u62bd\u8c61\u6c34\u5f69 bg.png\n    \u251c\u2500\u2500 tts.py                      # Volcano TTS narration \u751f\u6210\n    \u251c\u2500\u2500 synth-sfx.sh                # tick/chime/bell \u5408\u6210 (ffmpeg)\n    \u251c\u2500\u2500 retrofit-bg-image.py        # \u7ed9\u5df2\u6709\u89c6\u9891\u8865 bg-image \u5c42\n    \u251c\u2500\u2500 strip-dark-scene-bgs.py     # \u5265\u79bb scene-level \u6697\u8272 bg\uff0c\u8ba9 bg-image \u900f\u51fa\n    \u2514\u2500\u2500 publish-to-youtube.py       # \u81ea\u52a8\u4e0a\u4f20 MP4 \u5230 YouTube\uff08portrait\u2192Shorts\uff09\uff0c\u53ef\u66ff\u6362\u5df2\u6709\u4e0a\u4f20\n```\n\n## Anti-Patterns\n\n### \u53cd\u5355\u8c03\uff08\u6700\u91cd\u8981 \u2014 \"\u5e73\u94fa\u76f4\u53d9\"\u7684\u6839\u6e90\uff09\n\n| \u4e0d\u8981 | \u539f\u56e0 |\n|------|------|\n| \u6240\u6709 scene \u90fd\u7528 B1 \u53cc\u884c strikethrough | \u5386\u53f2\u6700\u5927\u5931\u8d25\u6a21\u5f0f\u3002B1 \u6574\u7247\u6700\u591a 2 \u6b21 |\n| \u6240\u6709 scene \u5c45\u4e2d\u5e03\u5c40 | \u6b7b\u6c14\u6c89\u6c89\u3002\u22652 \u975e\u5c45\u4e2d |\n| \u6240\u6709 scene \u5b57\u53f7\u5dee\u4e0d\u591a | \u8de8\u5ea6\u5fc5\u987b \u2265240px |\n| \u6240\u6709 scene \u65f6\u957f 5-7s | \u8de8\u5ea6\u5fc5\u987b \u22656s |\n| \u6574\u7247\u53ea\u7528 blur crossfade | \u6bcf 4 \u4e2a\u8f6c\u573a \u22652 \u79cd |\n| \u6574\u7247\u6ca1\u6709 color-flip | \u22651 \u4e2a A3 \u662f\u786c\u8981\u6c42 |\n| \u6574\u7247\u6ca1\u6709\u51e0\u4f55\u5143\u7d20 | \u22651 \u4e2a scene \u52a0\u7c97\u7ebf / \u5927\u7f16\u53f7 / \u5f15\u53f7 |\n| \u6574\u7247\u53ea\u7528 `tl.from({y, opacity})` | \u22653 \u79cd Modern Motion Techniques |\n| \u6bcf\u4e2a scene \u90fd\u5806\u6ee1 | \u22651 \u4e2a scene \u7559\u767d \u226560% |\n| \u7ed9\u6bcf\u4e2a scene \u90fd\u52a0 `background:` \u8272 | \u76d6\u4f4f bg-image\uff0c\u7b49\u4e8e\u767d\u751f\u6210\u6c34\u5f69\u3002\u666e\u901a scene \u4e0d\u5199 bg\uff1b\u53ea\u6709 A3 color-flip \u7528\u7eaf\u8272 |\n| color-flip / emphasis \u6c38\u8fdc\u53ea\u7528\u6a59 | \u81f3\u5c11 2-3 \u79cd accent |\n| \u7528\u7070\u8272\u4f5c secondary text / strike / \u88c5\u9970 | \u6c34\u5f69\u5e95\u4e0a\u7070\u8272\u5bf9\u6bd4\u5ea6\u592a\u4f4e\uff0c\u4f1a\u6d88\u5931\u3002\u6539\u7528 `#f5efe5` cream + opacity \u5f31\u5316\uff08\u8be6\u89c1 [[no-low-contrast-text]]\uff09|\n\n### \u5185\u5bb9 / \u5de5\u7a0b\n\n| \u4e0d\u8981 | \u539f\u56e0 |\n|------|------|\n| \u7528 Kokoro \u505a\u4e2d\u6587 TTS | \u4e2d\u6587\u8d28\u91cf\u5dee\uff0c\u7528\u6237\u660e\u786e\u4e0d\u63a5\u53d7 |\n| Volcano TTS \u4f20 `emotion` \u53c2\u6570 | `_bigtts` \u58f0\u97f3\u8fd4\u56de `data: null` \u9759\u9ed8\u5931\u8d25 |\n| \u7528 `zh_male_jieshuonansheng_mars_bigtts` | \u542b\u82f1\u6587\u4e13\u540d\u65f6\u5faa\u73af hallucinate |\n| \u7528 serif \u5b57\u4f53\uff08Songti / \u5b8b\u4f53 / Noto Serif\uff09 | \u4e0d\u591f\u51b2\u51fb |\n| \u628a\u6574\u6bb5\u6587\u7ae0\u8d34\u5c4f | \u90a3\u662f PPT\u3002\u89c6\u9891\u6bcf\u5c4f\u4e00\u4e2a\u89c6\u89c9\u65f6\u523b |\n| \u8d85\u8fc7 10 scene / \u8d85\u8fc7 90 \u79d2 | \u6ce8\u610f\u529b\u653e\u4e0d\u4e0b |\n| \u77ed\u6587\u786c\u586b\u5230 90 \u79d2 | \u6587\u7ae0\u77ed\u5c31\u505a 30-50s\uff0c\u786c\u6491\u957f\u4f1a\u6ce8\u6c34\u53d8\u6d45 |\n| \u6bcf\u4e2a scene \u6362\u5b57\u4f53\u914d\u8272\u98ce\u683c | \u98ce\u683c\u6f02\u79fb\u3002design system \u56fa\u5b9a\uff0c\u6a21\u677f\u53d8\u5316 |\n| `::after` \u4f2a\u5143\u7d20 + CSS \u53d8\u91cf\u505a strike | hyperframes \u6e32\u67d3\u8def\u5f84\u4e0b\u5931\u6548\u3002\u7528\u771f\u5b9e DOM `<span class=\"strike-line\">` |\n| \u6700\u540e scene \u4e4b\u5916\u7528 `gsap.to({opacity: 0})` | \u9000\u573a\u52a8\u753b hyperframes \u7981\u6b62 \u2014 \u8f6c\u573a\u624d\u662f\u9000\u573a |\n| \u6bcf\u6bb5 chunk \u90fd\u52a0 chime | \u592a\u5435 |\n| \u7528 `../illustration.png` \u4f5c bg url | hyperframes render \u4e0d\u89e3\u6790\u8de8\u76ee\u5f55\u8def\u5f84\uff0c\u6e32\u67d3\u6210\u7eaf\u9ed1\u3002**bg.png \u5fc5\u987b\u5728 `video/` \u5185** |\n| `<audio>` \u6ca1 `id` | render \u4f1a silent\u3002\u6bcf\u4e2a `<audio>` \u5fc5\u987b `id=\"...\"` |\n| s1 \u662f A3 color-flip | \u7b2c\u4e00\u5e27\u770b\u4e0d\u5230 bg-image\u3002color-flip \u653e s2+ |\n| s1 \u6807\u9898\u5143\u7d20\u90fd `from({opacity: 0})` | \u7b2c\u4e00\u5e27\u9ed1\u5c4f\u3002s1 \u4e3b\u5143\u7d20 `opacity: 1` \u9ed8\u8ba4\uff0c\u53ea\u52a8 y/scale |\n\n## Common Pitfalls\n\n- **\u6539\u4e86\u65c1\u767d\u6587\u5b57\u4f46 TTS \u6ca1\u53d8\uff08\u7528\u4e86\u7f13\u5b58\uff09** \u2192 `tts_narration.py` \u6309 chunk `id` \u7f13\u5b58\u5355\u6bb5 mp3\uff0c\u6539\u6587\u6848\u4f46 `id` \u6ca1\u53d8\u4f1a\u590d\u7528\u65e7\u97f3\u9891\uff08\u75c7\u72b6\uff1a`timing.json` \u65f6\u957f\u548c\u4e0a\u4e00\u7248\u4e00\u6a21\u4e00\u6837\uff0c\u660e\u660e\u6587\u5b57\u53d8\u957f\u4e86\uff09\u3002\u91cd\u5408\u6210\u524d\u5148 `rm -rf narration/ narration.mp3 timing.json` \u518d\u8dd1\n- **narration \u5199\u300c\u2014\u2014\u300d\u7834\u6298\u53f7** \u2192 TTS \u5ff5\u51fa \"\u7834\u6298\u53f7\"\u3002\u5220\u6389\u7528\u53e5\u53f7\u6216\u9017\u53f7\n- **\u67d0\u6bb5 chunk \u5f02\u5e38\u957f\uff08>3 chars/s\uff09** \u2192 Volcano hallucinate \u5faa\u73af\u3002\u6362\u58f0\u97f3\uff0c\u6216\u62c6\u77ed\n- **scene \u65f6\u957f < narration \u65f6\u957f** \u2192 \u65c1\u767d\u88ab\u4e0b\u4e00\u4e2a scene \u5207\u6389\u3002scene \u5fc5\u987b\u8986\u76d6\u6574\u6bb5 narration + 0.3s \u7f13\u51b2\n- **\u9ed1\u5e95\u5927\u5b57 opacity: 0 \u65f6\u4ecd\u53ef\u89c1** \u2192 \u68c0\u67e5 `.scene` \u662f\u5426\u6709 `opacity: 0` \u9ed8\u8ba4\uff08\u9664\u4e86 s1\uff09\n- **`.em` \u5728 `.reveal-wrap` \u91cc\u5c11\u91cf\u6ea2\u51fa\uff08top/bottom \u51e0 px\uff09** \u2192 \u7ed9 `.em` \u52a0 `line-height: 1`\n- **snapshot \u5b57\u5f62\u548c render \u4e0d\u4e00\u81f4** \u2192 \u73b0\u5728\u90fd\u7528 Noto Sans SC\uff0c\u6b63\u5e38\u4e00\u81f4\n\n## Dependencies\n\n- **HyperFrames CLI** (`npx hyperframes`) \u2014 composition lint / inspect / snapshot / render\n- **GPT Image 2** (`~/.claude/skills/gpt-image-2-skill/`) \u2014 \u751f\u6210 bg.png\uff1b`--provider codex` \u7528 ChatGPT auth\n- **Volcano TTS** \u2014 `VOLC_TTS_APPID` / `VOLC_TTS_ACCESS_TOKEN` \u5728 `~/code/.env`\n- **ffmpeg** \u2014 SFX \u5408\u6210\u3001audio concat\u3001aspect-ratio \u68c0\u6d4b\n- **YouTube uploader** (`~/.claude/skills/wjs-uploading-video/`) + OAuth token at `~/.config/youtube/token.json` \u2014\u2014 Step 9 \u81ea\u52a8\u53d1\u5e03\n","usage":"\u8bfb\u53d6 SKILL.md\uff0c\u5e76\u6309\u9700\u8bfb\u53d6\u914d\u5957\u6587\u4ef6\uff1b\u4e0b\u8f7d ZIP \u83b7\u53d6\u5b8c\u6574\u5305\u3002\u6280\u80fd\u662f\u4efb\u52a1\u65b9\u6cd5\uff0c\u4e0d\u6388\u4e88\u65b0\u589e\u8d26\u6237\u3001\u4ed8\u8d39\u6216\u7cfb\u7edf\u6743\u9650\u3002"}