[{"data":1,"prerenderedAt":1326},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Fhyperframes-vs-remotion":686,"\u002Fguides\u002Fhyperframes-vs-remotion-surround":1321},[4,31,57,147,168,198,652],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":30},"快速入门","i-lucide-rocket","\u002Fgetting-started","01.getting-started",[10,14,18,22,26],{"title":11,"path":12,"stem":13},"简介","\u002Fgetting-started\u002Fintroduction","01.getting-started\u002F01.introduction",{"title":15,"path":16,"stem":17},"快速开始","\u002Fgetting-started\u002Fquickstart","01.getting-started\u002F02.quickstart",{"title":19,"path":20,"stem":21},"展示作品","\u002Fgetting-started\u002Fshowcase","01.getting-started\u002F03.showcase",{"title":23,"path":24,"stem":25},"示例","\u002Fgetting-started\u002Fexamples","01.getting-started\u002F04.examples",{"title":27,"path":28,"stem":29},"发布视频","\u002Fgetting-started\u002Flaunch-videos","01.getting-started\u002F05.launch-videos",false,{"title":32,"icon":33,"path":34,"stem":35,"children":36,"page":30},"核心概念","i-lucide-lightbulb","\u002Fconcepts","02.concepts",[37,41,45,49,53],{"title":38,"path":39,"stem":40},"合成","\u002Fconcepts\u002Fcompositions","02.concepts\u002F01.compositions",{"title":42,"path":43,"stem":44},"数据属性","\u002Fconcepts\u002Fdata-attributes","02.concepts\u002F02.data-attributes",{"title":46,"path":47,"stem":48},"变量","\u002Fconcepts\u002Fvariables","02.concepts\u002F03.variables",{"title":50,"path":51,"stem":52},"帧适配器","\u002Fconcepts\u002Fframe-adapters","02.concepts\u002F04.frame-adapters",{"title":54,"path":55,"stem":56},"确定性渲染","\u002Fconcepts\u002Fdeterminism","02.concepts\u002F05.determinism",{"title":58,"icon":59,"path":60,"stem":61,"children":62,"page":30},"使用指南","i-lucide-compass","\u002Fguides","03.guides",[63,67,71,75,79,83,87,91,95,99,103,107,111,115,119,123,127,131,135,139,143],{"title":64,"path":65,"stem":66},"工作流水线","\u002Fguides\u002Fpipeline","03.guides\u002F01.pipeline",{"title":68,"path":69,"stem":70},"HTML-in-Canvas","\u002Fguides\u002Fhtml-in-canvas","03.guides\u002F02.html-in-canvas",{"title":72,"path":73,"stem":74},"网站转视频","\u002Fguides\u002Fwebsite-to-video","03.guides\u002F03.website-to-video",{"title":76,"path":77,"stem":78},"Google Antigravity","\u002Fguides\u002Fantigravity","03.guides\u002F04.antigravity",{"title":80,"path":81,"stem":82},"GitHub Copilot CLI","\u002Fguides\u002Fcopilot-cli","03.guides\u002F05.copilot-cli",{"title":84,"path":85,"stem":86},"Claude Design","\u002Fguides\u002Fclaude-design","03.guides\u002F06.claude-design",{"title":88,"path":89,"stem":90},"Open Design","\u002Fguides\u002Fopen-design","03.guides\u002F07.open-design",{"title":92,"path":93,"stem":94},"提示词指南","\u002Fguides\u002Fprompting","03.guides\u002F08.prompting",{"title":96,"path":97,"stem":98},"Hyperframes vs Remotion","\u002Fguides\u002Fhyperframes-vs-remotion","03.guides\u002F09.hyperframes-vs-remotion",{"title":100,"path":101,"stem":102},"GSAP 动画","\u002Fguides\u002Fgsap-animation","03.guides\u002F10.gsap-animation",{"title":104,"path":105,"stem":106},"渲染","\u002Fguides\u002Frendering","03.guides\u002F11.rendering",{"title":108,"path":109,"stem":110},"去除背景（透明视频）","\u002Fguides\u002Fremove-background","03.guides\u002F12.remove-background",{"title":112,"path":113,"stem":114},"HDR 渲染","\u002Fguides\u002Fhdr","03.guides\u002F13.hdr",{"title":116,"path":117,"stem":118},"4K 渲染","\u002Fguides\u002F4k-rendering","03.guides\u002F14.4k-rendering",{"title":120,"path":121,"stem":122},"性能","\u002Fguides\u002Fperformance","03.guides\u002F15.performance",{"title":124,"path":125,"stem":126},"时间轴编辑","\u002Fguides\u002Ftimeline-editing","03.guides\u002F16.timeline-editing",{"title":128,"path":129,"stem":130},"视频编辑者速查表","\u002Fguides\u002Fvideo-editor-cheatsheet","03.guides\u002F17.video-editor-cheatsheet",{"title":132,"path":133,"stem":134},"常见错误","\u002Fguides\u002Fcommon-mistakes","03.guides\u002F18.common-mistakes",{"title":136,"path":137,"stem":138},"故障排除","\u002Fguides\u002Ftroubleshooting","03.guides\u002F19.troubleshooting",{"title":140,"path":141,"stem":142},"反馈收集","\u002Fguides\u002Ffeedback","03.guides\u002F20.feedback",{"title":144,"path":145,"stem":146},"HyperFrames MCP","\u002Fguides\u002Fmcp","03.guides\u002F21.mcp",{"title":148,"icon":149,"path":150,"stem":151,"children":152,"page":30},"部署","i-lucide-cloud","\u002Fdeploy","04.deploy",[153,156,160,164],{"title":148,"path":154,"stem":155},"\u002Fdeploy\u002Fdeploy","04.deploy\u002F01.deploy",{"title":157,"path":158,"stem":159},"AWS Lambda","\u002Fdeploy\u002Faws-lambda","04.deploy\u002F02.aws-lambda",{"title":161,"path":162,"stem":163},"Lambda 上的模板","\u002Fdeploy\u002Ftemplates-on-lambda","04.deploy\u002F03.templates-on-lambda",{"title":165,"path":166,"stem":167},"迁移到 HyperFrames Lambda","\u002Fdeploy\u002Fmigrating-to-hyperframes-lambda","04.deploy\u002F04.migrating-to-hyperframes-lambda",{"title":169,"icon":170,"path":171,"stem":172,"children":173,"page":30},"包","i-lucide-package","\u002Fpackages","05.packages",[174,178,182,186,190,194],{"title":175,"path":176,"stem":177},"@hyperframes\u002Fcore","\u002Fpackages\u002Fcore","05.packages\u002F01.core",{"title":179,"path":180,"stem":181},"@hyperframes\u002Fengine","\u002Fpackages\u002Fengine","05.packages\u002F02.engine",{"title":183,"path":184,"stem":185},"@hyperframes\u002Fplayer","\u002Fpackages\u002Fplayer","05.packages\u002F03.player",{"title":187,"path":188,"stem":189},"@hyperframes\u002Fproducer","\u002Fpackages\u002Fproducer","05.packages\u002F04.producer",{"title":191,"path":192,"stem":193},"@hyperframes\u002Fstudio","\u002Fpackages\u002Fstudio","05.packages\u002F05.studio",{"title":195,"path":196,"stem":197},"CLI","\u002Fpackages\u002Fcli","05.packages\u002F06.cli",{"title":199,"icon":200,"path":201,"stem":202,"children":203,"page":30},"组件目录","i-lucide-layout-grid","\u002Fcatalog","06.catalog",[204,270,324,358,420,478,512,546,584,598],{"title":205,"icon":206,"path":207,"stem":208,"children":209,"page":30},"字幕","i-lucide-captions","\u002Fcatalog\u002Fcaption","06.catalog\u002F01.caption",[210,214,218,222,226,230,234,238,242,246,250,254,258,262,266],{"title":211,"path":212,"stem":213},"裁剪擦除","\u002Fcatalog\u002Fcaption\u002Fcaption-clip-wipe","06.catalog\u002F01.caption\u002F01.caption-clip-wipe",{"title":215,"path":216,"stem":217},"编辑强调","\u002Fcatalog\u002Fcaption\u002Fcaption-editorial-emphasis","06.catalog\u002F01.caption\u002F02.caption-editorial-emphasis",{"title":219,"path":220,"stem":221},"Emoji 弹出","\u002Fcatalog\u002Fcaption\u002Fcaption-emoji-pop","06.catalog\u002F01.caption\u002F03.caption-emoji-pop",{"title":223,"path":224,"stem":225},"故障 RGB","\u002Fcatalog\u002Fcaption\u002Fcaption-glitch-rgb","06.catalog\u002F01.caption\u002F04.caption-glitch-rgb",{"title":227,"path":228,"stem":229},"渐变填充","\u002Fcatalog\u002Fcaption\u002Fcaption-gradient-fill","06.catalog\u002F01.caption\u002F05.caption-gradient-fill",{"title":231,"path":232,"stem":233},"高亮","\u002Fcatalog\u002Fcaption\u002Fcaption-highlight","06.catalog\u002F01.caption\u002F06.caption-highlight",{"title":235,"path":236,"stem":237},"动感冲击","\u002Fcatalog\u002Fcaption\u002Fcaption-kinetic-slam","06.catalog\u002F01.caption\u002F07.caption-kinetic-slam",{"title":239,"path":240,"stem":241},"矩阵解码","\u002Fcatalog\u002Fcaption\u002Fcaption-matrix-decode","06.catalog\u002F01.caption\u002F08.caption-matrix-decode",{"title":243,"path":244,"stem":245},"霓虹强调","\u002Fcatalog\u002Fcaption\u002Fcaption-neon-accent","06.catalog\u002F01.caption\u002F09.caption-neon-accent",{"title":247,"path":248,"stem":249},"霓虹发光","\u002Fcatalog\u002Fcaption\u002Fcaption-neon-glow","06.catalog\u002F01.caption\u002F10.caption-neon-glow",{"title":251,"path":252,"stem":253},"视差图层","\u002Fcatalog\u002Fcaption\u002Fcaption-parallax-layers","06.catalog\u002F01.caption\u002F11.caption-parallax-layers",{"title":255,"path":256,"stem":257},"粒子爆发","\u002Fcatalog\u002Fcaption\u002Fcaption-particle-burst","06.catalog\u002F01.caption\u002F12.caption-particle-burst",{"title":259,"path":260,"stem":261},"胶囊卡拉OK","\u002Fcatalog\u002Fcaption\u002Fcaption-pill-karaoke","06.catalog\u002F01.caption\u002F13.caption-pill-karaoke",{"title":263,"path":264,"stem":265},"纹理","\u002Fcatalog\u002Fcaption\u002Fcaption-texture","06.catalog\u002F01.caption\u002F14.caption-texture",{"title":267,"path":268,"stem":269},"字重切换","\u002Fcatalog\u002Fcaption\u002Fcaption-weight-shift","06.catalog\u002F01.caption\u002F15.caption-weight-shift",{"title":271,"icon":272,"path":273,"stem":274,"children":275,"page":30},"HTML 画布","i-lucide-layout-dashboard","\u002Fcatalog\u002Fhtml-canvas","06.catalog\u002F02.html-canvas",[276,280,284,288,292,296,300,304,308,312,316,320],{"title":277,"path":278,"stem":279},"iOS 26 Liquid Glass 主屏幕","\u002Fcatalog\u002Fhtml-canvas\u002Fios26-liquid-glass","06.catalog\u002F02.html-canvas\u002F01.ios26-liquid-glass",{"title":281,"path":282,"stem":283},"Liquid Glass 右键菜单","\u002Fcatalog\u002Fhtml-canvas\u002Fliquid-glass-context-menu","06.catalog\u002F02.html-canvas\u002F02.liquid-glass-context-menu",{"title":285,"path":286,"stem":287},"Liquid Glass 媒体控制","\u002Fcatalog\u002Fhtml-canvas\u002Fliquid-glass-media-controls","06.catalog\u002F02.html-canvas\u002F03.liquid-glass-media-controls",{"title":289,"path":290,"stem":291},"Liquid Glass 通知","\u002Fcatalog\u002Fhtml-canvas\u002Fliquid-glass-notification","06.catalog\u002F02.html-canvas\u002F04.liquid-glass-notification",{"title":293,"path":294,"stem":295},"Liquid Glass 小组件","\u002Fcatalog\u002Fhtml-canvas\u002Fliquid-glass-widgets","06.catalog\u002F02.html-canvas\u002F05.liquid-glass-widgets",{"title":297,"path":298,"stem":299},"macOS Tahoe Liquid Glass 桌面","\u002Fcatalog\u002Fhtml-canvas\u002Fmacos-tahoe-liquid-glass","06.catalog\u002F02.html-canvas\u002F06.macos-tahoe-liquid-glass",{"title":301,"path":302,"stem":303},"iPhone & MacBook 3D 展示","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-iphone-device","06.catalog\u002F02.html-canvas\u002F07.vfx-iphone-device",{"title":305,"path":306,"stem":307},"液态背景","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-liquid-background","06.catalog\u002F02.html-canvas\u002F08.vfx-liquid-background",{"title":309,"path":310,"stem":311},"磁力效果","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-magnetic","06.catalog\u002F02.html-canvas\u002F09.vfx-magnetic",{"title":313,"path":314,"stem":315},"传送门","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-portal","06.catalog\u002F02.html-canvas\u002F10.vfx-portal",{"title":317,"path":318,"stem":319},"碎裂效果","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-shatter","06.catalog\u002F02.html-canvas\u002F11.vfx-shatter",{"title":321,"path":322,"stem":323},"VFX 文字光标","\u002Fcatalog\u002Fhtml-canvas\u002Fvfx-text-cursor","06.catalog\u002F02.html-canvas\u002F12.vfx-text-cursor",{"title":325,"icon":326,"path":327,"stem":328,"children":329,"page":30},"社交叠加层","i-lucide-share-2","\u002Fcatalog\u002Fsocial-overlays","06.catalog\u002F03.social-overlays",[330,334,338,342,346,350,354],{"title":331,"path":332,"stem":333},"Instagram 关注","\u002Fcatalog\u002Fsocial-overlays\u002Finstagram-follow","06.catalog\u002F03.social-overlays\u002F01.instagram-follow",{"title":335,"path":336,"stem":337},"macOS 通知","\u002Fcatalog\u002Fsocial-overlays\u002Fmacos-notification","06.catalog\u002F03.social-overlays\u002F02.macos-notification",{"title":339,"path":340,"stem":341},"Reddit 帖子卡片","\u002Fcatalog\u002Fsocial-overlays\u002Freddit-post","06.catalog\u002F03.social-overlays\u002F03.reddit-post",{"title":343,"path":344,"stem":345},"Spotify 正在播放","\u002Fcatalog\u002Fsocial-overlays\u002Fspotify-card","06.catalog\u002F03.social-overlays\u002F04.spotify-card",{"title":347,"path":348,"stem":349},"TikTok 关注","\u002Fcatalog\u002Fsocial-overlays\u002Ftiktok-follow","06.catalog\u002F03.social-overlays\u002F05.tiktok-follow",{"title":351,"path":352,"stem":353},"X 帖子卡片","\u002Fcatalog\u002Fsocial-overlays\u002Fx-post","06.catalog\u002F03.social-overlays\u002F06.x-post",{"title":355,"path":356,"stem":357},"YouTube 下方三分之一","\u002Fcatalog\u002Fsocial-overlays\u002Fyt-lower-third","06.catalog\u002F03.social-overlays\u002F07.yt-lower-third",{"title":359,"icon":360,"path":361,"stem":362,"children":363,"page":30},"着色器过渡","i-lucide-wand-2","\u002Fcatalog\u002Fshader-transitions","06.catalog\u002F04.shader-transitions",[364,368,372,376,380,384,388,392,396,400,404,408,412,416],{"title":365,"path":366,"stem":367},"色散径向分裂","\u002Fcatalog\u002Fshader-transitions\u002Fchromatic-radial-split","06.catalog\u002F04.shader-transitions\u002F01.chromatic-radial-split",{"title":369,"path":370,"stem":371},"电影感变焦","\u002Fcatalog\u002Fshader-transitions\u002Fcinematic-zoom","06.catalog\u002F04.shader-transitions\u002F02.cinematic-zoom",{"title":373,"path":374,"stem":375},"交叉扭曲变形","\u002Fcatalog\u002Fshader-transitions\u002Fcross-warp-morph","06.catalog\u002F04.shader-transitions\u002F03.cross-warp-morph",{"title":377,"path":378,"stem":379},"域扭曲溶解","\u002Fcatalog\u002Fshader-transitions\u002Fdomain-warp-dissolve","06.catalog\u002F04.shader-transitions\u002F04.domain-warp-dissolve",{"title":381,"path":382,"stem":383},"白色闪光过渡","\u002Fcatalog\u002Fshader-transitions\u002Fflash-through-white","06.catalog\u002F04.shader-transitions\u002F05.flash-through-white",{"title":385,"path":386,"stem":387},"故障效果","\u002Fcatalog\u002Fshader-transitions\u002Fglitch","06.catalog\u002F04.shader-transitions\u002F06.glitch",{"title":389,"path":390,"stem":391},"引力透镜","\u002Fcatalog\u002Fshader-transitions\u002Fgravitational-lens","06.catalog\u002F04.shader-transitions\u002F07.gravitational-lens",{"title":393,"path":394,"stem":395},"光线泄漏","\u002Fcatalog\u002Fshader-transitions\u002Flight-leak","06.catalog\u002F04.shader-transitions\u002F08.light-leak",{"title":397,"path":398,"stem":399},"褶皱燃烧","\u002Fcatalog\u002Fshader-transitions\u002Fridged-burn","06.catalog\u002F04.shader-transitions\u002F09.ridged-burn",{"title":401,"path":402,"stem":403},"涟漪波纹","\u002Fcatalog\u002Fshader-transitions\u002Fripple-waves","06.catalog\u002F04.shader-transitions\u002F10.ripple-waves",{"title":405,"path":406,"stem":407},"SDF 光圈","\u002Fcatalog\u002Fshader-transitions\u002Fsdf-iris","06.catalog\u002F04.shader-transitions\u002F11.sdf-iris",{"title":409,"path":410,"stem":411},"漩涡涡流","\u002Fcatalog\u002Fshader-transitions\u002Fswirl-vortex","06.catalog\u002F04.shader-transitions\u002F12.swirl-vortex",{"title":413,"path":414,"stem":415},"热浪扭曲","\u002Fcatalog\u002Fshader-transitions\u002Fthermal-distortion","06.catalog\u002F04.shader-transitions\u002F13.thermal-distortion",{"title":417,"path":418,"stem":419},"快速摇摄","\u002Fcatalog\u002Fshader-transitions\u002Fwhip-pan","06.catalog\u002F04.shader-transitions\u002F14.whip-pan",{"title":421,"icon":422,"path":423,"stem":424,"children":425,"page":30},"CSS 过渡","i-lucide-repeat","\u002Fcatalog\u002Fcss-transitions","06.catalog\u002F05.css-transitions",[426,430,434,438,442,446,450,454,458,462,466,470,474],{"title":427,"path":428,"stem":429},"3D 过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-3d","06.catalog\u002F05.css-transitions\u002F01.transitions-3d",{"title":431,"path":432,"stem":433},"模糊过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-blur","06.catalog\u002F05.css-transitions\u002F02.transitions-blur",{"title":435,"path":436,"stem":437},"覆盖过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-cover","06.catalog\u002F05.css-transitions\u002F03.transitions-cover",{"title":439,"path":440,"stem":441},"破碎过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-destruction","06.catalog\u002F05.css-transitions\u002F04.transitions-destruction",{"title":443,"path":444,"stem":445},"溶解过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-dissolve","06.catalog\u002F05.css-transitions\u002F05.transitions-dissolve",{"title":447,"path":448,"stem":449},"扭曲过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-distortion","06.catalog\u002F05.css-transitions\u002F06.transitions-distortion",{"title":451,"path":452,"stem":453},"网格过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-grid","06.catalog\u002F05.css-transitions\u002F07.transitions-grid",{"title":455,"path":456,"stem":457},"光效过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-light","06.catalog\u002F05.css-transitions\u002F08.transitions-light",{"title":459,"path":460,"stem":461},"机械过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-mechanical","06.catalog\u002F05.css-transitions\u002F09.transitions-mechanical",{"title":463,"path":464,"stem":465},"其他过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-other","06.catalog\u002F05.css-transitions\u002F10.transitions-other",{"title":467,"path":468,"stem":469},"推移过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-push","06.catalog\u002F05.css-transitions\u002F11.transitions-push",{"title":471,"path":472,"stem":473},"径向过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-radial","06.catalog\u002F05.css-transitions\u002F12.transitions-radial",{"title":475,"path":476,"stem":477},"缩放过渡","\u002Fcatalog\u002Fcss-transitions\u002Ftransitions-scale","06.catalog\u002F05.css-transitions\u002F13.transitions-scale",{"title":479,"icon":480,"path":481,"stem":482,"children":483,"page":30},"展示","i-lucide-monitor-play","\u002Fcatalog\u002Fshowcase","06.catalog\u002F06.showcase",[484,488,492,496,500,504,508],{"title":485,"path":486,"stem":487},"应用展示","\u002Fcatalog\u002Fshowcase\u002Fapp-showcase","06.catalog\u002F06.showcase\u002F01.app-showcase",{"title":489,"path":490,"stem":491},"Apple 金额计数器","\u002Fcatalog\u002Fshowcase\u002Fapple-money-count","06.catalog\u002F06.showcase\u002F02.apple-money-count",{"title":493,"path":494,"stem":495},"蓝色毛衣开场视频","\u002Fcatalog\u002Fshowcase\u002Fblue-sweater-intro-video","06.catalog\u002F06.showcase\u002F03.blue-sweater-intro-video",{"title":497,"path":498,"stem":499},"朝鲜封锁","\u002Fcatalog\u002Fshowcase\u002Fnorth-korea-locked-down","06.catalog\u002F06.showcase\u002F04.north-korea-locked-down",{"title":501,"path":502,"stem":503},"纽约巴黎航班","\u002Fcatalog\u002Fshowcase\u002Fnyc-paris-flight","06.catalog\u002F06.showcase\u002F05.nyc-paris-flight",{"title":505,"path":506,"stem":507},"3D UI 展示","\u002Fcatalog\u002Fshowcase\u002Fui-3d-reveal","06.catalog\u002F06.showcase\u002F06.ui-3d-reveal",{"title":509,"path":510,"stem":511},"VPN YouTube 广告片段","\u002Fcatalog\u002Fshowcase\u002Fvpn-youtube-spot","06.catalog\u002F06.showcase\u002F07.vpn-youtube-spot",{"title":513,"icon":514,"path":515,"stem":516,"children":517,"page":30},"数据","i-lucide-bar-chart-3","\u002Fcatalog\u002Fdata","06.catalog\u002F07.data",[518,522,526,530,534,538,542],{"title":519,"path":520,"stem":521},"数据图表","\u002Fcatalog\u002Fdata\u002Fdata-chart","06.catalog\u002F07.data\u002F01.data-chart",{"title":523,"path":524,"stem":525},"西班牙地图","\u002Fcatalog\u002Fdata\u002Fspain-map","06.catalog\u002F07.data\u002F02.spain-map",{"title":527,"path":528,"stem":529},"美国地图","\u002Fcatalog\u002Fdata\u002Fus-map","06.catalog\u002F07.data\u002F03.us-map",{"title":531,"path":532,"stem":533},"美国气泡地图","\u002Fcatalog\u002Fdata\u002Fus-map-bubble","06.catalog\u002F07.data\u002F04.us-map-bubble",{"title":535,"path":536,"stem":537},"美国流动地图","\u002Fcatalog\u002Fdata\u002Fus-map-flow","06.catalog\u002F07.data\u002F05.us-map-flow",{"title":539,"path":540,"stem":541},"美国六边形网格地图","\u002Fcatalog\u002Fdata\u002Fus-map-hex","06.catalog\u002F07.data\u002F06.us-map-hex",{"title":543,"path":544,"stem":545},"世界地图","\u002Fcatalog\u002Fdata\u002Fworld-map","06.catalog\u002F07.data\u002F07.world-map",{"title":547,"icon":548,"path":549,"stem":550,"children":551,"page":30},"效果","i-lucide-sparkles","\u002Fcatalog\u002Feffects","06.catalog\u002F08.effects",[552,556,560,564,568,572,576,580],{"title":553,"path":554,"stem":555},"差值混合","\u002Fcatalog\u002Feffects\u002Fcaption-blend-difference","06.catalog\u002F08.effects\u002F01.caption-blend-difference",{"title":557,"path":558,"stem":559},"胶片颗粒叠加","\u002Fcatalog\u002Feffects\u002Fgrain-overlay","06.catalog\u002F08.effects\u002F02.grain-overlay",{"title":561,"path":562,"stem":563},"网格像素化擦除","\u002Fcatalog\u002Feffects\u002Fgrid-pixelate-wipe","06.catalog\u002F08.effects\u002F03.grid-pixelate-wipe",{"title":565,"path":566,"stem":567},"视差缩小","\u002Fcatalog\u002Feffects\u002Fparallax-unzoom","06.catalog\u002F08.effects\u002F04.parallax-unzoom",{"title":569,"path":570,"stem":571},"视差放大","\u002Fcatalog\u002Feffects\u002Fparallax-zoom","06.catalog\u002F08.effects\u002F05.parallax-zoom",{"title":573,"path":574,"stem":575},"微光扫过","\u002Fcatalog\u002Feffects\u002Fshimmer-sweep","06.catalog\u002F08.effects\u002F06.shimmer-sweep",{"title":577,"path":578,"stem":579},"纹理遮罩文字","\u002Fcatalog\u002Feffects\u002Ftexture-mask-text","06.catalog\u002F08.effects\u002F07.texture-mask-text",{"title":581,"path":582,"stem":583},"暗角","\u002Fcatalog\u002Feffects\u002Fvignette","06.catalog\u002F08.effects\u002F08.vignette",{"title":585,"icon":586,"path":587,"stem":588,"children":589,"page":30},"区块","i-lucide-box","\u002Fcatalog\u002Fblocks","06.catalog\u002F09.blocks",[590,594],{"title":591,"path":592,"stem":593},"流程图","\u002Fcatalog\u002Fblocks\u002Fflowchart","06.catalog\u002F09.blocks\u002F01.flowchart",{"title":595,"path":596,"stem":597},"Logo 片尾","\u002Fcatalog\u002Fblocks\u002Flogo-outro","06.catalog\u002F09.blocks\u002F02.logo-outro",{"title":599,"icon":600,"path":601,"stem":602,"children":603,"page":30},"代码片段","i-lucide-code-2","\u002Fcatalog\u002Fcode-snippets","06.catalog\u002F10.code-snippets",[604,608,612,616,620,624,628,632,636,640,644,648],{"title":605,"path":606,"stem":607},"Dark 2026","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-dark-2026","06.catalog\u002F10.code-snippets\u002F01.code-snippet-dark-2026",{"title":609,"path":610,"stem":611},"Dark Modern","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-dark-modern","06.catalog\u002F10.code-snippets\u002F02.code-snippet-dark-modern",{"title":613,"path":614,"stem":615},"Dark+","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-dark-plus","06.catalog\u002F10.code-snippets\u002F03.code-snippet-dark-plus",{"title":617,"path":618,"stem":619},"High Contrast","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-high-contrast","06.catalog\u002F10.code-snippets\u002F04.code-snippet-high-contrast",{"title":621,"path":622,"stem":623},"High Contrast Light","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-high-contrast-light","06.catalog\u002F10.code-snippets\u002F05.code-snippet-high-contrast-light",{"title":625,"path":626,"stem":627},"Light 2026","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-light-2026","06.catalog\u002F10.code-snippets\u002F06.code-snippet-light-2026",{"title":629,"path":630,"stem":631},"Light Modern","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-light-modern","06.catalog\u002F10.code-snippets\u002F07.code-snippet-light-modern",{"title":633,"path":634,"stem":635},"Light+","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-light-plus","06.catalog\u002F10.code-snippets\u002F08.code-snippet-light-plus",{"title":637,"path":638,"stem":639},"Monokai","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-monokai","06.catalog\u002F10.code-snippets\u002F09.code-snippet-monokai",{"title":641,"path":642,"stem":643},"Solarized Light","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-solarized-light","06.catalog\u002F10.code-snippets\u002F10.code-snippet-solarized-light",{"title":645,"path":646,"stem":647},"Visual Studio Dark","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-visual-studio-dark","06.catalog\u002F10.code-snippets\u002F11.code-snippet-visual-studio-dark",{"title":649,"path":650,"stem":651},"Visual Studio Light","\u002Fcatalog\u002Fcode-snippets\u002Fcode-snippet-visual-studio-light","06.catalog\u002F10.code-snippets\u002F12.code-snippet-visual-studio-light",{"title":653,"icon":654,"path":655,"stem":656,"children":657,"page":30},"参考","i-lucide-book-marked","\u002Freference","07.reference",[658,662,666,670,674,678,682],{"title":659,"path":660,"stem":661},"HTML Schema 参考","\u002Freference\u002Fhtml-schema","07.reference\u002F01.html-schema",{"title":663,"path":664,"stem":665},"贡献指南","\u002Freference\u002Fcontributing","07.reference\u002F02.contributing",{"title":667,"path":668,"stem":669},"贡献到 Catalog","\u002Freference\u002Fcatalog","07.reference\u002F03.catalog",{"title":671,"path":672,"stem":673},"发布渠道","\u002Freference\u002Frelease-channels","07.reference\u002F04.release-channels",{"title":675,"path":676,"stem":677},"测试本地 CLI 变更","\u002Freference\u002Ftesting-local-changes","07.reference\u002F05.testing-local-changes",{"title":679,"path":680,"stem":681},"Studio 手动 DOM 编辑","\u002Freference\u002Fstudio-manual-dom-editing","07.reference\u002F06.studio-manual-dom-editing",{"title":683,"path":684,"stem":685},"采用者","\u002Freference\u002Fadopters","07.reference\u002F07.adopters",{"id":687,"title":96,"body":688,"description":1314,"extension":1315,"links":1316,"meta":1317,"navigation":1318,"path":97,"seo":1319,"stem":98,"__hash__":1320},"docs\u002F03.guides\u002F09.hyperframes-vs-remotion.md",{"type":689,"value":690,"toc":1289},"minimark",[691,702,705,710,713,718,725,728,738,742,745,754,757,760,907,910,914,917,920,923,926,929,933,936,939,942,945,948,953,958,961,966,970,973,987,990,1000,1004,1007,1010,1016,1019,1022,1044,1058,1065,1069,1072,1074,1080,1094,1098,1105,1112,1115,1127,1131,1134,1217,1225,1233,1236,1239,1242,1261,1264,1267],[692,693,694,701],"p",{},[695,696,700],"a",{"href":697,"rel":698},"https:\u002F\u002Fwww.remotion.dev",[699],"nofollow","Remotion"," 是一个很棒的项目，我们在 HeyGen 的生产管线中使用了 Remotion 数月之久。Remotion 推广了使用代码来编排和动画视频制作的理念，并证明了 headless Chrome 可以成为可靠的、确定性的视频渲染器。Hyperframes 源代码中的几个模式直接来自 Remotion 团队开创的内容——Chrome 启动标志、端口选择、image2pipe 流式传输到 FFmpeg、有序帧缓冲。我们在代码中有意保留了归属注释，以便任何阅读源代码的人都能看到传承。",[692,703,704],{},"本指南是 Hyperframes 与 Remotion 差异的诚实分析，由构建 Hyperframes 的团队编写。我们选择了不同的押注；每个都有对方没有的优势，本文档会逐一分析。",[706,707,709],"h2",{"id":708},"为什么构建-hyperframes","为什么构建 Hyperframes",[692,711,712],{},"随着我们在 HeyGen 扩大代码到视频的管线，我们在 React 优先的创作模型中不断遇到相同的限制。我们内部讨论是继续在 Remotion 上构建还是从头编写渲染器。两个因素推动我们构建了 Hyperframes。",[714,715,717],"h3",{"id":716},"_1-agent-原生工作流","1. Agent 原生工作流",[692,719,720,721,724],{},"在我们的评估中，LLM 编写 Remotion 合成产生的视觉输出创意性更低，并且比相同的 LLM 直接编写 HTML + ",[695,722,723],{"href":101},"GSAP"," 合成需要更多的防护栏和提示。",[692,726,727],{},"两个相关问题加剧了这一点：",[729,730,731,735],"ul",{},[732,733,734],"li",{},"拥有自己内部时钟的动画库（GSAP、Anime.js、Motion One）无法与 React 的逐帧渲染干净地组合。",[732,736,737],{},"不是作为 React 编写的任意 HTML 或 CSS 没有干净的路径进入 React 合成——你必须重写它。",[714,739,741],{"id":740},"_2-人类编辑工作流","2. 人类编辑工作流",[692,743,744],{},"我们希望相同的代码既是渲染层又是数据层，因为我们需要在 agentic 体验之上构建人类 UI。",[692,746,747,748,753],{},"HTML 既是渲染层又是可编辑的真实来源——相同的 DOM 既是你看到的也是你编辑的。这让构建真正的可视化编辑器（选择、拖放、属性面板、时间线）更加自然，就像 ",[695,749,752],{"href":750,"rel":751},"https:\u002F\u002Fpaper.design",[699],"Paper.Design"," 那样。使用 Remotion，真实来源是代码加上构建步骤，因此通过可视化编辑器往返既痛苦又脆弱。Remotion 团队在这方面取得了进展，但在 React 之上构建实时编辑器比在 HTML 之上困难得多。",[692,755,756],{},"我们将 Hyperframes 构建为对 agent 最原生的，同时使其易于在上面构建人类界面。",[706,758,759],{"id":759},"一览",[761,762,763,782],"table",{},[764,765,766],"thead",{},[767,768,769,772,778],"tr",{},[770,771],"th",{},[770,773,774],{},[775,776,777],"strong",{},"Hyperframes",[770,779,780],{},[775,781,700],{},[783,784,785,797,808,824,835,846,864,877,888],"tbody",{},[767,786,787,791,794],{},[788,789,790],"td",{},"创作方式",[788,792,793],{},"HTML + CSS + GSAP",[788,795,796],{},"React 组件 (TSX)",[767,798,799,802,805],{},[788,800,801],{},"运行时",[788,803,804],{},"浏览器 DOM，无框架",[788,806,807],{},"每帧 React 调和",[767,809,810,813,821],{},[788,811,812],{},"构建步骤",[788,814,815,816,820],{},"无；",[817,818,819],"code",{},"index.html"," 直接播放",[788,822,823],{},"需要（webpack、打包器）",[767,825,826,829,832],{},[788,827,828],{},"库时钟动画（GSAP、Anime.js、Motion One）",[788,830,831],{},"可搜索；帧精确",[788,833,834],{},"渲染期间以挂钟速度播放",[767,836,837,840,843],{},[788,838,839],{},"任意 HTML \u002F CSS 直通",[788,841,842],{},"粘贴并动画",[788,844,845],{},"重写为 JSX",[767,847,848,851,856],{},[788,849,850],{},"分布式渲染",[788,852,853,855],{},[695,854,157],{"href":158}," 支持",[788,857,858,863],{},[695,859,862],{"href":860,"rel":861},"https:\u002F\u002Fwww.remotion.dev\u002Flambda",[699],"Remotion Lambda","，成熟且经过生产验证",[767,865,866,871,874],{},[788,867,868],{},[695,869,870],{"href":113},"HDR 输出",[788,872,873],{},"支持",[788,875,876],{},"记录为不支持",[767,878,879,882,885],{},[788,880,881],{},"渲染源上的可视化编辑器",[788,883,884],{},"原生；相同 DOM 可编辑",[788,886,887],{},"源代码加构建步骤",[767,889,890,893,900],{},[788,891,892],{},"许可证",[788,894,895],{},[695,896,899],{"href":897,"rel":898},"https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes\u002Fblob\u002Fmain\u002FLICENSE",[699],"Apache 2.0",[788,901,902],{},[695,903,906],{"href":904,"rel":905},"https:\u002F\u002Fwww.remotion.pro\u002Flicense",[699],"商业",[692,908,909],{},"本指南其余部分会分析每行的含义以及每个工具实际占优的地方。",[706,911,913],{"id":912},"核心差异react-vs-html","核心差异：React vs HTML",[692,915,916],{},"Hyperframes 和 Remotion 都驱动 headless Chrome。两者都是确定性的。两者都提供 agent skills。它们在一个决策上不同：主要创作者写什么。",[692,918,919],{},"Remotion 的押注是 React。视频合成是 React 组件。你获得类型化的 JSX、React 生态系统、组件复用以及整个 React 工具链。Remotion 的优势来自于对该平台的承诺：多年的生产使用、超大规模的 Lambda、大型社区、精心设计的类型安全 API。",[692,921,922],{},"Hyperframes 的押注是 HTML。视频合成是 HTML 页面。你可以粘贴一个落地页、一个设计系统组件或一个 CodePen 演示并对其做动画。我们认为对于两个特定用例这是正确的平台：AI agent 编写视频，以及直接在渲染器使用的 DOM 上构建可视化编辑器。",[692,924,925],{},"不同的押注，不同的优势。本文档其余部分分析每个优势的体现。",[706,927,928],{"id":928},"差异在实践中的意义",[714,930,932],{"id":931},"agent-在-html-中比在-react-中更好地表达视觉","Agent 在 HTML 中比在 React 中更好地表达视觉",[692,934,935],{},"当 LLM 编写 Hyperframes 时，它在编写它接受训练最多的媒介。浏览器看到的 Web——HTML、CSS、JavaScript、来自 CodePen 的 GSAP 惯用法、25 年积累的 Web 动画内容——是模型训练数据中最深的资源。React 特定的资源只占很小一部分。",[692,937,938],{},"从在两个系统中运行生产的经验来看：被要求编写 Remotion 合成的 agent 会花费 token 学习框架规则（哪些 hooks 被允许、哪些 API 被禁止、如何创建项目脚手架）然后才能发挥创意。输出倾向于收敛到一个狭窄的视觉词汇——居中标题、库存过渡、传统排版。相同的 agent 使用 GSAP 编写 HTML 则会触及更广泛的创意范围，因为那是其训练数据的样貌。",[714,940,941],{"id":941},"拥有自己时钟的动画库",[692,943,944],{},"要求 agent 将 GSAP 动画或现有网页移植到 Remotion 会在第一次尝试时丢失细节：时间微调、音频级别关系、文本尺寸。HTML 优先路径完全避免了翻译步骤。",[692,946,947],{},"我们给两个工具相同的 4 秒 GSAP 时间线：\"HYPERFRAMES\" 的 11 个字母以 back-out 缓动交错进入，保持 1.5 秒，然后每个字母旋转并掉出帧。相同的动画代码，相同的缓动，相同的交错。我们唯一改变的是渲染器。",[692,949,950],{},[775,951,952],{},"Hyperframes 输出——动画应有的样子：",[954,955],"img",{"src":956,"alt":957},"https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Fcomparisons\u002Fgsap-hf.gif","Hyperframes GSAP 渲染——字母进入、保持，然后在完整 4 秒内掉落",[692,959,960],{},"所有四秒都被使用。字母一个个飞入，完整单词在中心保持约一秒半，然后字母旋转并掉落。",[692,962,963],{},[775,964,965],{},"Remotion 输出——相同的时间线、相同的代码：",[954,967],{"src":968,"alt":969},"https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Fcomparisons\u002Fgsap-remotion.gif","Remotion GSAP 渲染——GSAP 在渲染挂钟时间的第一秒内播放完整时间线，留下大部分渲染为空舞台",[692,971,972],{},"GSAP 在渲染挂钟时间的大约第一秒内播放完其完整的 4 秒动画。当 Remotion 捕获后面的帧时，GSAP 的时间线已经完成，每个字母已经退出——渲染的剩余部分捕获的是空舞台。",[692,974,975,978,979,982,983,986],{},[775,976,977],{},"原因："," GSAP 通过 ",[817,980,981],{},"performance.now()"," 驱动自己的时间线，在渲染期间以实时速度运行。Hyperframes 暂停 GSAP 并在每帧捕获前将其搜索到 ",[817,984,985],{},"frame \u002F fps","，因此库与输出同步运行。Remotion 没有等效的原语，因此 GSAP 的内部定时器以挂钟速度飞过时间线，而 Remotion 在入场期间捕获少量帧，之后捕获的大部分是空帧。",[692,988,989],{},"GSAP 支持的一切——SplitText、ScrollTrigger、MotionPath、Physics、CodePen 上 15 年的代码片段——在 Hyperframes 中以相同方式工作。这个模式适用于 Anime.js、Motion One 和任何其他有自己的时钟的库；任何没有自己时钟的 JS 库直接工作。将库时钟包装在 Remotion 组件中是可能的但很笨拙，而且你会放弃库擅长的大部分功能。",[692,991,992,993,996,997,999],{},"参见 ",[695,994,995],{"href":101},"GSAP 动画指南","了解如何集成，以及",[695,998,54],{"href":55},"了解搜索驱动捕获的工作原理。",[714,1001,1003],{"id":1002},"任意-htmlcssjavascript","任意 HTML、CSS、JavaScript",[692,1005,1006],{},"每个网页都是潜在的 Hyperframes 合成。落地页、Claude Design 产物、设计系统文档、CodePen 嵌入。你粘贴 HTML 并渲染。",[692,1008,1009],{},"Remotion 要求你先翻译：将 HTML 重写为 JSX，将 CSS 转换为 React，用 React 组件和 refs\u002Feffects 包装命令式代码（Canvas、WebGL、GSAP）。每个翻译步骤都是 agent 或人类丢失保真度或引入 bug 的机会。翻译无论如何都是往返工作——两个框架最终都向浏览器提供 HTML 进行渲染。",[692,1011,1012,1015],{},[695,1013,1014],{"href":73},"website-to-video 指南","详细介绍了 HTML 优先模型实现的完整捕获到渲染管线。",[714,1017,1018],{"id":1018},"边缘原语的自动回退",[692,1020,1021],{},"Hyperframes 有两种捕获模式。",[729,1023,1024,1038],{},[732,1025,1026,1029,1030,1033,1034,1037],{},[775,1027,1028],{},"BeginFrame 模式","（Linux + ",[817,1031,1032],{},"chrome-headless-shell","）通过 ",[817,1035,1036],{},"HeadlessExperimental.beginFrame"," 原子地驱动 Chrome 合成器，在不同机器间产生字节级可重现的帧。",[732,1039,1040,1043],{},[775,1041,1042],{},"Screenshot 模式","（macOS、Windows，以及作为自动回退）实时运行 Chrome 并截取普通截图——与 Remotion 使用的方法相同。",[692,1045,1046,1047,1050,1051,1053,1054,1057],{},"渲染器在编译时检查每个合成，当发现 BeginFrame 无法处理的原语时回退到 screenshot 模式：内联 ",[817,1048,1049],{},"\u003Ciframe>","、",[695,1052,50],{"href":51},"之外的原始 ",[817,1055,1056],{},"requestAnimationFrame"," 循环。它注入虚拟时间填充，使 rAF 和 iframe 内容保持帧驱动而非挂钟驱动。你会收到解释回退的诊断信息，渲染产生视觉上正确的输出。当合成可以在 BeginFrame 模式下运行时，你免费获得确定性。",[692,1059,1060,1061,1064],{},"实践中：GSAP 时间线、CSS ",[817,1062,1063],{},"@keyframes","（通过 Web Animations API 适配器）、Lottie、Three.js 和 Web Animations API 都在 BeginFrame 模式下确定性渲染。原始 canvas 循环和实时 web 嵌入自动获得 screenshot 模式。",[714,1066,1068],{"id":1067},"react-组件复用remotion-的主场","React 组件复用（Remotion 的主场）",[692,1070,1071],{},"如果你的团队已经有 React 组件的设计系统，Remotion 让你使用与应用中相同的原语来组合视频。类型安全、IDE 补全、跨文件重构——React 带来的一切开发体验。对于已有 React 投资的团队，这是 Hyperframes 不试图匹敌的真正优势。",[714,1073,850],{"id":850},[692,1075,1076,1079],{},[695,1077,862],{"href":860,"rel":1078},[699]," 将长视频拆分到数百个 AWS Lambda 函数中。它是成熟的、经过生产验证的、文档完善的——团队已使用多年的东西。",[692,1081,1082,1083,1086,1087,1050,1090,1093],{},"Hyperframes 现在提供 ",[695,1084,1085],{"href":158},"AWS Lambda 部署路径","：一个 Lambda 函数在 Step Functions 工作流后面，将渲染分发到 chunk worker，在 S3 中存储中间结果，并暴露 ",[817,1088,1089],{},"lambda render",[817,1091,1092],{},"lambda render-batch","、进度轮询和 SDK 使用。该接口比 Remotion Lambda 更新，因此实际权衡是成熟度与 Hyperframes 的 HTML 原生合成模型。",[714,1095,1097],{"id":1096},"渲染源上的可视化编辑hyperframes-的自然押注","渲染源上的可视化编辑（Hyperframes 的自然押注）",[692,1099,1100,1101,1104],{},"你渲染的 DOM 就是你编辑的 DOM。",[695,1102,1103],{"href":192},"Hyperframes Studio"," 在实时 iframe 中预览合成，由于渲染器和编辑器共享一个 DOM，直接操作作用于渲染管线消费的相同真实来源。那个用户体验——点击选择、拖动重新定位、在面板中编辑属性——已经为字幕发布了，更广泛的元素覆盖正从相同的架构基础上构建出来。",[692,1106,1107,1108,1111],{},"在 React 之上构建相同的编辑器更困难，因为真实来源是代码加上构建步骤。将可视化编辑回 JSX 意味着重新编译。这就是为什么 ",[695,1109,752],{"href":750,"rel":1110},[699]," 等工具选择 HTML 作为可编辑源。",[714,1113,870],{"id":1114},"hdr-输出",[692,1116,1117,1118,1122,1123,1126],{},"两个工具目前都通过 headless Chrome 渲染，输出 sRGB。Remotion ",[695,1119,876],{"href":1120,"rel":1121},"https:\u002F\u002Fwww.remotion.dev\u002Fdocs\u002Fhdr",[699],"。Hyperframes ",[695,1124,1125],{"href":113},"支持 HDR 输出","，通过将 DOM 层与原生 HLG\u002FPQ 视频结合的两遍合成管线。",[706,1128,1130],{"id":1129},"开源-vs-源代码可用","开源 vs 源代码可用",[692,1132,1133],{},"这是两个项目之间最明显的差异之一，也是团队选择其中一个的最常见原因之一。",[761,1135,1136,1150],{},[764,1137,1138],{},[767,1139,1140,1142,1146],{},[770,1141],{},[770,1143,1144],{},[775,1145,777],{},[770,1147,1148],{},[775,1149,700],{},[783,1151,1152,1169,1184,1195,1206],{},[767,1153,1154,1157,1166],{},[788,1155,1156],{},"分类",[788,1158,1159,1160,1165],{},"开源（",[695,1161,1164],{"href":1162,"rel":1163},"https:\u002F\u002Fopensource.org\u002Flicenses\u002FApache-2.0",[699],"OSI 批准","）",[788,1167,1168],{},"源代码可用，非开源",[767,1170,1171,1173,1178],{},[788,1172,892],{},[788,1174,1175],{},[695,1176,899],{"href":897,"rel":1177},[699],[788,1179,1180],{},[695,1181,1183],{"href":904,"rel":1182},[699],"自定义 Remotion 许可证",[767,1185,1186,1189,1192],{},[788,1187,1188],{},"商业使用",[788,1190,1191],{},"任何规模免费",[788,1193,1194],{},"超过小团队阈值需要付费公司许可证",[767,1196,1197,1200,1203],{},[788,1198,1199],{},"每次渲染费用",[788,1201,1202],{},"无",[788,1204,1205],{},"超过阈值时有",[767,1207,1208,1211,1214],{},[788,1209,1210],{},"再分发",[788,1212,1213],{},"Apache 2.0 下允许",[788,1215,1216],{},"受 Remotion 许可证限制",[692,1218,1219,1220,1224],{},"两个项目都在 GitHub 上发布源代码，但许可证的工作方式非常不同。Apache 2.0 是 ",[695,1221,1223],{"href":1162,"rel":1222},[699],"Open Source Initiative 批准的许可证","——你可以自行托管、修改、再分发并在任何规模商业使用 Hyperframes，无每次渲染费用且无席位上限。Remotion 许可证是自定义商业许可证：你可以阅读代码并为小团队自行托管，但超过其阈值的商业使用需要付费公司许可证。",[692,1226,1227,1228,1232],{},"如果开源许可证对你很重要——OSI 合规、再分发权利、无每次使用费用、长期独立于供应商定价决策——这是首要决策点。如果你的用例在 Remotion 的免费层内或你的公司接受商业许可证，这不是问题。参见 ",[695,1229,1231],{"href":904,"rel":1230},[699],"Remotion 许可证页面","了解其当前条款。",[692,1234,1235],{},"我们以 Apache 2.0 开源 Hyperframes，以便任何人都可以在其上构建——包括在任何规模商业使用——并且项目可以超越任何单一公司的优先事项。",[706,1237,1238],{"id":1238},"总结",[692,1240,1241],{},"Remotion 和 Hyperframes 之间的唯一区别是选择 React vs HTML（+ CSS + JavaScript）。这个决策导致了许多下游差异。对于我们的需求——对 agent 最原生、架构为支持人类 UI 层——HTML + CSS + JavaScript 是明显的押注：",[1243,1244,1245,1248,1255,1258],"ol",{},[732,1246,1247],{},"Agent 已经\"用 HTML 思考\"。LLM 见过大量的 Web 代码。",[732,1249,1250,1251,1254],{},"真正的\"一个文件输入，视频输出\"。没有 ",[817,1252,1253],{},"package.json","、没有安装、没有打包器配置、没有合成设置。更少的可变部分 = 自动化和 agentic 工作流中少得多的随机失败。",[732,1256,1257],{},"最高的创意上限——浏览器能渲染的任何东西，HTML 都能表示。",[732,1259,1260],{},"HTML 既是渲染层又是可编辑的真实来源。相同的 DOM 既是你看到的也是你编辑的。",[692,1262,1263],{},"我们 HeyGen 全力投入 Hyperframes，但我们无法独自完成——这就是为什么我们以 Apache 2.0 开源它，以便我们共同构建 agentic 视频创作的基础。",[706,1265,1266],{"id":1266},"延伸阅读",[729,1268,1269,1274,1279,1284],{},[732,1270,1271,1273],{},[695,1272,54],{"href":55}," — 搜索驱动帧捕获的工作原理",[732,1275,1276,1278],{},[695,1277,995],{"href":101}," — 实践中的库时钟集成",[732,1280,1281,1283],{},[695,1282,50],{"href":51}," — 动画运行时的扩展点",[732,1285,1286,1288],{},[695,1287,72],{"href":73}," — HTML 优先的捕获到渲染管线",{"title":1290,"searchDepth":1291,"depth":1292,"links":1293},"",1,2,[1294,1299,1300,1301,1311,1312,1313],{"id":708,"depth":1292,"text":709,"children":1295},[1296,1298],{"id":716,"depth":1297,"text":717},3,{"id":740,"depth":1297,"text":741},{"id":759,"depth":1292,"text":759},{"id":912,"depth":1292,"text":913},{"id":928,"depth":1292,"text":928,"children":1302},[1303,1304,1305,1306,1307,1308,1309,1310],{"id":931,"depth":1297,"text":932},{"id":941,"depth":1297,"text":941},{"id":1002,"depth":1297,"text":1003},{"id":1018,"depth":1297,"text":1018},{"id":1067,"depth":1297,"text":1068},{"id":850,"depth":1297,"text":850},{"id":1096,"depth":1297,"text":1097},{"id":1114,"depth":1297,"text":870},{"id":1129,"depth":1292,"text":1130},{"id":1238,"depth":1292,"text":1238},{"id":1266,"depth":1292,"text":1266},"我们为什么构建 Hyperframes、它在实践中与 Remotion 有何不同，以及每个工具适合的场景。","md",null,{},true,{"title":96,"description":1314},"SCkaI6TkQNGkxSmypRghS5jA7w2IymAELb6-jgGeGag",[1322,1324],{"title":92,"path":93,"stem":94,"description":1323,"children":-1},"如何提示 Claude Code、Cursor、Codex、Google Antigravity、GitHub Copilot CLI 和其他 AI 代理来编写 Hyperframes 合成——包含可直接复制粘贴的示例和词汇表。",{"title":100,"path":101,"stem":102,"description":1325,"children":-1},"使用 GSAP 为 Hyperframes 合成添加动画。",1780322249926]