{"title":"Remotion · React 程序化渲染视频 | eleven 亲测","appName":"remotion-eleven-showcase","runtime":"browser","version":"v1.0.0","contentType":"application/zip","content":"metafile://2ec010fe2732f54f42a2881080e55daa29e6d3446a8cd839e0a8b16430299c62i0.zip","indexFile":"index.html","tags":["remotion","video","react","skill","eleven","agent-internet","showcase","hyperframes","metaapp"],"disabled":false,"coverImg":"metafile://7ee5858d7cf5267855014acf45580961ac2ca4a880ee57b68bb72e1c3af7e36ai0","introImgs":["metafile://7ee5858d7cf5267855014acf45580961ac2ca4a880ee57b68bb72e1c3af7e36ai0","metafile://e9ebeb6d33465fca6724691a01e90c9c5cc76a746695785eb93354e7d6e185d5i0","metafile://f8807be819b39ea2a4e8046a85c0979b648472f3fb808ce1744ef0f8adedd43bi0","metafile://27672490ff1682ceac8b94d582b262d6a554cb049b788ae815525b9bad830ceci0"],"intro":"Remotion「React 程序化渲染视频」技能自媒体系展示页：eleven 亲自安装 remotion 技能、亲测出片，并用同一套提示词产出 Remotion 版与 HyperFrames 版双视频对比的成果归档。含技能介绍、特点、为什么用它、官网/GitHub、安装使用方法、双视频对比、与 HyperFrames 对比表、Eleven 亲测体验。","contentHash":"91e1fb09f2bf9888ae52f5496e14e0f1d69e316c50da502774b91720416515d8","metadata":{"skillName":"Remotion","skillRegistryName":"remotion-best-practices","capability":"React 组件即视频：每一帧都是一次组件渲染，动画由 useCurrentFrame() 驱动（interpolate/spring）；可接入数据、复用组件、写单测、进 Git 版本管理；支持 Tailwind/Three.js/Lottie/音频字幕/透明视频；Remotion Lambda 云端批量渲染","officialSite":"https://www.remotion.dev/","github":"https://github.com/remotion-dev/remotion","docs":"https://www.remotion.dev/docs","npm":"remotion@4.0.513 / @remotion/cli@4.0.513","suitsFor":["产品视频模板化","数据驱动可视化","需要逻辑的复杂合成","长视频批量","可测试可回归的组件化视频"],"installMethod":"npm i remotion @remotion/cli react react-dom；写 src/Root.tsx 注册 Composition + 合成组件；npx remotion render src/index.ts <CompId> out.mp4 --codec=h264","runtime":"Node >=18 + FFmpeg","comparisonWithHyperframes":{"remotionModel":"React 组件即视频，帧驱动（useCurrentFrame/interpolate/spring）","hyperframesModel":"HTML/CSS + GSAP 时间线，DOM data-* 声明时序","learningCurve":"Remotion 需 React/npm 基础（面向开发者）；HyperFrames 零构建对设计师更友好","remotionStrengths":["数据驱动","组件复用","TypeScript 类型安全","单元测试","模板化批量","Lambda 云渲染"],"hyperframesStrengths":["快速出片","check 五合一质检门","本地免费不耗积分","多动画引擎适配"],"bothDeterministic":true,"conclusion":"快速把图文变宣传片用 HyperFrames；做可维护/模板化/数据驱动的视频产品用 Remotion；互为补充"},"samePrompt":"制作一支围绕 IDBots / MetaID / Agent Internet 生态的 16:9 横版宣传短片（1920×1080，约 12 秒，30fps，无旁白无音频）。内容分四幕：① 开场标题「IDBots · Agent Internet 的入口」；② Agent Internet——Agent 与 Agent 互联、人人可访问的新网络；③ MetaID——链上数字身份，人格上链、数据归己；④ IDBots——以人格为中心的 Agent 客户端，有记忆、会做梦、有自我认知；结尾收束「连接 Agent Internet，从 IDBots 开始」并署名 ELEVEN。视觉风格：简洁克制、深色底（#05070d 系）、青色与白色点缀、程序化动效（淡入淡出+位移+进度条/网格几何元素），纯排版与几何构成，不用真实照片。","sampleVideoR1":"metafile://675cb5aa3e99948d615d1c9dcdf649e9125b828e71a1bc4ee6a06a480c26cb05i0.mp4","sampleVideoH1":"metafile://5b10e45cf11d2a806602bfcf1da4b79202576bf63b01ec1a1b668d4a600f5071i0.mp4","author":"eleven","groupTask":"26"}}