![\"\u5c06HTML\/CSS\u6e32\u67d3\u4e3aMP4\u89c6\u9891\"](\"https:\/\/ai.jxgzhc.cn\/wp-content\/uploads\/2026\/09\/hyperframes.webp\")
<\/p>\n<\/p>\n
\u5c06\u4ee3\u7801\u8f6c\u5316\u4e3a\u9ad8\u8d28\u91cf\u7684 MP4 \u89c6\u9891\uff0c\u5b9e\u73b0\u81ea\u52a8\u5316\u89c6\u9891\u521b\u4f5c\u3002<\/strong><\/p>\n HyperFrames<\/p>\n \u7f16\u5199 HTML\uff0c\u6e32\u67d3\u89c6\u9891\uff0c\u4e3a AI \u4ee3\u7406\u800c\u751f\u3002<\/p>\n HyperFrames \u662f\u4e00\u4e2a\u5f00\u6e90\u6846\u67b6\uff0c\u80fd\u5c06 HTML\u3001CSS\u3001\u5a92\u4f53\u8d44\u6e90\u548c\u53ef\u5bfb\u5740\u52a8\u753b\u8f6c\u5316\u4e3a\u786e\u5b9a\u6027\u7684 MP4 \u89c6\u9891\u3002\u4f60\u53ef\u4ee5\u901a\u8fc7\u672c\u5730 CLI \u4f7f\u7528\u5b83\uff0c\u4e5f\u53ef\u4ee5\u901a\u8fc7 AI \u7f16\u7801\u4ee3\u7406\u52a0\u8f7d\u6280\u80fd\u6765\u4f7f\u7528\uff0c\u6216\u8005\u5c06\u5176\u4f5c\u4e3a\u6258\u7ba1\u521b\u4f5c\u5de5\u4f5c\u6d41\u80cc\u540e\u7684\u6e32\u67d3\u6838\u5fc3\u3002<\/p>\n \u9002\u7528\u573a\u666f<\/p>\n HyperFrames \u53ef\u7528\u4e8e\u521b\u5efa\u591a\u79cd\u89c6\u9891\u5185\u5bb9\uff0c\u5305\u62ec\uff1a<\/p>\n \u4ea7\u54c1\u53d1\u5e03\u89c6\u9891\u4e0e\u529f\u80fd\u516c\u544a<\/p>\n GitHub PR \u8bb2\u89e3\uff08\u5e26\u52a8\u753b\u4ee3\u7801 diff\u3001\u65c1\u767d\u548c\u5b57\u5e55\uff09<\/p>\n \u6570\u636e\u53ef\u89c6\u5316\u3001\u56fe\u8868\u7ade\u8d5b\u548c\u5730\u56fe\u52a8\u753b<\/p>\n \u793e\u4ea4\u89c6\u9891\uff08\u542b\u52a8\u6001\u5b57\u5e55\u3001\u53e0\u52a0\u5c42\u548c\u80cc\u666f\u97f3\u4e50\uff09<\/p>\n \u6587\u6863\u8f6c\u89c6\u9891\u3001PDF \u8f6c\u89c6\u9891\u3001\u7f51\u7ad9\u5bfc\u89c8\u8bb2\u89e3<\/p>\n \u53ef\u590d\u7528\u7684\u52a8\u6001\u56fe\u5f62\uff0c\u7528\u4e8e\u81ea\u52a8\u5316\u5185\u5bb9\u6d41\u6c34\u7ebf<\/p>\n \u6548\u679c\u9884\u89c8<\/p>\n \u8bbe\u8ba1\u7cfb\u7edf\u6a21\u677f frame.md \u53ef\u5c06\u4f60\u7684\u8bbe\u8ba1\u89c4\u8303\u8f6c\u6362\u4e3a AI \u4ee3\u7406\u80fd\u591f\u76f4\u63a5\u7528\u4e8e\u89c6\u9891\u521b\u4f5c\u7684\u683c\u5f0f\u3002\u4ee5\u4e0b\u662f\u4e00\u4e9b\u5df2\u63d0\u4f9b\u7684\u8bbe\u8ba1\u6a21\u677f\u6548\u679c\uff1a<\/p>\n \u4f60\u53ef\u4ee5\u5728 hyperframes.dev\/design \u6d4f\u89c8\u548c\u6df7\u642d\u6240\u6709\u8fd9\u4e9b\u8bbe\u8ba1\u6a21\u677f\u3002<\/p>\n \u6838\u5fc3\u80fd\u529b<\/p>\n HyperFrames \u63d0\u4f9b\u4e86 19 \u4e2a\u6309\u9700\u52a0\u8f7d\u7684\u6280\u80fd\uff0c\u6db5\u76d6\u8def\u7531\u3001\u521b\u4f5c\u5de5\u4f5c\u6d41\u548c\u9886\u57df\u80fd\u529b\u3002\u4ee5\u4e0b\u662f\u4e00\u5f20\u5b8c\u6574\u7684\u7ec4\u4ef6\u6808\u8868\uff1a<\/p>\n \u7ec4\u4ef6 CLI Core \/ Engine \/ Producer Catalog Agent skills Studio AWS Lambda \u6e32\u67d3 hyperframes.dev frame.md \u6b64\u5916\uff0cHyperFrames \u8fd8\u5177\u6709\u4ee5\u4e0b\u7279\u6027\uff1a<\/p>\n HTML \u539f\u751f \uff1a\u5408\u6210\u6587\u4ef6\u5c31\u662f\u5e26\u6570\u636e\u5c5e\u6027\u7684 HTML\uff0c\u65e0\u9700 React\uff0c\u6ca1\u6709\u4e13\u6709\u65f6\u95f4\u7ebf\u683c\u5f0f\u3002<\/p>\n \u5bf9 AI \u4ee3\u7406\u53cb\u597d \uff1a\u4ee3\u7406\u5df2\u7ecf\u80fd\u5199 HTML\uff0cCLI \u9ed8\u8ba4\u975e\u4ea4\u4e92\u5f0f\u3002<\/p>\n \u786e\u5b9a\u6027 \uff1a\u76f8\u540c\u8f93\u5165\u4ea7\u751f\u76f8\u540c\u5e27\u3001\u76f8\u540c\u8f93\u51fa\uff0c\u9002\u5408 CI\u3001\u56de\u5f52\u6d4b\u8bd5\u548c\u81ea\u52a8\u5316\u6e32\u67d3\u3002<\/p>\n \u65e0\u6784\u5efa\u6b65\u9aa4 \uff1a index.html \u5408\u6210\u6587\u4ef6\u53ef\u76f4\u63a5\u64ad\u653e\uff0c\u6d4f\u89c8\u5668\u4e2d\u5373\u53ef\u9884\u89c8\u3002<\/p>\n \u9002\u914d\u5668\u5f0f\u52a8\u753b \uff1a\u652f\u6301 GSAP\u3001CSS \u52a8\u753b\u3001Lottie\u3001Three.js\u3001Anime.js\u3001WAAPI \u6216\u81ea\u5b9a\u4e49\u8fd0\u884c\u65f6\u3002<\/p>\n \u5f00\u6e90 \uff1aApache 2.0 \u8bb8\u53ef\uff0c\u65e0\u6309\u6e32\u67d3\u6b21\u6570\u6536\u8d39\u6216\u5546\u4e1a\u4f7f\u7528\u95e8\u69db\u3002<\/p>\n \u5de5\u4f5c\u65b9\u5f0f<\/p>\n \u7528\u6237\u63d0\u4f9b\u89c6\u9891\u63cf\u8ff0\uff08prompt\uff09\u3001URL\u3001GitHub PR \u94fe\u63a5\u3001\u97f3\u9891\u6587\u4ef6\u7b49\u8f93\u5165\u3002<\/p>\n AI \u4ee3\u7406\uff08\u5982 Claude Code\u3001Cursor\u3001Gemini CLI\u3001Codex\uff09\u6216\u672c\u5730 CLI \u4f7f\u7528 HyperFrames \u6280\u80fd\u6765\u89c4\u5212\u89c6\u9891\u3001\u7f16\u5199 HTML\u3001\u6dfb\u52a0\u53ef\u5bfb\u5740\u52a8\u753b\u3001\u5f15\u5165\u5a92\u4f53\u3001\u68c0\u67e5\u8bed\u6cd5\u3001\u9884\u89c8\u6548\u679c\uff0c\u6700\u540e\u6e32\u67d3\u8f93\u51fa\u3002<\/p>\n \u6e32\u67d3\u5668\u5728\u65e0\u5934 Chrome \u4e2d\u9010\u5e27\u6355\u83b7\uff0c\u5e76\u901a\u8fc7 FFmpeg \u7f16\u7801\u4e3a MP4 \u89c6\u9891\u3002<\/p>\n \u4ee5\u4e0b\u662f\u4e00\u4e2a\u7b80\u5355\u7684 HTML \u5408\u6210\u793a\u4f8b\uff1a<\/p>\n <div id="stage" data-composition-id="launch" data-start="0" data-width="1920" data-height="1080"> <h1 id="title" class="clip" data-start="1" data-duration="4" data-track-index="1">Launch day<\/h1><\/p>\n <audio <script src="https:\/\/cdn.jsdelivr.net\/npm\/gsap@3\/dist\/gsap.min.js"><\/script> \u9884\u89c8\u548c\u6e32\u67d3\uff1a<\/p>\n npx hyperframes preview # \u5728\u6d4f\u89c8\u5668\u4e2d\u9884\u89c8\uff0c\u652f\u6301\u5b9e\u65f6\u91cd\u8f7d \u4f60\u9700\u8981\u63d0\u4f9b<\/p>\n \u4f7f\u7528 AI \u4ee3\u7406 \uff1a\u4e00\u4e2a\u6587\u5b57\u63cf\u8ff0\uff0c\u4f8b\u5982\u201c\u521b\u5efa\u4e00\u4e2a 10 \u79d2\u7684\u4ea7\u54c1\u4ecb\u7ecd\uff0c\u5305\u542b\u6de1\u5165\u6807\u9898\u3001\u80cc\u666f\u89c6\u9891\u548c\u5fae\u5f31\u7684\u80cc\u666f\u97f3\u4e50\u201d\uff0c\u4ee5\u53ca\u4e00\u4e2a\u652f\u6301\u6280\u80fd\u7684\u4ee3\u7406\uff08\u5982 Claude Code\u3001Cursor\u3001Gemini CLI\u3001Codex\uff09\u3002<\/p>\n \u4f7f\u7528\u672c\u5730 CLI \uff1aNode.js 22+ \u548c FFmpeg \u5b89\u88c5\u73af\u5883\u3002\u6b64\u5916\uff0c\u9700\u8981\u51c6\u5907 HTML \u6587\u4ef6\u3001\u5a92\u4f53\u6587\u4ef6\u548c\u52a8\u753b\u811a\u672c\u3002<\/p>\n \u4f60\u4f1a\u83b7\u5f97<\/p>\n \u4e00\u4e2a\u786e\u5b9a\u6027\u7684 MP4 \u89c6\u9891\u6587\u4ef6\uff0c\u5e27\u4e0e\u8f93\u5165\u5b8c\u5168\u4e00\u81f4\u3002<\/p>\n \u5bf9\u4e8e slideshow \u5de5\u4f5c\u6d41\uff0c\u4f1a\u5f97\u5230\u4e00\u4e2a\u53ef\u5bfc\u822a\u7684\u6f14\u793a\u6587\u7a3f\uff08\u975e\u89c6\u9891\uff09\u3002<\/p>\n \u4f7f\u7528\u793a\u4f8b<\/p>\n \u4ee5\u4e0b\u662f\u4e00\u4e2a\u5178\u578b\u7684 AI \u4ee3\u7406\u63d0\u793a\u8bcd\uff1a<\/p>\n Using \/hyperframes , create a 10-second product intro with a fade-in title, a background video, and subtle background music.<\/p>\n \u4ee3\u7406\u5c06\u4f9d\u6b21\u6267\u884c\u89c4\u5212\u3001\u7f16\u5199 HTML\u3001\u6dfb\u52a0\u5a92\u4f53\u548c\u52a8\u753b\u3001\u68c0\u67e5\u3001\u9884\u89c8\u5e76\u6700\u7ec8\u6e32\u67d3\u3002<\/p>\n \u9009\u578b\u8bf4\u660e<\/p>\n \u6280\u80fd\u9009\u62e9\u6307\u5357<\/p>\n HyperFrames \u63d0\u4f9b\u4e86 19 \u4e2a\u6280\u80fd\uff0c\u6309\u9700\u52a0\u8f7d\u3002\u9996\u5148\u9605\u8bfb \/hyperframes \u8def\u7531\u6280\u80fd\uff0c\u5b83\u4f1a\u6839\u636e\u4f60\u7684\u9700\u6c42\u9009\u62e9\u5408\u9002\u7684\u5de5\u4f5c\u6d41\u3002\u4ee5\u4e0b\u662f\u5404\u6280\u80fd\u53ca\u5176\u9002\u7528\u573a\u666f\uff1a<\/p>\n \u8def\u7531\u6280\u80fd<\/p>\n \u6280\u80fd \/hyperframes \u521b\u4f5c\u5de5\u4f5c\u6d41<\/p>\n \u6280\u80fd \/product-launch-video \/faceless-explainer \/pr-to-video \/embedded-captions \/talking-head-recut \/motion-graphics \/music-to-video \/slideshow \/general-video \/remotion-to-hyperframes \u9886\u57df\u6280\u80fd\uff08\u6309\u9700\u52a0\u8f7d\uff09<\/p>\n \u6280\u80fd \/hyperframes-core \/hyperframes-animation \/hyperframes-keyframes \/hyperframes-creative \/media-use \/hyperframes-cli \/hyperframes-registry \/figma \u4e0e Remotion \u7684\u5bf9\u6bd4<\/p>\n HyperFrames \u53d7 Remotion \u542f\u53d1\uff0c\u4e24\u8005\u90fd\u4f7f\u7528\u65e0\u5934 Chrome \u548c FFmpeg \u6e32\u67d3\u89c6\u9891\u3002\u4e3b\u8981\u533a\u522b\u5728\u4e8e\u521b\u4f5c\u6a21\u578b\uff1a<\/p>\n \u7279\u6027 \u521b\u4f5c\u65b9\u5f0f \u6784\u5efa\u6b65\u9aa4 \u4ee3\u7406\u4ea4\u63a5 \u5e93\u65f6\u949f\u52a8\u753b \u5206\u5e03\u5f0f\u6e32\u67d3 \u8bb8\u53ef\u8bc1 \u6ce8\u610f\u4e8b\u9879<\/p>\n \u524d\u7f6e\u6761\u4ef6 \uff1a\u5982\u679c\u4f7f\u7528\u672c\u5730 CLI\uff0c\u9700\u8981\u5b89\u88c5 Node.js 22+ \u548c FFmpeg\u3002<\/p>\n AI \u4ee3\u7406 \uff1a\u6280\u80fd\u9700\u8981\u4e0e\u652f\u6301 skills \u7684 AI \u7f16\u7801\u4ee3\u7406\u914d\u5408\u4f7f\u7528\uff0c\u5982 Claude Code\u3001Cursor\u3001Gemini CLI\u3001Codex\u3002<\/p>\n \u786e\u5b9a\u6027 \uff1a\u6e32\u67d3\u7ed3\u679c\u7531\u8f93\u5165\u7cbe\u786e\u51b3\u5b9a\uff0c\u9002\u5408 CI\/CD \u548c\u56de\u5f52\u6d4b\u8bd5\u3002<\/p>\n \u5f00\u6e90 \uff1a\u57fa\u4e8e Apache 2.0 \u8bb8\u53ef\u8bc1\uff0c\u65e0\u6309\u6e32\u67d3\u6b21\u6570\u6536\u8d39\u6216\u5546\u4e1a\u4f7f\u7528\u95e8\u69db\u3002<\/p>\n \u9650\u5236 \uff1a \/slideshow \u5de5\u4f5c\u6d41\u8f93\u51fa\u7684\u662f\u53ef\u5bfc\u822a\u7684\u6f14\u793a\u6587\u7a3f\uff0c\u800c\u975e\u89c6\u9891\u6587\u4ef6\u3002<\/p>\n \u66f4\u591a\u8be6\u60c5\u8bf7\u53c2\u9605\u5b98\u65b9\u6587\u6863\uff1a hyperframes.heygen.com \u3002<\/p>\n \u4f5c\u8005\uff1aheygen-com \u00e8\u0087\u00aa\u00e5\u00aa\u0092\u00e4\u00bd\u0093\u00e4\u00ba\u00ba \/ \u00e5\u00bc\u0080\u00e5\u008f\u0091\u00e8\u0080 \uff5c GitHub Stars 38K \uff5c \u6807\u7b7e\uff1a\u89c6\u9891 \u81ea\u52a8\u5316 \u5df2\u8ba4\u8bc1 \u5f00\u6e90\u8bb8\u53ef: Apache<\/p>\n\u8be6\u7ec6\u4ecb\u7ecd<\/h2>\n
\u72b6\u6001
\u8bf4\u660e<\/p>\n
\u53ef\u7528
\u521d\u59cb\u5316\u3001\u9884\u89c8\u3001\u68c0\u67e5\u3001\u6e32\u67d3\u672c\u5730\u89c6\u9891\u9879\u76ee<\/p>\n
\u53ef\u7528
\u89e3\u6790\u5408\u6210\u3001\u9a71\u52a8\u65e0\u5934 Chrome\u3001\u7f16\u7801\u89c6\u9891\u3001\u6df7\u97f3<\/p>\n
\u53ef\u7528
\u53ef\u590d\u7528\u7684\u533a\u5757\u548c\u7ec4\u4ef6\uff0c\u7528\u4e8e\u8fc7\u6e21\u3001\u53e0\u52a0\u5c42\u3001\u5b57\u5e55\u3001\u56fe\u8868\u3001\u5730\u56fe\u548c\u7279\u6548<\/p>\n
\u53ef\u7528
\u6559\u4f1a AI \u7f16\u7801\u4ee3\u7406\u89c6\u9891\u751f\u4ea7\u7684\u6a21\u5f0f<\/p>\n
\u53ef\u7528\uff0c\u6301\u7eed\u6f14\u8fdb
\u7528\u4e8e\u9884\u89c8\u548c\u7f16\u8f91\u5408\u6210\u7684\u6d4f\u89c8\u5668\u754c\u9762<\/p>\n
\u53ef\u7528
\u90e8\u7f72\u5206\u5e03\u5f0f\u6e32\u67d3\u6808\uff0c\u4ece\u672c\u5730\u6216 CI \u9a71\u52a8\u6e32\u67d3<\/p>\n
\u53ef\u7528
\u793e\u533a\u5728\u7ebf\u8bd5\u9a8c\u573a\uff0c\u7528\u4e8e\u9884\u89c8\u3001\u8fed\u4ee3\u3001\u5206\u4eab\u548c\u6e32\u67d3 HTML \u539f\u751f\u89c6\u9891\u9879\u76ee<\/p>\n
\u53ef\u7528
\u5c06\u4f60\u7684\u8bbe\u8ba1\u7cfb\u7edf\u5012\u7f6e\u4e3a\u955c\u5934\u670d\u52a1\u7684\u683c\u5f0f\u2014\u2014\u4e00\u4e2a AI \u4ee3\u7406\u53ef\u4ee5\u4ece\u4e2d\u521b\u4f5c\u89c6\u9891\u7684 DESIGN.md \u8d85\u96c6<\/p>\n
<video
class="clip"
data-start="0"
data-duration="6"
data-track-index="0"
src="intro.mp4"
muted
playsinline
><\/video><\/p>\n
data-start="0"
data-duration="6"
data-track-index="2"
data-volume="0.5"
src="music.wav"
><\/audio><\/p>\n
<script>
const tl = gsap.timeline({ paused: true });
tl.from("#title", { opacity: 0, y: 40, duration: 0.8 }, 1);
window.__timelines = window.__timelines || {};
window.__timelines.launch = tl;
<\/script>
<\/div><\/p>\n
npx hyperframes render # \u6e32\u67d3\u4e3a MP4<\/p>\n
\u4f7f\u7528\u573a\u666f<\/p>\n
\u4efb\u4f55\u5236\u4f5c\/\u521b\u5efa\/\u7f16\u8f91\/\u52a8\u753b\/\u6e32\u67d3\u89c6\u9891\u3001\u52a8\u753b\u6216\u52a8\u6001\u56fe\u5f62\u7684\u8bf7\u6c42\u3002\u5148\u8bfb\u6b64\u6280\u80fd\uff0c\u5b83\u662f\u80fd\u529b\u5730\u56fe\u548c\u610f\u56fe\u8def\u7531\u5668\uff0c\u4f1a\u786e\u8ba4\u521b\u4f5c\u9700\u6c42\u5e76\u5206\u914d\u5de5\u4f5c\u6d41\u3002<\/p>\n
\u4f7f\u7528\u573a\u666f<\/p>\n
\u4efb\u4f55\u7f51\u7ad9\u2014\u2014\u8425\u9500\/\u53d1\u5e03\/\u63a8\u5e7f\u4ea7\u54c1\uff08\u4ece URL\u3001\u6458\u8981\u6216\u811a\u672c\uff09\uff0c\u6216\u7f51\u7ad9\u5bfc\u89c8\/\u5c55\u793a\/\u793e\u4ea4\u7247\u6bb5\uff0c\u4f7f\u7528\u7f51\u7ad9\u81ea\u8eab\u7d20\u6750\u3002\u6700\u957f\u7ea6 3 \u5206\u949f\uff0c\u6700\u4f73 30\u201390 \u79d2\u3002<\/p>\n
\u89e3\u91ca\u4efb\u610f\u6587\u672c\u4e2d\u7684\u4e3b\u9898\/\u6982\u5ff5\u2014\u2014\u65e0\u4ea7\u54c1\u3001\u65e0 URL\u3001\u65e0\u7f51\u7ad9\u6293\u53d6\uff1b\u6240\u6709\u89c6\u89c9\u7531 LLM \u751f\u6210\uff08\u6392\u7248\/\u62bd\u8c61\/\u56fe\u8868\/\u6570\u636e\u53ef\u89c6\u5316\uff09\u3002<\/p>\n
GitHub PR\uff08PR URL\u3001 owner\/repo#N \u5f15\u7528\u6216\u201c\u8fd9\u4e2a PR\u201d\uff09\u2192 \u53d8\u66f4\u65e5\u5fd7\/\u529f\u80fd\u63ed\u793a\/\u4fee\u590d\/\u91cd\u6784\u8bb2\u89e3\uff0c\u901a\u8fc7 gh CLI \u8bfb\u53d6\u3002<\/p>\n
\u4e3a\u5df2\u6709\u7684\u4eba\u7269\u8bb2\u89e3\u89c6\u9891\u6dfb\u52a0\u5b57\u5e55\/\u526f\u6807\u9898\uff08\u539f\u89c6\u9891\u4e0d\u53d8\uff09\u2014\u2014\u9010\u5b57\u5bfc\u8f68\u3001\u5d4c\u5165\u4e3b\u4f53\u80cc\u540e\u7684\u9ad8\u6f6e\u573a\u666f\uff0c\u6216\u7eaf\u7535\u5f71\u5f0f\u5d4c\u5165\u3002<\/p>\n
\u4e3a\u5df2\u6709\u7684\u4eba\u7269\u8bb2\u89e3\/\u8bbf\u8c08\/\u64ad\u5ba2\u89c6\u9891\u5305\u88c5\u8bbe\u8ba1\u597d\u7684\u56fe\u5f62\u53e0\u52a0\u5c42\u2014\u2014\u4e0b\u4e09\u5206\u4e4b\u4e00\u3001\u6570\u636e\u6807\u6ce8\u3001\u52a8\u6001\u6807\u9898\u3001\u5f15\u7528\u3001\u4fa7\u8fb9\u680f\u3001\u753b\u4e2d\u753b\u3002<\/p>\n
\u77ed\u5c0f\u7684\u3001\u65e0\u65c1\u767d\u7684\u3001\u8bbe\u8ba1\u9a71\u52a8\u7684\u52a8\u6001\u56fe\u5f62\uff08\u7ea6 10 \u79d2\u4ee5\u4e0b\uff09\u2014\u2014\u52a8\u6001\u6587\u5b57\u3001\u7edf\u8ba1\/\u56fe\u8868\u51b2\u51fb\u3001Logo \u7247\u5934\u3001\u4e0b\u4e09\u5206\u4e4b\u4e00\u3001\u52a8\u753b\u63a8\u6587\/\u6807\u9898\u3002\u8f93\u51fa MP4 \u6216\u900f\u660e\u53e0\u52a0\u5c42\u3002<\/p>\n
\u4e00\u9996\u97f3\u4e50\u66f2\u76ee\uff08\u97f3\u9891\u6587\u4ef6\uff0c\u6216\u4ece\u89c6\u9891\u4e2d\u63d0\u53d6\u97f3\u9891\uff0c\u6216\u6839\u636e\u60c5\u7eea\u6458\u8981\u751f\u6210\uff09\u2192 \u8282\u62cd\u540c\u6b65\u7684\u89c6\u9891\u2014\u2014\u6b4c\u8bcd\u3001\u5e7b\u706f\u7247\u6216\u52a8\u6001\u4fc3\u9500\uff1b\u97f3\u4e50\u9a71\u52a8\u8282\u594f\u3002<\/p>\n
\u6f14\u793a\u6587\u7a3f\/\u63a8\u4ecb deck\/\u4ea4\u4e92\u5f0f deck\u2014\u2014\u79bb\u6563\u5e7b\u706f\u7247\u3001\u7247\u6bb5\u63ed\u793a\u3001\u5206\u652f\u3001\u70ed\u70b9\u5bfc\u822a\u3001\u6f14\u793a\u6a21\u5f0f\u3002\u8f93\u51fa\u662f\u53ef\u5bfc\u822a\u7684 deck\uff0c\u4e0d\u662f\u6e32\u67d3\u89c6\u9891\u3002<\/p>\n
\u5176\u4ed6\u6240\u6709\u60c5\u51b5\u2014\u2014\u8f83\u957f\u6216\u591a\u573a\u666f\u4f5c\u54c1\u3001\u54c1\u724c\/\u5ba3\u4f20\u7247\u3001\u6807\u9898\u5361\u3001\u9759\u6001\u5faa\u73af\u3001\u81ea\u7531\u7ec4\u5408\u3002\u8f93\u5165\u548c\u957f\u5ea6\u65e0\u5173\u7684\u901a\u7528\u5de5\u4f5c\u6d41\uff0c\u4e5f\u662f\u534f\u4f5c\u6a21\u5f0f\uff08\u5b8c\u6574\u5de5\u5177\u7bb1\u5171\u521b\uff09\u7684\u6240\u5728\u5730\u3002<\/p>\n
\u5c06\u73b0\u6709\u7684 Remotion\uff08React\uff09\u5408\u6210\u6e90\u7801\u79fb\u690d\u5230 HyperFrames HTML\u3002\u5355\u5411\u8fc1\u79fb\uff0c\u800c\u975e\u521b\u4f5c\u3002<\/p>\n
\u8986\u76d6\u8303\u56f4<\/p>\n
\u5408\u6210\u5408\u7ea6\u2014\u2014 data-* \u65f6\u95f4\u5c5e\u6027\u3001 class="clip" \u3001\u8f68\u9053\u3001\u5b50\u5408\u6210\u3001\u53d8\u91cf\u3001\u6846\u67b6\u62e5\u6709\u7684\u5a92\u4f53\u64ad\u653e\u3001\u786e\u5b9a\u6027\u89c4\u5219\u3002<\/p>\n
\u6240\u6709\u52a8\u753b\u77e5\u8bc6\u2014\u2014\u539f\u5b50\u8fd0\u52a8\u89c4\u5219\u3001\u573a\u666f\u84dd\u56fe\u3001\u8fc7\u6e21\u3001\u8fd0\u884c\u65f6\u9002\u914d\u5668\uff08GSAP \/ Lottie \/ Three.js \/ Anime.js \/ CSS \/ WAAPI \/ TypeGPU\uff09\u3002<\/p>\n
\u8de8\u8fd0\u884c\u65f6\u7684\u53ef\u5bfb\u5740\u5173\u952e\u5e27\u7f16\u5199\u2014\u2014GSAP \u65f6\u95f4\u7ebf\u3001CSS \u5173\u952e\u5e27\u3001Anime.js\u3001WAAPI\u3001FLIP\u3001\u8def\u5f84\u3001\u8499\u7248\u3001SVG \u53d8\u5f62\/\u7ed8\u5236\u30013D \u6df1\u5ea6\u2014\u2014\u4ee5\u53ca hyperframes keyframes \u8bca\u65ad\u5de5\u5177\u7528\u4e8e\u6e32\u67d3\u540e\u7684\u8fd0\u52a8\u68c0\u67e5\u3002<\/p>\n
\u975e\u52a8\u753b\u7684\u521b\u610f\u65b9\u5411\u2014\u2014 frame.md \/ design.md \u3001\u8c03\u8272\u677f\u3001\u6392\u7248\u3001\u65c1\u767d\u3001\u8282\u62cd\u89c4\u5212\u3001\u97f3\u9891\u54cd\u5e94\u5f0f\u89c6\u89c9\u3001\u5408\u6210\u6a21\u5f0f\u3002<\/p>\n
\u5a92\u4f53\u64cd\u4f5c\u7cfb\u7edf\u2014\u2014\u5c06\u4efb\u4f55\u5a92\u4f53\u9700\u6c42\uff08\u80cc\u666f\u97f3\u4e50\u3001\u97f3\u6548\u3001\u56fe\u7247\u3001\u56fe\u6807\u3001Logo\u3001\u8bed\u97f3\u3001\u8c03\u8272\u3001LUT\uff09\u89e3\u6790\u4e3a\u51bb\u7ed3\u7684\u672c\u5730\u6587\u4ef6\u6216\u53ef\u7c98\u8d34\u533a\u5757 + \u53f0\u8d26\u8bb0\u5f55\uff1b\u5f53\u76ee\u5f55\u627e\u4e0d\u5230\u65f6\u901a\u8fc7 TTS\/\u97f3\u4e50\/\u56fe\u50cf\u6a21\u578b\u751f\u6210\uff1b\u8f6c\u5f55\u3001\u52a0\u5b57\u5e55\u3001\u53bb\u80cc\u666f\uff0c\u8de8\u9879\u76ee\u590d\u7528\u8d44\u4ea7\u3002\u7edf\u4e00\u97f3\u9891\u5f15\u64ce + \u6e05\u5355\u8ffd\u8e2a\u3002<\/p>\n
CLI \u5f00\u53d1\u5faa\u73af\u2014\u2014 init \u3001 lint \u3001 check \u3001 snapshot \u3001 preview \u3001 render \u3001 publish \u3001 doctor \uff0c\u4ee5\u53ca HeyGen \u6258\u7ba1\u7684\u4e91\u6e32\u67d3\uff08 cloud render \uff09\u548c AWS Lambda \u6e32\u67d3\uff08 lambda deploy \/ render \/ progress \uff09\u3002<\/p>\n
\u901a\u8fc7 hyperframes add \u5b89\u88c5\u548c\u8fde\u63a5\u6ce8\u518c\u8868\u533a\u5757\u548c\u7ec4\u4ef6\u5230\u5408\u6210\u4e2d\u3002\u521b\u4f5c\u65b0\u533a\u5757\u6216\u7ec4\u4ef6\u4ee5\u5411\u4e0a\u6e38\u8d21\u732e\u3002<\/p>\n
\u5bfc\u5165 Figma \u8d44\u6e90\u3001\u4ee4\u724c\u3001\u7ec4\u4ef6\u548c\u6545\u4e8b\u677f\u90e8\u5206\u2192\u91cd\u6784\u4e3a\u8fd0\u52a8\uff08\u5e27\u4f5c\u4e3a\u72b6\u6001\u8bfb\u53d6\uff0c\u800c\u975e\u5e7b\u706f\u7247\uff09\uff08REST\/CLI\uff09\u4ee5\u53ca Motion \u52a8\u753b\uff08MCP\uff09\u548c\u7740\u8272\u5668\uff08MCP \u6e90\/\u539f\u751f\u5bfc\u51fa\uff09\u5230\u5408\u6210\u4e2d\u3002<\/p>\n
HyperFrames
Remotion<\/p>\n
HTML + CSS + \u53ef\u5bfb\u5740\u52a8\u753b
React \u7ec4\u4ef6<\/p>\n
\u65e0\u9700\uff0c index.html \u53ef\u76f4\u63a5\u64ad\u653e
\u9700\u8981\u6253\u5305\u5668<\/p>\n
\u7eaf HTML \u6587\u4ef6
JSX \/ React \u9879\u76ee<\/p>\n
\u901a\u8fc7\u9002\u914d\u5668\u5b9e\u73b0\u53ef\u5bfb\u5740\u3001\u5e27\u7cbe\u786e
\u9700\u8981\u5c0f\u5fc3\u5904\u7406\u65f6\u949f\u52a8\u753b\u6a21\u5f0f<\/p>\n
\u672c\u5730\u548c AWS Lambda \u6e32\u67d3\u8def\u5f84
Remotion Lambda\uff0c\u6210\u719f\u7684\u4e91\u6e32\u67d3\u5668<\/p>\n
Apache 2.0
\u6e90\u7801\u53ef\u7528 Remotion \u8bb8\u53ef\u8bc1<\/p>\n\u8bd5\u8bd5\u8fd9\u6837\u505a<\/h2>\n
\n
\n