[{"data":1,"prerenderedAt":2950},["ShallowReactive",2],{"navigation":3,"\u002Fconcepts\u002Fvariables":686,"\u002Fconcepts\u002Fvariables-surround":2945},[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":46,"body":688,"description":2939,"extension":2940,"links":2941,"meta":2942,"navigation":1139,"path":47,"seo":2943,"stem":48,"__hash__":2944},"docs\u002F02.concepts\u002F03.variables.md",{"type":689,"value":690,"toc":2923},"minimark",[691,704,708,719,802,822,825,944,952,955,967,971,974,1357,1385,1388,1436,1443,1447,1464,1574,1580,1773,1779,1782,1785,1863,1872,1875,1889,2274,2283,2287,2293,2456,2466,2470,2480,2583,2595,2607,2610,2613,2674,2679,2682,2685,2699,2717,2726,2761,2764,2770,2883,2886,2889,2920],[692,693,694,695,699,700,703],"p",{},"变量允许你在合成中声明命名的、带类型的槽位，并在渲染时填充它们——从父合成、CLI 或 API 调用中获取。一个接受 ",[696,697,698],"code",{},"title"," 和 ",[696,701,702],{},"color"," 的卡片合才可以被嵌入一百次，每次使用不同的值，而无需重复任何 HTML。",[705,706,707],"h2",{"id":707},"声明变量",[692,709,710,711,714,715,718],{},"在任何合成的 ",[696,712,713],{},"\u003Chtml>"," 根元素上添加 ",[696,716,717],{},"data-composition-variables","。它的值是一个变量声明的 JSON 数组——每个变量一个对象：",[720,721,727],"pre",{"className":722,"code":723,"language":724,"meta":725,"style":726},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Chtml data-composition-variables='[\n{\"id\":\"title\",  \"type\":\"string\",  \"label\":\"Title\",  \"default\":\"Hello\"},\n{\"id\":\"color\",  \"type\":\"color\",   \"label\":\"Color\",  \"default\":\"#111827\"},\n{\"id\":\"price\",  \"type\":\"number\",  \"label\":\"Price\",  \"default\":0,        \"unit\":\"$\"},\n{\"id\":\"featured\",\"type\":\"boolean\",\"label\":\"Featured\",\"default\":false},\n{\"id\":\"plan\",   \"type\":\"enum\",    \"label\":\"Plan\",   \"default\":\"pro\",\n\"options\":[{\"value\":\"pro\",\"label\":\"Pro\"},{\"value\":\"enterprise\",\"label\":\"Enterprise\"}]}\n]'>\n","html","compositions\u002Fcard.html","",[696,728,729,755,761,767,773,779,785,791],{"__ignoreMap":726},[730,731,734,738,741,745,748,751],"span",{"class":732,"line":733},"line",1,[730,735,737],{"class":736},"sMK4o","\u003C",[730,739,724],{"class":740},"swJcz",[730,742,744],{"class":743},"spNyl"," data-composition-variables",[730,746,747],{"class":736},"=",[730,749,750],{"class":736},"'",[730,752,754],{"class":753},"sfazB","[\n",[730,756,758],{"class":732,"line":757},2,[730,759,760],{"class":753},"{\"id\":\"title\",  \"type\":\"string\",  \"label\":\"Title\",  \"default\":\"Hello\"},\n",[730,762,764],{"class":732,"line":763},3,[730,765,766],{"class":753},"{\"id\":\"color\",  \"type\":\"color\",   \"label\":\"Color\",  \"default\":\"#111827\"},\n",[730,768,770],{"class":732,"line":769},4,[730,771,772],{"class":753},"{\"id\":\"price\",  \"type\":\"number\",  \"label\":\"Price\",  \"default\":0,        \"unit\":\"$\"},\n",[730,774,776],{"class":732,"line":775},5,[730,777,778],{"class":753},"{\"id\":\"featured\",\"type\":\"boolean\",\"label\":\"Featured\",\"default\":false},\n",[730,780,782],{"class":732,"line":781},6,[730,783,784],{"class":753},"{\"id\":\"plan\",   \"type\":\"enum\",    \"label\":\"Plan\",   \"default\":\"pro\",\n",[730,786,788],{"class":732,"line":787},7,[730,789,790],{"class":753},"\"options\":[{\"value\":\"pro\",\"label\":\"Pro\"},{\"value\":\"enterprise\",\"label\":\"Enterprise\"}]}\n",[730,792,794,797,799],{"class":732,"line":793},8,[730,795,796],{"class":753},"]",[730,798,750],{"class":736},[730,800,801],{"class":736},">\n",[692,803,804,805,808,809,808,812,699,815,818,819,821],{},"每个声明需要四个字段：",[696,806,807],{},"id","、",[696,810,811],{},"type",[696,813,814],{},"label",[696,816,817],{},"default","。",[696,820,807],{}," 在合成内必须唯一。",[705,823,824],{"id":824},"变量类型",[826,827,828,846],"table",{},[829,830,831],"thead",{},[832,833,834,838,843],"tr",{},[835,836,837],"th",{},"类型",[835,839,840,842],{},[696,841,817],{}," 值",[835,844,845],{},"附加选项",[847,848,849,871,897,911,929],"tbody",{},[832,850,851,857,862],{},[852,853,854],"td",{},[696,855,856],{},"string",[852,858,859],{},[696,860,861],{},"\"some text\"",[852,863,864,867,868],{},[696,865,866],{},"placeholder?: string",", ",[696,869,870],{},"maxLength?: number",[832,872,873,878,883],{},[852,874,875],{},[696,876,877],{},"number",[852,879,880],{},[696,881,882],{},"0",[852,884,885,867,888,867,891,867,894],{},[696,886,887],{},"min?: number",[696,889,890],{},"max?: number",[696,892,893],{},"step?: number",[696,895,896],{},"unit?: string",[832,898,899,903,908],{},[852,900,901],{},[696,902,702],{},[852,904,905],{},[696,906,907],{},"\"#rrggbb\"",[852,909,910],{},"—",[832,912,913,918,927],{},[852,914,915],{},[696,916,917],{},"boolean",[852,919,920,923,924],{},[696,921,922],{},"true"," \u002F ",[696,925,926],{},"false",[852,928,910],{},[832,930,931,936,939],{},[852,932,933],{},[696,934,935],{},"enum",[852,937,938],{},"选项值之一",[852,940,941],{},[696,942,943],{},"options: [{value: string, label: string}]",[692,945,946,947,808,949,951],{},"Studio 编辑界面使用 ",[696,948,814],{},[696,950,811],{}," 和特定类型的选项来为每个变量渲染正确的输入控件。",[705,953,954],{"id":954},"什么可以成为变量",[692,956,957,958,963,964,966],{},"变量分为两个层次。上面的五种",[959,960,962],"a",{"href":961},"#%E5%8F%98%E9%87%8F%E7%B1%BB%E5%9E%8B","声明类型","涵盖了带类型的原始数据——字符串、数字、颜色、布尔值、枚举。对于其他所有情况，持有 URL 的 ",[696,965,856],{}," 变量是万能的解决方案：你的合成读取 URL 并将其赋给需要它的任何 DOM 元素。",[968,969,970],"h3",{"id":970},"参数化媒体资源",[692,972,973],{},"同一个合成可以通过字符串变量替换 URL 来渲染不同的图片、视频片段或音频轨道：",[720,975,978],{"className":722,"code":976,"language":724,"meta":977,"style":726},"\u003Chtml data-composition-variables='[\n{\"id\":\"productImage\",\"type\":\"string\",\"label\":\"Product image URL\",\"default\":\"https:\u002F\u002Fcdn.example.com\u002Fproducts\u002Fdefault.png\"},\n{\"id\":\"productName\",\"type\":\"string\",\"label\":\"Product name\",\"default\":\"Untitled\"}\n]'>\n\u003Cbody>\n\u003Cdiv data-composition-id=\"product-card\" data-width=\"1920\" data-height=\"1080\" data-duration=\"5\">\n\u003Cimg class=\"product-img\" alt=\"\" \u002F>\n\u003Ch1 class=\"product-name\">\u003C\u002Fh1>\n\n\u003Cscript>\nconst {\nproductImage = \"https:\u002F\u002Fcdn.example.com\u002Fproducts\u002Fdefault.png\",\nproductName = \"Untitled\",\n} = __hyperframes.getVariables();\nconst root = document.querySelector('[data-composition-id=\"product-card\"]');\nroot.querySelector(\".product-img\").src = productImage;\nroot.querySelector(\".product-name\").textContent = productName;\n\u003C\u002Fscript>\n\u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n","compositions\u002Fproduct-card.html",[696,979,980,994,999,1004,1012,1021,1079,1109,1134,1141,1151,1160,1180,1197,1222,1255,1288,1320,1330,1339,1348],{"__ignoreMap":726},[730,981,982,984,986,988,990,992],{"class":732,"line":733},[730,983,737],{"class":736},[730,985,724],{"class":740},[730,987,744],{"class":743},[730,989,747],{"class":736},[730,991,750],{"class":736},[730,993,754],{"class":753},[730,995,996],{"class":732,"line":757},[730,997,998],{"class":753},"{\"id\":\"productImage\",\"type\":\"string\",\"label\":\"Product image URL\",\"default\":\"https:\u002F\u002Fcdn.example.com\u002Fproducts\u002Fdefault.png\"},\n",[730,1000,1001],{"class":732,"line":763},[730,1002,1003],{"class":753},"{\"id\":\"productName\",\"type\":\"string\",\"label\":\"Product name\",\"default\":\"Untitled\"}\n",[730,1005,1006,1008,1010],{"class":732,"line":769},[730,1007,796],{"class":753},[730,1009,750],{"class":736},[730,1011,801],{"class":736},[730,1013,1014,1016,1019],{"class":732,"line":775},[730,1015,737],{"class":736},[730,1017,1018],{"class":740},"body",[730,1020,801],{"class":736},[730,1022,1023,1025,1028,1031,1033,1036,1039,1041,1044,1046,1048,1051,1053,1056,1058,1060,1063,1065,1068,1070,1072,1075,1077],{"class":732,"line":781},[730,1024,737],{"class":736},[730,1026,1027],{"class":740},"div",[730,1029,1030],{"class":743}," data-composition-id",[730,1032,747],{"class":736},[730,1034,1035],{"class":736},"\"",[730,1037,1038],{"class":753},"product-card",[730,1040,1035],{"class":736},[730,1042,1043],{"class":743}," data-width",[730,1045,747],{"class":736},[730,1047,1035],{"class":736},[730,1049,1050],{"class":753},"1920",[730,1052,1035],{"class":736},[730,1054,1055],{"class":743}," data-height",[730,1057,747],{"class":736},[730,1059,1035],{"class":736},[730,1061,1062],{"class":753},"1080",[730,1064,1035],{"class":736},[730,1066,1067],{"class":743}," data-duration",[730,1069,747],{"class":736},[730,1071,1035],{"class":736},[730,1073,1074],{"class":753},"5",[730,1076,1035],{"class":736},[730,1078,801],{"class":736},[730,1080,1081,1083,1086,1089,1091,1093,1096,1098,1101,1103,1106],{"class":732,"line":787},[730,1082,737],{"class":736},[730,1084,1085],{"class":740},"img",[730,1087,1088],{"class":743}," class",[730,1090,747],{"class":736},[730,1092,1035],{"class":736},[730,1094,1095],{"class":753},"product-img",[730,1097,1035],{"class":736},[730,1099,1100],{"class":743}," alt",[730,1102,747],{"class":736},[730,1104,1105],{"class":736},"\"\"",[730,1107,1108],{"class":736}," \u002F>\n",[730,1110,1111,1113,1116,1118,1120,1122,1125,1127,1130,1132],{"class":732,"line":793},[730,1112,737],{"class":736},[730,1114,1115],{"class":740},"h1",[730,1117,1088],{"class":743},[730,1119,747],{"class":736},[730,1121,1035],{"class":736},[730,1123,1124],{"class":753},"product-name",[730,1126,1035],{"class":736},[730,1128,1129],{"class":736},">\u003C\u002F",[730,1131,1115],{"class":740},[730,1133,801],{"class":736},[730,1135,1137],{"class":732,"line":1136},9,[730,1138,1140],{"emptyLinePlaceholder":1139},true,"\n",[730,1142,1144,1146,1149],{"class":732,"line":1143},10,[730,1145,737],{"class":736},[730,1147,1148],{"class":740},"script",[730,1150,801],{"class":736},[730,1152,1154,1157],{"class":732,"line":1153},11,[730,1155,1156],{"class":743},"const",[730,1158,1159],{"class":736}," {\n",[730,1161,1163,1167,1169,1172,1175,1177],{"class":732,"line":1162},12,[730,1164,1166],{"class":1165},"sTEyZ","productImage ",[730,1168,747],{"class":736},[730,1170,1171],{"class":736}," \"",[730,1173,1174],{"class":753},"https:\u002F\u002Fcdn.example.com\u002Fproducts\u002Fdefault.png",[730,1176,1035],{"class":736},[730,1178,1179],{"class":736},",\n",[730,1181,1183,1186,1188,1190,1193,1195],{"class":732,"line":1182},13,[730,1184,1185],{"class":1165},"productName ",[730,1187,747],{"class":736},[730,1189,1171],{"class":736},[730,1191,1192],{"class":753},"Untitled",[730,1194,1035],{"class":736},[730,1196,1179],{"class":736},[730,1198,1200,1203,1206,1209,1212,1216,1219],{"class":732,"line":1199},14,[730,1201,1202],{"class":736},"}",[730,1204,1205],{"class":736}," =",[730,1207,1208],{"class":1165}," __hyperframes",[730,1210,1211],{"class":736},".",[730,1213,1215],{"class":1214},"s2Zo4","getVariables",[730,1217,1218],{"class":1165},"()",[730,1220,1221],{"class":736},";\n",[730,1223,1225,1227,1230,1232,1235,1237,1240,1243,1245,1248,1250,1253],{"class":732,"line":1224},15,[730,1226,1156],{"class":743},[730,1228,1229],{"class":1165}," root ",[730,1231,747],{"class":736},[730,1233,1234],{"class":1165}," document",[730,1236,1211],{"class":736},[730,1238,1239],{"class":1214},"querySelector",[730,1241,1242],{"class":1165},"(",[730,1244,750],{"class":736},[730,1246,1247],{"class":753},"[data-composition-id=\"product-card\"]",[730,1249,750],{"class":736},[730,1251,1252],{"class":1165},")",[730,1254,1221],{"class":736},[730,1256,1258,1261,1263,1265,1267,1269,1272,1274,1276,1278,1281,1283,1286],{"class":732,"line":1257},16,[730,1259,1260],{"class":1165},"root",[730,1262,1211],{"class":736},[730,1264,1239],{"class":1214},[730,1266,1242],{"class":1165},[730,1268,1035],{"class":736},[730,1270,1271],{"class":753},".product-img",[730,1273,1035],{"class":736},[730,1275,1252],{"class":1165},[730,1277,1211],{"class":736},[730,1279,1280],{"class":1165},"src ",[730,1282,747],{"class":736},[730,1284,1285],{"class":1165}," productImage",[730,1287,1221],{"class":736},[730,1289,1291,1293,1295,1297,1299,1301,1304,1306,1308,1310,1313,1315,1318],{"class":732,"line":1290},17,[730,1292,1260],{"class":1165},[730,1294,1211],{"class":736},[730,1296,1239],{"class":1214},[730,1298,1242],{"class":1165},[730,1300,1035],{"class":736},[730,1302,1303],{"class":753},".product-name",[730,1305,1035],{"class":736},[730,1307,1252],{"class":1165},[730,1309,1211],{"class":736},[730,1311,1312],{"class":1165},"textContent ",[730,1314,747],{"class":736},[730,1316,1317],{"class":1165}," productName",[730,1319,1221],{"class":736},[730,1321,1323,1326,1328],{"class":732,"line":1322},18,[730,1324,1325],{"class":736},"\u003C\u002F",[730,1327,1148],{"class":740},[730,1329,801],{"class":736},[730,1331,1333,1335,1337],{"class":732,"line":1332},19,[730,1334,1325],{"class":736},[730,1336,1027],{"class":740},[730,1338,801],{"class":736},[730,1340,1342,1344,1346],{"class":732,"line":1341},20,[730,1343,1325],{"class":736},[730,1345,1018],{"class":740},[730,1347,801],{"class":736},[730,1349,1351,1353,1355],{"class":732,"line":1350},21,[730,1352,1325],{"class":736},[730,1354,724],{"class":740},[730,1356,801],{"class":736},[1358,1359,1360,1367],"blockquote",{},[692,1361,1362,1363],{},"ℹ️ ",[1364,1365,1366],"strong",{},"Note",[692,1368,1369,1370,1373,1374,1377,1378,1381,1382,1384],{},"运行时会在合成脚本执行后探测 DOM，因此从变量赋值的 ",[696,1371,1372],{},"\u003Cvideo>"," 或 ",[696,1375,1376],{},"\u003Caudio>"," 的 ",[696,1379,1380],{},"src"," 会被发现并为渲染进行预提取。无需额外配置——只需从变量设置 ",[696,1383,1380],{}," 即可。",[692,1386,1387],{},"同样的模式适用于三种媒体元素类型：",[1389,1390,1391,1400,1428],"ul",{},[1392,1393,1394,1399],"li",{},[1364,1395,1396],{},[696,1397,1398],{},"\u003Cimg src>"," -- 从字符串变量赋值。Chrome 在捕获时像处理任何其他图片一样获取它；无需额外配置。",[1392,1401,1402,1407,1408,808,1411,808,1414,808,1417,1420,1421,1424,1425,1427],{},[1364,1403,1404],{},[696,1405,1406],{},"\u003Cvideo src>"," -- 从字符串变量赋值，但将时间属性（",[696,1409,1410],{},"data-start",[696,1412,1413],{},"data-duration",[696,1415,1416],{},"data-track-index",[696,1418,1419],{},"data-has-audio","）保留在元素本身上。探测阶段在脚本执行后扫描 ",[696,1422,1423],{},"video[data-start]"," 元素，并读取解析后的 ",[696,1426,1380],{}," 进行预提取。",[1392,1429,1430,1435],{},[1364,1431,1432],{},[696,1433,1434],{},"\u003Caudio src>"," -- 与视频相同。音频在捕获时被解码并混合到最终输出中。",[692,1437,1438,1439,818],{},"请以 URL 引用的形式传递资源，由合成在渲染时解析；不要内联 base64。URL 格式的资源可以干净地通过本地渲染器和 Lambda 环境传输——关于分布式渲染的 256 KiB 执行输入上限，请参阅 ",[959,1440,1442],{"href":1441},"\u002Fdeploy\u002Ftemplates-on-lambda#%E5%A4%84%E7%90%86%E5%A4%A7%E5%8F%98%E9%87%8F","Templates on Lambda",[968,1444,1446],{"id":1445},"替换媒体是否也需要调整持续时间","替换媒体：是否也需要调整持续时间？",[692,1448,1449,1450,1452,1453,1455,1456,1458,1459,699,1461,1463],{},"一个常见的后续问题：如果变量将 ",[696,1451,1372],{}," 替换为不同的片段，",[696,1454,1413],{}," 是否也需要改变？通常不需要。",[696,1457,1413],{}," 在 ",[696,1460,1372],{},[696,1462,1376],{}," 上是可选的——如果不设置，渲染器会使用 ffprobe 获取源文件的自然长度：",[720,1465,1468],{"className":722,"code":1466,"language":724,"meta":1467,"style":726},"\u003Cvideo id=\"hero\" data-start=\"0\" data-track-index=\"0\">\u003C\u002Fvideo>\n\u003Cscript>\ndocument.getElementById(\"hero\").src = __hyperframes.getVariables().heroVideo;\n\u003C\u002Fscript>\n","compositions\u002Fhero.html",[696,1469,1470,1517,1525,1566],{"__ignoreMap":726},[730,1471,1472,1474,1477,1480,1482,1484,1487,1489,1492,1494,1496,1498,1500,1503,1505,1507,1509,1511,1513,1515],{"class":732,"line":733},[730,1473,737],{"class":736},[730,1475,1476],{"class":740},"video",[730,1478,1479],{"class":743}," id",[730,1481,747],{"class":736},[730,1483,1035],{"class":736},[730,1485,1486],{"class":753},"hero",[730,1488,1035],{"class":736},[730,1490,1491],{"class":743}," data-start",[730,1493,747],{"class":736},[730,1495,1035],{"class":736},[730,1497,882],{"class":753},[730,1499,1035],{"class":736},[730,1501,1502],{"class":743}," data-track-index",[730,1504,747],{"class":736},[730,1506,1035],{"class":736},[730,1508,882],{"class":753},[730,1510,1035],{"class":736},[730,1512,1129],{"class":736},[730,1514,1476],{"class":740},[730,1516,801],{"class":736},[730,1518,1519,1521,1523],{"class":732,"line":757},[730,1520,737],{"class":736},[730,1522,1148],{"class":740},[730,1524,801],{"class":736},[730,1526,1527,1530,1532,1535,1537,1539,1541,1543,1545,1547,1549,1551,1553,1555,1557,1559,1561,1564],{"class":732,"line":763},[730,1528,1529],{"class":1165},"document",[730,1531,1211],{"class":736},[730,1533,1534],{"class":1214},"getElementById",[730,1536,1242],{"class":1165},[730,1538,1035],{"class":736},[730,1540,1486],{"class":753},[730,1542,1035],{"class":736},[730,1544,1252],{"class":1165},[730,1546,1211],{"class":736},[730,1548,1280],{"class":1165},[730,1550,747],{"class":736},[730,1552,1208],{"class":1165},[730,1554,1211],{"class":736},[730,1556,1215],{"class":1214},[730,1558,1218],{"class":1165},[730,1560,1211],{"class":736},[730,1562,1563],{"class":1165},"heroVideo",[730,1565,1221],{"class":736},[730,1567,1568,1570,1572],{"class":732,"line":769},[730,1569,1325],{"class":736},[730,1571,1148],{"class":740},[730,1573,801],{"class":736},[692,1575,1576,1577,1579],{},"如果你需要将片段限制或固定到每次渲染的特定长度——例如，在不同源长度的片段之间保持下游时间的稳定性——可以将持续时间暴露为独立的 ",[696,1578,877],{}," 变量，并通过相同的脚本应用：",[720,1581,1583],{"className":722,"code":1582,"language":724,"meta":1467,"style":726},"\u003Cvideo id=\"hero\" data-start=\"0\" data-track-index=\"0\">\u003C\u002Fvideo>\n\u003Cscript>\nconst { heroVideo, heroDuration } = __hyperframes.getVariables();\nconst el = document.getElementById(\"hero\");\nel.src = heroVideo;\nif (heroDuration !== undefined) {\nel.setAttribute(\"data-duration\", String(heroDuration));\n}\n\u003C\u002Fscript>\n",[696,1584,1585,1627,1635,1665,1692,1707,1728,1760,1765],{"__ignoreMap":726},[730,1586,1587,1589,1591,1593,1595,1597,1599,1601,1603,1605,1607,1609,1611,1613,1615,1617,1619,1621,1623,1625],{"class":732,"line":733},[730,1588,737],{"class":736},[730,1590,1476],{"class":740},[730,1592,1479],{"class":743},[730,1594,747],{"class":736},[730,1596,1035],{"class":736},[730,1598,1486],{"class":753},[730,1600,1035],{"class":736},[730,1602,1491],{"class":743},[730,1604,747],{"class":736},[730,1606,1035],{"class":736},[730,1608,882],{"class":753},[730,1610,1035],{"class":736},[730,1612,1502],{"class":743},[730,1614,747],{"class":736},[730,1616,1035],{"class":736},[730,1618,882],{"class":753},[730,1620,1035],{"class":736},[730,1622,1129],{"class":736},[730,1624,1476],{"class":740},[730,1626,801],{"class":736},[730,1628,1629,1631,1633],{"class":732,"line":757},[730,1630,737],{"class":736},[730,1632,1148],{"class":740},[730,1634,801],{"class":736},[730,1636,1637,1639,1642,1645,1648,1651,1653,1655,1657,1659,1661,1663],{"class":732,"line":763},[730,1638,1156],{"class":743},[730,1640,1641],{"class":736}," {",[730,1643,1644],{"class":1165}," heroVideo",[730,1646,1647],{"class":736},",",[730,1649,1650],{"class":1165}," heroDuration ",[730,1652,1202],{"class":736},[730,1654,1205],{"class":736},[730,1656,1208],{"class":1165},[730,1658,1211],{"class":736},[730,1660,1215],{"class":1214},[730,1662,1218],{"class":1165},[730,1664,1221],{"class":736},[730,1666,1667,1669,1672,1674,1676,1678,1680,1682,1684,1686,1688,1690],{"class":732,"line":769},[730,1668,1156],{"class":743},[730,1670,1671],{"class":1165}," el ",[730,1673,747],{"class":736},[730,1675,1234],{"class":1165},[730,1677,1211],{"class":736},[730,1679,1534],{"class":1214},[730,1681,1242],{"class":1165},[730,1683,1035],{"class":736},[730,1685,1486],{"class":753},[730,1687,1035],{"class":736},[730,1689,1252],{"class":1165},[730,1691,1221],{"class":736},[730,1693,1694,1697,1699,1701,1703,1705],{"class":732,"line":775},[730,1695,1696],{"class":1165},"el",[730,1698,1211],{"class":736},[730,1700,1280],{"class":1165},[730,1702,747],{"class":736},[730,1704,1644],{"class":1165},[730,1706,1221],{"class":736},[730,1708,1709,1713,1716,1719,1722,1725],{"class":732,"line":781},[730,1710,1712],{"class":1711},"s7zQu","if",[730,1714,1715],{"class":1165}," (heroDuration ",[730,1717,1718],{"class":736},"!==",[730,1720,1721],{"class":736}," undefined",[730,1723,1724],{"class":1165},") ",[730,1726,1727],{"class":736},"{\n",[730,1729,1730,1732,1734,1737,1739,1741,1743,1745,1747,1750,1752,1755,1758],{"class":732,"line":787},[730,1731,1696],{"class":1165},[730,1733,1211],{"class":736},[730,1735,1736],{"class":1214},"setAttribute",[730,1738,1242],{"class":740},[730,1740,1035],{"class":736},[730,1742,1413],{"class":753},[730,1744,1035],{"class":736},[730,1746,1647],{"class":736},[730,1748,1749],{"class":1214}," String",[730,1751,1242],{"class":740},[730,1753,1754],{"class":1165},"heroDuration",[730,1756,1757],{"class":740},"))",[730,1759,1221],{"class":736},[730,1761,1762],{"class":732,"line":793},[730,1763,1764],{"class":736},"}\n",[730,1766,1767,1769,1771],{"class":732,"line":1136},[730,1768,1325],{"class":736},[730,1770,1148],{"class":740},[730,1772,801],{"class":736},[692,1774,1775,1776,1778],{},"探测阶段在脚本执行后从活动 DOM 读取 ",[696,1777,1413],{},"，因此通过编程方式设置的属性与嵌入在源 HTML 中的属性行为完全相同。",[705,1780,1781],{"id":1781},"什么不能成为变量",[692,1783,1784],{},"一小部分输入仅从源 HTML 或 CLI \u002F SDK 读取一次，不会从活动 DOM 重新读取——没有脚本（因此也没有变量）可以改变它们：",[826,1786,1787,1797],{},[829,1788,1789],{},[832,1790,1791,1794],{},[835,1792,1793],{},"内容",[835,1795,1796],{},"机制（非变量）",[847,1798,1799,1814,1831,1848],{},[832,1800,1801,1804],{},[852,1802,1803],{},"合成尺寸",[852,1805,1806,1807,923,1810,1813],{},"合成元素上的 ",[696,1808,1809],{},"data-width",[696,1811,1812],{},"data-height"," —— 在编译时从源 HTML 解析，而非从活动 DOM 读取",[832,1815,1816,1819],{},[852,1817,1818],{},"帧率",[852,1820,1821,1377,1824,1827,1828],{},[696,1822,1823],{},"hyperframes render",[696,1825,1826],{},"--fps"," 标志，或 SDK 中的 ",[696,1829,1830],{},"config.fps",[832,1832,1833,1836],{},[852,1834,1835],{},"输出格式 \u002F 编解码器 \u002F 质量",[852,1837,1838,923,1841,923,1844,1847],{},[696,1839,1840],{},"--format",[696,1842,1843],{},"--codec",[696,1845,1846],{},"--quality"," 标志，或 SDK 等效项",[832,1849,1850,1853],{},[852,1851,1852],{},"兄弟或父合成的变量",[852,1854,1855,1856,1862],{},"变量是按合成隔离的；在每个子合成宿主元素上使用 ",[959,1857,1859],{"href":1858},"#%E9%80%90%E5%AE%9E%E4%BE%8B%E8%A6%86%E7%9B%96%E5%AD%90%E5%90%88%E6%88%90",[696,1860,1861],{},"data-variable-values"," 传递覆盖值",[692,1864,1865,1866,1868,1869,1871],{},"更深层的规则：变量是你的脚本应用到 DOM 的运行时值。它们可以驱动渲染器在脚本执行后从活动 DOM 读取的任何内容——文本、颜色、媒体 ",[696,1867,1380],{},"，甚至如上所示的片段 ",[696,1870,1413],{},"。它们无法改变渲染器在编译时只读取一次的输入（尺寸）或完全存在于合成外部的内容（CLI 标志、编码器设置）。",[705,1873,1874],{"id":1874},"在运行时读取变量",[692,1876,1877,1878,1881,1882,1885,1886,1888],{},"在任何合成脚本内部，调用 ",[696,1879,1880],{},"window.__hyperframes.getVariables()"," 获取解析后的变量值。返回类型为 ",[696,1883,1884],{},"Partial\u003CRecord\u003Cstring, unknown>>","——使用解构赋值并提供与声明的 ",[696,1887,817],{}," 值匹配的默认值：",[720,1890,1892],{"className":722,"code":1891,"language":724,"meta":725,"style":726},"\u003Chtml data-composition-variables='[\n{\"id\":\"title\",\"type\":\"string\",\"label\":\"Title\",\"default\":\"Untitled\"},\n{\"id\":\"color\",\"type\":\"color\",\"label\":\"Color\",\"default\":\"#111827\"}\n]'>\n\u003Cbody>\n\u003Cdiv data-composition-id=\"card\" data-width=\"1920\" data-height=\"1080\">\n\u003Ch1 class=\"card-title\">\u003C\u002Fh1>\n\n\u003Cstyle>\n[data-composition-id=\"card\"] { --card-color: #111827; }\n[data-composition-id=\"card\"] .card-title { color: var(--card-color); }\n\u003C\u002Fstyle>\n\n\u003Cscript>\nconst { title = \"Untitled\", color = \"#111827\" } = __hyperframes.getVariables();\nconst root = document.querySelector('[data-composition-id=\"card\"]');\nroot.querySelector(\".card-title\").textContent = title;\nroot.style.setProperty(\"--card-color\", color);\n\u003C\u002Fscript>\n\u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[696,1893,1894,1908,1913,1918,1926,1934,1973,1996,2000,2009,2047,2090,2098,2102,2110,2156,2183,2213,2241,2249,2257,2265],{"__ignoreMap":726},[730,1895,1896,1898,1900,1902,1904,1906],{"class":732,"line":733},[730,1897,737],{"class":736},[730,1899,724],{"class":740},[730,1901,744],{"class":743},[730,1903,747],{"class":736},[730,1905,750],{"class":736},[730,1907,754],{"class":753},[730,1909,1910],{"class":732,"line":757},[730,1911,1912],{"class":753},"{\"id\":\"title\",\"type\":\"string\",\"label\":\"Title\",\"default\":\"Untitled\"},\n",[730,1914,1915],{"class":732,"line":763},[730,1916,1917],{"class":753},"{\"id\":\"color\",\"type\":\"color\",\"label\":\"Color\",\"default\":\"#111827\"}\n",[730,1919,1920,1922,1924],{"class":732,"line":769},[730,1921,796],{"class":753},[730,1923,750],{"class":736},[730,1925,801],{"class":736},[730,1927,1928,1930,1932],{"class":732,"line":775},[730,1929,737],{"class":736},[730,1931,1018],{"class":740},[730,1933,801],{"class":736},[730,1935,1936,1938,1940,1942,1944,1946,1949,1951,1953,1955,1957,1959,1961,1963,1965,1967,1969,1971],{"class":732,"line":781},[730,1937,737],{"class":736},[730,1939,1027],{"class":740},[730,1941,1030],{"class":743},[730,1943,747],{"class":736},[730,1945,1035],{"class":736},[730,1947,1948],{"class":753},"card",[730,1950,1035],{"class":736},[730,1952,1043],{"class":743},[730,1954,747],{"class":736},[730,1956,1035],{"class":736},[730,1958,1050],{"class":753},[730,1960,1035],{"class":736},[730,1962,1055],{"class":743},[730,1964,747],{"class":736},[730,1966,1035],{"class":736},[730,1968,1062],{"class":753},[730,1970,1035],{"class":736},[730,1972,801],{"class":736},[730,1974,1975,1977,1979,1981,1983,1985,1988,1990,1992,1994],{"class":732,"line":787},[730,1976,737],{"class":736},[730,1978,1115],{"class":740},[730,1980,1088],{"class":743},[730,1982,747],{"class":736},[730,1984,1035],{"class":736},[730,1986,1987],{"class":753},"card-title",[730,1989,1035],{"class":736},[730,1991,1129],{"class":736},[730,1993,1115],{"class":740},[730,1995,801],{"class":736},[730,1997,1998],{"class":732,"line":793},[730,1999,1140],{"emptyLinePlaceholder":1139},[730,2001,2002,2004,2007],{"class":732,"line":1136},[730,2003,737],{"class":736},[730,2005,2006],{"class":740},"style",[730,2008,801],{"class":736},[730,2010,2011,2014,2017,2019,2021,2023,2025,2027,2029,2032,2035,2038,2041,2044],{"class":732,"line":1143},[730,2012,2013],{"class":736},"[",[730,2015,2016],{"class":743},"data-composition-id",[730,2018,747],{"class":736},[730,2020,1035],{"class":736},[730,2022,1948],{"class":753},[730,2024,1035],{"class":736},[730,2026,796],{"class":736},[730,2028,1641],{"class":736},[730,2030,2031],{"class":1165}," --card-color",[730,2033,2034],{"class":736},":",[730,2036,2037],{"class":736}," #",[730,2039,2040],{"class":1165},"111827",[730,2042,2043],{"class":736},";",[730,2045,2046],{"class":736}," }\n",[730,2048,2049,2051,2053,2055,2057,2059,2061,2063,2066,2069,2071,2075,2077,2080,2082,2085,2088],{"class":732,"line":1153},[730,2050,2013],{"class":736},[730,2052,2016],{"class":743},[730,2054,747],{"class":736},[730,2056,1035],{"class":736},[730,2058,1948],{"class":753},[730,2060,1035],{"class":736},[730,2062,796],{"class":736},[730,2064,2065],{"class":736}," .",[730,2067,1987],{"class":2068},"sBMFI",[730,2070,1641],{"class":736},[730,2072,2074],{"class":2073},"sqsOY"," color",[730,2076,2034],{"class":736},[730,2078,2079],{"class":1214}," var",[730,2081,1242],{"class":736},[730,2083,2084],{"class":1165},"--card-color",[730,2086,2087],{"class":736},");",[730,2089,2046],{"class":736},[730,2091,2092,2094,2096],{"class":732,"line":1162},[730,2093,1325],{"class":736},[730,2095,2006],{"class":740},[730,2097,801],{"class":736},[730,2099,2100],{"class":732,"line":1182},[730,2101,1140],{"emptyLinePlaceholder":1139},[730,2103,2104,2106,2108],{"class":732,"line":1199},[730,2105,737],{"class":736},[730,2107,1148],{"class":740},[730,2109,801],{"class":736},[730,2111,2112,2114,2116,2119,2121,2123,2125,2127,2129,2132,2134,2136,2139,2141,2144,2146,2148,2150,2152,2154],{"class":732,"line":1224},[730,2113,1156],{"class":743},[730,2115,1641],{"class":736},[730,2117,2118],{"class":1165}," title ",[730,2120,747],{"class":736},[730,2122,1171],{"class":736},[730,2124,1192],{"class":753},[730,2126,1035],{"class":736},[730,2128,1647],{"class":736},[730,2130,2131],{"class":1165}," color ",[730,2133,747],{"class":736},[730,2135,1171],{"class":736},[730,2137,2138],{"class":753},"#111827",[730,2140,1035],{"class":736},[730,2142,2143],{"class":736}," }",[730,2145,1205],{"class":736},[730,2147,1208],{"class":1165},[730,2149,1211],{"class":736},[730,2151,1215],{"class":1214},[730,2153,1218],{"class":1165},[730,2155,1221],{"class":736},[730,2157,2158,2160,2162,2164,2166,2168,2170,2172,2174,2177,2179,2181],{"class":732,"line":1257},[730,2159,1156],{"class":743},[730,2161,1229],{"class":1165},[730,2163,747],{"class":736},[730,2165,1234],{"class":1165},[730,2167,1211],{"class":736},[730,2169,1239],{"class":1214},[730,2171,1242],{"class":1165},[730,2173,750],{"class":736},[730,2175,2176],{"class":753},"[data-composition-id=\"card\"]",[730,2178,750],{"class":736},[730,2180,1252],{"class":1165},[730,2182,1221],{"class":736},[730,2184,2185,2187,2189,2191,2193,2195,2198,2200,2202,2204,2206,2208,2211],{"class":732,"line":1290},[730,2186,1260],{"class":1165},[730,2188,1211],{"class":736},[730,2190,1239],{"class":1214},[730,2192,1242],{"class":1165},[730,2194,1035],{"class":736},[730,2196,2197],{"class":753},".card-title",[730,2199,1035],{"class":736},[730,2201,1252],{"class":1165},[730,2203,1211],{"class":736},[730,2205,1312],{"class":1165},[730,2207,747],{"class":736},[730,2209,2210],{"class":1165}," title",[730,2212,1221],{"class":736},[730,2214,2215,2217,2219,2221,2223,2226,2228,2230,2232,2234,2236,2239],{"class":732,"line":1322},[730,2216,1260],{"class":1165},[730,2218,1211],{"class":736},[730,2220,2006],{"class":1165},[730,2222,1211],{"class":736},[730,2224,2225],{"class":1214},"setProperty",[730,2227,1242],{"class":1165},[730,2229,1035],{"class":736},[730,2231,2084],{"class":753},[730,2233,1035],{"class":736},[730,2235,1647],{"class":736},[730,2237,2238],{"class":1165}," color)",[730,2240,1221],{"class":736},[730,2242,2243,2245,2247],{"class":732,"line":1332},[730,2244,1325],{"class":736},[730,2246,1148],{"class":740},[730,2248,801],{"class":736},[730,2250,2251,2253,2255],{"class":732,"line":1341},[730,2252,1325],{"class":736},[730,2254,1027],{"class":740},[730,2256,801],{"class":736},[730,2258,2259,2261,2263],{"class":732,"line":1350},[730,2260,1325],{"class":736},[730,2262,1018],{"class":740},[730,2264,801],{"class":736},[730,2266,2268,2270,2272],{"class":732,"line":2267},22,[730,2269,1325],{"class":736},[730,2271,724],{"class":740},[730,2273,801],{"class":736},[692,2275,2276,2279,2280,2282],{},[696,2277,2278],{},"__hyperframes.getVariables()"," 是 ",[696,2281,1880],{}," 的简写，在顶层和子合成脚本中都可用。运行时会自动隔离子合成的作用域，使每个实例只看到自己的解析值。",[705,2284,2286],{"id":2285},"逐实例覆盖子合成","逐实例覆盖（子合成）",[692,2288,2289,2290,2292],{},"当将一个合成嵌入另一个合成时，在宿主元素上使用 ",[696,2291,1861],{}," 为该特定实例传递覆盖值的 JSON 对象：",[720,2294,2297],{"className":722,"code":2295,"language":724,"meta":2296,"style":726},"\u003Cdiv\ndata-composition-id=\"card-pro\"\ndata-composition-src=\"compositions\u002Fcard.html\"\ndata-start=\"0\"\ndata-track-index=\"1\"\ndata-variable-values='{\"title\":\"Pro\",\"color\":\"#ff4d4f\"}'\n>\u003C\u002Fdiv>\n\u003Cdiv\ndata-composition-id=\"card-enterprise\"\ndata-composition-src=\"compositions\u002Fcard.html\"\ndata-start=\"card-pro\"\ndata-track-index=\"1\"\ndata-variable-values='{\"title\":\"Enterprise\",\"color\":\"#22c55e\"}'\n>\u003C\u002Fdiv>\n","index.html",[696,2298,2299,2306,2320,2333,2345,2358,2372,2380,2386,2399,2411,2423,2435,2448],{"__ignoreMap":726},[730,2300,2301,2303],{"class":732,"line":733},[730,2302,737],{"class":736},[730,2304,2305],{"class":740},"div\n",[730,2307,2308,2310,2312,2314,2317],{"class":732,"line":757},[730,2309,2016],{"class":743},[730,2311,747],{"class":736},[730,2313,1035],{"class":736},[730,2315,2316],{"class":753},"card-pro",[730,2318,2319],{"class":736},"\"\n",[730,2321,2322,2325,2327,2329,2331],{"class":732,"line":763},[730,2323,2324],{"class":743},"data-composition-src",[730,2326,747],{"class":736},[730,2328,1035],{"class":736},[730,2330,725],{"class":753},[730,2332,2319],{"class":736},[730,2334,2335,2337,2339,2341,2343],{"class":732,"line":769},[730,2336,1410],{"class":743},[730,2338,747],{"class":736},[730,2340,1035],{"class":736},[730,2342,882],{"class":753},[730,2344,2319],{"class":736},[730,2346,2347,2349,2351,2353,2356],{"class":732,"line":775},[730,2348,1416],{"class":743},[730,2350,747],{"class":736},[730,2352,1035],{"class":736},[730,2354,2355],{"class":753},"1",[730,2357,2319],{"class":736},[730,2359,2360,2362,2364,2366,2369],{"class":732,"line":781},[730,2361,1861],{"class":743},[730,2363,747],{"class":736},[730,2365,750],{"class":736},[730,2367,2368],{"class":753},"{\"title\":\"Pro\",\"color\":\"#ff4d4f\"}",[730,2370,2371],{"class":736},"'\n",[730,2373,2374,2376,2378],{"class":732,"line":787},[730,2375,1129],{"class":736},[730,2377,1027],{"class":740},[730,2379,801],{"class":736},[730,2381,2382,2384],{"class":732,"line":793},[730,2383,737],{"class":736},[730,2385,2305],{"class":740},[730,2387,2388,2390,2392,2394,2397],{"class":732,"line":1136},[730,2389,2016],{"class":743},[730,2391,747],{"class":736},[730,2393,1035],{"class":736},[730,2395,2396],{"class":753},"card-enterprise",[730,2398,2319],{"class":736},[730,2400,2401,2403,2405,2407,2409],{"class":732,"line":1143},[730,2402,2324],{"class":743},[730,2404,747],{"class":736},[730,2406,1035],{"class":736},[730,2408,725],{"class":753},[730,2410,2319],{"class":736},[730,2412,2413,2415,2417,2419,2421],{"class":732,"line":1153},[730,2414,1410],{"class":743},[730,2416,747],{"class":736},[730,2418,1035],{"class":736},[730,2420,2316],{"class":753},[730,2422,2319],{"class":736},[730,2424,2425,2427,2429,2431,2433],{"class":732,"line":1162},[730,2426,1416],{"class":743},[730,2428,747],{"class":736},[730,2430,1035],{"class":736},[730,2432,2355],{"class":753},[730,2434,2319],{"class":736},[730,2436,2437,2439,2441,2443,2446],{"class":732,"line":1182},[730,2438,1861],{"class":743},[730,2440,747],{"class":736},[730,2442,750],{"class":736},[730,2444,2445],{"class":753},"{\"title\":\"Enterprise\",\"color\":\"#22c55e\"}",[730,2447,2371],{"class":736},[730,2449,2450,2452,2454],{"class":732,"line":1199},[730,2451,1129],{"class":736},[730,2453,1027],{"class":740},[730,2455,801],{"class":736},[692,2457,2458,2459,2462,2463,2465],{},"两个宿主元素指向同一个 ",[696,2460,2461],{},"card.html"," 源文件，但每个实例接收不同的值。运行时按实例将宿主的 ",[696,2464,1861],{}," 合并到子合成声明的默认值之上——同一个子合成可以同时以完全不同的内容运行。",[705,2467,2469],{"id":2468},"cli-覆盖顶层渲染","CLI 覆盖（顶层渲染）",[692,2471,2472,2473,1373,2476,2479],{},"在渲染时使用 ",[696,2474,2475],{},"--variables",[696,2477,2478],{},"--variables-file"," 传递变量值。这些会覆盖顶层合成声明的默认值：",[720,2481,2486],{"className":2482,"code":2483,"language":2484,"meta":2485,"style":726},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# 内联 JSON\nnpx hyperframes render --variables '{\"title\":\"Q4 Report\",\"color\":\"#1d4ed8\"}' --output q4.mp4\n\n# JSON 文件\nnpx hyperframes render --variables-file .\u002Fvars.json --output out.mp4\n\n# 对未声明或类型不匹配的变量报错\nnpx hyperframes render --variables '{\"title\":\"Q4 Report\"}' --strict-variables --output out.mp4\n","bash","Terminal",[696,2487,2488,2494,2522,2526,2531,2550,2554,2559],{"__ignoreMap":726},[730,2489,2490],{"class":732,"line":733},[730,2491,2493],{"class":2492},"sHwdD","# 内联 JSON\n",[730,2495,2496,2499,2502,2505,2508,2511,2514,2516,2519],{"class":732,"line":757},[730,2497,2498],{"class":2068},"npx",[730,2500,2501],{"class":753}," hyperframes",[730,2503,2504],{"class":753}," render",[730,2506,2507],{"class":753}," --variables",[730,2509,2510],{"class":736}," '",[730,2512,2513],{"class":753},"{\"title\":\"Q4 Report\",\"color\":\"#1d4ed8\"}",[730,2515,750],{"class":736},[730,2517,2518],{"class":753}," --output",[730,2520,2521],{"class":753}," q4.mp4\n",[730,2523,2524],{"class":732,"line":763},[730,2525,1140],{"emptyLinePlaceholder":1139},[730,2527,2528],{"class":732,"line":769},[730,2529,2530],{"class":2492},"# JSON 文件\n",[730,2532,2533,2535,2537,2539,2542,2545,2547],{"class":732,"line":775},[730,2534,2498],{"class":2068},[730,2536,2501],{"class":753},[730,2538,2504],{"class":753},[730,2540,2541],{"class":753}," --variables-file",[730,2543,2544],{"class":753}," .\u002Fvars.json",[730,2546,2518],{"class":753},[730,2548,2549],{"class":753}," out.mp4\n",[730,2551,2552],{"class":732,"line":781},[730,2553,1140],{"emptyLinePlaceholder":1139},[730,2555,2556],{"class":732,"line":787},[730,2557,2558],{"class":2492},"# 对未声明或类型不匹配的变量报错\n",[730,2560,2561,2563,2565,2567,2569,2571,2574,2576,2579,2581],{"class":732,"line":793},[730,2562,2498],{"class":2068},[730,2564,2501],{"class":753},[730,2566,2504],{"class":753},[730,2568,2507],{"class":753},[730,2570,2510],{"class":736},[730,2572,2573],{"class":753},"{\"title\":\"Q4 Report\"}",[730,2575,750],{"class":736},[730,2577,2578],{"class":753}," --strict-variables",[730,2580,2518],{"class":753},[730,2582,2549],{"class":753},[692,2584,2585,2588,2589,2591,2592,2594],{},[696,2586,2587],{},"--strict-variables"," 将变量警告变为错误。",[696,2590,2475],{}," 中任何在 ",[696,2593,717],{}," 中未声明的变量，或其值与声明类型不匹配的变量，都会导致渲染以非零状态退出。这在 CI 流程中很有用，因为未声明的变量键通常表示拼写错误或 schema 不匹配。",[1358,2596,2597,2601],{},[692,2598,1362,2599],{},[1364,2600,1366],{},[692,2602,2603,2604,2606],{},"CLI 覆盖仅应用于顶层合成。子合成变量由每个宿主元素上的 ",[696,2605,1861],{}," 控制。",[705,2608,2609],{"id":2609},"分层和优先级",[692,2611,2612],{},"变量值通过合并三个来源来解析，从低到高优先级：",[826,2614,2615,2628],{},[829,2616,2617],{},[832,2618,2619,2622,2625],{},[835,2620,2621],{},"来源",[835,2623,2624],{},"优先级",[835,2626,2627],{},"声明位置",[847,2629,2630,2645,2658],{},[832,2631,2632,2635,2638],{},[852,2633,2634],{},"声明的默认值",[852,2636,2637],{},"最低",[852,2639,2640,2642,2643],{},[696,2641,713],{}," 上的 ",[696,2644,717],{},[832,2646,2647,2650,2653],{},[852,2648,2649],{},"逐实例宿主覆盖",[852,2651,2652],{},"中间",[852,2654,2655,2656],{},"子合成宿主元素上的 ",[696,2657,1861],{},[832,2659,2660,2666,2669],{},[852,2661,2662,2663,2665],{},"CLI ",[696,2664,2475],{}," 标志",[852,2667,2668],{},"最高",[852,2670,2671],{},[696,2672,2673],{},"hyperframes render --variables '{...}'",[692,2675,2676,2677,818],{},"任何层级缺失的键会向下传递到下一层级。如果没有层级提供值，则使用声明的 ",[696,2678,817],{},[705,2680,2681],{"id":2681},"验证",[692,2683,2684],{},"Lint 工具静态检查变量声明：",[720,2686,2688],{"className":2482,"code":2687,"language":2484,"meta":2485,"style":726},"npx hyperframes lint\n",[696,2689,2690],{"__ignoreMap":726},[730,2691,2692,2694,2696],{"class":732,"line":733},[730,2693,2498],{"class":2068},[730,2695,2501],{"class":753},[730,2697,2698],{"class":753}," lint\n",[692,2700,2701,2702,808,2704,808,2706,808,2708,2710,2711,2713,2714,2716],{},"它会捕获格式错误的 JSON、缺少的必填字段（",[696,2703,807],{},[696,2705,811],{},[696,2707,814],{},[696,2709,817],{},"）以及 ",[696,2712,811],{}," 与 ",[696,2715,817],{}," 值之间的类型不匹配。在渲染前修复 lint 错误——它们表明运行时将无法正确解析变量。",[692,2718,2719,2720,2722,2723,2725],{},"在渲染时，CLI 会根据 schema 验证 ",[696,2721,2475],{},"，并将问题报告为警告（或在 ",[696,2724,2587],{}," 模式下报告为错误）：",[1389,2727,2728,2742,2751],{},[1392,2729,2730,2733,2734,2736,2737,2739,2740],{},[1364,2731,2732],{},"undeclared"," -- ",[696,2735,2475],{}," 中的键在 ",[696,2738,717],{}," 中没有匹配的 ",[696,2741,807],{},[1392,2743,2744,2747,2748,2750],{},[1364,2745,2746],{},"type-mismatch"," -- 值的 JavaScript 类型与声明的 ",[696,2749,811],{}," 不匹配（例如期望数字却得到了字符串）",[1392,2752,2753,2756,2757,2760],{},[1364,2754,2755],{},"enum-out-of-range"," -- 枚举值不在声明的 ",[696,2758,2759],{},"options"," 列表中",[705,2762,2763],{"id":2763},"编程式检查变量",[692,2765,2766,2767,2769],{},"如果你正在基于 ",[696,2768,175],{}," 构建工具链，无需渲染即可读取变量声明：",[720,2771,2775],{"className":2772,"code":2773,"language":2774,"meta":726,"style":726},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { extractCompositionMetadata } from \"@hyperframes\u002Fcore\";\nimport { readFileSync } from \"node:fs\";\n\nconst html = readFileSync(\"compositions\u002Fcard.html\", \"utf8\");\nconst { variables } = extractCompositionMetadata(html);\n\u002F\u002F variables 是 CompositionVariable[]\n","typescript",[696,2776,2777,2800,2822,2826,2858,2878],{"__ignoreMap":726},[730,2778,2779,2782,2784,2787,2789,2792,2794,2796,2798],{"class":732,"line":733},[730,2780,2781],{"class":1711},"import",[730,2783,1641],{"class":736},[730,2785,2786],{"class":1165}," extractCompositionMetadata",[730,2788,2143],{"class":736},[730,2790,2791],{"class":1711}," from",[730,2793,1171],{"class":736},[730,2795,175],{"class":753},[730,2797,1035],{"class":736},[730,2799,1221],{"class":736},[730,2801,2802,2804,2806,2809,2811,2813,2815,2818,2820],{"class":732,"line":757},[730,2803,2781],{"class":1711},[730,2805,1641],{"class":736},[730,2807,2808],{"class":1165}," readFileSync",[730,2810,2143],{"class":736},[730,2812,2791],{"class":1711},[730,2814,1171],{"class":736},[730,2816,2817],{"class":753},"node:fs",[730,2819,1035],{"class":736},[730,2821,1221],{"class":736},[730,2823,2824],{"class":732,"line":763},[730,2825,1140],{"emptyLinePlaceholder":1139},[730,2827,2828,2830,2833,2835,2837,2839,2841,2843,2845,2847,2849,2852,2854,2856],{"class":732,"line":769},[730,2829,1156],{"class":743},[730,2831,2832],{"class":1165}," html ",[730,2834,747],{"class":736},[730,2836,2808],{"class":1214},[730,2838,1242],{"class":1165},[730,2840,1035],{"class":736},[730,2842,725],{"class":753},[730,2844,1035],{"class":736},[730,2846,1647],{"class":736},[730,2848,1171],{"class":736},[730,2850,2851],{"class":753},"utf8",[730,2853,1035],{"class":736},[730,2855,1252],{"class":1165},[730,2857,1221],{"class":736},[730,2859,2860,2862,2864,2867,2869,2871,2873,2876],{"class":732,"line":775},[730,2861,1156],{"class":743},[730,2863,1641],{"class":736},[730,2865,2866],{"class":1165}," variables ",[730,2868,1202],{"class":736},[730,2870,1205],{"class":736},[730,2872,2786],{"class":1214},[730,2874,2875],{"class":1165},"(html)",[730,2877,1221],{"class":736},[730,2879,2880],{"class":732,"line":781},[730,2881,2882],{"class":2492},"\u002F\u002F variables 是 CompositionVariable[]\n",[692,2884,2885],{},"这与 Studio 编辑界面用来为每个合成构建变量面板的 API 相同。",[705,2887,2888],{"id":2888},"下一步",[1389,2890,2891,2898,2905,2912],{},[1392,2892,2893,2897],{},[1364,2894,2895],{},[959,2896,42],{"href":43},"\ndata-composition-variables 和 data-variable-values 属性的完整参考",[1392,2899,2900,2904],{},[1364,2901,2902],{},[959,2903,38],{"href":39},"\n嵌套合成如何使用变量实现复用",[1392,2906,2907,2911],{},[1364,2908,2909],{},[959,2910,104],{"href":105},"\n在渲染时传递变量的 CLI 标志",[1392,2913,2914,2919],{},[1364,2915,2916],{},[959,2917,2918],{"href":196},"CLI 参考","\n所有 CLI 命令和标志",[2006,2921,2922],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .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 .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sqsOY, html code.shiki .sqsOY{--shiki-light:#8796B0;--shiki-default:#B2CCD6;--shiki-dark:#B2CCD6}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}",{"title":726,"searchDepth":733,"depth":757,"links":2924},[2925,2926,2927,2931,2932,2933,2934,2935,2936,2937,2938],{"id":707,"depth":757,"text":707},{"id":824,"depth":757,"text":824},{"id":954,"depth":757,"text":954,"children":2928},[2929,2930],{"id":970,"depth":763,"text":970},{"id":1445,"depth":763,"text":1446},{"id":1781,"depth":757,"text":1781},{"id":1874,"depth":757,"text":1874},{"id":2285,"depth":757,"text":2286},{"id":2468,"depth":757,"text":2469},{"id":2609,"depth":757,"text":2609},{"id":2681,"depth":757,"text":2681},{"id":2763,"depth":757,"text":2763},{"id":2888,"depth":757,"text":2888},"为合成添加参数化，使同一源文件可以渲染不同的内容。","md",null,{},{"title":46,"description":2939},"zoyNoGgpoPJRRJVnq6uawjzdBsN3vSqLNojOjOqo5bQ",[2946,2948],{"title":42,"path":43,"stem":44,"description":2947,"children":-1},"控制元素时序和行为的核心属性。",{"title":50,"path":51,"stem":52,"description":2949,"children":-1},"将你自己的动画运行时引入 Hyperframes。",1780322253681]