[{"data":1,"prerenderedAt":2580},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Fcommon-mistakes":686,"\u002Fguides\u002Fcommon-mistakes-surround":2575},[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":132,"body":688,"description":2569,"extension":2570,"links":2571,"meta":2572,"navigation":1405,"path":133,"seo":2573,"stem":134,"__hash__":2574},"docs\u002F03.guides\u002F18.common-mistakes.md",{"type":689,"value":690,"toc":2565},"minimark",[691,705,718,2456,2460,2463,2527,2530,2561],[692,693,694,695,699,700,704],"p",{},"这些是 lint 无法捕获的错误。有关自动检查，请运行 ",[696,697,698],"code",{},"npx hyperframes lint","（参见 ",[701,702,195],"a",{"href":703},"\u002Fpackages\u002Fcli#lint","）。",[706,707,708,715],"blockquote",{},[692,709,710,711],{},"⚠️ ",[712,713,714],"strong",{},"Warning",[692,716,717],{},"前两个错误——对视频元素尺寸做动画和在脚本中控制媒体播放——是合成出错的最常见原因。如果你的视频看起来不对，首先检查这些。",[719,720,721,722,746,751,856,861,996,1065,1072,1078,1098,1102,1173,1177,1239,1266,1271,1285,1289,1348,1352,1436,1442,1457,1467,1479,1483,1559,1563,1645,1662,1667,1676,1679,1684,1748,1753,1807,1868,1878,1883,1892,1897,2110,2115,2192,2197,2218,2226,2238,2249,2261,2301,2325,2332,2343,2349,2354,2369,2373,2415,2419],"accordion-group",{},"\n**症状：** 视频帧停止更新，或浏览器性能严重下降。\n",[692,723,724,727,728,731,732,735,736,735,739,735,742,745],{},[712,725,726],{},"原因："," GSAP 直接对 ",[696,729,730],{},"\u003Cvideo>"," 元素的 ",[696,733,734],{},"width","、",[696,737,738],{},"height",[696,740,741],{},"top",[696,743,744],{},"left"," 做动画可能导致浏览器停止渲染帧。",[692,747,748],{},[712,749,750],{},"修复前（有问题）：",[752,753,759],"pre",{"className":754,"code":755,"language":756,"meta":757,"style":758},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F 直接对视频元素做动画——导致帧渲染停止\nl.to(\"#el-video\", { width: 500, height: 280, top: 700, left: 1400 }, 26);\n","javascript","index.html","",[696,760,761,770],{"__ignoreMap":758},[762,763,766],"span",{"class":764,"line":765},"line",1,[762,767,769],{"class":768},"sHwdD","\u002F\u002F 直接对视频元素做动画——导致帧渲染停止\n",[762,771,773,777,781,785,788,791,795,797,800,803,807,810,814,816,819,821,824,826,829,831,834,836,839,841,844,847,850,853],{"class":764,"line":772},2,[762,774,776],{"class":775},"sTEyZ","l",[762,778,780],{"class":779},"sMK4o",".",[762,782,784],{"class":783},"s2Zo4","to",[762,786,787],{"class":775},"(",[762,789,790],{"class":779},"\"",[762,792,794],{"class":793},"sfazB","#el-video",[762,796,790],{"class":779},[762,798,799],{"class":779},",",[762,801,802],{"class":779}," {",[762,804,806],{"class":805},"swJcz"," width",[762,808,809],{"class":779},":",[762,811,813],{"class":812},"sbssI"," 500",[762,815,799],{"class":779},[762,817,818],{"class":805}," height",[762,820,809],{"class":779},[762,822,823],{"class":812}," 280",[762,825,799],{"class":779},[762,827,828],{"class":805}," top",[762,830,809],{"class":779},[762,832,833],{"class":812}," 700",[762,835,799],{"class":779},[762,837,838],{"class":805}," left",[762,840,809],{"class":779},[762,842,843],{"class":812}," 1400",[762,845,846],{"class":779}," },",[762,848,849],{"class":812}," 26",[762,851,852],{"class":775},")",[762,854,855],{"class":779},";\n",[692,857,858],{},[712,859,860],{},"修复后：",[752,862,866],{"className":863,"code":864,"language":865,"meta":757,"style":758},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- 将视频包装在 div 中并对包装器做动画 -->\n\u003Cdiv id=\"pip-wrapper\" style=\"position: absolute; width: 1920px; height: 1080px;\">\n\u003Cvideo id=\"el-video\" data-start=\"0\" data-track-index=\"0\"\nsrc=\".\u002Fassets\u002Fvideo.mp4\" style=\"width: 100%; height: 100%;\">\u003C\u002Fvideo>\n\u003C\u002Fdiv>\n","html",[696,867,868,873,910,953,986],{"__ignoreMap":758},[762,869,870],{"class":764,"line":765},[762,871,872],{"class":768},"\u003C!-- 将视频包装在 div 中并对包装器做动画 -->\n",[762,874,875,878,881,885,888,890,893,895,898,900,902,905,907],{"class":764,"line":772},[762,876,877],{"class":779},"\u003C",[762,879,880],{"class":805},"div",[762,882,884],{"class":883},"spNyl"," id",[762,886,887],{"class":779},"=",[762,889,790],{"class":779},[762,891,892],{"class":793},"pip-wrapper",[762,894,790],{"class":779},[762,896,897],{"class":883}," style",[762,899,887],{"class":779},[762,901,790],{"class":779},[762,903,904],{"class":793},"position: absolute; width: 1920px; height: 1080px;",[762,906,790],{"class":779},[762,908,909],{"class":779},">\n",[762,911,913,915,918,920,922,924,927,929,932,934,936,939,941,944,946,948,950],{"class":764,"line":912},3,[762,914,877],{"class":779},[762,916,917],{"class":805},"video",[762,919,884],{"class":883},[762,921,887],{"class":779},[762,923,790],{"class":779},[762,925,926],{"class":793},"el-video",[762,928,790],{"class":779},[762,930,931],{"class":883}," data-start",[762,933,887],{"class":779},[762,935,790],{"class":779},[762,937,938],{"class":793},"0",[762,940,790],{"class":779},[762,942,943],{"class":883}," data-track-index",[762,945,887],{"class":779},[762,947,790],{"class":779},[762,949,938],{"class":793},[762,951,952],{"class":779},"\"\n",[762,954,956,959,961,963,966,968,970,972,974,977,979,982,984],{"class":764,"line":955},4,[762,957,958],{"class":883},"src",[762,960,887],{"class":779},[762,962,790],{"class":779},[762,964,965],{"class":793},".\u002Fassets\u002Fvideo.mp4",[762,967,790],{"class":779},[762,969,897],{"class":883},[762,971,887],{"class":779},[762,973,790],{"class":779},[762,975,976],{"class":793},"width: 100%; height: 100%;",[762,978,790],{"class":779},[762,980,981],{"class":779},">\u003C\u002F",[762,983,917],{"class":805},[762,985,909],{"class":779},[762,987,989,992,994],{"class":764,"line":988},5,[762,990,991],{"class":779},"\u003C\u002F",[762,993,880],{"class":805},[762,995,909],{"class":779},[752,997,999],{"className":754,"code":998,"language":756,"meta":757,"style":758},"\u002F\u002F 对包装器做动画——视频通过 CSS 以 100% 填充它\nl.to(\"#pip-wrapper\", { width: 500, height: 280, top: 700, left: 1400 }, 26);\n",[696,1000,1001,1006],{"__ignoreMap":758},[762,1002,1003],{"class":764,"line":765},[762,1004,1005],{"class":768},"\u002F\u002F 对包装器做动画——视频通过 CSS 以 100% 填充它\n",[762,1007,1008,1010,1012,1014,1016,1018,1021,1023,1025,1027,1029,1031,1033,1035,1037,1039,1041,1043,1045,1047,1049,1051,1053,1055,1057,1059,1061,1063],{"class":764,"line":772},[762,1009,776],{"class":775},[762,1011,780],{"class":779},[762,1013,784],{"class":783},[762,1015,787],{"class":775},[762,1017,790],{"class":779},[762,1019,1020],{"class":793},"#pip-wrapper",[762,1022,790],{"class":779},[762,1024,799],{"class":779},[762,1026,802],{"class":779},[762,1028,806],{"class":805},[762,1030,809],{"class":779},[762,1032,813],{"class":812},[762,1034,799],{"class":779},[762,1036,818],{"class":805},[762,1038,809],{"class":779},[762,1040,823],{"class":812},[762,1042,799],{"class":779},[762,1044,828],{"class":805},[762,1046,809],{"class":779},[762,1048,833],{"class":812},[762,1050,799],{"class":779},[762,1052,838],{"class":805},[762,1054,809],{"class":779},[762,1056,843],{"class":812},[762,1058,846],{"class":779},[762,1060,849],{"class":812},[762,1062,852],{"class":775},[762,1064,855],{"class":779},[692,1066,1067,1068,1071],{},"对于画中画等视觉效果，使用非计时的包装器 ",[696,1069,1070],{},"\u003Cdiv>","。对包装器做动画；让视频通过 CSS 填充它。",[692,1073,1074,1077],{},[712,1075,1076],{},"症状："," 音视频播放不同步，或在不应播放时播放。",[692,1079,1080,1082,1083,735,1086,1089,1090,1093,1094,1093],{},[712,1081,726],{}," 在脚本中调用 ",[696,1084,1085],{},"video.play()",[696,1087,1088],{},"video.pause()"," 或设置 ",[696,1091,1092],{},"audio.currentTime","。",[701,1095,1097],{"href":1096},"\u002Freference\u002Fhtml-schema#%E6%A1%86%E6%9E%B6%E7%AE%A1%E7%90%86%E7%9A%84%E8%A1%8C%E4%B8%BA","框架拥有所有媒体播放",[692,1099,1100],{},[712,1101,750],{},[752,1103,1105],{"className":754,"code":1104,"language":756,"meta":757,"style":758},"\u002F\u002F 与框架媒体同步冲突\ndocument.getElementById(\"el-video\").play();\ndocument.getElementById(\"el-audio\").currentTime = 5;\n",[696,1106,1107,1112,1142],{"__ignoreMap":758},[762,1108,1109],{"class":764,"line":765},[762,1110,1111],{"class":768},"\u002F\u002F 与框架媒体同步冲突\n",[762,1113,1114,1117,1119,1122,1124,1126,1128,1130,1132,1134,1137,1140],{"class":764,"line":772},[762,1115,1116],{"class":775},"document",[762,1118,780],{"class":779},[762,1120,1121],{"class":783},"getElementById",[762,1123,787],{"class":775},[762,1125,790],{"class":779},[762,1127,926],{"class":793},[762,1129,790],{"class":779},[762,1131,852],{"class":775},[762,1133,780],{"class":779},[762,1135,1136],{"class":783},"play",[762,1138,1139],{"class":775},"()",[762,1141,855],{"class":779},[762,1143,1144,1146,1148,1150,1152,1154,1157,1159,1161,1163,1166,1168,1171],{"class":764,"line":912},[762,1145,1116],{"class":775},[762,1147,780],{"class":779},[762,1149,1121],{"class":783},[762,1151,787],{"class":775},[762,1153,790],{"class":779},[762,1155,1156],{"class":793},"el-audio",[762,1158,790],{"class":779},[762,1160,852],{"class":775},[762,1162,780],{"class":779},[762,1164,1165],{"class":775},"currentTime ",[762,1167,887],{"class":779},[762,1169,1170],{"class":812}," 5",[762,1172,855],{"class":779},[692,1174,1175],{},[712,1176,860],{},[752,1178,1180],{"className":754,"code":1179,"language":756,"meta":757,"style":758},"\u002F\u002F 完全不控制媒体播放。框架会处理它。\n\u002F\u002F 仅使用 GSAP 做视觉动画：\nl.to(\"#el-video\", { opacity: 1, duration: 0.5 }, 0);\n",[696,1181,1182,1187,1192],{"__ignoreMap":758},[762,1183,1184],{"class":764,"line":765},[762,1185,1186],{"class":768},"\u002F\u002F 完全不控制媒体播放。框架会处理它。\n",[762,1188,1189],{"class":764,"line":772},[762,1190,1191],{"class":768},"\u002F\u002F 仅使用 GSAP 做视觉动画：\n",[762,1193,1194,1196,1198,1200,1202,1204,1206,1208,1210,1212,1215,1217,1220,1222,1225,1227,1230,1232,1235,1237],{"class":764,"line":912},[762,1195,776],{"class":775},[762,1197,780],{"class":779},[762,1199,784],{"class":783},[762,1201,787],{"class":775},[762,1203,790],{"class":779},[762,1205,794],{"class":793},[762,1207,790],{"class":779},[762,1209,799],{"class":779},[762,1211,802],{"class":779},[762,1213,1214],{"class":805}," opacity",[762,1216,809],{"class":779},[762,1218,1219],{"class":812}," 1",[762,1221,799],{"class":779},[762,1223,1224],{"class":805}," duration",[762,1226,809],{"class":779},[762,1228,1229],{"class":812}," 0.5",[762,1231,846],{"class":779},[762,1233,1234],{"class":812}," 0",[762,1236,852],{"class":775},[762,1238,855],{"class":779},[692,1240,1241,1242,735,1248,1254,1255,1260,1261,1265],{},"框架通过读取 ",[701,1243,1245],{"href":1244},"\u002Fconcepts\u002Fdata-attributes#%E6%97%B6%E5%BA%8F%E5%B1%9E%E6%80%A7",[696,1246,1247],{},"data-start",[701,1249,1251],{"href":1250},"\u002Fconcepts\u002Fdata-attributes#%E5%AA%92%E4%BD%93%E5%B1%9E%E6%80%A7",[696,1252,1253],{},"data-media-start"," 和 ",[701,1256,1257],{"href":1250},[696,1258,1259],{},"data-volume"," 来控制媒体何时以及如何播放。参见",[701,1262,1264],{"href":1263},"\u002Fconcepts\u002Fcompositions#%E4%B8%A4%E4%B8%AA%E5%B1%82%E6%AC%A1%E5%8E%9F%E7%94%9F%E5%85%83%E7%B4%A0%E5%92%8C%E8%84%9A%E6%9C%AC","合成：两个层次","了解 HTML 原语和脚本之间的分离。",[692,1267,1268,1270],{},[712,1269,1076],{}," 视频播放几秒后停止。时间线显示 8-10 秒，即使视频有几分钟长。",[692,1272,1273,1275,1276,1280,1281,1284],{},[712,1274,726],{}," 合成时长等于 ",[701,1277,1279],{"href":1278},"\u002Fguides\u002Fgsap-animation#%E6%97%B6%E9%97%B4%E7%BA%BF%E6%97%B6%E9%95%BF%E4%B8%8E%E5%90%88%E6%88%90%E6%97%B6%E9%95%BF","GSAP 时间线时长","，而非视频上的 ",[696,1282,1283],{},"data-duration","。如果你的最后一个 GSAP 动画在 8 秒结束，合成就是 8 秒长——无论视频源有多长。",[692,1286,1287],{},[712,1288,750],{},[752,1290,1292],{"className":754,"code":1291,"language":756,"meta":757,"style":758},"\u002F\u002F 时间线只有 7.8 秒长——视频在 7.8 秒后被截断\nl.to(\"#lower-third\", { left: -640, duration: 0.6 }, 7.2);\n",[696,1293,1294,1299],{"__ignoreMap":758},[762,1295,1296],{"class":764,"line":765},[762,1297,1298],{"class":768},"\u002F\u002F 时间线只有 7.8 秒长——视频在 7.8 秒后被截断\n",[762,1300,1301,1303,1305,1307,1309,1311,1314,1316,1318,1320,1322,1324,1327,1330,1332,1334,1336,1339,1341,1344,1346],{"class":764,"line":772},[762,1302,776],{"class":775},[762,1304,780],{"class":779},[762,1306,784],{"class":783},[762,1308,787],{"class":775},[762,1310,790],{"class":779},[762,1312,1313],{"class":793},"#lower-third",[762,1315,790],{"class":779},[762,1317,799],{"class":779},[762,1319,802],{"class":779},[762,1321,838],{"class":805},[762,1323,809],{"class":779},[762,1325,1326],{"class":779}," -",[762,1328,1329],{"class":812},"640",[762,1331,799],{"class":779},[762,1333,1224],{"class":805},[762,1335,809],{"class":779},[762,1337,1338],{"class":812}," 0.6",[762,1340,846],{"class":779},[762,1342,1343],{"class":812}," 7.2",[762,1345,852],{"class":775},[762,1347,855],{"class":779},[692,1349,1350],{},[712,1351,860],{},[752,1353,1355],{"className":754,"code":1354,"language":756,"meta":757,"style":758},"l.to(\"#lower-third\", { left: -640, duration: 0.6 }, 7.2);\n\n\u002F\u002F 将时间线延长到 283 秒以匹配视频长度\nl.set({}, {}, 283);\n",[696,1356,1357,1401,1407,1412],{"__ignoreMap":758},[762,1358,1359,1361,1363,1365,1367,1369,1371,1373,1375,1377,1379,1381,1383,1385,1387,1389,1391,1393,1395,1397,1399],{"class":764,"line":765},[762,1360,776],{"class":775},[762,1362,780],{"class":779},[762,1364,784],{"class":783},[762,1366,787],{"class":775},[762,1368,790],{"class":779},[762,1370,1313],{"class":793},[762,1372,790],{"class":779},[762,1374,799],{"class":779},[762,1376,802],{"class":779},[762,1378,838],{"class":805},[762,1380,809],{"class":779},[762,1382,1326],{"class":779},[762,1384,1329],{"class":812},[762,1386,799],{"class":779},[762,1388,1224],{"class":805},[762,1390,809],{"class":779},[762,1392,1338],{"class":812},[762,1394,846],{"class":779},[762,1396,1343],{"class":812},[762,1398,852],{"class":775},[762,1400,855],{"class":779},[762,1402,1403],{"class":764,"line":772},[762,1404,1406],{"emptyLinePlaceholder":1405},true,"\n",[762,1408,1409],{"class":764,"line":912},[762,1410,1411],{"class":768},"\u002F\u002F 将时间线延长到 283 秒以匹配视频长度\n",[762,1413,1414,1416,1418,1421,1423,1426,1429,1432,1434],{"class":764,"line":955},[762,1415,776],{"class":775},[762,1417,780],{"class":779},[762,1419,1420],{"class":783},"set",[762,1422,787],{"class":775},[762,1424,1425],{"class":779},"{},",[762,1427,1428],{"class":779}," {},",[762,1430,1431],{"class":812}," 283",[762,1433,852],{"class":775},[762,1435,855],{"class":779},[692,1437,1438,1441],{},[696,1439,1440],{},"tl.set({}, {}, TIME)"," 在指定时间添加一个零时长的补间，延长时间线而不影响任何元素。",[706,1443,1444,1450],{},[692,1445,1446,1447],{},"💡 ",[712,1448,1449],{},"Tip",[692,1451,1452,1453,1456],{},"快速检查：运行 ",[696,1454,1455],{},"npx hyperframes compositions"," 查看每个合成的解析时长。如果比预期短，需要延长你的时间线。",[692,1458,1459,1461,1462,1254,1464,1466],{},[712,1460,1076],{}," 元素始终可见，忽略其 ",[696,1463,1247],{},[696,1465,1283],{}," 计时。",[692,1468,1469,1471,1472,1478],{},[712,1470,726],{}," ",[701,1473,1475],{"href":1474},"\u002Fconcepts\u002Fdata-attributes#%E5%85%83%E7%B4%A0%E5%8F%AF%E8%A7%81%E6%80%A7",[696,1476,1477],{},"class=\"clip\""," 属性告诉运行时管理元素的可见性生命周期。没有它，元素将始终被渲染。",[692,1480,1481],{},[712,1482,750],{},[752,1484,1486],{"className":863,"code":1485,"language":865,"meta":757,"style":758},"\u003C!-- 缺少 class=\"clip\"——此元素始终可见 -->\n\u003Ch1 id=\"title\" data-start=\"2\" data-duration=\"5\" data-track-index=\"0\">\nHello World\n\u003C\u002Fh1>\n",[696,1487,1488,1493,1546,1551],{"__ignoreMap":758},[762,1489,1490],{"class":764,"line":765},[762,1491,1492],{"class":768},"\u003C!-- 缺少 class=\"clip\"——此元素始终可见 -->\n",[762,1494,1495,1497,1500,1502,1504,1506,1509,1511,1513,1515,1517,1520,1522,1525,1527,1529,1532,1534,1536,1538,1540,1542,1544],{"class":764,"line":772},[762,1496,877],{"class":779},[762,1498,1499],{"class":805},"h1",[762,1501,884],{"class":883},[762,1503,887],{"class":779},[762,1505,790],{"class":779},[762,1507,1508],{"class":793},"title",[762,1510,790],{"class":779},[762,1512,931],{"class":883},[762,1514,887],{"class":779},[762,1516,790],{"class":779},[762,1518,1519],{"class":793},"2",[762,1521,790],{"class":779},[762,1523,1524],{"class":883}," data-duration",[762,1526,887],{"class":779},[762,1528,790],{"class":779},[762,1530,1531],{"class":793},"5",[762,1533,790],{"class":779},[762,1535,943],{"class":883},[762,1537,887],{"class":779},[762,1539,790],{"class":779},[762,1541,938],{"class":793},[762,1543,790],{"class":779},[762,1545,909],{"class":779},[762,1547,1548],{"class":764,"line":912},[762,1549,1550],{"class":775},"Hello World\n",[762,1552,1553,1555,1557],{"class":764,"line":955},[762,1554,991],{"class":779},[762,1556,1499],{"class":805},[762,1558,909],{"class":779},[692,1560,1561],{},[712,1562,860],{},[752,1564,1566],{"className":863,"code":1565,"language":865,"meta":757,"style":758},"\u003C!-- 有了 class=\"clip\"，运行时仅在 2s 到 7s 之间显示此元素 -->\n\u003Ch1 id=\"title\" class=\"clip\" data-start=\"2\" data-duration=\"5\" data-track-index=\"0\">\nHello World\n\u003C\u002Fh1>\n",[696,1567,1568,1573,1633,1637],{"__ignoreMap":758},[762,1569,1570],{"class":764,"line":765},[762,1571,1572],{"class":768},"\u003C!-- 有了 class=\"clip\"，运行时仅在 2s 到 7s 之间显示此元素 -->\n",[762,1574,1575,1577,1579,1581,1583,1585,1587,1589,1592,1594,1596,1599,1601,1603,1605,1607,1609,1611,1613,1615,1617,1619,1621,1623,1625,1627,1629,1631],{"class":764,"line":772},[762,1576,877],{"class":779},[762,1578,1499],{"class":805},[762,1580,884],{"class":883},[762,1582,887],{"class":779},[762,1584,790],{"class":779},[762,1586,1508],{"class":793},[762,1588,790],{"class":779},[762,1590,1591],{"class":883}," class",[762,1593,887],{"class":779},[762,1595,790],{"class":779},[762,1597,1598],{"class":793},"clip",[762,1600,790],{"class":779},[762,1602,931],{"class":883},[762,1604,887],{"class":779},[762,1606,790],{"class":779},[762,1608,1519],{"class":793},[762,1610,790],{"class":779},[762,1612,1524],{"class":883},[762,1614,887],{"class":779},[762,1616,790],{"class":779},[762,1618,1531],{"class":793},[762,1620,790],{"class":779},[762,1622,943],{"class":883},[762,1624,887],{"class":779},[762,1626,790],{"class":779},[762,1628,938],{"class":793},[762,1630,790],{"class":779},[762,1632,909],{"class":779},[762,1634,1635],{"class":764,"line":912},[762,1636,1550],{"class":775},[762,1638,1639,1641,1643],{"class":764,"line":955},[762,1640,991],{"class":779},[762,1642,1499],{"class":805},[762,1644,909],{"class":779},[706,1646,1647,1653],{},[692,1648,1649,1650],{},"ℹ️ ",[712,1651,1652],{},"Note",[692,1654,1655,1656,1658,1659,1661],{},"lint 会捕获这个问题：",[696,1657,698],{}," 会标记缺少 ",[696,1660,1477],{}," 的计时元素。",[692,1663,1664,1666],{},[712,1665,1076],{}," 带图片的场景预览卡顿。渲染比预期慢。",[692,1668,1669,1671,1672,1675],{},[712,1670,726],{}," 源图片分辨率远高于画布。Chrome 在显示前会将图片解码为原始 RGBA 位图，位图大小为 ",[696,1673,1674],{},"width × height × 4"," 字节——与磁盘上的文件大小无关。7000×5000 的 JPEG 解码后为 140MB，即使文件只有 2MB。",[692,1677,1678],{},"在 384×1080 区域中显示这样的图片会浪费内存并迫使合成器每帧重新采样一个巨大的纹理。",[692,1680,1681],{},[712,1682,1683],{},"修复前（臃肿）：",[752,1685,1687],{"className":863,"code":1686,"language":865,"meta":757,"style":758},"\u003C!-- 7000x5000 源，解码后约 140MB -->\n\u003Cimg class=\"clip\" data-start=\"0\" data-duration=\"3\"\nsrc=\".\u002Fassets\u002Fhero-scene.jpg\" \u002F>\n",[696,1688,1689,1694,1732],{"__ignoreMap":758},[762,1690,1691],{"class":764,"line":765},[762,1692,1693],{"class":768},"\u003C!-- 7000x5000 源，解码后约 140MB -->\n",[762,1695,1696,1698,1701,1703,1705,1707,1709,1711,1713,1715,1717,1719,1721,1723,1725,1727,1730],{"class":764,"line":772},[762,1697,877],{"class":779},[762,1699,1700],{"class":805},"img",[762,1702,1591],{"class":883},[762,1704,887],{"class":779},[762,1706,790],{"class":779},[762,1708,1598],{"class":793},[762,1710,790],{"class":779},[762,1712,931],{"class":883},[762,1714,887],{"class":779},[762,1716,790],{"class":779},[762,1718,938],{"class":793},[762,1720,790],{"class":779},[762,1722,1524],{"class":883},[762,1724,887],{"class":779},[762,1726,790],{"class":779},[762,1728,1729],{"class":793},"3",[762,1731,952],{"class":779},[762,1733,1734,1736,1738,1740,1743,1745],{"class":764,"line":912},[762,1735,958],{"class":883},[762,1737,887],{"class":779},[762,1739,790],{"class":779},[762,1741,1742],{"class":793},".\u002Fassets\u002Fhero-scene.jpg",[762,1744,790],{"class":779},[762,1746,1747],{"class":779}," \u002F>\n",[692,1749,1750],{},[712,1751,1752],{},"修复后（适配画布）：",[752,1754,1759],{"className":1755,"code":1756,"language":1757,"meta":1758,"style":758},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","# 批量调整图片大小以适配 3840x3840，保持宽高比\nmkdir -p assets\u002Fresized\nmogrify -path assets\u002Fresized -resize 3840x3840\\> assets\u002F*.jpg\n","bash","Terminal",[696,1760,1761,1766,1778],{"__ignoreMap":758},[762,1762,1763],{"class":764,"line":765},[762,1764,1765],{"class":768},"# 批量调整图片大小以适配 3840x3840，保持宽高比\n",[762,1767,1768,1772,1775],{"class":764,"line":772},[762,1769,1771],{"class":1770},"sBMFI","mkdir",[762,1773,1774],{"class":793}," -p",[762,1776,1777],{"class":793}," assets\u002Fresized\n",[762,1779,1780,1783,1786,1789,1792,1795,1798,1801,1804],{"class":764,"line":912},[762,1781,1782],{"class":1770},"mogrify",[762,1784,1785],{"class":793}," -path",[762,1787,1788],{"class":793}," assets\u002Fresized",[762,1790,1791],{"class":793}," -resize",[762,1793,1794],{"class":793}," 3840x3840",[762,1796,1797],{"class":775},"\\> ",[762,1799,1800],{"class":793},"assets\u002F",[762,1802,1803],{"class":775},"*",[762,1805,1806],{"class":793},".jpg\n",[752,1808,1810],{"className":863,"code":1809,"language":865,"meta":757,"style":758},"\u003C!-- 约 3840x2560 源，解码后约 40MB -->\n\u003Cimg class=\"clip\" data-start=\"0\" data-duration=\"3\"\nsrc=\".\u002Fassets\u002Fresized\u002Fhero-scene.jpg\" \u002F>\n",[696,1811,1812,1817,1853],{"__ignoreMap":758},[762,1813,1814],{"class":764,"line":765},[762,1815,1816],{"class":768},"\u003C!-- 约 3840x2560 源，解码后约 40MB -->\n",[762,1818,1819,1821,1823,1825,1827,1829,1831,1833,1835,1837,1839,1841,1843,1845,1847,1849,1851],{"class":764,"line":772},[762,1820,877],{"class":779},[762,1822,1700],{"class":805},[762,1824,1591],{"class":883},[762,1826,887],{"class":779},[762,1828,790],{"class":779},[762,1830,1598],{"class":793},[762,1832,790],{"class":779},[762,1834,931],{"class":883},[762,1836,887],{"class":779},[762,1838,790],{"class":779},[762,1840,938],{"class":793},[762,1842,790],{"class":779},[762,1844,1524],{"class":883},[762,1846,887],{"class":779},[762,1848,790],{"class":779},[762,1850,1729],{"class":793},[762,1852,952],{"class":779},[762,1854,1855,1857,1859,1861,1864,1866],{"class":764,"line":912},[762,1856,958],{"class":883},[762,1858,887],{"class":779},[762,1860,790],{"class":779},[762,1862,1863],{"class":793},".\u002Fassets\u002Fresized\u002Fhero-scene.jpg",[762,1865,790],{"class":779},[762,1867,1747],{"class":779},[692,1869,1870,1873,1874,1093],{},[712,1871,1872],{},"经验法则："," 源图片最大为画布尺寸的 2 倍。对于 1920×1080 合成，3840×2160 已经足够。参见",[701,1875,1877],{"href":1876},"\u002Fguides\u002Fperformance#%E5%9B%BE%E7%89%87%E5%B0%BA%E5%AF%B8","性能：图片尺寸",[692,1879,1880,1882],{},[712,1881,1076],{}," 特定场景在预览中降至 5-10fps。其他场景正常。",[692,1884,1885,1887,1888,1891],{},[712,1886,726],{}," 在大元素上使用 ",[696,1889,1890],{},"backdrop-filter: blur()","，尤其是在大半径下堆叠。每个模糊层迫使合成器读取元素后面的像素，运行模糊内核，并合成结果。堆叠层会倍增成本。",[692,1893,1894],{},[712,1895,1896],{},"修复前（昂贵）：",[752,1898,1902],{"className":1899,"code":1900,"language":1901,"meta":758,"style":758},"language-css shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F* 每侧 8 层 = 每帧 16 次模糊处理 *\u002F\n.pb-1 { backdrop-filter: blur(1px); }\n.pb-2 { backdrop-filter: blur(2px); }\n.pb-3 { backdrop-filter: blur(4px); }\n.pb-4 { backdrop-filter: blur(8px); }\n.pb-5 { backdrop-filter: blur(16px); }\n.pb-6 { backdrop-filter: blur(32px); }\n.pb-7 { backdrop-filter: blur(64px); }\n.pb-8 { backdrop-filter: blur(128px); }\n","css",[696,1903,1904,1909,1938,1962,1986,2010,2035,2060,2085],{"__ignoreMap":758},[762,1905,1906],{"class":764,"line":765},[762,1907,1908],{"class":768},"\u002F* 每侧 8 层 = 每帧 16 次模糊处理 *\u002F\n",[762,1910,1911,1913,1916,1918,1922,1924,1927,1929,1932,1935],{"class":764,"line":772},[762,1912,780],{"class":779},[762,1914,1915],{"class":1770},"pb-1",[762,1917,802],{"class":779},[762,1919,1921],{"class":1920},"sqsOY"," backdrop-filter",[762,1923,809],{"class":779},[762,1925,1926],{"class":783}," blur",[762,1928,787],{"class":779},[762,1930,1931],{"class":812},"1px",[762,1933,1934],{"class":779},");",[762,1936,1937],{"class":779}," }\n",[762,1939,1940,1942,1945,1947,1949,1951,1953,1955,1958,1960],{"class":764,"line":912},[762,1941,780],{"class":779},[762,1943,1944],{"class":1770},"pb-2",[762,1946,802],{"class":779},[762,1948,1921],{"class":1920},[762,1950,809],{"class":779},[762,1952,1926],{"class":783},[762,1954,787],{"class":779},[762,1956,1957],{"class":812},"2px",[762,1959,1934],{"class":779},[762,1961,1937],{"class":779},[762,1963,1964,1966,1969,1971,1973,1975,1977,1979,1982,1984],{"class":764,"line":955},[762,1965,780],{"class":779},[762,1967,1968],{"class":1770},"pb-3",[762,1970,802],{"class":779},[762,1972,1921],{"class":1920},[762,1974,809],{"class":779},[762,1976,1926],{"class":783},[762,1978,787],{"class":779},[762,1980,1981],{"class":812},"4px",[762,1983,1934],{"class":779},[762,1985,1937],{"class":779},[762,1987,1988,1990,1993,1995,1997,1999,2001,2003,2006,2008],{"class":764,"line":988},[762,1989,780],{"class":779},[762,1991,1992],{"class":1770},"pb-4",[762,1994,802],{"class":779},[762,1996,1921],{"class":1920},[762,1998,809],{"class":779},[762,2000,1926],{"class":783},[762,2002,787],{"class":779},[762,2004,2005],{"class":812},"8px",[762,2007,1934],{"class":779},[762,2009,1937],{"class":779},[762,2011,2013,2015,2018,2020,2022,2024,2026,2028,2031,2033],{"class":764,"line":2012},6,[762,2014,780],{"class":779},[762,2016,2017],{"class":1770},"pb-5",[762,2019,802],{"class":779},[762,2021,1921],{"class":1920},[762,2023,809],{"class":779},[762,2025,1926],{"class":783},[762,2027,787],{"class":779},[762,2029,2030],{"class":812},"16px",[762,2032,1934],{"class":779},[762,2034,1937],{"class":779},[762,2036,2038,2040,2043,2045,2047,2049,2051,2053,2056,2058],{"class":764,"line":2037},7,[762,2039,780],{"class":779},[762,2041,2042],{"class":1770},"pb-6",[762,2044,802],{"class":779},[762,2046,1921],{"class":1920},[762,2048,809],{"class":779},[762,2050,1926],{"class":783},[762,2052,787],{"class":779},[762,2054,2055],{"class":812},"32px",[762,2057,1934],{"class":779},[762,2059,1937],{"class":779},[762,2061,2063,2065,2068,2070,2072,2074,2076,2078,2081,2083],{"class":764,"line":2062},8,[762,2064,780],{"class":779},[762,2066,2067],{"class":1770},"pb-7",[762,2069,802],{"class":779},[762,2071,1921],{"class":1920},[762,2073,809],{"class":779},[762,2075,1926],{"class":783},[762,2077,787],{"class":779},[762,2079,2080],{"class":812},"64px",[762,2082,1934],{"class":779},[762,2084,1937],{"class":779},[762,2086,2088,2090,2093,2095,2097,2099,2101,2103,2106,2108],{"class":764,"line":2087},9,[762,2089,780],{"class":779},[762,2091,2092],{"class":1770},"pb-8",[762,2094,802],{"class":779},[762,2096,1921],{"class":1920},[762,2098,809],{"class":779},[762,2100,1926],{"class":783},[762,2102,787],{"class":779},[762,2104,2105],{"class":812},"128px",[762,2107,1934],{"class":779},[762,2109,1937],{"class":779},[692,2111,2112],{},[712,2113,2114],{},"修复后（3 个优化层）：",[752,2116,2118],{"className":1899,"code":2117,"language":1901,"meta":758,"style":758},"\u002F* 更少的处理次数，手动选择的半径——视觉效果相似，成本低得多 *\u002F\n.pb-1 { backdrop-filter: blur(4px); }\n.pb-2 { backdrop-filter: blur(16px); }\n.pb-3 { backdrop-filter: blur(48px); }\n",[696,2119,2120,2125,2147,2169],{"__ignoreMap":758},[762,2121,2122],{"class":764,"line":765},[762,2123,2124],{"class":768},"\u002F* 更少的处理次数，手动选择的半径——视觉效果相似，成本低得多 *\u002F\n",[762,2126,2127,2129,2131,2133,2135,2137,2139,2141,2143,2145],{"class":764,"line":772},[762,2128,780],{"class":779},[762,2130,1915],{"class":1770},[762,2132,802],{"class":779},[762,2134,1921],{"class":1920},[762,2136,809],{"class":779},[762,2138,1926],{"class":783},[762,2140,787],{"class":779},[762,2142,1981],{"class":812},[762,2144,1934],{"class":779},[762,2146,1937],{"class":779},[762,2148,2149,2151,2153,2155,2157,2159,2161,2163,2165,2167],{"class":764,"line":912},[762,2150,780],{"class":779},[762,2152,1944],{"class":1770},[762,2154,802],{"class":779},[762,2156,1921],{"class":1920},[762,2158,809],{"class":779},[762,2160,1926],{"class":783},[762,2162,787],{"class":779},[762,2164,2030],{"class":812},[762,2166,1934],{"class":779},[762,2168,1937],{"class":779},[762,2170,2171,2173,2175,2177,2179,2181,2183,2185,2188,2190],{"class":764,"line":955},[762,2172,780],{"class":779},[762,2174,1968],{"class":1770},[762,2176,802],{"class":779},[762,2178,1921],{"class":1920},[762,2180,809],{"class":779},[762,2182,1926],{"class":783},[762,2184,787],{"class":779},[762,2186,2187],{"class":812},"48px",[762,2189,1934],{"class":779},[762,2191,1937],{"class":779},[692,2193,2194],{},[712,2195,2196],{},"指南：",[2198,2199,2200,2208,2211],"ul",{},[2201,2202,2203,2204,2207],"li",{},"每个区域的堆叠 ",[696,2205,2206],{},"backdrop-filter"," 层最多 2-3 个",[2201,2209,2210],{},"避免在大面积上使用超过 64px 的半径——最大的半径主导总成本",[2201,2212,2213,2214,2217],{},"对于静态模糊效果，预渲染为 PNG 然后用普通 ",[696,2215,2216],{},"\u003Cimg>"," 叠加",[692,2219,2220,2221,2225],{},"参见",[701,2222,2224],{"href":2223},"\u002Fguides\u002Fperformance#backdrop-filter-blur","性能：backdrop-filter: blur()","了解完整分析。",[692,2227,2228,2230,2231,2234,2235,1093],{},[712,2229,1076],{}," 期望 HDR 渲染，但输出看起来与 SDR 相同，或 ",[696,2232,2233],{},"ffprobe"," 报告 ",[696,2236,2237],{},"color_transfer=bt709",[692,2239,2240,2242,2243,2245,2246,2248],{},[712,2241,726],{}," 默认情况下，Hyperframes 仅在源 ",[696,2244,730],{}," 或 ",[696,2247,2216],{}," 标记了 BT.2020 \u002F PQ \u002F HLG 颜色元数据时才切换到 HDR 编码。HDR 未启用的常见原因：",[2250,2251,2252],"ol",{},[2201,2253,2254,2257,2258,2260],{},[712,2255,2256],{},"所有源都是 SDR。"," 自动检测将仅 SDR 的合成保持为 SDR。使用 ",[696,2259,2233],{}," 验证：",[752,2262,2264],{"className":1755,"code":2263,"language":1757,"meta":1758,"style":758},"ffprobe -v error -show_streams source.mp4 | grep color_transfer\n# 期望：smpte2084 (PQ) 或 arib-std-b67 (HLG)\n# SDR：bt709、smpte170m、bt470bg 等\n",[696,2265,2266,2291,2296],{"__ignoreMap":758},[762,2267,2268,2270,2273,2276,2279,2282,2285,2288],{"class":764,"line":765},[762,2269,2233],{"class":1770},[762,2271,2272],{"class":793}," -v",[762,2274,2275],{"class":793}," error",[762,2277,2278],{"class":793}," -show_streams",[762,2280,2281],{"class":793}," source.mp4",[762,2283,2284],{"class":779}," |",[762,2286,2287],{"class":1770}," grep",[762,2289,2290],{"class":793}," color_transfer\n",[762,2292,2293],{"class":764,"line":772},[762,2294,2295],{"class":768},"# 期望：smpte2084 (PQ) 或 arib-std-b67 (HLG)\n",[762,2297,2298],{"class":764,"line":912},[762,2299,2300],{"class":768},"# SDR：bt709、smpte170m、bt470bg 等\n",[2250,2302,2303,2316],{"start":772},[2201,2304,2305,2308,2309,1254,2312,2315],{},[712,2306,2307],{},"输出格式错误。"," HDR 输出需要 MP4。",[696,2310,2311],{},"--format mov",[696,2313,2314],{},"--format webm"," 会回退到 SDR——Hyperframes 会在发生这种情况时记录警告。",[2201,2317,2318,1471,2321,2324],{},[712,2319,2320],{},"强制使用了 SDR。",[696,2322,2323],{},"--sdr"," 即使存在 HDR 源也会禁用 HDR。",[692,2326,2327,2328,2331],{},"如果你需要无论源元数据如何都使用 HDR，请使用 ",[696,2329,2330],{},"--hdr"," 强制启用。",[692,2333,2334,2337,2338,1254,2340,2342],{},[696,2335,2336],{},"--docker"," 的工作方式与本地渲染相同——自动检测、",[696,2339,2330],{},[696,2341,2323],{}," 都会转发到容器中并产生相同的输出决策（较慢，因为容器回退到软件 WebGL 进行 SDR DOM 捕获）。",[692,2344,2345,2346,2348],{},"参见 ",[701,2347,112],{"href":113},"了解完整的源要求和验证步骤。",[692,2350,2351,2353],{},[712,2352,1076],{}," 动画不播放。合成看起来是静态的。",[692,2355,2356,1471,2358,2361,2362,2368],{},[712,2357,726],{},[696,2359,2360],{},"window.__timelines"," 中使用的键必须与合成根元素上的 ",[701,2363,2365],{"href":2364},"\u002Fconcepts\u002Fdata-attributes#%E5%90%88%E6%88%90%E5%B1%9E%E6%80%A7",[696,2366,2367],{},"data-composition-id"," 属性完全匹配。",[692,2370,2371],{},[712,2372,750],{},[752,2374,2376],{"className":754,"code":2375,"language":756,"meta":757,"style":758},"\u002F\u002F 不匹配：HTML 说 \"my-video\"，脚本注册 \"root\"\n\u002F\u002F \u003Cdiv data-composition-id=\"my-video\" ...>\nwindow.__timelines[\"root\"] = tl;\n",[696,2377,2378,2383,2388],{"__ignoreMap":758},[762,2379,2380],{"class":764,"line":765},[762,2381,2382],{"class":768},"\u002F\u002F 不匹配：HTML 说 \"my-video\"，脚本注册 \"root\"\n",[762,2384,2385],{"class":764,"line":772},[762,2386,2387],{"class":768},"\u002F\u002F \u003Cdiv data-composition-id=\"my-video\" ...>\n",[762,2389,2390,2393,2395,2398,2400,2403,2405,2408,2410,2413],{"class":764,"line":912},[762,2391,2392],{"class":775},"window",[762,2394,780],{"class":779},[762,2396,2397],{"class":775},"__timelines[",[762,2399,790],{"class":779},[762,2401,2402],{"class":793},"root",[762,2404,790],{"class":779},[762,2406,2407],{"class":775},"] ",[762,2409,887],{"class":779},[762,2411,2412],{"class":775}," tl",[762,2414,855],{"class":779},[692,2416,2417],{},[712,2418,860],{},[752,2420,2422],{"className":754,"code":2421,"language":756,"meta":757,"style":758},"\u002F\u002F 键与 data-composition-id 属性匹配\n\u002F\u002F \u003Cdiv data-composition-id=\"my-video\" ...>\nwindow.__timelines[\"my-video\"] = tl;\n",[696,2423,2424,2429,2433],{"__ignoreMap":758},[762,2425,2426],{"class":764,"line":765},[762,2427,2428],{"class":768},"\u002F\u002F 键与 data-composition-id 属性匹配\n",[762,2430,2431],{"class":764,"line":772},[762,2432,2387],{"class":768},[762,2434,2435,2437,2439,2441,2443,2446,2448,2450,2452,2454],{"class":764,"line":912},[762,2436,2392],{"class":775},[762,2438,780],{"class":779},[762,2440,2397],{"class":775},[762,2442,790],{"class":779},[762,2444,2445],{"class":793},"my-video",[762,2447,790],{"class":779},[762,2449,2407],{"class":775},[762,2451,887],{"class":779},[762,2453,2412],{"class":775},[762,2455,855],{"class":779},[2457,2458,2459],"h2",{"id":2459},"调试检查清单",[692,2461,2462],{},"当某些内容不工作时，按此顺序检查：",[2250,2464,2465,2473,2487,2496,2509,2518],{},[2201,2466,2467,1471,2470,2472],{},[712,2468,2469],{},"运行 lint：",[696,2471,698],{}," — 捕获大多数结构性问题",[2201,2474,2475,1471,2478,2481,2482,2486],{},[712,2476,2477],{},"时间线已注册？",[696,2479,2480],{},"window.__timelines[\"\u003Cid>\"]"," 是否设置？键是否匹配 ",[701,2483,2484],{"href":2364},[696,2485,2367],{},"？",[2201,2488,2489,2492,2493],{},[712,2490,2491],{},"仅 GSAP 动画？"," 只对视觉属性（opacity、transform、color）做动画——参见 ",[701,2494,100],{"href":2495},"\u002Fguides\u002Fgsap-animation#%E5%85%B3%E9%94%AE%E8%A7%84%E5%88%99",[2201,2497,2498,2501,2502,2505,2506],{},[712,2499,2500],{},"时间线够长？"," 在末尾添加 ",[696,2503,2504],{},"tl.set({}, {}, DURATION)","——参见",[701,2507,2508],{"href":1278},"时间线时长",[2201,2510,2511,2514,2515],{},[712,2512,2513],{},"控制台错误？"," 打开浏览器控制台——运行时错误显示为 ",[696,2516,2517],{},"[Browser:ERROR]",[2201,2519,2520,2523,2524,2526],{},[712,2521,2522],{},"仍然有问题？"," 参见",[701,2525,136],{"href":137},"了解环境和渲染问题",[2457,2528,2529],{"id":2529},"下一步",[2198,2531,2532,2539,2546,2553],{},[2201,2533,2534,2538],{},[712,2535,2536],{},[701,2537,136],{"href":137},"\n修复环境和渲染问题",[2201,2540,2541,2545],{},[712,2542,2543],{},[701,2544,100],{"href":101},"\n复习动画规则和模式",[2201,2547,2548,2552],{},[712,2549,2550],{},[701,2551,659],{"href":660},"\n完整的属性参考和检查清单",[2201,2554,2555,2560],{},[712,2556,2557],{},[701,2558,2559],{"href":43},"Data 属性","\n计时、媒体和合成属性",[2562,2563,2564],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}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 .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}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}",{"title":758,"searchDepth":765,"depth":772,"links":2566},[2567,2568],{"id":2459,"depth":772,"text":2459},{"id":2529,"depth":772,"text":2529},"破坏 Hyperframes 合成的常见陷阱。","md",null,{},{"title":132,"description":2569},"qTAFENpaObQgly3VFpomnhEtSwf1zu9XBKxcV28nCtU",[2576,2578],{"title":128,"path":129,"stem":130,"description":2577,"children":-1},"视频编辑者和指导代理的创意人员的快速参考，涵盖时间剪辑、布局调整、预览和发布 HyperFrames 项目。",{"title":136,"path":137,"stem":138,"description":2579,"children":-1},"常见 Hyperframes 问题的解决方案。",1780322251075]