[{"data":1,"prerenderedAt":2449},["ShallowReactive",2],{"navigation":3,"\u002Fconcepts\u002Fcompositions":686,"\u002Fconcepts\u002Fcompositions-surround":2444},[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":38,"body":688,"description":2438,"extension":2439,"links":2440,"meta":2441,"navigation":1082,"path":39,"seo":2442,"stem":40,"__hash__":2443},"docs\u002F02.concepts\u002F01.compositions.md",{"type":689,"value":690,"toc":2425},"minimark",[691,695,699,707,817,822,825,832,860,867,870,873,877,888,978,984,1348,1351,1354,1674,1682,1685,1688,1692,1695,1732,1746,1748,1755,1758,1789,1950,2350,2363,2366,2371,2389,2392,2422],[692,693,694],"p",{},"合成（Composition）是定义视频时间线的 HTML 文档。每个片段——视频、图片、音频——都存在于一个合成之中。",[696,697,698],"h2",{"id":698},"结构",[692,700,701,702,706],{},"每个合成都需要一个带有 ",[703,704,705],"code",{},"data-composition-id"," 的根元素：",[708,709,715],"pre",{"className":710,"code":711,"language":712,"meta":713,"style":714},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv id=\"root\" data-composition-id=\"root\"\ndata-start=\"0\" data-width=\"1920\" data-height=\"1080\">\n\u003C!-- 元素放在这里 -->\n\u003C\u002Fdiv>\n","html","index.html","",[703,716,717,758,800,807],{"__ignoreMap":714},[718,719,722,726,730,734,737,740,744,746,749,751,753,755],"span",{"class":720,"line":721},"line",1,[718,723,725],{"class":724},"sMK4o","\u003C",[718,727,729],{"class":728},"swJcz","div",[718,731,733],{"class":732},"spNyl"," id",[718,735,736],{"class":724},"=",[718,738,739],{"class":724},"\"",[718,741,743],{"class":742},"sfazB","root",[718,745,739],{"class":724},[718,747,748],{"class":732}," data-composition-id",[718,750,736],{"class":724},[718,752,739],{"class":724},[718,754,743],{"class":742},[718,756,757],{"class":724},"\"\n",[718,759,761,764,766,768,771,773,776,778,780,783,785,788,790,792,795,797],{"class":720,"line":760},2,[718,762,763],{"class":732},"data-start",[718,765,736],{"class":724},[718,767,739],{"class":724},[718,769,770],{"class":742},"0",[718,772,739],{"class":724},[718,774,775],{"class":732}," data-width",[718,777,736],{"class":724},[718,779,739],{"class":724},[718,781,782],{"class":742},"1920",[718,784,739],{"class":724},[718,786,787],{"class":732}," data-height",[718,789,736],{"class":724},[718,791,739],{"class":724},[718,793,794],{"class":742},"1080",[718,796,739],{"class":724},[718,798,799],{"class":724},">\n",[718,801,803],{"class":720,"line":802},3,[718,804,806],{"class":805},"sHwdD","\u003C!-- 元素放在这里 -->\n",[718,808,810,813,815],{"class":720,"line":809},4,[718,811,812],{"class":724},"\u003C\u002F",[718,814,729],{"class":728},[718,816,799],{"class":724},[692,818,819,821],{},[703,820,713],{}," 文件是顶层合成。它可以在内部包含嵌套合成。任何合成都可以被导入到另一个合成中——没有特殊的\"根\"类型。",[696,823,824],{"id":824},"片段类型",[692,826,827,828,831],{},"片段（Clip）是时间线上任意一个离散的块，用带有",[829,830,42],"a",{"href":43},"的 HTML 元素表示：",[833,834,835,842,848,854],"ul",{},[836,837,838,841],"li",{},[703,839,840],{},"\u003Cvideo>"," -- 视频片段、B-roll、A-roll",[836,843,844,847],{},[703,845,846],{},"\u003Cimg>"," -- 静态图片、叠加层",[836,849,850,853],{},[703,851,852],{},"\u003Caudio>"," -- 音乐、音效",[836,855,856,859],{},[703,857,858],{},"\u003Cdiv data-composition-id=\"...\">"," -- 嵌套合成（动画、分组序列）",[692,861,862,863,866],{},"每种片段类型的完整属性列表请参阅 ",[829,864,865],{"href":660},"HTML Schema Reference","。",[696,868,869],{"id":869},"嵌套合成",[692,871,872],{},"你可以通过两种方式将一个合成嵌入另一个合成：从外部文件加载或在内联定义。外部文件是可复用合成的推荐方式。",[874,875,876],"h3",{"id":876},"外部文件",[692,878,879,880,883,884,887],{},"使用 ",[703,881,882],{},"data-composition-src"," 引用另一个 HTML 文件。框架会自动获取该文件、提取 ",[703,885,886],{},"\u003Ctemplate>"," 内容、挂载它、执行脚本并注册时间线。",[708,889,891],{"className":710,"code":890,"language":712,"meta":713,"style":714},"\u003Cdiv\nid=\"el-5\"\ndata-composition-id=\"intro-anim\"\ndata-composition-src=\"compositions\u002Fintro-anim.html\"\ndata-start=\"0\"\ndata-track-index=\"3\"\n>\u003C\u002Fdiv>\n",[703,892,893,900,914,927,940,953,968],{"__ignoreMap":714},[718,894,895,897],{"class":720,"line":721},[718,896,725],{"class":724},[718,898,899],{"class":728},"div\n",[718,901,902,905,907,909,912],{"class":720,"line":760},[718,903,904],{"class":732},"id",[718,906,736],{"class":724},[718,908,739],{"class":724},[718,910,911],{"class":742},"el-5",[718,913,757],{"class":724},[718,915,916,918,920,922,925],{"class":720,"line":802},[718,917,705],{"class":732},[718,919,736],{"class":724},[718,921,739],{"class":724},[718,923,924],{"class":742},"intro-anim",[718,926,757],{"class":724},[718,928,929,931,933,935,938],{"class":720,"line":809},[718,930,882],{"class":732},[718,932,736],{"class":724},[718,934,739],{"class":724},[718,936,937],{"class":742},"compositions\u002Fintro-anim.html",[718,939,757],{"class":724},[718,941,943,945,947,949,951],{"class":720,"line":942},5,[718,944,763],{"class":732},[718,946,736],{"class":724},[718,948,739],{"class":724},[718,950,770],{"class":742},[718,952,757],{"class":724},[718,954,956,959,961,963,966],{"class":720,"line":955},6,[718,957,958],{"class":732},"data-track-index",[718,960,736],{"class":724},[718,962,739],{"class":724},[718,964,965],{"class":742},"3",[718,967,757],{"class":724},[718,969,971,974,976],{"class":720,"line":970},7,[718,972,973],{"class":724},">\u003C\u002F",[718,975,729],{"class":728},[718,977,799],{"class":724},[692,979,980,981,983],{},"每个外部合成文件用 ",[703,982,886],{}," 标签包裹其内容：",[708,985,987],{"className":710,"code":986,"language":712,"meta":937,"style":714},"\u003Ctemplate id=\"intro-anim-template\">\n\u003Cdiv data-composition-id=\"intro-anim\" data-width=\"1920\" data-height=\"1080\">\n\u003Cdiv class=\"title\">Welcome!\u003C\u002Fdiv>\n\n\u003Cstyle>\n[data-composition-id=\"intro-anim\"] .title {\nfont-size: 72px; color: white; text-align: center;\n}\n\u003C\u002Fstyle>\n\n\u003Cscript>\nconst tl = gsap.timeline({ paused: true });\nl.from(\".title\", { opacity: 0, y: -50, duration: 1 });\nwindow.__timelines[\"intro-anim\"] = tl;\n\u003C\u002Fscript>\n\u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[703,988,989,1009,1047,1078,1084,1093,1120,1157,1163,1172,1177,1187,1231,1294,1321,1330,1339],{"__ignoreMap":714},[718,990,991,993,996,998,1000,1002,1005,1007],{"class":720,"line":721},[718,992,725],{"class":724},[718,994,995],{"class":728},"template",[718,997,733],{"class":732},[718,999,736],{"class":724},[718,1001,739],{"class":724},[718,1003,1004],{"class":742},"intro-anim-template",[718,1006,739],{"class":724},[718,1008,799],{"class":724},[718,1010,1011,1013,1015,1017,1019,1021,1023,1025,1027,1029,1031,1033,1035,1037,1039,1041,1043,1045],{"class":720,"line":760},[718,1012,725],{"class":724},[718,1014,729],{"class":728},[718,1016,748],{"class":732},[718,1018,736],{"class":724},[718,1020,739],{"class":724},[718,1022,924],{"class":742},[718,1024,739],{"class":724},[718,1026,775],{"class":732},[718,1028,736],{"class":724},[718,1030,739],{"class":724},[718,1032,782],{"class":742},[718,1034,739],{"class":724},[718,1036,787],{"class":732},[718,1038,736],{"class":724},[718,1040,739],{"class":724},[718,1042,794],{"class":742},[718,1044,739],{"class":724},[718,1046,799],{"class":724},[718,1048,1049,1051,1053,1056,1058,1060,1063,1065,1068,1072,1074,1076],{"class":720,"line":802},[718,1050,725],{"class":724},[718,1052,729],{"class":728},[718,1054,1055],{"class":732}," class",[718,1057,736],{"class":724},[718,1059,739],{"class":724},[718,1061,1062],{"class":742},"title",[718,1064,739],{"class":724},[718,1066,1067],{"class":724},">",[718,1069,1071],{"class":1070},"sTEyZ","Welcome!",[718,1073,812],{"class":724},[718,1075,729],{"class":728},[718,1077,799],{"class":724},[718,1079,1080],{"class":720,"line":809},[718,1081,1083],{"emptyLinePlaceholder":1082},true,"\n",[718,1085,1086,1088,1091],{"class":720,"line":942},[718,1087,725],{"class":724},[718,1089,1090],{"class":728},"style",[718,1092,799],{"class":724},[718,1094,1095,1098,1100,1102,1104,1106,1108,1111,1114,1117],{"class":720,"line":955},[718,1096,1097],{"class":724},"[",[718,1099,705],{"class":732},[718,1101,736],{"class":724},[718,1103,739],{"class":724},[718,1105,924],{"class":742},[718,1107,739],{"class":724},[718,1109,1110],{"class":724},"]",[718,1112,1113],{"class":724}," .",[718,1115,1062],{"class":1116},"sBMFI",[718,1118,1119],{"class":724}," {\n",[718,1121,1122,1126,1129,1133,1136,1139,1141,1144,1146,1149,1151,1154],{"class":720,"line":970},[718,1123,1125],{"class":1124},"sqsOY","font-size",[718,1127,1128],{"class":724},":",[718,1130,1132],{"class":1131},"sbssI"," 72px",[718,1134,1135],{"class":724},";",[718,1137,1138],{"class":1124}," color",[718,1140,1128],{"class":724},[718,1142,1143],{"class":1070}," white",[718,1145,1135],{"class":724},[718,1147,1148],{"class":1124}," text-align",[718,1150,1128],{"class":724},[718,1152,1153],{"class":1070}," center",[718,1155,1156],{"class":724},";\n",[718,1158,1160],{"class":720,"line":1159},8,[718,1161,1162],{"class":724},"}\n",[718,1164,1166,1168,1170],{"class":720,"line":1165},9,[718,1167,812],{"class":724},[718,1169,1090],{"class":728},[718,1171,799],{"class":724},[718,1173,1175],{"class":720,"line":1174},10,[718,1176,1083],{"emptyLinePlaceholder":1082},[718,1178,1180,1182,1185],{"class":720,"line":1179},11,[718,1181,725],{"class":724},[718,1183,1184],{"class":728},"script",[718,1186,799],{"class":724},[718,1188,1190,1193,1196,1198,1201,1204,1208,1211,1214,1217,1219,1223,1226,1229],{"class":720,"line":1189},12,[718,1191,1192],{"class":732},"const",[718,1194,1195],{"class":1070}," tl ",[718,1197,736],{"class":724},[718,1199,1200],{"class":1070}," gsap",[718,1202,1203],{"class":724},".",[718,1205,1207],{"class":1206},"s2Zo4","timeline",[718,1209,1210],{"class":1070},"(",[718,1212,1213],{"class":724},"{",[718,1215,1216],{"class":728}," paused",[718,1218,1128],{"class":724},[718,1220,1222],{"class":1221},"sfNiH"," true",[718,1224,1225],{"class":724}," }",[718,1227,1228],{"class":1070},")",[718,1230,1156],{"class":724},[718,1232,1234,1237,1239,1242,1244,1246,1249,1251,1254,1257,1260,1262,1265,1267,1270,1272,1275,1278,1280,1283,1285,1288,1290,1292],{"class":720,"line":1233},13,[718,1235,1236],{"class":1070},"l",[718,1238,1203],{"class":724},[718,1240,1241],{"class":1206},"from",[718,1243,1210],{"class":1070},[718,1245,739],{"class":724},[718,1247,1248],{"class":742},".title",[718,1250,739],{"class":724},[718,1252,1253],{"class":724},",",[718,1255,1256],{"class":724}," {",[718,1258,1259],{"class":728}," opacity",[718,1261,1128],{"class":724},[718,1263,1264],{"class":1131}," 0",[718,1266,1253],{"class":724},[718,1268,1269],{"class":728}," y",[718,1271,1128],{"class":724},[718,1273,1274],{"class":724}," -",[718,1276,1277],{"class":1131},"50",[718,1279,1253],{"class":724},[718,1281,1282],{"class":728}," duration",[718,1284,1128],{"class":724},[718,1286,1287],{"class":1131}," 1",[718,1289,1225],{"class":724},[718,1291,1228],{"class":1070},[718,1293,1156],{"class":724},[718,1295,1297,1300,1302,1305,1307,1309,1311,1314,1316,1319],{"class":720,"line":1296},14,[718,1298,1299],{"class":1070},"window",[718,1301,1203],{"class":724},[718,1303,1304],{"class":1070},"__timelines[",[718,1306,739],{"class":724},[718,1308,924],{"class":742},[718,1310,739],{"class":724},[718,1312,1313],{"class":1070},"] ",[718,1315,736],{"class":724},[718,1317,1318],{"class":1070}," tl",[718,1320,1156],{"class":724},[718,1322,1324,1326,1328],{"class":720,"line":1323},15,[718,1325,812],{"class":724},[718,1327,1184],{"class":728},[718,1329,799],{"class":724},[718,1331,1333,1335,1337],{"class":720,"line":1332},16,[718,1334,812],{"class":724},[718,1336,729],{"class":728},[718,1338,799],{"class":724},[718,1340,1342,1344,1346],{"class":720,"line":1341},17,[718,1343,812],{"class":724},[718,1345,995],{"class":728},[718,1347,799],{"class":724},[874,1349,1350],{"id":1350},"内联",[692,1352,1353],{},"直接在父合成内部定义嵌套合成。对于不需要复用的一次性合成，这种方式更简单。",[708,1355,1357],{"className":710,"code":1356,"language":712,"meta":713,"style":714},"\u003Cdiv id=\"root\" data-composition-id=\"root\"\ndata-start=\"0\" data-width=\"1920\" data-height=\"1080\">\n\n\u003C!-- 内联嵌套合成 -->\n\u003Cdiv id=\"el-5\" data-composition-id=\"intro-anim\"\ndata-start=\"0\" data-track-index=\"3\"\ndata-width=\"1920\" data-height=\"1080\">\n\u003Cdiv class=\"title\">Welcome!\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u003Cscript>\n\u002F\u002F 内联合成的时间线\nconst introTl = gsap.timeline({ paused: true });\nintroTl.from(\".title\", { opacity: 0, y: -50, duration: 1 });\nwindow.__timelines[\"intro-anim\"] = introTl;\n\u003C\u002Fscript>\n\u003C\u002Fdiv>\n",[703,1358,1359,1385,1419,1423,1428,1454,1477,1502,1528,1536,1540,1548,1553,1584,1635,1658,1666],{"__ignoreMap":714},[718,1360,1361,1363,1365,1367,1369,1371,1373,1375,1377,1379,1381,1383],{"class":720,"line":721},[718,1362,725],{"class":724},[718,1364,729],{"class":728},[718,1366,733],{"class":732},[718,1368,736],{"class":724},[718,1370,739],{"class":724},[718,1372,743],{"class":742},[718,1374,739],{"class":724},[718,1376,748],{"class":732},[718,1378,736],{"class":724},[718,1380,739],{"class":724},[718,1382,743],{"class":742},[718,1384,757],{"class":724},[718,1386,1387,1389,1391,1393,1395,1397,1399,1401,1403,1405,1407,1409,1411,1413,1415,1417],{"class":720,"line":760},[718,1388,763],{"class":732},[718,1390,736],{"class":724},[718,1392,739],{"class":724},[718,1394,770],{"class":742},[718,1396,739],{"class":724},[718,1398,775],{"class":732},[718,1400,736],{"class":724},[718,1402,739],{"class":724},[718,1404,782],{"class":742},[718,1406,739],{"class":724},[718,1408,787],{"class":732},[718,1410,736],{"class":724},[718,1412,739],{"class":724},[718,1414,794],{"class":742},[718,1416,739],{"class":724},[718,1418,799],{"class":724},[718,1420,1421],{"class":720,"line":802},[718,1422,1083],{"emptyLinePlaceholder":1082},[718,1424,1425],{"class":720,"line":809},[718,1426,1427],{"class":805},"\u003C!-- 内联嵌套合成 -->\n",[718,1429,1430,1432,1434,1436,1438,1440,1442,1444,1446,1448,1450,1452],{"class":720,"line":942},[718,1431,725],{"class":724},[718,1433,729],{"class":728},[718,1435,733],{"class":732},[718,1437,736],{"class":724},[718,1439,739],{"class":724},[718,1441,911],{"class":742},[718,1443,739],{"class":724},[718,1445,748],{"class":732},[718,1447,736],{"class":724},[718,1449,739],{"class":724},[718,1451,924],{"class":742},[718,1453,757],{"class":724},[718,1455,1456,1458,1460,1462,1464,1466,1469,1471,1473,1475],{"class":720,"line":955},[718,1457,763],{"class":732},[718,1459,736],{"class":724},[718,1461,739],{"class":724},[718,1463,770],{"class":742},[718,1465,739],{"class":724},[718,1467,1468],{"class":732}," data-track-index",[718,1470,736],{"class":724},[718,1472,739],{"class":724},[718,1474,965],{"class":742},[718,1476,757],{"class":724},[718,1478,1479,1482,1484,1486,1488,1490,1492,1494,1496,1498,1500],{"class":720,"line":970},[718,1480,1481],{"class":732},"data-width",[718,1483,736],{"class":724},[718,1485,739],{"class":724},[718,1487,782],{"class":742},[718,1489,739],{"class":724},[718,1491,787],{"class":732},[718,1493,736],{"class":724},[718,1495,739],{"class":724},[718,1497,794],{"class":742},[718,1499,739],{"class":724},[718,1501,799],{"class":724},[718,1503,1504,1506,1508,1510,1512,1514,1516,1518,1520,1522,1524,1526],{"class":720,"line":1159},[718,1505,725],{"class":724},[718,1507,729],{"class":728},[718,1509,1055],{"class":732},[718,1511,736],{"class":724},[718,1513,739],{"class":724},[718,1515,1062],{"class":742},[718,1517,739],{"class":724},[718,1519,1067],{"class":724},[718,1521,1071],{"class":1070},[718,1523,812],{"class":724},[718,1525,729],{"class":728},[718,1527,799],{"class":724},[718,1529,1530,1532,1534],{"class":720,"line":1165},[718,1531,812],{"class":724},[718,1533,729],{"class":728},[718,1535,799],{"class":724},[718,1537,1538],{"class":720,"line":1174},[718,1539,1083],{"emptyLinePlaceholder":1082},[718,1541,1542,1544,1546],{"class":720,"line":1179},[718,1543,725],{"class":724},[718,1545,1184],{"class":728},[718,1547,799],{"class":724},[718,1549,1550],{"class":720,"line":1189},[718,1551,1552],{"class":805},"\u002F\u002F 内联合成的时间线\n",[718,1554,1555,1557,1560,1562,1564,1566,1568,1570,1572,1574,1576,1578,1580,1582],{"class":720,"line":1233},[718,1556,1192],{"class":732},[718,1558,1559],{"class":1070}," introTl ",[718,1561,736],{"class":724},[718,1563,1200],{"class":1070},[718,1565,1203],{"class":724},[718,1567,1207],{"class":1206},[718,1569,1210],{"class":1070},[718,1571,1213],{"class":724},[718,1573,1216],{"class":728},[718,1575,1128],{"class":724},[718,1577,1222],{"class":1221},[718,1579,1225],{"class":724},[718,1581,1228],{"class":1070},[718,1583,1156],{"class":724},[718,1585,1586,1589,1591,1593,1595,1597,1599,1601,1603,1605,1607,1609,1611,1613,1615,1617,1619,1621,1623,1625,1627,1629,1631,1633],{"class":720,"line":1296},[718,1587,1588],{"class":1070},"introTl",[718,1590,1203],{"class":724},[718,1592,1241],{"class":1206},[718,1594,1210],{"class":1070},[718,1596,739],{"class":724},[718,1598,1248],{"class":742},[718,1600,739],{"class":724},[718,1602,1253],{"class":724},[718,1604,1256],{"class":724},[718,1606,1259],{"class":728},[718,1608,1128],{"class":724},[718,1610,1264],{"class":1131},[718,1612,1253],{"class":724},[718,1614,1269],{"class":728},[718,1616,1128],{"class":724},[718,1618,1274],{"class":724},[718,1620,1277],{"class":1131},[718,1622,1253],{"class":724},[718,1624,1282],{"class":728},[718,1626,1128],{"class":724},[718,1628,1287],{"class":1131},[718,1630,1225],{"class":724},[718,1632,1228],{"class":1070},[718,1634,1156],{"class":724},[718,1636,1637,1639,1641,1643,1645,1647,1649,1651,1653,1656],{"class":720,"line":1323},[718,1638,1299],{"class":1070},[718,1640,1203],{"class":724},[718,1642,1304],{"class":1070},[718,1644,739],{"class":724},[718,1646,924],{"class":742},[718,1648,739],{"class":724},[718,1650,1313],{"class":1070},[718,1652,736],{"class":724},[718,1654,1655],{"class":1070}," introTl",[718,1657,1156],{"class":724},[718,1659,1660,1662,1664],{"class":720,"line":1332},[718,1661,812],{"class":724},[718,1663,1184],{"class":728},[718,1665,799],{"class":724},[718,1667,1668,1670,1672],{"class":720,"line":1341},[718,1669,812],{"class":724},[718,1671,729],{"class":728},[718,1673,799],{"class":724},[692,1675,1676,1677,1679,1680,866],{},"内联合成不使用 ",[703,1678,886],{}," 标签或 ",[703,1681,882],{},[874,1683,1684],{"id":1684},"项目结构",[692,1686,1687],{},"project\u002F\nindex.html\ncompositions\u002F\nintro-anim.html\ncaption-overlay.html\noutro-title.html\nassets\u002F\nvideo.mp4\nmusic.mp3\nlogo.png",[696,1689,1691],{"id":1690},"两个层次原生元素和脚本","两个层次：原生元素和脚本",[692,1693,1694],{},"每个合成都有两个层次：",[833,1696,1697,1718],{},[836,1698,1699,1703,1704,1707,1708,1707,1711,1714,1715,1717],{},[1700,1701,1702],"strong",{},"HTML"," -- 原生片段（",[703,1705,1706],{},"video","、",[703,1709,1710],{},"img",[703,1712,1713],{},"audio","、嵌套合成）。声明式结构：播放什么、何时播放、在哪条轨道上。由",[829,1716,42],{"href":43},"控制。",[836,1719,1720,1723,1724,1727,1728,1731],{},[1700,1721,1722],{},"Script"," -- 特效、过渡、动态 DOM、Canvas、SVG——通过 ",[829,1725,1726],{"href":101},"GSAP"," 实现创意动画。脚本",[1700,1729,1730],{},"不会","控制媒体播放或片段的显示\u002F隐藏。",[1733,1734,1735,1741],"blockquote",{},[692,1736,1737,1738],{},"⚠️ ",[1700,1739,1740],{},"Warning",[692,1742,1743,1744,866],{},"切勿使用脚本来播放\u002F暂停\u002F寻找媒体元素，或根据时间控制片段的显示\u002F隐藏。框架会自动根据数据属性处理这些操作。重复这些行为的脚本会与框架产生冲突。示例请参阅",[829,1745,132],{"href":133},[696,1747,46],{"id":46},[692,1749,1750,1751,1754],{},"HyperFrames 不会自动将 ",[703,1752,1753],{},"data-var-*"," 属性绑定到合成的 DOM 或 CSS 中。",[692,1756,1757],{},"支持的模式是：",[1759,1760,1761,1772,1779],"ol",{},[836,1762,1763,1764,1767,1768,1771],{},"在子合成的 ",[703,1765,1766],{},"\u003Chtml>"," 根元素上使用 ",[703,1769,1770],{},"data-composition-variables"," 声明变量（id + type + default）。",[836,1773,1774,1775,1778],{},"在每个合成宿主元素上使用 ",[703,1776,1777],{},"data-variable-values"," 传递逐实例的值。",[836,1780,1781,1782,1785,1786,1788],{},"在合成内部使用 ",[703,1783,1784],{},"window.__hyperframes.getVariables()"," 读取解析后的值。运行时会按实例将宿主的 ",[703,1787,1777],{}," 覆盖在声明的默认值之上，因此相同的源文件可以使用不同的值嵌入多次。",[708,1790,1792],{"className":710,"code":1791,"language":712,"meta":713,"style":714},"\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",[703,1793,1794,1800,1813,1826,1838,1851,1866,1874,1880,1893,1905,1917,1929,1942],{"__ignoreMap":714},[718,1795,1796,1798],{"class":720,"line":721},[718,1797,725],{"class":724},[718,1799,899],{"class":728},[718,1801,1802,1804,1806,1808,1811],{"class":720,"line":760},[718,1803,705],{"class":732},[718,1805,736],{"class":724},[718,1807,739],{"class":724},[718,1809,1810],{"class":742},"card-pro",[718,1812,757],{"class":724},[718,1814,1815,1817,1819,1821,1824],{"class":720,"line":802},[718,1816,882],{"class":732},[718,1818,736],{"class":724},[718,1820,739],{"class":724},[718,1822,1823],{"class":742},"compositions\u002Fcard.html",[718,1825,757],{"class":724},[718,1827,1828,1830,1832,1834,1836],{"class":720,"line":809},[718,1829,763],{"class":732},[718,1831,736],{"class":724},[718,1833,739],{"class":724},[718,1835,770],{"class":742},[718,1837,757],{"class":724},[718,1839,1840,1842,1844,1846,1849],{"class":720,"line":942},[718,1841,958],{"class":732},[718,1843,736],{"class":724},[718,1845,739],{"class":724},[718,1847,1848],{"class":742},"1",[718,1850,757],{"class":724},[718,1852,1853,1855,1857,1860,1863],{"class":720,"line":955},[718,1854,1777],{"class":732},[718,1856,736],{"class":724},[718,1858,1859],{"class":724},"'",[718,1861,1862],{"class":742},"{\"title\":\"Pro\",\"color\":\"#ff4d4f\"}",[718,1864,1865],{"class":724},"'\n",[718,1867,1868,1870,1872],{"class":720,"line":970},[718,1869,973],{"class":724},[718,1871,729],{"class":728},[718,1873,799],{"class":724},[718,1875,1876,1878],{"class":720,"line":1159},[718,1877,725],{"class":724},[718,1879,899],{"class":728},[718,1881,1882,1884,1886,1888,1891],{"class":720,"line":1165},[718,1883,705],{"class":732},[718,1885,736],{"class":724},[718,1887,739],{"class":724},[718,1889,1890],{"class":742},"card-enterprise",[718,1892,757],{"class":724},[718,1894,1895,1897,1899,1901,1903],{"class":720,"line":1174},[718,1896,882],{"class":732},[718,1898,736],{"class":724},[718,1900,739],{"class":724},[718,1902,1823],{"class":742},[718,1904,757],{"class":724},[718,1906,1907,1909,1911,1913,1915],{"class":720,"line":1179},[718,1908,763],{"class":732},[718,1910,736],{"class":724},[718,1912,739],{"class":724},[718,1914,1810],{"class":742},[718,1916,757],{"class":724},[718,1918,1919,1921,1923,1925,1927],{"class":720,"line":1189},[718,1920,958],{"class":732},[718,1922,736],{"class":724},[718,1924,739],{"class":724},[718,1926,1848],{"class":742},[718,1928,757],{"class":724},[718,1930,1931,1933,1935,1937,1940],{"class":720,"line":1233},[718,1932,1777],{"class":732},[718,1934,736],{"class":724},[718,1936,1859],{"class":724},[718,1938,1939],{"class":742},"{\"title\":\"Enterprise\",\"color\":\"#22c55e\"}",[718,1941,1865],{"class":724},[718,1943,1944,1946,1948],{"class":720,"line":1296},[718,1945,973],{"class":724},[718,1947,729],{"class":728},[718,1949,799],{"class":724},[708,1951,1953],{"className":710,"code":1952,"language":712,"meta":1823,"style":714},"\u003Chtml data-composition-variables='[\n{\"id\":\"title\",\"type\":\"string\",\"label\":\"Title\",\"default\":\"Fallback\"},\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=\"title\">\u003C\u002Fh1>\n\n\u003Cstyle>\n[data-composition-id=\"card\"] {\n--card-color: #111827;\n}\n\n[data-composition-id=\"card\"] .title {\ncolor: var(--card-color);\n}\n\u003C\u002Fstyle>\n\n\u003Cscript>\n\u002F\u002F 在子合成脚本中，getVariables() 返回逐实例的值：\n\u002F\u002F 声明的默认值 \u003C 宿主 data-variable-values 覆盖值。\nconst { title, color } = __hyperframes.getVariables();\nconst root = document.querySelector('[data-composition-id=\"card\"]');\nroot.querySelector(\".title\").textContent = title;\nroot.style.setProperty(\"--card-color\", color);\n\u003C\u002Fscript>\n\u003C\u002Fdiv>\n\u003C\u002Fbody>\n\u003C\u002Fhtml>\n",[703,1954,1955,1971,1976,1981,1989,1998,2037,2060,2064,2072,2090,2105,2109,2113,2135,2152,2156,2164,2169,2178,2184,2190,2224,2255,2285,2314,2323,2332,2341],{"__ignoreMap":714},[718,1956,1957,1959,1961,1964,1966,1968],{"class":720,"line":721},[718,1958,725],{"class":724},[718,1960,712],{"class":728},[718,1962,1963],{"class":732}," data-composition-variables",[718,1965,736],{"class":724},[718,1967,1859],{"class":724},[718,1969,1970],{"class":742},"[\n",[718,1972,1973],{"class":720,"line":760},[718,1974,1975],{"class":742},"{\"id\":\"title\",\"type\":\"string\",\"label\":\"Title\",\"default\":\"Fallback\"},\n",[718,1977,1978],{"class":720,"line":802},[718,1979,1980],{"class":742},"{\"id\":\"color\",\"type\":\"color\",\"label\":\"Color\",\"default\":\"#111827\"}\n",[718,1982,1983,1985,1987],{"class":720,"line":809},[718,1984,1110],{"class":742},[718,1986,1859],{"class":724},[718,1988,799],{"class":724},[718,1990,1991,1993,1996],{"class":720,"line":942},[718,1992,725],{"class":724},[718,1994,1995],{"class":728},"body",[718,1997,799],{"class":724},[718,1999,2000,2002,2004,2006,2008,2010,2013,2015,2017,2019,2021,2023,2025,2027,2029,2031,2033,2035],{"class":720,"line":955},[718,2001,725],{"class":724},[718,2003,729],{"class":728},[718,2005,748],{"class":732},[718,2007,736],{"class":724},[718,2009,739],{"class":724},[718,2011,2012],{"class":742},"card",[718,2014,739],{"class":724},[718,2016,775],{"class":732},[718,2018,736],{"class":724},[718,2020,739],{"class":724},[718,2022,782],{"class":742},[718,2024,739],{"class":724},[718,2026,787],{"class":732},[718,2028,736],{"class":724},[718,2030,739],{"class":724},[718,2032,794],{"class":742},[718,2034,739],{"class":724},[718,2036,799],{"class":724},[718,2038,2039,2041,2044,2046,2048,2050,2052,2054,2056,2058],{"class":720,"line":970},[718,2040,725],{"class":724},[718,2042,2043],{"class":728},"h1",[718,2045,1055],{"class":732},[718,2047,736],{"class":724},[718,2049,739],{"class":724},[718,2051,1062],{"class":742},[718,2053,739],{"class":724},[718,2055,973],{"class":724},[718,2057,2043],{"class":728},[718,2059,799],{"class":724},[718,2061,2062],{"class":720,"line":1159},[718,2063,1083],{"emptyLinePlaceholder":1082},[718,2065,2066,2068,2070],{"class":720,"line":1165},[718,2067,725],{"class":724},[718,2069,1090],{"class":728},[718,2071,799],{"class":724},[718,2073,2074,2076,2078,2080,2082,2084,2086,2088],{"class":720,"line":1174},[718,2075,1097],{"class":724},[718,2077,705],{"class":732},[718,2079,736],{"class":724},[718,2081,739],{"class":724},[718,2083,2012],{"class":742},[718,2085,739],{"class":724},[718,2087,1110],{"class":724},[718,2089,1119],{"class":724},[718,2091,2092,2095,2097,2100,2103],{"class":720,"line":1179},[718,2093,2094],{"class":1070},"--card-color",[718,2096,1128],{"class":724},[718,2098,2099],{"class":724}," #",[718,2101,2102],{"class":1070},"111827",[718,2104,1156],{"class":724},[718,2106,2107],{"class":720,"line":1189},[718,2108,1162],{"class":724},[718,2110,2111],{"class":720,"line":1233},[718,2112,1083],{"emptyLinePlaceholder":1082},[718,2114,2115,2117,2119,2121,2123,2125,2127,2129,2131,2133],{"class":720,"line":1296},[718,2116,1097],{"class":724},[718,2118,705],{"class":732},[718,2120,736],{"class":724},[718,2122,739],{"class":724},[718,2124,2012],{"class":742},[718,2126,739],{"class":724},[718,2128,1110],{"class":724},[718,2130,1113],{"class":724},[718,2132,1062],{"class":1116},[718,2134,1119],{"class":724},[718,2136,2137,2140,2142,2145,2147,2149],{"class":720,"line":1323},[718,2138,2139],{"class":1124},"color",[718,2141,1128],{"class":724},[718,2143,2144],{"class":1206}," var",[718,2146,1210],{"class":724},[718,2148,2094],{"class":1070},[718,2150,2151],{"class":724},");\n",[718,2153,2154],{"class":720,"line":1332},[718,2155,1162],{"class":724},[718,2157,2158,2160,2162],{"class":720,"line":1341},[718,2159,812],{"class":724},[718,2161,1090],{"class":728},[718,2163,799],{"class":724},[718,2165,2167],{"class":720,"line":2166},18,[718,2168,1083],{"emptyLinePlaceholder":1082},[718,2170,2172,2174,2176],{"class":720,"line":2171},19,[718,2173,725],{"class":724},[718,2175,1184],{"class":728},[718,2177,799],{"class":724},[718,2179,2181],{"class":720,"line":2180},20,[718,2182,2183],{"class":805},"\u002F\u002F 在子合成脚本中，getVariables() 返回逐实例的值：\n",[718,2185,2187],{"class":720,"line":2186},21,[718,2188,2189],{"class":805},"\u002F\u002F 声明的默认值 \u003C 宿主 data-variable-values 覆盖值。\n",[718,2191,2193,2195,2197,2200,2202,2205,2208,2211,2214,2216,2219,2222],{"class":720,"line":2192},22,[718,2194,1192],{"class":732},[718,2196,1256],{"class":724},[718,2198,2199],{"class":1070}," title",[718,2201,1253],{"class":724},[718,2203,2204],{"class":1070}," color ",[718,2206,2207],{"class":724},"}",[718,2209,2210],{"class":724}," =",[718,2212,2213],{"class":1070}," __hyperframes",[718,2215,1203],{"class":724},[718,2217,2218],{"class":1206},"getVariables",[718,2220,2221],{"class":1070},"()",[718,2223,1156],{"class":724},[718,2225,2227,2229,2232,2234,2237,2239,2242,2244,2246,2249,2251,2253],{"class":720,"line":2226},23,[718,2228,1192],{"class":732},[718,2230,2231],{"class":1070}," root ",[718,2233,736],{"class":724},[718,2235,2236],{"class":1070}," document",[718,2238,1203],{"class":724},[718,2240,2241],{"class":1206},"querySelector",[718,2243,1210],{"class":1070},[718,2245,1859],{"class":724},[718,2247,2248],{"class":742},"[data-composition-id=\"card\"]",[718,2250,1859],{"class":724},[718,2252,1228],{"class":1070},[718,2254,1156],{"class":724},[718,2256,2258,2260,2262,2264,2266,2268,2270,2272,2274,2276,2279,2281,2283],{"class":720,"line":2257},24,[718,2259,743],{"class":1070},[718,2261,1203],{"class":724},[718,2263,2241],{"class":1206},[718,2265,1210],{"class":1070},[718,2267,739],{"class":724},[718,2269,1248],{"class":742},[718,2271,739],{"class":724},[718,2273,1228],{"class":1070},[718,2275,1203],{"class":724},[718,2277,2278],{"class":1070},"textContent ",[718,2280,736],{"class":724},[718,2282,2199],{"class":1070},[718,2284,1156],{"class":724},[718,2286,2288,2290,2292,2294,2296,2299,2301,2303,2305,2307,2309,2312],{"class":720,"line":2287},25,[718,2289,743],{"class":1070},[718,2291,1203],{"class":724},[718,2293,1090],{"class":1070},[718,2295,1203],{"class":724},[718,2297,2298],{"class":1206},"setProperty",[718,2300,1210],{"class":1070},[718,2302,739],{"class":724},[718,2304,2094],{"class":742},[718,2306,739],{"class":724},[718,2308,1253],{"class":724},[718,2310,2311],{"class":1070}," color)",[718,2313,1156],{"class":724},[718,2315,2317,2319,2321],{"class":720,"line":2316},26,[718,2318,812],{"class":724},[718,2320,1184],{"class":728},[718,2322,799],{"class":724},[718,2324,2326,2328,2330],{"class":720,"line":2325},27,[718,2327,812],{"class":724},[718,2329,729],{"class":728},[718,2331,799],{"class":724},[718,2333,2335,2337,2339],{"class":720,"line":2334},28,[718,2336,812],{"class":724},[718,2338,1995],{"class":728},[718,2340,799],{"class":724},[718,2342,2344,2346,2348],{"class":720,"line":2343},29,[718,2345,812],{"class":724},[718,2347,712],{"class":728},[718,2349,799],{"class":724},[692,2351,2352,2353,2355,2356,2358,2359,2362],{},"如果你正在基于 ",[703,2354,175],{}," 构建工具链，同一个 ",[703,2357,1770],{}," 数组可以通过 ",[703,2360,2361],{},"extractCompositionMetadata()"," 读取，用于 Studio 编辑界面和分析流程。",[696,2364,2365],{"id":2365},"列出合成",[692,2367,879,2368,2370],{},[829,2369,195],{"href":196}," 查看项目中的所有合成：",[708,2372,2376],{"className":2373,"code":2374,"language":2375,"meta":714,"style":714},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx hyperframes compositions\n","bash",[703,2377,2378],{"__ignoreMap":714},[718,2379,2380,2383,2386],{"class":720,"line":721},[718,2381,2382],{"class":1116},"npx",[718,2384,2385],{"class":742}," hyperframes",[718,2387,2388],{"class":742}," compositions\n",[696,2390,2391],{"id":2391},"下一步",[833,2393,2394,2401,2408,2415],{},[836,2395,2396,2400],{},[1700,2397,2398],{},[829,2399,42],{"href":43},"\n时间、媒体和合成属性的完整参考",[836,2402,2403,2407],{},[1700,2404,2405],{},[829,2406,100],{"href":101},"\n使用 GSAP 时间线为合成添加动画",[836,2409,2410,2414],{},[1700,2411,2412],{},[829,2413,23],{"href":24},"\n从常见视频模式的内置示例开始",[836,2416,2417,2421],{},[1700,2418,2419],{},[829,2420,659],{"href":660},"\n创作合成的完整 schema",[1090,2423,2424],{},"html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .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 .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 .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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}",{"title":714,"searchDepth":721,"depth":760,"links":2426},[2427,2428,2429,2434,2435,2436,2437],{"id":698,"depth":760,"text":698},{"id":824,"depth":760,"text":824},{"id":869,"depth":760,"text":869,"children":2430},[2431,2432,2433],{"id":876,"depth":802,"text":876},{"id":1350,"depth":802,"text":1350},{"id":1684,"depth":802,"text":1684},{"id":1690,"depth":760,"text":1691},{"id":46,"depth":760,"text":46},{"id":2365,"depth":760,"text":2365},{"id":2391,"depth":760,"text":2391},"Hyperframes 视频的基本构建单元。","md",null,{},{"title":38,"description":2438},"HOfKK-dltx6qvTa_Uyi3vGuFfYElnVh9Y_upW1_JLL8",[2445,2447],{"title":27,"path":28,"stem":29,"description":2446,"children":-1},"HeyGen 产品发布视频背后的开源 HyperFrames 合成——真实的生产项目，你可以阅读、运行和二次创作。",{"title":42,"path":43,"stem":44,"description":2448,"children":-1},"控制元素时序和行为的核心属性。",1780322245458]