[{"data":1,"prerenderedAt":1721},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Fhdr":686,"\u002Fguides\u002Fhdr-surround":1716},[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":112,"body":688,"description":1709,"extension":1710,"links":1711,"meta":1712,"navigation":1713,"path":113,"seo":1714,"stem":114,"__hash__":1715},"docs\u002F03.guides\u002F13.hdr.md",{"type":689,"value":690,"toc":1685},"minimark",[691,695,717,720,725,728,752,761,764,796,811,815,822,862,869,873,876,879,896,900,916,920,942,946,957,960,963,969,1052,1055,1099,1102,1112,1186,1189,1207,1211,1214,1233,1236,1239,1282,1290,1293,1298,1341,1344,1352,1355,1394,1404,1411,1415,1418,1438,1447,1464,1467,1565,1568,1636,1639,1681],[692,693,694],"p",{},"Hyperframes 可以在你的合成引用 HDR 视频或 HDR 静态图片时渲染为 HDR10 MP4（H.265 10-bit，BT.2020）。HDR 默认从你的媒体源自动检测，当不存在时回退到 SDR。",[696,697,698,705],"blockquote",{},[692,699,700,701],{},"ℹ️ ",[702,703,704],"strong",{},"Note",[692,706,707,708,712,713,716],{},"默认情况下，Hyperframes 探测你的媒体并在存在 HDR 源时启用 HDR。使用 ",[709,710,711],"code",{},"--hdr"," 即使没有 HDR 源也强制 HDR，或使用 ",[709,714,715],{},"--sdr"," 即使存在 HDR 源也强制 SDR。",[718,719,15],"h2",{"id":15},[721,722,724],"h3",{"id":723},"将-hdr-源添加到合成","将 HDR 源添加到合成",[692,726,727],{},"Hyperframes 从源的色彩空间元数据检测 HDR。最可靠的 HDR 源是：",[729,730,731,746],"ul",{},[732,733,734,735,738,739,742,743],"li",{},"标记为 BT.2020 并带有 PQ（",[709,736,737],{},"smpte2084","）或 HLG（",[709,740,741],{},"arib-std-b67","）传输函数的 ",[702,744,745],{},"HDR 视频",[732,747,748,749],{},"作为 16-bit PNG 并带有 BT.2020 PQ 编码的 ",[702,750,751],{},"HDR 静态图片",[692,753,754,755,760],{},"参见",[756,757,759],"a",{"href":758},"#%E6%BA%90%E5%AA%92%E4%BD%93%E8%A6%81%E6%B1%82","源媒体","了解完整详情。",[721,762,763],{"id":763},"正常渲染",[765,766,772],"pre",{"className":767,"code":768,"language":769,"meta":770,"style":771},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx hyperframes render --output output.mp4\n","bash","Terminal","",[709,773,774],{"__ignoreMap":771},[775,776,779,783,787,790,793],"span",{"class":777,"line":778},"line",1,[775,780,782],{"class":781},"sBMFI","npx",[775,784,786],{"class":785},"sfazB"," hyperframes",[775,788,789],{"class":785}," render",[775,791,792],{"class":785}," --output",[775,794,795],{"class":785}," output.mp4\n",[692,797,798,799,802,803,806,807,810],{},"HDR 输出需要 ",[709,800,801],{},"--format mp4","。如果 Hyperframes 检测到 HDR 源，会自动渲染 HDR。如果你同时传入 ",[709,804,805],{},"--format mov"," 或 ",[709,808,809],{},"--format webm","，Hyperframes 会记录警告并回退到 SDR。",[721,812,814],{"id":813},"验证输出为-hdr","验证输出为 HDR",[692,816,817,818,821],{},"使用 ",[709,819,820],{},"ffprobe"," 确认编码流携带 HDR 颜色标记和 HDR10 元数据：",[765,823,825],{"className":767,"code":824,"language":769,"meta":770,"style":771},"ffprobe -v error -show_streams output.mp4 | grep -E 'color_transfer|color_primaries|color_space'\n",[709,826,827],{"__ignoreMap":771},[775,828,829,831,834,837,840,843,847,850,853,856,859],{"class":777,"line":778},[775,830,820],{"class":781},[775,832,833],{"class":785}," -v",[775,835,836],{"class":785}," error",[775,838,839],{"class":785}," -show_streams",[775,841,842],{"class":785}," output.mp4",[775,844,846],{"class":845},"sMK4o"," |",[775,848,849],{"class":781}," grep",[775,851,852],{"class":785}," -E",[775,854,855],{"class":845}," '",[775,857,858],{"class":785},"color_transfer|color_primaries|color_space",[775,860,861],{"class":845},"'\n",[692,863,754,864,868],{},[756,865,867],{"href":866},"#%E9%AA%8C%E8%AF%81-hdr-%E8%BE%93%E5%87%BA","验证 HDR 输出","了解要查找的内容。",[718,870,872],{"id":871},"hdr-模式的工作原理","HDR 模式的工作原理",[692,874,875],{},"在渲染期间，producer：",[721,877,878],{"id":878},"探测每个视频和图片源",[692,880,881,882,885,886,889,890,892,893,895],{},"对每个 ",[709,883,884],{},"\u003Cvideo>"," 和 ",[709,887,888],{},"\u003Cimg>"," 源运行 ",[709,891,820],{}," 以读取其色彩空间（原色、传输函数、矩阵）。此探测驱动默认的自动检测行为，仅在你使用 ",[709,894,715],{}," 显式强制 SDR 时才跳过。",[721,897,899],{"id":898},"选择主导的-hdr-传输函数","选择主导的 HDR 传输函数",[692,901,902,903,905,906,909,910,905,912,915],{},"如果任何源使用 PQ（",[709,904,737],{},"），输出使用 ",[702,907,908],{},"PQ","。否则，如果任何源使用 HLG（",[709,911,741],{},[702,913,914],{},"HLG","。如果未找到 HDR 源，渲染保持为 SDR。",[721,917,919],{"id":918},"编码为-h265-10-bit-bt2020","编码为 H.265 10-bit BT.2020",[692,921,922,923,926,927,930,931,934,935,885,938,941],{},"视频编码器切换到 ",[709,924,925],{},"libx265","，使用 ",[709,928,929],{},"-pix_fmt yuv420p10le","、颜色标记 ",[709,932,933],{},"colorprim=bt2020:transfer=\u003Csmpte2084|arib-std-b67>:colormatrix=bt2020nc"," 和 HDR10 静态元数据（",[709,936,937],{},"master-display",[709,939,940],{},"max-cll","）。没有该元数据，播放器（QuickTime、YouTube、HDR 电视）会将流色调映射为 SDR BT.2020——这看起来会不对。",[721,943,945],{"id":944},"原生合成-hdr-源转换-sdr-叠加层","原生合成 HDR 源，转换 SDR 叠加层",[692,947,948,949,952,953,956],{},"HDR 视频和图片通过 FFmpeg 提取为 16-bit 线性光像素，不放入 DOM 截图，而是以全位深在服务端合成。SDR DOM 叠加层（文本、形状、HTML 中的 UI）在叠加之前从 ",[702,950,951],{},"sRGB"," 转换为 ",[702,954,955],{},"BT.2020","，因此颜色不会偏移。",[718,958,959],{"id":959},"源媒体要求",[721,961,745],{"id":962},"hdr-视频",[692,964,965,966,968],{},"Hyperframes 从其 ",[709,967,820],{}," 色彩空间元数据识别 HDR 视频：",[970,971,972,985],"table",{},[973,974,975],"thead",{},[976,977,978,982],"tr",{},[979,980,981],"th",{},"指标",[979,983,984],{},"识别为 HDR",[986,987,988,1003,1014,1025,1036],"tbody",{},[976,989,990,1000],{},[991,992,993,996,997],"td",{},[709,994,995],{},"color_primaries"," 包含 ",[709,998,999],{},"bt2020",[991,1001,1002],{},"是",[976,1004,1005,1012],{},[991,1006,1007,996,1010],{},[709,1008,1009],{},"color_space",[709,1011,999],{},[991,1013,1002],{},[976,1015,1016,1022],{},[991,1017,1018,1021],{},[709,1019,1020],{},"color_transfer = smpte2084","（PQ）",[991,1023,1024],{},"是 — PQ",[976,1026,1027,1033],{},[991,1028,1029,1032],{},[709,1030,1031],{},"color_transfer = arib-std-b67","（HLG）",[991,1034,1035],{},"是 — HLG",[976,1037,1038,1049],{},[991,1039,1040,1041,1044,1045,1048],{},"其他（如 ",[709,1042,1043],{},"bt709","、",[709,1046,1047],{},"smpte170m","）",[991,1050,1051],{},"否 — 视为 SDR",[692,1053,1054],{},"有效的 HDR 源是任何流元数据报告 BT.2020 原色加上 PQ 或 HLG 传输函数的 MP4。Hyperframes 会自动检测：",[765,1056,1058],{"className":767,"code":1057,"language":769,"meta":770,"style":771},"ffprobe -v error -show_streams assets\u002Fclip.mp4 | grep color\n# color_primaries=bt2020\n# color_transfer=smpte2084\n# color_space=bt2020nc\n",[709,1059,1060,1080,1087,1093],{"__ignoreMap":771},[775,1061,1062,1064,1066,1068,1070,1073,1075,1077],{"class":777,"line":778},[775,1063,820],{"class":781},[775,1065,833],{"class":785},[775,1067,836],{"class":785},[775,1069,839],{"class":785},[775,1071,1072],{"class":785}," assets\u002Fclip.mp4",[775,1074,846],{"class":845},[775,1076,849],{"class":781},[775,1078,1079],{"class":785}," color\n",[775,1081,1083],{"class":777,"line":1082},2,[775,1084,1086],{"class":1085},"sHwdD","# color_primaries=bt2020\n",[775,1088,1090],{"class":777,"line":1089},3,[775,1091,1092],{"class":1085},"# color_transfer=smpte2084\n",[775,1094,1096],{"class":777,"line":1095},4,[775,1097,1098],{"class":1085},"# color_space=bt2020nc\n",[721,1100,751],{"id":1101},"hdr-静态图片",[692,1103,1104,1105,1108,1109,1111],{},"Hyperframes 支持以 ",[702,1106,1107],{},"16-bit PNG"," 格式提供的 HDR 静态图片，标记为 BT.2020 原色和 PQ 传输函数。将它们作为普通 ",[709,1110,888],{}," 放入合成中：",[765,1113,1118],{"className":1114,"code":1115,"language":1116,"meta":1117,"style":771},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cimg class=\"clip\" data-start=\"0\" data-duration=\"3\"\nsrc=\".\u002Fassets\u002Fhdr-photo.png\" \u002F>\n","html","index.html",[709,1119,1120,1169],{"__ignoreMap":771},[775,1121,1122,1125,1129,1133,1136,1139,1142,1144,1147,1149,1151,1154,1156,1159,1161,1163,1166],{"class":777,"line":778},[775,1123,1124],{"class":845},"\u003C",[775,1126,1128],{"class":1127},"swJcz","img",[775,1130,1132],{"class":1131},"spNyl"," class",[775,1134,1135],{"class":845},"=",[775,1137,1138],{"class":845},"\"",[775,1140,1141],{"class":785},"clip",[775,1143,1138],{"class":845},[775,1145,1146],{"class":1131}," data-start",[775,1148,1135],{"class":845},[775,1150,1138],{"class":845},[775,1152,1153],{"class":785},"0",[775,1155,1138],{"class":845},[775,1157,1158],{"class":1131}," data-duration",[775,1160,1135],{"class":845},[775,1162,1138],{"class":845},[775,1164,1165],{"class":785},"3",[775,1167,1168],{"class":845},"\"\n",[775,1170,1171,1174,1176,1178,1181,1183],{"class":777,"line":1082},[775,1172,1173],{"class":1131},"src",[775,1175,1135],{"class":845},[775,1177,1138],{"class":845},[775,1179,1180],{"class":785},".\u002Fassets\u002Fhdr-photo.png",[775,1182,1138],{"class":845},[775,1184,1185],{"class":845}," \u002F>\n",[692,1187,1188],{},"当启用 HDR 时，图片会被解码一次为 16-bit 线性光 RGB 并原生合成为 HDR 输出。",[696,1190,1191,1195],{},[692,1192,700,1193],{},[702,1194,704],{},[692,1196,1197,1198,1200,1201,1203,1204,1206],{},"HDR ",[709,1199,888],{}," 解码限于 ",[702,1202,1107],{},"。JPEG、WebP、AVIF 和 APNG 不会被识别为 HDR 源——它们通过正常的 SDR DOM 路径加载。对于 HDR 动态内容，使用 ",[709,1205,884],{}," 元素。",[721,1208,1210],{"id":1209},"sdr-源与-hdr-混合","SDR 源与 HDR 混合",[692,1212,1213],{},"你可以在同一合成中自由混合 SDR 和 HDR 媒体：",[729,1215,1216,1222,1227],{},[732,1217,1218,1221],{},[702,1219,1220],{},"SDR 视频"," 保持在 DOM 截图路径中，获得上述 sRGB → BT.2020 转换",[732,1223,1224,1226],{},[702,1225,745],{}," 以 16-bit 原生提取并合成为 SDR DOM 层的下方",[732,1228,1229,1232],{},[702,1230,1231],{},"SDR 图片和 DOM 元素","（文本、形状、渐变、GSAP 动画）从 sRGB 转换为 BT.2020",[692,1234,1235],{},"这是处理合成的相同管线，例如在带有动画文本的 SDR 下方三分之一字幕条下播放 HDR 无人机片段。",[718,1237,1238],{"id":1238},"输出格式要求",[970,1240,1241,1251],{},[973,1242,1243],{},[976,1244,1245,1248],{},[979,1246,1247],{},"输出格式",[979,1249,1250],{},"HDR 支持",[986,1252,1253,1263,1273],{},[976,1254,1255,1260],{},[991,1256,1257],{},[709,1258,1259],{},"mp4",[991,1261,1262],{},"是 — H.265 10-bit BT.2020，HDR10 元数据",[976,1264,1265,1270],{},[991,1266,1267],{},[709,1268,1269],{},"mov",[991,1271,1272],{},"否 — 回退到 SDR",[976,1274,1275,1280],{},[991,1276,1277],{},[709,1278,1279],{},"webm",[991,1281,1272],{},[692,1283,1284,1285,806,1287,1289],{},"如果启用了 HDR 且你同时传入 ",[709,1286,805],{},[709,1288,809],{},"，Hyperframes 会记录消息并生成等效的 SDR 渲染。没有错误——渲染仍会完成——因此请检查日志（或你的验证步骤）以确认你得到了 HDR。",[718,1291,867],{"id":1292},"验证-hdr-输出",[692,1294,817,1295,1297],{},[709,1296,820],{}," 确认颜色标记和 HDR10 静态元数据都存在：",[765,1299,1301],{"className":767,"code":1300,"language":769,"meta":770,"style":771},"ffprobe -v error -show_streams -select_streams v:0 output.mp4 \\\n| grep -E 'codec_name|pix_fmt|color_transfer|color_primaries|color_space'\n",[709,1302,1303,1325],{"__ignoreMap":771},[775,1304,1305,1307,1309,1311,1313,1316,1319,1321],{"class":777,"line":778},[775,1306,820],{"class":781},[775,1308,833],{"class":785},[775,1310,836],{"class":785},[775,1312,839],{"class":785},[775,1314,1315],{"class":785}," -select_streams",[775,1317,1318],{"class":785}," v:0",[775,1320,842],{"class":785},[775,1322,1324],{"class":1323},"sTEyZ"," \\\n",[775,1326,1327,1330,1332,1334,1336,1339],{"class":777,"line":1082},[775,1328,1329],{"class":845},"|",[775,1331,849],{"class":781},[775,1333,852],{"class":785},[775,1335,855],{"class":845},[775,1337,1338],{"class":785},"codec_name|pix_fmt|color_transfer|color_primaries|color_space",[775,1340,861],{"class":845},[692,1342,1343],{},"对于 PQ HDR10 渲染，你应该看到：",[765,1345,1350],{"className":1346,"code":1348,"language":1349},[1347],"language-text","codec_name=hevc\npix_fmt=yuv420p10le\ncolor_space=bt2020nc\ncolor_primaries=bt2020\ncolor_transfer=smpte2084\n","text",[709,1351,1348],{"__ignoreMap":771},[692,1353,1354],{},"然后检查 HDR10 SEI \u002F 容器框：",[765,1356,1358],{"className":767,"code":1357,"language":769,"meta":770,"style":771},"ffprobe -v error -show_frames -read_intervals \"%+#1\" \\\n-show_entries frame=side_data_list output.mp4\n",[709,1359,1360,1384],{"__ignoreMap":771},[775,1361,1362,1364,1366,1368,1371,1374,1377,1380,1382],{"class":777,"line":778},[775,1363,820],{"class":781},[775,1365,833],{"class":785},[775,1367,836],{"class":785},[775,1369,1370],{"class":785}," -show_frames",[775,1372,1373],{"class":785}," -read_intervals",[775,1375,1376],{"class":845}," \"",[775,1378,1379],{"class":785},"%+#1",[775,1381,1138],{"class":845},[775,1383,1324],{"class":1323},[775,1385,1386,1389,1392],{"class":777,"line":1082},[775,1387,1388],{"class":1323},"-show_entries ",[775,1390,1391],{"class":785},"frame=side_data_list",[775,1393,795],{"class":785},[692,1395,1396,1397,885,1400,1403],{},"你应该看到 ",[702,1398,1399],{},"Mastering display metadata",[702,1401,1402],{},"Content light level metadata"," 条目。没有它们，支持 HDR 的播放器会将文件视为 SDR BT.2020，在 HDR 显示器上颜色会看起来褪色或不对。",[692,1405,1406,1407,1410],{},"对于 HLG 渲染，唯一的区别是 ",[709,1408,1409],{},"color_transfer=arib-std-b67","——其余检查相同。",[718,1412,1414],{"id":1413},"docker-渲染","Docker 渲染",[692,1416,1417],{},"Docker 使用与本地渲染相同的自动检测逻辑，因此你可以从容器化渲染器生成 HDR10 MP4 输出，无需额外标志：",[765,1419,1421],{"className":767,"code":1420,"language":769,"meta":770,"style":771},"npx hyperframes render --docker --output output.mp4\n",[709,1422,1423],{"__ignoreMap":771},[775,1424,1425,1427,1429,1431,1434,1436],{"class":777,"line":778},[775,1426,782],{"class":781},[775,1428,786],{"class":785},[775,1430,789],{"class":785},[775,1432,1433],{"class":785}," --docker",[775,1435,792],{"class":785},[775,1437,795],{"class":785},[692,1439,1440,1441,1443,1444,1446],{},"容器运行与本地渲染器相同的探测 → 合成 → 编码管线。使用",[756,1442,867],{"href":866},"中描述的相同 ",[709,1445,820],{}," 检查验证输出。",[696,1448,1449,1453],{},[692,1450,700,1451],{},[702,1452,704],{},[692,1454,1455,1456,1459,1460,1463],{},"Docker HDR 渲染目前对 SDR DOM 层运行在 ",[702,1457,1458],{},"CPU 侧","（容器回退到软件 WebGL，因为默认未配置 GPU 直通）。因此帧捕获比本地有头 Chrome 慢——在确定 CI runner 规模前，请关闭 ",[709,1461,1462],{},"--quiet"," 测量你自己的合成并比较挂钟时间。编码的 HDR10 元数据和像素数据与本地渲染相同。",[718,1465,1466],{"id":1466},"限制",[729,1468,1469,1480,1486,1506,1532,1543],{},[732,1470,1471,1474,1475,806,1477,1479],{},[702,1472,1473],{},"仅 MP4"," — 使用 ",[709,1476,805],{},[709,1478,809],{}," 的 HDR 输出回退到 SDR",[732,1481,1482,1485],{},[702,1483,1484],{},"HDR 图片：仅 16-bit PNG"," — 其他格式（JPEG、WebP、AVIF、APNG）不会被解码为 HDR，会通过 SDR DOM 路径",[732,1487,1488,1474,1491,885,1494,1497,1498,1501,1502,1505],{},[702,1489,1490],{},"仅 H.265 — H.264 被剥离",[709,1492,1493],{},"codec: \"h264\"",[709,1495,1496],{},"hdr: { transfer }"," 调用编码器会被拒绝；编码器记录警告、丢弃 ",[709,1499,1500],{},"hdr"," 并将输出标记为 SDR\u002FBT.709。",[709,1503,1504],{},"libx264"," 无法编码 HDR，替代方案是\"半 HDR\"文件（BT.2020 容器标记但位流中是 BT.709 VUI 块），这会混淆支持 HDR 的播放器",[732,1507,1508,1511,1512,1515,1516,1519,1520,806,1522,1524,1525,1528,1529,1531],{},[702,1509,1510],{},"GPU H.265 发出颜色标记但不发出静态母版元数据"," — ",[709,1513,1514],{},"useGpu: true"," 配合 HDR（nvenc、videotoolbox、amf、qsv、vaapi）为流标记 BT.2020 + 正确的传输函数（smpte2084 \u002F arib-std-b67），但",[702,1517,1518],{},"不嵌入"," ",[709,1521,937],{},[709,1523,940],{}," SEI。ffmpeg 不允许这些标志通过硬件编码器。输出适用于预览和创作，但不适用于 HDR10 感知的交付（Apple TV、YouTube、Netflix）。对于符合规范的 HDR10 生产输出，保持 ",[709,1526,1527],{},"useGpu: false"," 以便 SW ",[709,1530,925],{}," 路径嵌入母版元数据。",[732,1533,1534,1511,1537,1542],{},[702,1535,1536],{},"Player 支持",[756,1538,1539],{"href":184},[709,1540,1541],{},"\u003Chyperframes-player>"," Web 组件在浏览器中播放编码的 MP4，并继承宿主浏览器提供的 HDR 支持；它不实现自己的 HDR 管线",[732,1544,1545,1548,1549,1044,1552,1555,1556,1559,1560,1564],{},[702,1546,1547],{},"有头 Chrome HDR DOM 捕获"," — 引擎提供了一个单独的基于 WebGPU 的捕获路径，用于将 CSS 动画 DOM 直接渲染为 HDR（",[709,1550,1551],{},"initHdrReadback",[709,1553,1554],{},"launchHdrBrowser","）。它需要带有 ",[709,1557,1558],{},"--enable-unsafe-webgpu"," 的有头 Chrome，不被默认渲染管线使用。如果你正在构建自定义集成，请参见",[756,1561,1563],{"href":1562},"\u002Fpackages\u002Fengine#hdr-api","引擎：HDR","。",[718,1566,1567],{"id":1567},"常见陷阱",[970,1569,1570,1580],{},[973,1571,1572],{},[976,1573,1574,1577],{},[979,1575,1576],{},"症状",[979,1578,1579],{},"可能原因",[986,1581,1582,1596,1604,1612,1623],{},[976,1583,1584,1587],{},[991,1585,1586],{},"输出看起来与 SDR 相同",[991,1588,1589,1590,1592,1593,1595],{},"源媒体是 SDR，或使用了 ",[709,1591,715],{}," 强制 SDR。对输入运行 ",[709,1594,820],{}," 并检查渲染日志",[976,1597,1598,1601],{},[991,1599,1600],{},"输出\"有点 HDR\"但在 YouTube\u002FQuickTime 上色调映射不对",[991,1602,1603],{},"编码流上缺少 HDR10 静态元数据。使用上述 ffprobe 代码片段验证",[976,1605,1606,1609],{},[991,1607,1608],{},"Docker 渲染比本地慢得多",[991,1610,1611],{},"预期行为——容器回退到软件 WebGL 进行 SDR DOM 捕获。像素输出相同",[976,1613,1614,1620],{},[991,1615,1616,1617,1619],{},"使用了 ",[709,1618,809],{}," 得到了 SDR",[991,1621,1622],{},"预期行为——HDR 输出仅限 MP4",[976,1624,1625,1630],{},[991,1626,1197,1627,1629],{},[709,1628,888],{}," 看起来像 SDR \u002F 褪色",[991,1631,1632,1633,1635],{},"源不是 16-bit PNG。重新导出为 16-bit PNG（BT.2020 PQ）或改用 ",[709,1634,884],{}," 元素",[718,1637,1638],{"id":1638},"下一步",[729,1640,1641,1648,1663,1674],{},[732,1642,1643,1647],{},[702,1644,1645],{},[756,1646,104],{"href":105},"\n本地 vs Docker、质量预设、worker",[732,1649,1650,1654,1655,1658,1659,885,1661],{},[702,1651,1652],{},[756,1653,195],{"href":196},"\n完整的 ",[709,1656,1657],{},"render"," 命令参考，包括 HDR 自动检测、",[709,1660,711],{},[709,1662,715],{},[732,1664,1665,1670,1671,1673],{},[702,1666,1667],{},[756,1668,1669],{"href":1562},"引擎：HDR API","\n从 ",[709,1672,179],{}," 导出的公共 HDR 工具",[732,1675,1676,1680],{},[702,1677,1678],{},[756,1679,132],{"href":133},"\n影响渲染输出的陷阱",[1682,1683,1684],"style",{},"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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}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 .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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}",{"title":771,"searchDepth":778,"depth":1082,"links":1686},[1687,1692,1698,1703,1704,1705,1706,1707,1708],{"id":15,"depth":1082,"text":15,"children":1688},[1689,1690,1691],{"id":723,"depth":1089,"text":724},{"id":763,"depth":1089,"text":763},{"id":813,"depth":1089,"text":814},{"id":871,"depth":1082,"text":872,"children":1693},[1694,1695,1696,1697],{"id":878,"depth":1089,"text":878},{"id":898,"depth":1089,"text":899},{"id":918,"depth":1089,"text":919},{"id":944,"depth":1089,"text":945},{"id":959,"depth":1082,"text":959,"children":1699},[1700,1701,1702],{"id":962,"depth":1089,"text":745},{"id":1101,"depth":1089,"text":751},{"id":1209,"depth":1089,"text":1210},{"id":1238,"depth":1082,"text":1238},{"id":1292,"depth":1082,"text":867},{"id":1413,"depth":1082,"text":1414},{"id":1466,"depth":1082,"text":1466},{"id":1567,"depth":1082,"text":1567},{"id":1638,"depth":1082,"text":1638},"当源包含 HDR 视频或图片时，将合成渲染为 HDR10 MP4（BT.2020 PQ 或 HLG，10-bit H.265）。","md",null,{},true,{"title":112,"description":1709},"lUgCBLzyqorrcA6EtSNpmiqsu9G34qhBWwkIWFii9xA",[1717,1719],{"title":108,"path":109,"stem":110,"description":1718,"children":-1},"去除视频或图片的背景，将其作为透明覆盖层放入任何合成中。",{"title":116,"path":117,"stem":118,"description":1720,"children":-1},"无需重写即可将任何合成渲染为 4K（3840×2160）—— CLI 通过 Chrome 的 device scale factor 对 1080p 合成进行超采样。",1780322250314]