{"id":8732,"date":"2026-06-02T18:18:38","date_gmt":"2026-06-02T10:18:38","guid":{"rendered":"https:\/\/infernews.com\/blog\/?page_id=8732"},"modified":"2026-06-03T18:21:37","modified_gmt":"2026-06-03T10:21:37","slug":"remotion","status":"publish","type":"page","link":"https:\/\/infernews.com\/blog\/remotion\/","title":{"rendered":"Remotion"},"content":{"rendered":"<div class=\"vlp-link-container vlp-layout-spotlight-clone block-editor-block-list__block wp-block wp-block-visual-link-preview-link\"><a href=\"https:\/\/remotionlab.com\/tutorials\/kinetic-typography-presets\" class=\"vlp-link\" title=\"Kinetic Typography\uff1a10 \u7a2e\u6587\u5b57\u52d5\u756b Preset \u4e00\u6b21\u505a\u5230\u6703\" rel=\"nofollow noopener\" target=\"_blank\"><\/a><div class=\"vlp-layout-zone-main\"><span class=\"vlp-block-0 vlp-link-title\">Kinetic Typography\uff1a10 \u7a2e\u6587\u5b57\u52d5\u756b Preset \u4e00\u6b21\u505a\u5230\u6703<\/span><div class=\"vlp-block-1 vlp-link-summary\">\u7528\u7d14 React + interpolate + spring \u523b 10 \u7a2e\u6587\u5b57\u9032\u9000\u5834\u52d5\u756b\u3002Typewriter\u3001Scramble\u3001Word Stagger\u30013D Rotate\u3001Liquid Mask\u3001Explode\u3001RGB Glitch\u3001Elastic Pop\u3001Wave\u3001Morph \u2014 \u6bcf\u500b\u90fd\u662f 40 \u884c\u4ee5\u5167\u7684\u7368\u7acb preset\u3002<\/div><div class=\"vlp-block-2 vlp-link-image\"><\/div><\/div><\/div>\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-4-3 wp-has-aspect-ratio\"><div class=\"lyte-wrapper\" title=\"Remotion &times; AI Agent\uff1a\u7528 React \u8207 AI \u7a0b\u5f0f\u5316\u88fd\u4f5c\u5f71\u7247\u7684\u5b8c\u6574\u5be6\u6230\u6559\u5b78 #ai #ai\u61c9\u7528\" style=\"width:853px;max-width:100%;margin:5px auto;\"><div class=\"lyMe\" id=\"WYL_H2Sa1b2YD4E\" itemprop=\"video\" itemscope itemtype=\"https:\/\/schema.org\/VideoObject\"><div><meta itemprop=\"thumbnailUrl\" content=\"https:\/\/infernews.com\/blog\/wp-content\/plugins\/wp-youtube-lyte\/lyteCache.php?origThumbUrl=https%3A%2F%2Fi.ytimg.com%2Fvi%2FH2Sa1b2YD4E%2Fhqdefault.jpg\" \/><meta itemprop=\"embedURL\" content=\"https:\/\/www.youtube.com\/embed\/H2Sa1b2YD4E\" \/><meta itemprop=\"duration\" content=\"PT9M49S\" \/><meta itemprop=\"uploadDate\" content=\"2026-01-23T14:10:44Z\" \/><\/div><meta itemprop=\"accessibilityFeature\" content=\"captions\" \/><div id=\"lyte_H2Sa1b2YD4E\" data-src=\"https:\/\/infernews.com\/blog\/wp-content\/plugins\/wp-youtube-lyte\/lyteCache.php?origThumbUrl=https%3A%2F%2Fi.ytimg.com%2Fvi%2FH2Sa1b2YD4E%2Fhqdefault.jpg\" class=\"pL\"><div class=\"tC\"><div class=\"tT\" itemprop=\"name\">Remotion \u00d7 AI Agent\uff1a\u7528 React \u8207 AI \u7a0b\u5f0f\u5316\u88fd\u4f5c\u5f71\u7247\u7684\u5b8c\u6574\u5be6\u6230\u6559\u5b78 #ai #ai\u61c9\u7528<\/div><\/div><div class=\"play\"><\/div><div class=\"ctrl\"><div class=\"Lctrl\"><\/div><div class=\"Rctrl\"><\/div><\/div><\/div><noscript><a href=\"https:\/\/youtu.be\/H2Sa1b2YD4E\" rel=\"nofollow noopener\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/infernews.com\/blog\/wp-content\/plugins\/wp-youtube-lyte\/lyteCache.php?origThumbUrl=https%3A%2F%2Fi.ytimg.com%2Fvi%2FH2Sa1b2YD4E%2F0.jpg\" alt=\"Remotion &times; AI Agent\uff1a\u7528 React \u8207 AI \u7a0b\u5f0f\u5316\u88fd\u4f5c\u5f71\u7247\u7684\u5b8c\u6574\u5be6\u6230\u6559\u5b78 #ai #ai\u61c9\u7528\" width=\"853\" height=\"460\" \/><br \/>Watch this video on YouTube<\/a><\/noscript><meta itemprop=\"description\" content=\"\u8acb\u53c3\u8003\u90e8\u843d\u683c\u6587\u7ae0\u5167\u5bb9 https:\/\/blog.es2idea.com\/posts\/remotion-ai-agent-react-video-tutorial\/ --- Remotion\u5b98\u7db2 https:\/\/www.remotion.dev\/ npx create-video@latest npx skills add remotion-dev\/skills Get started by running: - cd my-video2 - npm i - npm run dev To render a video, run: - npx remotion render --- \ud83d\udccd \u5f71\u7247\u6642\u9593\u8ef8 00:00 \u5f71\u7247\u958b\u5834\uff1a\u4ecb\u7d39\u53ef\u4ee5\u7528 AI \u5beb\u7a0b\u5f0f\u4f86\u7522\u751f\u5f71\u7247\u7684\u795e\u5947\u5de5\u5177\u300cRemotion\u300d 01:18 \u524d\u5f80 Remotion \u5b98\u7db2\uff0c\u8907\u88fd\u5efa\u7acb\u5c08\u6848\u7684\u6307\u4ee4 (npx create-video@latest) 01:43 \u5728\u7d42\u7aef\u6a5f\u57f7\u884c\u6307\u4ee4\uff0c\u9078\u64c7\u7a7a\u767d\u6a21\u677f (Blank) \u4e26\u7279\u5225\u5f37\u8abf\u8981\u52fe\u9078\u52a0\u5165\u300cAgent skills\u300d 02:31 \u4f7f\u7528\u7a0b\u5f0f\u78bc\u7de8\u8f2f\u5668 (\u5f71\u7247\u4e2d\u4f7f\u7528 Antigravity) \u6253\u958b\u5c08\u6848\uff0c\u5b89\u88dd\u5957\u4ef6 (npm i) \u4e26\u555f\u52d5\u958b\u767c\u4f3a\u670d\u5668 (npm run dev) \u4f86\u9810\u89bd\u756b\u9762 04:00 \u4ecb\u7d39\u7de8\u8f2f\u5668\u53f3\u5074\u7684 AI \u52a9\u7406\u4ecb\u9762\uff0c\u4e26\u8aaa\u660e SKILL.md \u6a94\u6848\u5982\u4f55\u63d0\u4f9b AI \u7522\u751f Remotion \u5f71\u7247\u7684\u898f\u5247 04:46 \u7c21\u55ae\u89e3\u8aaa Root.tsx \u6a94\u6848\u4e2d\u7684\u5f71\u7247\u57fa\u672c\u8a2d\u5b9a (\u5982 fps\u3001\u9577\u5ea6\u3001\u89e3\u6790\u5ea6) 05:28 \u5be6\u6e2c\u6f14\u793a\uff1a\u5411 AI \u4e0b\u9054 Prompt\uff0c\u8981\u6c42\u300c\u88fd\u4f5c\u4e00\u652f 10 \u79d2\u4ecb\u7d39 n8n \u7684\u9177\u70ab\u77ed\u5f71\u7247\u300d 06:00 AI \u958b\u59cb\u81ea\u52d5\u898f\u5283\u67b6\u69cb\u4e26\u64b0\u5beb\u52d5\u756b\u7a0b\u5f0f\u78bc (\u6b64\u6bb5\u5f71\u7247\u7d93 10 \u500d\u901f\u5feb\u8f49\u8655\u7406) 07:27 AI \u958b\u767c\u5b8c\u6210\uff0c\u57f7\u884c\u7b97\u5716\u6307\u4ee4 (npx remotion render ...) \u8f38\u51fa\u6700\u7d42\u7684 MP4 \u5f71\u7247\u6a94\u6848 08:12 \u64ad\u653e\u7531 AI \u5b8c\u5168\u81ea\u52d5\u751f\u6210\u7684 n8n \u4ecb\u7d39\u77ed\u7247\uff0c\u4e26\u7e3d\u7d50\u6b64\u7a0b\u5f0f\u5316\u5f71\u7247\u88fd\u4f5c\u6d41\u7a0b\u7684\u672a\u4f86\u6f5b\u529b --- \u3010 \u6578\u4f4d\u8f49\u578b\uff0c\u9080\u4f60\u540c\u884c \u3011 \u5982\u9700\u4f01\u696d\u6578\u4f4d\u8f49\u578b\u8f14\u5c0e\u3001\u5167\u8a13\u8ab2\u7a0b\u6216\u4e3b\u984c\u6f14\u8b1b\u9080\u7d04\u3002 \u8acb\u4f86\u4fe1\u8aaa\u660e\u8cb4\u55ae\u4f4d\u80cc\u666f\u3001\u9700\u6c42\u76ee\u6a19\u8207\u53ef\u806f\u7d61\u6642\u6bb5\uff0c\u5c07\u5118\u901f\u56de\u8986\u5b89\u6392\u3002 \u90e8\u843d\u683c\u6587\u7ae0\uff1ahttps:\/\/blog.es2idea.com\/ Email\uff1aseanhsu1313@gmail.com\"><\/div><\/div><div class=\"lL\" style=\"max-width:100%;width:853px;margin:5px auto;\"><\/div><figcaption><\/figcaption><\/figure>\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ai_generated_summary":"","footnotes":""},"class_list":["post-8732","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/infernews.com\/blog\/wp-json\/wp\/v2\/pages\/8732","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/infernews.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/infernews.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/infernews.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/infernews.com\/blog\/wp-json\/wp\/v2\/comments?post=8732"}],"version-history":[{"count":3,"href":"https:\/\/infernews.com\/blog\/wp-json\/wp\/v2\/pages\/8732\/revisions"}],"predecessor-version":[{"id":8752,"href":"https:\/\/infernews.com\/blog\/wp-json\/wp\/v2\/pages\/8732\/revisions\/8752"}],"wp:attachment":[{"href":"https:\/\/infernews.com\/blog\/wp-json\/wp\/v2\/media?parent=8732"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}