[{"data":1,"prerenderedAt":1544},["ShallowReactive",2],{"navigation":3,"\u002Fdeploy\u002Fmigrating-to-hyperframes-lambda":686,"\u002Fdeploy\u002Fmigrating-to-hyperframes-lambda-surround":1539},[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":165,"body":688,"description":1532,"extension":1533,"links":1534,"meta":1535,"navigation":1536,"path":166,"seo":1537,"stem":167,"__hash__":1538},"docs\u002F04.deploy\u002F04.migrating-to-hyperframes-lambda.md",{"type":689,"value":690,"toc":1516},"minimark",[691,712,716,847,851,863,885,1037,1045,1048,1051,1207,1211,1238,1268,1272,1275,1280,1291,1294,1315,1319,1329,1333,1357,1367,1370,1382,1386,1403,1406,1476,1480,1491,1509,1512],[692,693,694,695,699,700,703,704,707,708,711],"p",{},"如果你已经在运行另一个通过一条命令部署无服务器视频渲染器的框架，操作逻辑可以无缝对应：一条 ",[696,697,698],"code",{},"deploy"," 配置栈，一条 ",[696,701,702],{},"render"," 启动渲染，一条 ",[696,705,706],{},"progress"," 轮询状态，一条 ",[696,709,710],{},"destroy"," 销毁栈。本页面将你现有的概念映射到 HyperFrames 的等价物上，让你可以把迁移时间花在真正有差异的部分，而不是重新学习工作流程。",[713,714,715],"h2",{"id":715},"概念映射",[717,718,719,735],"table",{},[720,721,722],"thead",{},[723,724,725,729,732],"tr",{},[726,727,728],"th",{},"在你当前框架中的调用...",[726,730,731],{},"在 HyperFrames 中调用...",[726,733,734],{},"备注",[736,737,738,760,773,794,807,824],"tbody",{},[723,739,740,744,749],{},[741,742,743],"td",{},"一次性部署命令",[741,745,746],{},[696,747,748],{},"hyperframes lambda deploy",[741,750,751,752,755,756,759],{},"构建 ",[696,753,754],{},"packages\u002Faws-lambda\u002Fdist\u002Fhandler.zip"," 并运行 ",[696,757,758],{},"sam deploy","。幂等。",[723,761,762,765,770],{},[741,763,764],{},"一次性站点上传",[741,766,767],{},[696,768,769],{},"hyperframes lambda sites create .\u002Fproject",[741,771,772],{},"内容寻址的 S3 键——对未更改的树重新上传会通过 HeadObject 200 跳过。",[723,774,775,778,783],{},[741,776,777],{},"触发渲染",[741,779,780],{},[696,781,782],{},"hyperframes lambda render .\u002Fproject --width 1920 --height 1080",[741,784,785,786,789,790,793],{},"立即返回 ",[696,787,788],{},"renderId","；添加 ",[696,791,792],{},"--wait"," 可流式输出每个 chunk 的进度。",[723,795,796,799,804],{},[741,797,798],{},"轮询渲染进度",[741,800,801],{},[696,802,803],{},"hyperframes lambda progress \u003CrenderId>",[741,805,806],{},"在同一响应中包含累计费用。",[723,808,809,812,817],{},[741,810,811],{},"销毁",[741,813,814],{},[696,815,816],{},"hyperframes lambda destroy",[741,818,819,820,823],{},"S3 存储桶会被 ",[696,821,822],{},"Retain","——详见部署指南。",[723,825,826,829,841],{},[741,827,828],{},"打印\u002F验证 IAM 策略",[741,830,831,834,835,834,838],{},[696,832,833],{},"hyperframes lambda policies user","\u002F",[696,836,837],{},"role",[696,839,840],{},"validate",[741,842,843,844,846],{},"将 ",[696,845,840],{}," 接入 CI，以便在下次部署失败之前捕获策略偏移。",[713,848,850],{"id":849},"composition-格式","Composition 格式",[692,852,853,854,858,859,862],{},"如果你当前的框架是",[855,856,857],"strong",{},"基于 React 的","，你编写 JSX 组件，在 ",[696,860,861],{},"Composition"," 中注册它们，渲染器在渲染时编译它们。",[692,864,865,866,869,870,873,874,873,877,880,881,884],{},"在 HyperFrames 中，",[855,867,868],{},"composition 是纯 HTML 文件","。根元素上的 ",[696,871,872],{},"data-duration","、",[696,875,876],{},"data-width",[696,878,879],{},"data-height"," 和 ",[696,882,883],{},"data-fps"," 属性驱动每个渲染参数。没有 JSX 编译步骤——你写的就是浏览器渲染的内容。",[886,887,892],"pre",{"className":888,"code":889,"language":890,"meta":891,"style":891},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!doctype html>\n\u003Chtml data-duration=\"10\" data-width=\"1920\" data-height=\"1080\" data-fps=\"30\">\n\u003Cbody>\n\u003Ch1 style=\"animation: fade-in 1s\">Hello\u003C\u002Fh1>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","html","",[696,893,894,914,975,985,1019,1028],{"__ignoreMap":891},[895,896,899,903,907,911],"span",{"class":897,"line":898},"line",1,[895,900,902],{"class":901},"sMK4o","\u003C!",[895,904,906],{"class":905},"swJcz","doctype",[895,908,910],{"class":909},"spNyl"," html",[895,912,913],{"class":901},">\n",[895,915,917,920,922,925,928,931,935,937,940,942,944,947,949,952,954,956,959,961,964,966,968,971,973],{"class":897,"line":916},2,[895,918,919],{"class":901},"\u003C",[895,921,890],{"class":905},[895,923,924],{"class":909}," data-duration",[895,926,927],{"class":901},"=",[895,929,930],{"class":901},"\"",[895,932,934],{"class":933},"sfazB","10",[895,936,930],{"class":901},[895,938,939],{"class":909}," data-width",[895,941,927],{"class":901},[895,943,930],{"class":901},[895,945,946],{"class":933},"1920",[895,948,930],{"class":901},[895,950,951],{"class":909}," data-height",[895,953,927],{"class":901},[895,955,930],{"class":901},[895,957,958],{"class":933},"1080",[895,960,930],{"class":901},[895,962,963],{"class":909}," data-fps",[895,965,927],{"class":901},[895,967,930],{"class":901},[895,969,970],{"class":933},"30",[895,972,930],{"class":901},[895,974,913],{"class":901},[895,976,978,980,983],{"class":897,"line":977},3,[895,979,919],{"class":901},[895,981,982],{"class":905},"body",[895,984,913],{"class":901},[895,986,988,990,993,996,998,1000,1003,1005,1008,1012,1015,1017],{"class":897,"line":987},4,[895,989,919],{"class":901},[895,991,992],{"class":905},"h1",[895,994,995],{"class":909}," style",[895,997,927],{"class":901},[895,999,930],{"class":901},[895,1001,1002],{"class":933},"animation: fade-in 1s",[895,1004,930],{"class":901},[895,1006,1007],{"class":901},">",[895,1009,1011],{"class":1010},"sTEyZ","Hello",[895,1013,1014],{"class":901},"\u003C\u002F",[895,1016,992],{"class":905},[895,1018,913],{"class":901},[895,1020,1022,1024,1026],{"class":897,"line":1021},5,[895,1023,1014],{"class":901},[895,1025,982],{"class":905},[895,1027,913],{"class":901},[895,1029,1031,1033,1035],{"class":897,"line":1030},6,[895,1032,1014],{"class":901},[895,1034,890],{"class":905},[895,1036,913],{"class":901},[692,1038,1039,1040,1044],{},"对于框架无关的动画，HyperFrames 为 GSAP、Anime.js、CSS keyframes、Lottie、Three.js 和 Web Animations API 提供官方适配器——详见 ",[1041,1042,1043],"a",{"href":39},"Concepts"," 和各个 skill 文档。",[713,1046,1047],{"id":1047},"渲染配置",[692,1049,1050],{},"大多数用户的渲染配置可以直接对应：",[717,1052,1053,1066],{},[720,1054,1055],{},[723,1056,1057,1060,1063],{},[726,1058,1059],{},"概念",[726,1061,1062],{},"HyperFrames 等价物",[726,1064,1065],{},"位置",[736,1067,1068,1088,1117,1137,1150,1163,1177,1191],{},[723,1069,1070,1075,1085],{},[741,1071,1072],{},[696,1073,1074],{},"fps",[741,1076,1077,1080,1081,1084],{},[696,1078,1079],{},"--fps=30","（CLI）或 ",[696,1082,1083],{},"config.fps","（SDK）",[741,1086,1087],{},"仅支持 24、30、60——非整数 NTSC 比率仅限进程内使用。",[723,1089,1090,1099,1114],{},[741,1091,1092,1095,1096],{},[696,1093,1094],{},"width"," \u002F ",[696,1097,1098],{},"height",[741,1100,1101,1095,1104,1107,1108,1095,1111],{},[696,1102,1103],{},"--width",[696,1105,1106],{},"--height"," 标志，或 ",[696,1109,1110],{},"config.width",[696,1112,1113],{},"config.height",[741,1115,1116],{},"≤ 7680 的偶数整数（yuv420p 对齐）。",[723,1118,1119,1124,1134],{},[741,1120,1121],{},[696,1122,1123],{},"codec: 'h264' \u002F 'h265'",[741,1125,1126,1129,1130,1133],{},[696,1127,1128],{},"--codec=h264"," 或 ",[696,1131,1132],{},"--codec=h265","（仅 mp4）",[741,1135,1136],{},"h265 使用 libx265 配合 closed-GOP 关键帧间隔参数，使分块 concat-copy 可无损往返。",[723,1138,1139,1142,1147],{},[741,1140,1141],{},"输出格式",[741,1143,1144],{},[696,1145,1146],{},"--format=mp4 \u002F mov \u002F webm \u002F png-sequence",[741,1148,1149],{},"webm 使用 libvpx-vp9 + closed-GOP concat-copy。分布式模式在计划阶段仍拒绝 HDR mp4。",[723,1151,1152,1155,1160],{},[741,1153,1154],{},"质量预设",[741,1156,1157],{},[696,1158,1159],{},"--quality=draft \u002F standard \u002F high",[741,1161,1162],{},"映射到 ffmpeg 编码器预设。",[723,1164,1165,1168,1174],{},[741,1166,1167],{},"Chunk 大小（帧数）",[741,1169,1170,1173],{},[696,1171,1172],{},"--chunk-size=240","（默认 240）",[741,1175,1176],{},"30fps 时约 8 秒；大小经过调整以适应 Lambda 的 15 分钟限制并留有余量。",[723,1178,1179,1182,1188],{},[741,1180,1181],{},"最大并行 chunk 数",[741,1183,1184,1187],{},[696,1185,1186],{},"--max-parallel-chunks=16","（默认 16）",[741,1189,1190],{},"限制 Map 状态的扇出数量。",[723,1192,1193,1196,1204],{},[741,1194,1195],{},"比特率 \u002F CRF",[741,1197,1198,1129,1201],{},[696,1199,1200],{},"--bitrate=10M",[696,1202,1203],{},"--crf=18",[741,1205,1206],{},"互斥。",[713,1208,1210],{"id":1209},"variablesinputprops","Variables（inputProps）",[692,1212,1213,1214,1217,1218,1221,1222,1225,1226,1229,1230,1233,1234,1237],{},"渲染时的载荷——某些框架称为 ",[696,1215,1216],{},"inputProps","，HyperFrames 中称为 ",[696,1219,1220],{},"variables","——是同构的。通过根 ",[696,1223,1224],{},"\u003Chtml>"," 元素上的 ",[696,1227,1228],{},"data-composition-variables"," 声明 composition 的变量形状，然后在本地使用 ",[696,1231,1232],{},"hyperframes render --variables '{...}'"," 或在 Lambda 上使用 ",[696,1235,1236],{},"hyperframes lambda render --variables"," 传入每次渲染的值。同样的 256 KiB 执行输入限制和\"URL 化你的资源，不要内联 base64\"规范适用。",[692,1239,1240,1241,1244,1245,1248,1249,1252,1253,873,1256,1252,1259,1262,1263,1267],{},"完整映射——",[696,1242,1243],{},"defaultProps"," → 声明、",[696,1246,1247],{},"useCurrentFrame()"," + ",[696,1250,1251],{},"props.\u003Cx>"," → ",[696,1254,1255],{},"__hyperframes.getVariables().\u003Cx>",[696,1257,1258],{},"renderMediaOnLambda({ inputProps })",[696,1260,1261],{},"renderToLambda({ config: { variables } })","——详见 ",[1041,1264,1266],{"href":1265},"\u002Fdeploy\u002Ftemplates-on-lambda#%E4%BB%8E-remotionlambda-inputprops-%E8%BF%81%E7%A7%BB","Templates on Lambda","。",[713,1269,1271],{"id":1270},"hyperframes-的不同之处","HyperFrames 的不同之处",[692,1273,1274],{},"以下是一些与同类框架有意不同的方面。提前说明，以免迁移过程中在部署时感到意外。",[1276,1277,1279],"h3",{"id":1278},"确定性-chrome-路径是必须的","确定性 Chrome 路径是必须的",[692,1281,1282,1283,1286,1287,1290],{},"HyperFrames 在分布式模式下拒绝 ",[696,1284,1285],{},"data-gpu-mode=\"hardware\"","——硬件 GL 在 chunk 边界处是非确定性的，而每个 chunk 的 concat-copy 假设字节级可复现。在进程内使用硬件 GL 的 composition 在 Lambda 渲染时必须放弃它。Lambda 处理函数在计划阶段会触发一个类型化的 ",[696,1288,1289],{},"BROWSER_GPU_NOT_SOFTWARE"," 不可重试错误，这在进度输出中很容易捕获。",[1276,1292,1293],{"id":1293},"字体获取失败时安全关闭",[692,1295,1296,1299,1300,1303,1304,1307,1308,1129,1311,1314],{},[696,1297,1298],{},"failClosedFontFetch"," 在分布式模式下默认开启。如果 composition 引用了 HyperFrames 无法获取的 ",[696,1301,1302],{},"font-family","，它会在计划阶段失败（",[696,1305,1306],{},"FONT_FETCH_FAILED","），而不是静默回退到操作系统默认字体。如果你目前依赖系统字体回退，请通过 ",[696,1309,1310],{},"\u003Clink rel=\"stylesheet\">",[696,1312,1313],{},"@fontsource\u002F*"," 导入显式列出你需要的字体。",[1276,1316,1318],{"id":1317},"暂不支持-hdr","暂不支持 HDR",[692,1320,1321,1324,1325,1328],{},[696,1322,1323],{},"hdrMode: 'force-hdr'"," 在计划阶段会被拒绝。v1.5 路线图包含通过 ",[696,1326,1327],{},"-bsf:v hevc_metadata"," 重新应用实现 HDR mp4；目前，HDR 渲染在 Lambda 外使用进程内渲染器。",[1276,1330,1332],{"id":1331},"webm-使用-closed-gop-vp9","webm 使用 closed-GOP VP9",[692,1334,1335,1336,873,1339,873,1342,880,1345,1348,1349,1352,1353,1356],{},"webm 分布式渲染使用 libvpx-vp9 配合 ",[696,1337,1338],{},"-g \u003CchunkSize>",[696,1340,1341],{},"-keyint_min \u003CchunkSize>",[696,1343,1344],{},"-auto-alt-ref 0",[696,1346,1347],{},"-cpu-used 2","。禁用 alt-ref 是关键所在：libvpx-vp9 默认的不可显示 alt-ref 帧可能落在 GOP 中的任意位置，这会破坏 chunk 接缝处的 concat-copy。closed-GOP 强制在每个 chunk 边界处放置关键帧，使 ",[696,1350,1351],{},"ffmpeg -f concat -c copy"," 可以无损往返。输出为 ",[696,1354,1355],{},"yuva420p"," 以保留 alpha 通道。音频以 Opus 格式封装。",[692,1358,1359,1360,1362,1363,1366],{},"分布式 webm 文件通常比同一 composition 在相同 CRF 下进程内渲染的结果大约 10-25%，因为 closed-GOP 比进程内单次通过编码强制放置了更多的关键帧。每个 chunk 的编码也比 libvpx-vp9 默认的速度\u002F质量权衡更慢（",[696,1361,1347],{}," 比 ",[696,1364,1365],{},"-deadline good"," 的默认值更保守）。单机进程内渲染器仍然是短时 webm 渲染的正确选择；当渲染的挂钟时间超过单台机器的处理能力时，分布式方案才开始产生回报。",[1276,1368,1369],{"id":1369},"状态文件默认存储在本地",[692,1371,1372,1374,1375,1378,1379,1267],{},[696,1373,748],{}," 会写入 ",[696,1376,1377],{},"\u003Ccwd>\u002F.hyperframes\u002Flambda-stack-\u003Cname>.json","，这样后续命令无需重新推导 bucket \u002F 状态机 ARN。两个 worktree 会产生两个不同的状态文件。如果你需要在 CI worker 之间共享默认位置，请为目录创建符号链接或在每次调用时显式传入 ",[696,1380,1381],{},"--stack-name",[1276,1383,1385],{"id":1384},"iam-策略是先打印再收紧","IAM 策略是先打印再收紧",[692,1387,1388,1391,1392,1395,1396,1399,1400,1267],{},[696,1389,1390],{},"hyperframes lambda policies user\u002Frole"," 输出的默认策略文档使用 ",[696,1393,1394],{},"Resource: \"*\"","，因为 CloudFormation 栈在每个用户的首次部署时会创建新的 ARN。首次成功部署后，将 ",[696,1397,1398],{},"Resource"," 缩小到已部署的 ARN——它们可以从 CFN 输出中预测。CI 用户通常将收紧后的策略签入源码，并在部署前运行 ",[696,1401,1402],{},"hyperframes lambda policies validate .\u002Finfra\u002Fpolicy.json",[713,1404,1405],{"id":1405},"迁移清单",[1407,1408,1409,1416,1433,1442,1454,1467],"ol",{},[1410,1411,1412,1415],"li",{},[855,1413,1414],{},"盘点","你想迁移的 composition。过滤掉需要 HDR 的——它们暂时留在你当前的框架上。webm 渲染通过 closed-GOP VP9 + concat-copy 分布式执行（参见上面的 webm 部分）。",[1410,1417,1418,1421,1422,1424,1425,1428,1429,1432],{},[855,1419,1420],{},"翻译","每个 composition 为纯 HTML。",[1041,1423,1043],{"href":39}," 页面涵盖了 data 属性约定；",[696,1426,1427],{},"\u002Fhyperframes"," skill（",[696,1430,1431],{},"npx skills add heygen-com\u002Fhyperframes","）使 Claude \u002F Cursor \u002F Codex 也能理解这些约定。",[1410,1434,1435,1438,1439,1267],{},[855,1436,1437],{},"接入","新的 composition 到你的构建流水线中，与旧的并存。HyperFrames 不需要外部打包器——你可以直接对 HTML 使用 ",[696,1440,1441],{},"npx hyperframes preview",[1410,1443,1444,1446,1447,1450,1451,1453],{},[855,1445,148],{},"到单独的 AWS 账户或先使用 ",[696,1448,1449],{},"--stack-name=hyperframes-staging","。运行一次真实的渲染并带上 ",[696,1452,792],{},"；验证输出字节。",[1410,1455,1456,1459,1460,1463,1464,1267],{},[855,1457,1458],{},"添加策略","到你的 CI。",[696,1461,1462],{},"hyperframes lambda policies user > infra\u002Fiam\u002Fhyperframes.json","，然后在每个 PR 上运行 ",[696,1465,1466],{},"hyperframes lambda policies validate infra\u002Fiam\u002Fhyperframes.json",[1410,1468,1469,1472,1473,1475],{},[855,1470,1471],{},"切换","，将你现有的自动化指向新的渲染端点。在验证了一个发布周期的滚动渲染后保留旧部署，然后 ",[696,1474,816],{}," 销毁预发布栈并退役之前的部署。",[713,1477,1479],{"id":1478},"非-lambda-运行时","非 Lambda 运行时",[692,1481,1482,1483,1486,1487,1490],{},"如果你不想专门使用 Lambda，同样的 ",[696,1484,1485],{},"@hyperframes\u002Fproducer\u002Fdistributed"," 原语可以在任何具备 Node + Chrome + ffmpeg + S3 的环境中运行。参考 Dockerfile 位于 ",[696,1488,1489],{},"examples\u002Fk8s-jobs\u002FDockerfile.example","，适用于以下环境的用户：",[1492,1493,1494,1497,1500,1503,1506],"ul",{},[1410,1495,1496],{},"Google Cloud Run Jobs",[1410,1498,1499],{},"Azure Container Apps Jobs",[1410,1501,1502],{},"AWS ECS Fargate",[1410,1504,1505],{},"Kubernetes Jobs \u002F Argo Workflows",[1410,1507,1508],{},"在高配 VM 上运行普通 Docker",[692,1510,1511],{},"需要自行构建——我们不发布 Docker 镜像到注册表。Dockerfile 内有文档说明，内置了 Node 22 + chrome-headless-shell + ffmpeg + 与你检出版本一致的 producer。",[1513,1514,1515],"style",{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":891,"searchDepth":898,"depth":916,"links":1517},[1518,1519,1520,1521,1522,1530,1531],{"id":715,"depth":916,"text":715},{"id":849,"depth":916,"text":850},{"id":1047,"depth":916,"text":1047},{"id":1209,"depth":916,"text":1210},{"id":1270,"depth":916,"text":1271,"children":1523},[1524,1525,1526,1527,1528,1529],{"id":1278,"depth":977,"text":1279},{"id":1293,"depth":977,"text":1293},{"id":1317,"depth":977,"text":1318},{"id":1331,"depth":977,"text":1332},{"id":1369,"depth":977,"text":1369},{"id":1384,"depth":977,"text":1385},{"id":1405,"depth":916,"text":1405},{"id":1478,"depth":916,"text":1479},"面向从其他一键部署视频渲染器迁移到 HyperFrames 的用户的并排概念映射。","md",null,{},true,{"title":165,"description":1532},"WEH-1wqdrFO1EOMytsCM3OQ4qGJFscBSta1RGbkRyqU",[1540,1542],{"title":161,"path":162,"stem":163,"description":1541,"children":-1},"在 AWS Lambda 上使用 --variables 和 lambda render-batch 命令大规模渲染个性化模板视频。",{"title":175,"path":176,"stem":177,"description":1543,"children":-1},"类型定义、HTML 生成、运行时与 Linter — 所有其他包的基础依赖。",1780322253488]