[{"data":1,"prerenderedAt":2692},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Frendering":686,"\u002Fguides\u002Frendering-surround":2687},[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":104,"body":688,"description":2681,"extension":2682,"links":2683,"meta":2684,"navigation":1428,"path":105,"seo":2685,"stem":106,"__hash__":2686},"docs\u002F03.guides\u002F11.rendering.md",{"type":689,"value":690,"toc":2642},"minimark",[691,705,708,712,715,742,745,753,756,759,773,777,780,800,802,808,811,814,818,821,827,843,849,869,874,882,886,889,895,898,918,922,933,937,948,969,972,1036,1039,1307,1310,1315,1382,1391,1456,1475,1479,1482,1495,1573,1579,1581,1588,1591,1598,1656,1659,1662,1742,1760,1764,1775,1778,1789,1791,1794,1805,1808,1858,1864,1867,1874,1938,1941,1945,1956,2016,2019,2022,2077,2086,2088,2091,2095,2119,2125,2142,2153,2156,2265,2277,2281,2304,2321,2324,2336,2360,2378,2381,2543,2546,2549,2567,2569,2585,2605,2608,2639],[692,693,694,695,698,699,701,702,704],"p",{},"使用 ",[696,697,195],"a",{"href":196}," 将你的 Hyperframes ",[696,700,38],{"href":39},"渲染为 MP4、MOV 或 WebM。渲染流水线是逐帧且基于寻址的——参见",[696,703,54],{"href":55},"了解底层原理。",[706,707,15],"h2",{"id":15},[709,710,711],"h3",{"id":711},"验证你的环境",[692,713,714],{},"运行诊断命令检查所需依赖：",[716,717,723],"pre",{"className":718,"code":719,"language":720,"meta":721,"style":722},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx hyperframes doctor\n","bash","Terminal","",[724,725,726],"code",{"__ignoreMap":722},[727,728,731,735,739],"span",{"class":729,"line":730},"line",1,[727,732,734],{"class":733},"sBMFI","npx",[727,736,738],{"class":737},"sfazB"," hyperframes",[727,740,741],{"class":737}," doctor\n",[692,743,744],{},"预期输出：",[716,746,751],{"className":747,"code":749,"language":750},[748],"language-text","✓ Node.js    v22.x\n✓ FFmpeg      7.x\n✓ FFprobe     7.x\n✓ Chrome      (bundled)\n✓ Docker      available\n","text",[724,752,749],{"__ignoreMap":722},[709,754,755],{"id":755},"预览你的合成",[692,757,758],{},"渲染前，在浏览器中预览合成以验证其外观正确：",[716,760,762],{"className":718,"code":761,"language":720,"meta":721,"style":722},"npx hyperframes preview\n",[724,763,764],{"__ignoreMap":722},[727,765,766,768,770],{"class":729,"line":730},[727,767,734],{"class":733},[727,769,738],{"class":737},[727,771,772],{"class":737}," preview\n",[709,774,776],{"id":775},"渲染为-mp4","渲染为 MP4",[692,778,779],{},"在项目目录中运行渲染命令：",[716,781,783],{"className":718,"code":782,"language":720,"meta":721,"style":722},"npx hyperframes render --output output.mp4\n",[724,784,785],{"__ignoreMap":722},[727,786,787,789,791,794,797],{"class":729,"line":730},[727,788,734],{"class":733},[727,790,738],{"class":737},[727,792,793],{"class":737}," render",[727,795,796],{"class":737}," --output",[727,798,799],{"class":737}," output.mp4\n",[692,801,744],{},[716,803,806],{"className":804,"code":805,"language":750},[748],"⠋ Rendering composition \"root\" (30fps, standard quality)\n✓ Captured 240 frames in 8.2s\n✓ Encoded to output.mp4 (8.0s, 1920x1080, 4.2MB)\n",[724,807,805],{"__ignoreMap":722},[706,809,810],{"id":810},"渲染模式",[709,812,813],{"id":813},"本地模式",[709,815,817],{"id":816},"本地模式默认","本地模式（默认）",[692,819,820],{},"使用 Puppeteer（捆绑 Chromium）和你系统的 FFmpeg。开发期间迭代速度快。",[692,822,823,824,826],{},"**需要：**你系统上安装了 FFmpeg。如果 FFmpeg 未找到，请参见",[696,825,136],{"href":137},"。",[716,828,829],{"className":718,"code":782,"language":720,"meta":721,"style":722},[724,830,831],{"__ignoreMap":722},[727,832,833,835,837,839,841],{"class":729,"line":730},[727,834,734],{"class":733},[727,836,738],{"class":737},[727,838,793],{"class":737},[727,840,796],{"class":737},[727,842,799],{"class":737},[692,844,845],{},[846,847,848],"strong",{},"优点：",[850,851,852,856,859,866],"ul",{},[853,854,855],"li",{},"启动快，无容器开销",[853,857,858],{},"默认可使用系统 GPU 进行 Chrome\u002FWebGL 捕获",[853,860,861,862,865],{},"可使用系统 GPU 进行硬件加速编码（配合 ",[724,863,864],{},"--gpu","）",[853,867,868],{},"最适合迭代开发",[692,870,871],{},[846,872,873],{},"缺点：",[850,875,876,879],{},[853,877,878],{},"由于字体和 Chrome 版本差异，不同平台输出可能不同",[853,880,881],{},"不适合需要可重现性的 CI\u002FCD 流水线",[709,883,885],{"id":884},"docker-模式","Docker 模式",[709,887,885],{"id":888},"docker-模式-1",[692,890,891,894],{},[696,892,893],{"href":55},"确定性","输出，使用精确的 Chrome 版本和字体集。用于生产渲染和 CI 流水线。",[692,896,897],{},"**需要：**Docker 已安装并运行。",[716,899,901],{"className":718,"code":900,"language":720,"meta":721,"style":722},"npx hyperframes render --docker --output output.mp4\n",[724,902,903],{"__ignoreMap":722},[727,904,905,907,909,911,914,916],{"class":729,"line":730},[727,906,734],{"class":733},[727,908,738],{"class":737},[727,910,793],{"class":737},[727,912,913],{"class":737}," --docker",[727,915,796],{"class":737},[727,917,799],{"class":737},[692,919,920],{},[846,921,848],{},[850,923,924,927,930],{},[853,925,926],{},"每个平台输出相同——相同的 Chrome、相同的字体、相同的 FFmpeg",[853,928,929],{},"生产中使用的同一流水线",[853,931,932],{},"适合 CI\u002FCD 和自动化工作流",[692,934,935],{},[846,936,873],{},[850,938,939,942,945],{},[853,940,941],{},"由于容器初始化启动较慢",[853,943,944],{},"浏览器捕获使用确定性软件 GL 路径",[853,946,947],{},"GPU 编码需要 Docker 主机 GPU 直通，在 Docker Desktop 上不跨平台",[949,950,951,957],"blockquote",{},[692,952,953,954],{},"ℹ️ ",[846,955,956],{},"Note",[692,958,959,960,963,964,968],{},"Docker 模式使用 ",[724,961,962],{},"chrome-headless-shell"," 配合 ",[696,965,967],{"href":966},"\u002Fconcepts\u002Fdeterminism#%E5%B7%A5%E4%BD%9C%E5%8E%9F%E7%90%86","BeginFrame"," 控制实现帧精确的确定性捕获。",[706,970,971],{"id":971},"何时使用哪种模式",[973,974,975,988],"table",{},[976,977,978],"thead",{},[979,980,981,985],"tr",{},[982,983,984],"th",{},"场景",[982,986,987],{},"推荐模式",[989,990,991,1000,1008,1015,1022,1029],"tbody",{},[979,992,993,997],{},[994,995,996],"td",{},"本地开发和迭代",[994,998,999],{},"本地",[979,1001,1002,1005],{},[994,1003,1004],{},"CI\u002FCD 流水线",[994,1006,1007],{},"Docker",[979,1009,1010,1013],{},[994,1011,1012],{},"与团队分享渲染",[994,1014,1007],{},[979,1016,1017,1020],{},[994,1018,1019],{},"快速预览导出",[994,1021,999],{},[979,1023,1024,1027],{},[994,1025,1026],{},"AI 代理驱动的渲染",[994,1028,1007],{},[979,1030,1031,1034],{},[994,1032,1033],{},"性能基准测试",[994,1035,999],{},[706,1037,1038],{"id":1038},"选项",[973,1040,1041,1057],{},[976,1042,1043],{},[979,1044,1045,1048,1051,1054],{},[982,1046,1047],{},"标志",[982,1049,1050],{},"值",[982,1052,1053],{},"默认值",[982,1055,1056],{},"描述",[989,1058,1059,1077,1097,1113,1129,1149,1172,1194,1214,1228,1247,1263,1277,1293],{},[979,1060,1061,1066,1069,1074],{},[994,1062,1063],{},[724,1064,1065],{},"--output",[994,1067,1068],{},"路径",[994,1070,1071],{},[724,1072,1073],{},"renders\u002F\u003Cname>.mp4",[994,1075,1076],{},"输出文件路径",[979,1078,1079,1084,1087,1090],{},[994,1080,1081],{},[724,1082,1083],{},"--format",[994,1085,1086],{},"mp4、mov、webm、png-sequence",[994,1088,1089],{},"mp4",[994,1091,1092,1093,865],{},"输出格式（参见下方",[696,1094,1096],{"href":1095},"#%E9%80%8F%E6%98%8E%E8%A7%86%E9%A2%91","透明视频",[979,1098,1099,1104,1107,1110],{},[994,1100,1101],{},[724,1102,1103],{},"--fps",[994,1105,1106],{},"24、30、60",[994,1108,1109],{},"30",[994,1111,1112],{},"每秒帧数",[979,1114,1115,1120,1123,1126],{},[994,1116,1117],{},[724,1118,1119],{},"--quality",[994,1121,1122],{},"draft、standard、high",[994,1124,1125],{},"standard",[994,1127,1128],{},"编码质量预设",[979,1130,1131,1136,1139,1142],{},[994,1132,1133],{},[724,1134,1135],{},"--crf",[994,1137,1138],{},"0–51",[994,1140,1141],{},"—",[994,1143,1144,1145,1148],{},"覆盖 CRF（越低 = 质量越高）。不能与 ",[724,1146,1147],{},"--video-bitrate"," 组合使用",[979,1150,1151,1155,1165,1167],{},[994,1152,1153],{},[724,1154,1147],{},[994,1156,1157,1158,1161,1162],{},"如 ",[724,1159,1160],{},"10M","、",[724,1163,1164],{},"5000k",[994,1166,1141],{},[994,1168,1169,1170,1148],{},"目标比特率编码。不能与 ",[724,1171,1135],{},[979,1173,1174,1179,1185,1187],{},[994,1175,1176],{},[724,1177,1178],{},"--workers",[994,1180,1181,1182],{},"1-8 或 ",[724,1183,1184],{},"auto",[994,1186,1184],{},[994,1188,1189,1190,865],{},"并行渲染工作进程（参见下方",[696,1191,1193],{"href":1192},"#%E5%B7%A5%E4%BD%9C%E8%BF%9B%E7%A8%8B","工作进程",[979,1195,1196,1201,1204,1207],{},[994,1197,1198],{},[724,1199,1200],{},"--max-concurrent-renders",[994,1202,1203],{},"1-10",[994,1205,1206],{},"2",[994,1208,1209,1210,865],{},"通过生产者服务器的最大同时渲染数（参见下方",[696,1211,1213],{"href":1212},"#%E5%B9%B6%E5%8F%91%E6%B8%B2%E6%9F%93","并发渲染",[979,1215,1216,1220,1222,1225],{},[994,1217,1218],{},[724,1219,864],{},[994,1221,1141],{},[994,1223,1224],{},"off",[994,1226,1227],{},"GPU 编码（NVENC、VideoToolbox、AMF、VAAPI、QSV）",[979,1229,1230,1239,1241,1244],{},[994,1231,1232,1235,1236],{},[724,1233,1234],{},"--browser-gpu"," \u002F ",[724,1237,1238],{},"--no-browser-gpu",[994,1240,1141],{},[994,1242,1243],{},"本地开启，Docker 中关闭",[994,1245,1246],{},"使用或退出本地 Chrome\u002FWebGL 捕获的主机 GPU 加速",[979,1248,1249,1254,1256,1258],{},[994,1250,1251],{},[724,1252,1253],{},"--hdr",[994,1255,1141],{},[994,1257,1224],{},[994,1259,1260,1261],{},"即使未检测到 HDR 源也强制 HDR 输出（仅 MP4）。参见 ",[696,1262,112],{"href":113},[979,1264,1265,1270,1272,1274],{},[994,1266,1267],{},[724,1268,1269],{},"--sdr",[994,1271,1141],{},[994,1273,1224],{},[994,1275,1276],{},"即使检测到 HDR 源也强制 SDR 输出",[979,1278,1279,1284,1286,1288],{},[994,1280,1281],{},[724,1282,1283],{},"--docker",[994,1285,1141],{},[994,1287,1224],{},[994,1289,1290,1291],{},"使用 Docker 进行",[696,1292,54],{"href":55},[979,1294,1295,1300,1302,1304],{},[994,1296,1297],{},[724,1298,1299],{},"--quiet",[994,1301,1141],{},[994,1303,1224],{},[994,1305,1306],{},"抑制详细输出",[706,1308,1309],{"id":1309},"质量和编码",[692,1311,1312,1314],{},[724,1313,1119],{}," 标志选择一个预设，控制 H.264 CRF（恒定速率因子）和编码器速度：",[973,1316,1317,1333],{},[976,1318,1319],{},[979,1320,1321,1324,1327,1330],{},[982,1322,1323],{},"预设",[982,1325,1326],{},"CRF",[982,1328,1329],{},"x264 预设",[982,1331,1332],{},"最适合",[989,1334,1335,1351,1366],{},[979,1336,1337,1342,1345,1348],{},[994,1338,1339],{},[724,1340,1341],{},"draft",[994,1343,1344],{},"28",[994,1346,1347],{},"ultrafast",[994,1349,1350],{},"快速预览、迭代",[979,1352,1353,1357,1360,1363],{},[994,1354,1355],{},[724,1356,1125],{},[994,1358,1359],{},"18",[994,1361,1362],{},"medium",[994,1364,1365],{},"通用——在 1080p 下视觉无损",[979,1367,1368,1373,1376,1379],{},[994,1369,1370],{},[724,1371,1372],{},"high",[994,1374,1375],{},"15",[994,1377,1378],{},"slow",[994,1380,1381],{},"最终交付，接近无损质量",[692,1383,1384,1385,1387,1388,1390],{},"如需更精细的控制，使用 ",[724,1386,1135],{}," 或 ",[724,1389,1147],{}," 覆盖预设：",[716,1392,1394],{"className":718,"code":1393,"language":720,"meta":722,"style":722},"# Near-lossless quality (CRF 15 = very high quality, large file)\nnpx hyperframes render --crf 15 --output pristine.mp4\n\n# Target a specific bitrate (useful for size-constrained delivery)\nnpx hyperframes render --video-bitrate 10M --output controlled.mp4\n",[724,1395,1396,1402,1423,1430,1436],{"__ignoreMap":722},[727,1397,1398],{"class":729,"line":730},[727,1399,1401],{"class":1400},"sHwdD","# Near-lossless quality (CRF 15 = very high quality, large file)\n",[727,1403,1405,1407,1409,1411,1414,1418,1420],{"class":729,"line":1404},2,[727,1406,734],{"class":733},[727,1408,738],{"class":737},[727,1410,793],{"class":737},[727,1412,1413],{"class":737}," --crf",[727,1415,1417],{"class":1416},"sbssI"," 15",[727,1419,796],{"class":737},[727,1421,1422],{"class":737}," pristine.mp4\n",[727,1424,1426],{"class":729,"line":1425},3,[727,1427,1429],{"emptyLinePlaceholder":1428},true,"\n",[727,1431,1433],{"class":729,"line":1432},4,[727,1434,1435],{"class":1400},"# Target a specific bitrate (useful for size-constrained delivery)\n",[727,1437,1439,1441,1443,1445,1448,1451,1453],{"class":729,"line":1438},5,[727,1440,734],{"class":733},[727,1442,738],{"class":737},[727,1444,793],{"class":737},[727,1446,1447],{"class":737}," --video-bitrate",[727,1449,1450],{"class":737}," 10M",[727,1452,796],{"class":737},[727,1454,1455],{"class":737}," controlled.mp4\n",[692,1457,1458,1461,1462,1464,1465,1468,1469,1235,1472,826],{},[846,1459,1460],{},"提示","：默认 ",[724,1463,1125],{}," 预设（CRF 18）在 1080p 下视觉无损——大多数人无法将其与源区分开。使用 ",[724,1466,1467],{},"--quality draft"," 进行更快迭代，或在文件大小不是问题时使用 ",[724,1470,1471],{},"--quality high",[724,1473,1474],{},"--crf 10",[706,1476,1478],{"id":1477},"gpu-加速","GPU 加速",[692,1480,1481],{},"Hyperframes 有两个独立的 GPU 加速面：",[850,1483,1484,1489],{},[853,1485,1486,1488],{},[724,1487,864],{}," 在可用时使用 FFmpeg 中的硬件视频编码器。支持的后端包括 macOS 上的 VideoToolbox、NVIDIA 系统上的 NVENC、Windows 上的 AMD AMF、Linux 上的 VAAPI 以及受支持的 Windows\u002FLinux 主机上的 Intel QSV。",[853,1490,1491,1492,1494],{},"浏览器 GPU 使用主机 GPU 进行本地 Chrome\u002FWebGL 捕获。本地渲染时自动启用，Docker 中禁用。使用 ",[724,1493,1238],{}," 退出。",[716,1496,1498],{"className":718,"code":1497,"language":720,"meta":721,"style":722},"# Add hardware FFmpeg encoding to the default local browser-GPU render\nnpx hyperframes render --gpu --output encoded-fast.mp4\n\n# Opt out of hardware Chrome\u002FWebGL capture\nnpx hyperframes render --no-browser-gpu --output software-browser.mp4\n\n# Use browser GPU plus hardware FFmpeg encoding\nnpx hyperframes render --gpu --output gpu.mp4\n",[724,1499,1500,1505,1521,1525,1530,1546,1551,1557],{"__ignoreMap":722},[727,1501,1502],{"class":729,"line":730},[727,1503,1504],{"class":1400},"# Add hardware FFmpeg encoding to the default local browser-GPU render\n",[727,1506,1507,1509,1511,1513,1516,1518],{"class":729,"line":1404},[727,1508,734],{"class":733},[727,1510,738],{"class":737},[727,1512,793],{"class":737},[727,1514,1515],{"class":737}," --gpu",[727,1517,796],{"class":737},[727,1519,1520],{"class":737}," encoded-fast.mp4\n",[727,1522,1523],{"class":729,"line":1425},[727,1524,1429],{"emptyLinePlaceholder":1428},[727,1526,1527],{"class":729,"line":1432},[727,1528,1529],{"class":1400},"# Opt out of hardware Chrome\u002FWebGL capture\n",[727,1531,1532,1534,1536,1538,1541,1543],{"class":729,"line":1438},[727,1533,734],{"class":733},[727,1535,738],{"class":737},[727,1537,793],{"class":737},[727,1539,1540],{"class":737}," --no-browser-gpu",[727,1542,796],{"class":737},[727,1544,1545],{"class":737}," software-browser.mp4\n",[727,1547,1549],{"class":729,"line":1548},6,[727,1550,1429],{"emptyLinePlaceholder":1428},[727,1552,1554],{"class":729,"line":1553},7,[727,1555,1556],{"class":1400},"# Use browser GPU plus hardware FFmpeg encoding\n",[727,1558,1560,1562,1564,1566,1568,1570],{"class":729,"line":1559},8,[727,1561,734],{"class":733},[727,1563,738],{"class":737},[727,1565,793],{"class":737},[727,1567,1515],{"class":737},[727,1569,796],{"class":737},[727,1571,1572],{"class":737}," gpu.mp4\n",[692,1574,1575,1576,1578],{},"浏览器 GPU 捕获仅限本地模式。它映射到平台原生 Chrome GPU 后端：macOS 上的 Metal、Windows 上的 D3D11 和 Linux 上的 EGL。当跨机器精确可重现性比本地渲染速度更重要时，使用 ",[724,1577,1238],{}," 或 Docker 模式。",[706,1580,1193],{"id":1193},[692,1582,1583,1584,1587],{},"每个渲染工作进程启动一个",[846,1585,1586],{},"独立的 Chrome 浏览器进程","来并行捕获帧。更多工作进程可以加速渲染，但每个消耗约 256 MB RAM 和大量 CPU。",[709,1589,1590],{"id":1590},"默认行为",[692,1592,1593,1594,1597],{},"默认情况下，Hyperframes 使用 ",[846,1595,1596],{},"CPU 核心数的一半，上限为 4","：",[973,1599,1600,1613],{},[976,1601,1602],{},[979,1603,1604,1607,1610],{},[982,1605,1606],{},"机器",[982,1608,1609],{},"CPU 核心数",[982,1611,1612],{},"默认工作进程数",[989,1614,1615,1626,1637,1646],{},[979,1616,1617,1620,1623],{},[994,1618,1619],{},"MacBook Air（M1）",[994,1621,1622],{},"8",[994,1624,1625],{},"4",[979,1627,1628,1631,1634],{},[994,1629,1630],{},"MacBook Pro（M3）",[994,1632,1633],{},"12",[994,1635,1636],{},"4（上限）",[979,1638,1639,1642,1644],{},[994,1640,1641],{},"4 核笔记本电脑",[994,1643,1625],{},[994,1645,1206],{},[979,1647,1648,1651,1653],{},[994,1649,1650],{},"2 核虚拟机",[994,1652,1206],{},[994,1654,1655],{},"1",[692,1657,1658],{},"这是刻意保守的。每个工作进程生成自己的 Chrome 进程，因此每个工作进程的开销很大。较少的工作进程避免与 FFmpeg 编码和其他应用程序的资源竞争。",[709,1660,1661],{"id":1661},"选择工作进程数",[716,1663,1665],{"className":718,"code":1664,"language":720,"meta":721,"style":722},"# Explicit worker count\nnpx hyperframes render --workers 1 --output output.mp4\n\n# Let Hyperframes pick based on your CPU\nnpx hyperframes render --workers auto --output output.mp4\n\n# Maximum parallelism (use with caution on laptops)\nnpx hyperframes render --workers 8 --output output.mp4\n",[724,1666,1667,1672,1690,1694,1699,1716,1720,1725],{"__ignoreMap":722},[727,1668,1669],{"class":729,"line":730},[727,1670,1671],{"class":1400},"# Explicit worker count\n",[727,1673,1674,1676,1678,1680,1683,1686,1688],{"class":729,"line":1404},[727,1675,734],{"class":733},[727,1677,738],{"class":737},[727,1679,793],{"class":737},[727,1681,1682],{"class":737}," --workers",[727,1684,1685],{"class":1416}," 1",[727,1687,796],{"class":737},[727,1689,799],{"class":737},[727,1691,1692],{"class":729,"line":1425},[727,1693,1429],{"emptyLinePlaceholder":1428},[727,1695,1696],{"class":729,"line":1432},[727,1697,1698],{"class":1400},"# Let Hyperframes pick based on your CPU\n",[727,1700,1701,1703,1705,1707,1709,1712,1714],{"class":729,"line":1438},[727,1702,734],{"class":733},[727,1704,738],{"class":737},[727,1706,793],{"class":737},[727,1708,1682],{"class":737},[727,1710,1711],{"class":737}," auto",[727,1713,796],{"class":737},[727,1715,799],{"class":737},[727,1717,1718],{"class":729,"line":1548},[727,1719,1429],{"emptyLinePlaceholder":1428},[727,1721,1722],{"class":729,"line":1553},[727,1723,1724],{"class":1400},"# Maximum parallelism (use with caution on laptops)\n",[727,1726,1727,1729,1731,1733,1735,1738,1740],{"class":729,"line":1559},[727,1728,734],{"class":733},[727,1730,738],{"class":737},[727,1732,793],{"class":737},[727,1734,1682],{"class":737},[727,1736,1737],{"class":1416}," 8",[727,1739,796],{"class":737},[727,1741,799],{"class":737},[949,1743,1744,1750],{},[692,1745,1746,1747],{},"💡 ",[846,1748,1749],{},"Tip",[692,1751,1752,1753,1756,1757,1759],{},"从默认值开始。如果渲染感觉慢且你的系统有余量（检查活动监视器 \u002F ",[724,1754,1755],{},"htop","），尝试增加 ",[724,1758,1178],{},"。如果看到高内存压力或风扇噪音，减少它。",[709,1761,1763],{"id":1762},"何时使用-1-个工作进程","何时使用 1 个工作进程",[850,1765,1766,1769,1772],{},[853,1767,1768],{},"短合成（低于 2 秒 \u002F 60 帧）——并行开销超过收益",[853,1770,1771],{},"低内存机器（4 GB 或更少）",[853,1773,1774],{},"渲染与其他重进程（视频编辑、大型构建）同时运行",[709,1776,1777],{"id":1777},"何时增加工作进程",[850,1779,1780,1783,1786],{},[853,1781,1782],{},"在具有 8+ 核心和 16+ GB RAM 的机器上的长合成（30+ 秒）",[853,1784,1785],{},"专用渲染机器或 CI 运行器",[853,1787,1788],{},"在配置良好的主机上的 Docker 模式",[706,1790,1213],{"id":1213},[692,1792,1793],{},"当多个渲染请求同时到达生产者服务器时（常见于 AI 代理），每个渲染生成自己的 Chrome 工作进程集。过多的并发渲染可能耗尽 CPU 并导致失败。",[692,1795,1796,1797,1800,1801,1804],{},"生产者服务器使用",[846,1798,1799],{},"请求级信号量","来排队渲染。同时只有 ",[724,1802,1803],{},"maxConcurrentRenders"," 个渲染执行——额外请求在 FIFO 队列中等待直到有空位。",[709,1806,1807],{"id":1807},"配置",[716,1809,1811],{"className":718,"code":1810,"language":720,"meta":721,"style":722},"# CLI flag\nnpx hyperframes render --max-concurrent-renders 2 --output output.mp4\n\n# Environment variable (for the producer server)\nPRODUCER_MAX_CONCURRENT_RENDERS=2\n",[724,1812,1813,1818,1836,1840,1845],{"__ignoreMap":722},[727,1814,1815],{"class":729,"line":730},[727,1816,1817],{"class":1400},"# CLI flag\n",[727,1819,1820,1822,1824,1826,1829,1832,1834],{"class":729,"line":1404},[727,1821,734],{"class":733},[727,1823,738],{"class":737},[727,1825,793],{"class":737},[727,1827,1828],{"class":737}," --max-concurrent-renders",[727,1830,1831],{"class":1416}," 2",[727,1833,796],{"class":737},[727,1835,799],{"class":737},[727,1837,1838],{"class":729,"line":1425},[727,1839,1429],{"emptyLinePlaceholder":1428},[727,1841,1842],{"class":729,"line":1432},[727,1843,1844],{"class":1400},"# Environment variable (for the producer server)\n",[727,1846,1847,1851,1855],{"class":729,"line":1438},[727,1848,1850],{"class":1849},"sTEyZ","PRODUCER_MAX_CONCURRENT_RENDERS",[727,1852,1854],{"class":1853},"sMK4o","=",[727,1856,1857],{"class":737},"2\n",[692,1859,1860,1861,1863],{},"默认为 ",[846,1862,1206],{}," 个并发渲染，在 8 核机器上运行良好，每个渲染使用 2-3 个工作进程。",[709,1865,1866],{"id":1866},"队列状态",[692,1868,1869,1870,1873],{},"生产者服务器暴露一个 ",[724,1871,1872],{},"GET \u002Frender\u002Fqueue"," 端点返回当前状态：",[716,1875,1879],{"className":1876,"code":1877,"language":1878,"meta":722,"style":722},"language-json shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","{\n\"maxConcurrentRenders\": 2,\n\"activeRenders\": 1,\n\"queuedRenders\": 3\n}\n","json",[724,1880,1881,1886,1904,1919,1933],{"__ignoreMap":722},[727,1882,1883],{"class":729,"line":730},[727,1884,1885],{"class":1853},"{\n",[727,1887,1888,1891,1894,1896,1899,1901],{"class":729,"line":1404},[727,1889,1890],{"class":1853},"\"",[727,1892,1803],{"class":1893},"spNyl",[727,1895,1890],{"class":1853},[727,1897,1898],{"class":1853},":",[727,1900,1831],{"class":1416},[727,1902,1903],{"class":1853},",\n",[727,1905,1906,1908,1911,1913,1915,1917],{"class":729,"line":1425},[727,1907,1890],{"class":1853},[727,1909,1910],{"class":1893},"activeRenders",[727,1912,1890],{"class":1853},[727,1914,1898],{"class":1853},[727,1916,1685],{"class":1416},[727,1918,1903],{"class":1853},[727,1920,1921,1923,1926,1928,1930],{"class":729,"line":1432},[727,1922,1890],{"class":1853},[727,1924,1925],{"class":1893},"queuedRenders",[727,1927,1890],{"class":1853},[727,1929,1898],{"class":1853},[727,1931,1932],{"class":1416}," 3\n",[727,1934,1935],{"class":729,"line":1438},[727,1936,1937],{"class":1853},"}\n",[692,1939,1940],{},"AI 代理可以轮询此端点来决定是否提交渲染或等待。",[709,1942,1944],{"id":1943},"sse-队列事件","SSE 队列事件",[692,1946,1947,1948,1951,1952,1955],{},"使用流式端点（",[724,1949,1950],{},"POST \u002Frender\u002Fstream","）时，排队请求在渲染开始前收到 ",[724,1953,1954],{},"queued"," 事件：",[716,1957,1959],{"className":1876,"code":1958,"language":1878,"meta":722,"style":722},"{\"type\": \"queued\", \"requestId\": \"...\", \"position\": 2}\n",[724,1960,1961],{"__ignoreMap":722},[727,1962,1963,1966,1968,1971,1973,1975,1978,1980,1982,1985,1987,1990,1992,1994,1996,1999,2001,2003,2005,2008,2010,2012,2014],{"class":729,"line":730},[727,1964,1965],{"class":1853},"{",[727,1967,1890],{"class":1853},[727,1969,1970],{"class":1893},"type",[727,1972,1890],{"class":1853},[727,1974,1898],{"class":1853},[727,1976,1977],{"class":1853}," \"",[727,1979,1954],{"class":737},[727,1981,1890],{"class":1853},[727,1983,1984],{"class":1853},",",[727,1986,1977],{"class":1853},[727,1988,1989],{"class":1893},"requestId",[727,1991,1890],{"class":1853},[727,1993,1898],{"class":1853},[727,1995,1977],{"class":1853},[727,1997,1998],{"class":737},"...",[727,2000,1890],{"class":1853},[727,2002,1984],{"class":1853},[727,2004,1977],{"class":1853},[727,2006,2007],{"class":1893},"position",[727,2009,1890],{"class":1853},[727,2011,1898],{"class":1853},[727,2013,1831],{"class":1416},[727,2015,1937],{"class":1853},[692,2017,2018],{},"这使代理可以向用户报告\"排队中\"而不是看起来卡住了。",[709,2020,2021],{"id":2021},"选择并发限制",[973,2023,2024,2035],{},[976,2025,2026],{},[979,2027,2028,2030,2032],{},[982,2029,1606],{},[982,2031,1609],{},[982,2033,2034],{},"推荐限制",[989,2036,2037,2046,2055,2066],{},[979,2038,2039,2042,2044],{},[994,2040,2041],{},"4 核虚拟机",[994,2043,1625],{},[994,2045,1655],{},[979,2047,2048,2051,2053],{},[994,2049,2050],{},"8 核工作站",[994,2052,1622],{},[994,2054,1206],{},[979,2056,2057,2060,2063],{},[994,2058,2059],{},"16 核服务器",[994,2061,2062],{},"16",[994,2064,2065],{},"3-4",[979,2067,2068,2071,2074],{},[994,2069,2070],{},"32 核渲染机器",[994,2072,2073],{},"32",[994,2075,2076],{},"5-6",[949,2078,2079,2083],{},[692,2080,1746,2081],{},[846,2082,1749],{},[692,2084,2085],{},"不确定时使用 1。渲染会排队并顺序执行，但每个都获得完整的 CPU 并尽快完成。这比 3 个渲染争夺 CPU 都慢慢完成——或失败——要好。",[706,2087,1096],{"id":1096},[692,2089,2090],{},"Hyperframes 支持渲染透明背景——用于覆盖层、底部字幕条、订阅卡片以及你想在视频编辑器中合成到其他素材上方的任何元素。",[709,2092,2094],{"id":2093},"推荐格式movprores-4444","推荐格式：MOV（ProRes 4444）",[716,2096,2098],{"className":718,"code":2097,"language":720,"meta":721,"style":722},"npx hyperframes render --format mov --output overlay.mov\n",[724,2099,2100],{"__ignoreMap":722},[727,2101,2102,2104,2106,2108,2111,2114,2116],{"class":729,"line":730},[727,2103,734],{"class":733},[727,2105,738],{"class":737},[727,2107,793],{"class":737},[727,2109,2110],{"class":737}," --format",[727,2112,2113],{"class":737}," mov",[727,2115,796],{"class":737},[727,2117,2118],{"class":737}," overlay.mov\n",[692,2120,2121,2124],{},[846,2122,2123],{},"MOV 配合 ProRes 4444"," 是透明视频的行业标准。它在所有主流视频编辑器中工作：",[850,2126,2127,2130,2133,2136,2139],{},[853,2128,2129],{},"CapCut",[853,2131,2132],{},"Final Cut Pro",[853,2134,2135],{},"Adobe Premiere Pro",[853,2137,2138],{},"DaVinci Resolve",[853,2140,2141],{},"After Effects",[949,2143,2144,2150],{},[692,2145,2146,2147],{},"⚠️ ",[846,2148,2149],{},"Warning",[692,2151,2152],{},"ProRes MOV 文件较大（短片段通常 5-40 MB），因为 ProRes 是为编辑优化的高质量中间编解码器，而非交付格式。这是预期的——Remotion 和专业流水线也做同样的权衡。",[709,2154,2155],{"id":2155},"格式比较",[973,2157,2158,2180],{},[976,2159,2160],{},[979,2161,2162,2165,2168,2171,2174,2177],{},[982,2163,2164],{},"格式",[982,2166,2167],{},"编解码器",[982,2169,2170],{},"透明度",[982,2172,2173],{},"视频编辑器",[982,2175,2176],{},"浏览器",[982,2178,2179],{},"文件大小",[989,2181,2182,2204,2225,2246],{},[979,2183,2184,2189,2192,2195,2198,2201],{},[994,2185,2186],{},[846,2187,2188],{},"MOV",[994,2190,2191],{},"ProRes 4444",[994,2193,2194],{},"是",[994,2196,2197],{},"CapCut、Final Cut、Premiere、DaVinci、After Effects",[994,2199,2200],{},"否",[994,2202,2203],{},"较大",[979,2205,2206,2211,2214,2216,2219,2222],{},[994,2207,2208],{},[846,2209,2210],{},"WebM",[994,2212,2213],{},"VP9",[994,2215,2194],{},[994,2217,2218],{},"无（显示黑色背景）",[994,2220,2221],{},"Chrome、Firefox",[994,2223,2224],{},"较小",[979,2226,2227,2232,2235,2238,2241,2243],{},[994,2228,2229],{},[846,2230,2231],{},"PNG 序列",[994,2233,2234],{},"RGBA PNG（无编码）",[994,2236,2237],{},"是（无损）",[994,2239,2240],{},"After Effects、Nuke、Fusion（图像序列导入）",[994,2242,2200],{},[994,2244,2245],{},"最大",[979,2247,2248,2253,2256,2258,2261,2263],{},[994,2249,2250],{},[846,2251,2252],{},"MP4",[994,2254,2255],{},"H.264",[994,2257,2200],{},[994,2259,2260],{},"全部",[994,2262,2260],{},[994,2264,2224],{},[949,2266,2267,2271],{},[692,2268,953,2269],{},[846,2270,956],{},[692,2272,2273,2276],{},[846,2274,2275],{},"WebM VP9 alpha"," 技术上支持但所有主流视频编辑器都忽略 alpha 通道并将透明区域渲染为黑色。只有基于 Chromium 的浏览器（Chrome、Arc、Brave、Edge）正确解码 VP9 alpha。Safari 不支持。编辑器工作流使用 MOV，WebM 仅用于基于浏览器的播放。",[709,2278,2280],{"id":2279},"png-序列无编码","PNG 序列（无编码）",[716,2282,2284],{"className":718,"code":2283,"language":720,"meta":721,"style":722},"npx hyperframes render --format png-sequence --output frames\u002F\n",[724,2285,2286],{"__ignoreMap":722},[727,2287,2288,2290,2292,2294,2296,2299,2301],{"class":729,"line":730},[727,2289,734],{"class":733},[727,2291,738],{"class":737},[727,2293,793],{"class":737},[727,2295,2110],{"class":737},[727,2297,2298],{"class":737}," png-sequence",[727,2300,796],{"class":737},[727,2302,2303],{"class":737}," frames\u002F\n",[692,2305,2306,2309,2310,2313,2314,2317,2318,2320],{},[724,2307,2308],{},"--format png-sequence"," 完全跳过编码器。捕获的 RGBA 帧被复制到 ",[724,2311,2312],{},"\u003Coutput>\u002Fframe_NNNNNN.png","（零填充），如果合成有音频，还会写入 ",[724,2315,2316],{},"audio.aac"," 伴生文件。当你需要无损帧时使用此选项——用于在 After Effects \u002F Nuke \u002F Fusion 中合成，或作为自定义编码流水线的输入。",[724,2319,1065],{}," 被视为目录，如果不存在则创建。",[709,2322,2323],{"id":2323},"工作原理",[692,2325,2326,2327,1161,2330,1387,2333,2335],{},"当你使用 ",[724,2328,2329],{},"--format mov",[724,2331,2332],{},"--format webm",[724,2334,2308],{}," 渲染时，Hyperframes：",[2337,2338,2339,2346,2353],"ol",{},[853,2340,2341,2342,2345],{},"将每帧捕获为",[846,2343,2344],{},"带 alpha 通道的 PNG","（而非 MP4 的 JPEG）",[853,2347,2348,2349,2352],{},"通过 ",[724,2350,2351],{},"Emulation.setDefaultBackgroundColorOverride"," 将 Chrome 页面背景设为透明",[853,2354,2355,2356,2359],{},"使用支持 alpha 的编解码器编码（MOV 使用 ProRes 4444，WebM 使用 VP9）；",[724,2357,2358],{},"png-sequence"," 跳过编码直接写入捕获的帧",[692,2361,2362,2363,2366,2367,1387,2370,2373,2374,2377],{},"你的合成 HTML ",[846,2364,2365],{},"不应","在 ",[724,2368,2369],{},"html",[724,2371,2372],{},"body"," 上设置 ",[724,2375,2376],{},"background","——保持未设置以便透明背景透出。",[709,2379,2380],{"id":2380},"编写透明合成",[716,2382,2385],{"className":2383,"code":2384,"language":2369,"meta":722,"style":722},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cstyle>\n\u002F* Do NOT set background on html\u002Fbody — leave them transparent *\u002F\n* { margin: 0; padding: 0; box-sizing: border-box; }\n\n[data-composition-id=\"my-overlay\"] {\nposition: relative;\nwidth: 1920px;\nheight: 1080px;\noverflow: hidden;\n\u002F* No background here either *\u002F\n}\n\u003C\u002Fstyle>\n",[724,2386,2387,2399,2404,2446,2450,2473,2485,2497,2509,2522,2528,2533],{"__ignoreMap":722},[727,2388,2389,2392,2396],{"class":729,"line":730},[727,2390,2391],{"class":1853},"\u003C",[727,2393,2395],{"class":2394},"swJcz","style",[727,2397,2398],{"class":1853},">\n",[727,2400,2401],{"class":729,"line":1404},[727,2402,2403],{"class":1400},"\u002F* Do NOT set background on html\u002Fbody — leave them transparent *\u002F\n",[727,2405,2406,2409,2412,2416,2418,2421,2424,2427,2429,2431,2433,2436,2438,2441,2443],{"class":729,"line":1425},[727,2407,2408],{"class":733},"*",[727,2410,2411],{"class":1853}," {",[727,2413,2415],{"class":2414},"sqsOY"," margin",[727,2417,1898],{"class":1853},[727,2419,2420],{"class":1416}," 0",[727,2422,2423],{"class":1853},";",[727,2425,2426],{"class":2414}," padding",[727,2428,1898],{"class":1853},[727,2430,2420],{"class":1416},[727,2432,2423],{"class":1853},[727,2434,2435],{"class":2414}," box-sizing",[727,2437,1898],{"class":1853},[727,2439,2440],{"class":1849}," border-box",[727,2442,2423],{"class":1853},[727,2444,2445],{"class":1853}," }\n",[727,2447,2448],{"class":729,"line":1432},[727,2449,1429],{"emptyLinePlaceholder":1428},[727,2451,2452,2455,2458,2460,2462,2465,2467,2470],{"class":729,"line":1438},[727,2453,2454],{"class":1853},"[",[727,2456,2457],{"class":1893},"data-composition-id",[727,2459,1854],{"class":1853},[727,2461,1890],{"class":1853},[727,2463,2464],{"class":737},"my-overlay",[727,2466,1890],{"class":1853},[727,2468,2469],{"class":1853},"]",[727,2471,2472],{"class":1853}," {\n",[727,2474,2475,2477,2479,2482],{"class":729,"line":1548},[727,2476,2007],{"class":2414},[727,2478,1898],{"class":1853},[727,2480,2481],{"class":1849}," relative",[727,2483,2484],{"class":1853},";\n",[727,2486,2487,2490,2492,2495],{"class":729,"line":1553},[727,2488,2489],{"class":2414},"width",[727,2491,1898],{"class":1853},[727,2493,2494],{"class":1416}," 1920px",[727,2496,2484],{"class":1853},[727,2498,2499,2502,2504,2507],{"class":729,"line":1559},[727,2500,2501],{"class":2414},"height",[727,2503,1898],{"class":1853},[727,2505,2506],{"class":1416}," 1080px",[727,2508,2484],{"class":1853},[727,2510,2512,2515,2517,2520],{"class":729,"line":2511},9,[727,2513,2514],{"class":2414},"overflow",[727,2516,1898],{"class":1853},[727,2518,2519],{"class":1849}," hidden",[727,2521,2484],{"class":1853},[727,2523,2525],{"class":729,"line":2524},10,[727,2526,2527],{"class":1400},"\u002F* No background here either *\u002F\n",[727,2529,2531],{"class":729,"line":2530},11,[727,2532,1937],{"class":1853},[727,2534,2536,2539,2541],{"class":729,"line":2535},12,[727,2537,2538],{"class":1853},"\u003C\u002F",[727,2540,2395],{"class":2394},[727,2542,2398],{"class":1853},[692,2544,2545],{},"只有可见元素（卡片、文本、图片）会出现在最终视频中。其他一切都是透明的。",[709,2547,2548],{"id":2548},"验证透明度",[850,2550,2551,2554,2557],{},[853,2552,2553],{},"**在浏览器中：**打开 MOV 文件——它不会播放（ProRes 不是浏览器编解码器）。改为渲染一个 WebM 副本并在 Chrome 中打开棋盘格背景页面查看。",[853,2555,2556],{},"**在视频编辑器中：**导入 MOV 文件并将其放在其他素材上方的轨道上。透明区域应显示下方的素材。",[853,2558,2559,2560,2566],{},"**在线工具：**使用 ",[696,2561,2565],{"href":2562,"rel":2563},"https:\u002F\u002Frotato.app\u002Ftools\u002Ftransparent-video",[2564],"nofollow","rotato.app\u002Ftools\u002Ftransparent-video"," 验证你的 MOV 或 WebM 具有有效的透明度。",[706,2568,1460],{"id":1460},[949,2570,2571,2575],{},[692,2572,1746,2573],{},[846,2574,1749],{},[692,2576,2577,2578,2580,2581,1387,2583,826],{},"开发期间使用 ",[724,2579,1341],{}," 质量以获得快速预览。最终输出切换到 ",[724,2582,1125],{},[724,2584,1372],{},[850,2586,2587,2593,2599],{},[853,2588,694,2589,2592],{},[724,2590,2591],{},"npx hyperframes benchmark"," 查找系统的最优设置",[853,2594,2595,2596],{},"Docker 模式较慢但保证跨平台",[696,2597,2598],{"href":55},"相同输出",[853,2600,2601,2602,2604],{},"对于帧数较多的合成，",[724,2603,864],{}," 可以显著加速本地编码",[706,2606,2607],{"id":2607},"下一步",[850,2609,2610,2617,2624,2632],{},[853,2611,2612,2616],{},[846,2613,2614],{},[696,2615,54],{"href":55},"\n了解确定性保证",[853,2618,2619,2623],{},[846,2620,2621],{},[696,2622,112],{"href":113},"\n从 HDR 视频和图片源渲染 HDR10 MP4",[853,2625,2626,2631],{},[846,2627,2628],{},[696,2629,2630],{"href":196},"CLI 参考","\n完整的 CLI 命令和标志列表",[853,2633,2634,2638],{},[846,2635,2636],{},[696,2637,136],{"href":137},"\n修复常见渲染问题",[2395,2640,2641],{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}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);}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}",{"title":722,"searchDepth":730,"depth":1404,"links":2643},[2644,2649,2655,2656,2657,2658,2659,2665,2671,2679,2680],{"id":15,"depth":1404,"text":15,"children":2645},[2646,2647,2648],{"id":711,"depth":1425,"text":711},{"id":755,"depth":1425,"text":755},{"id":775,"depth":1425,"text":776},{"id":810,"depth":1404,"text":810,"children":2650},[2651,2652,2653,2654],{"id":813,"depth":1425,"text":813},{"id":816,"depth":1425,"text":817},{"id":884,"depth":1425,"text":885},{"id":888,"depth":1425,"text":885},{"id":971,"depth":1404,"text":971},{"id":1038,"depth":1404,"text":1038},{"id":1309,"depth":1404,"text":1309},{"id":1477,"depth":1404,"text":1478},{"id":1193,"depth":1404,"text":1193,"children":2660},[2661,2662,2663,2664],{"id":1590,"depth":1425,"text":1590},{"id":1661,"depth":1425,"text":1661},{"id":1762,"depth":1425,"text":1763},{"id":1777,"depth":1425,"text":1777},{"id":1213,"depth":1404,"text":1213,"children":2666},[2667,2668,2669,2670],{"id":1807,"depth":1425,"text":1807},{"id":1866,"depth":1425,"text":1866},{"id":1943,"depth":1425,"text":1944},{"id":2021,"depth":1425,"text":2021},{"id":1096,"depth":1404,"text":1096,"children":2672},[2673,2674,2675,2676,2677,2678],{"id":2093,"depth":1425,"text":2094},{"id":2155,"depth":1425,"text":2155},{"id":2279,"depth":1425,"text":2280},{"id":2323,"depth":1425,"text":2323},{"id":2380,"depth":1425,"text":2380},{"id":2548,"depth":1425,"text":2548},{"id":1460,"depth":1404,"text":1460},{"id":2607,"depth":1404,"text":2607},"在本地或 Docker 中将合成渲染为 MP4、MOV 或 WebM。","md",null,{},{"title":104,"description":2681},"dFUHkqmiVgHF2DoAnV9A26Ade-IVkR9Dw60KQfS7n6o",[2688,2690],{"title":100,"path":101,"stem":102,"description":2689,"children":-1},"使用 GSAP 为 Hyperframes 合成添加动画。",{"title":108,"path":109,"stem":110,"description":2691,"children":-1},"去除视频或图片的背景，将其作为透明覆盖层放入任何合成中。",1780322243874]