[{"data":1,"prerenderedAt":1738},["ShallowReactive",2],{"navigation":3,"\u002Fgetting-started\u002Fexamples":686,"\u002Fgetting-started\u002Fexamples-surround":1733},[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":23,"body":688,"description":1727,"extension":1728,"links":1729,"meta":1730,"navigation":805,"path":24,"seo":1731,"stem":25,"__hash__":1732},"docs\u002F01.getting-started\u002F04.examples.md",{"type":689,"value":690,"toc":1699},"minimark",[691,708,724,771,775,944,947,971,1006,1009,1171,1174,1177,1180,1183,1189,1197,1199,1202,1205,1211,1213,1216,1219,1224,1226,1229,1232,1238,1240,1243,1246,1252,1254,1257,1260,1266,1268,1271,1274,1280,1282,1285,1288,1294,1296,1299,1302,1308,1311,1337,1340,1343,1350,1378,1639,1647,1661,1664,1695],[692,693,694,695,699,700,703,704,707],"p",{},"Hyperframes 包含入门示例，帮助你快速搭建合成。每个示例都提供了一个可运行的项目，包含正确的",[696,697,698],"a",{"href":39},"合成结构","、",[696,701,702],{"href":43},"data 属性","和已配置好的 ",[696,705,706],{"href":101},"GSAP 时间轴","。",[709,710,711,718],"blockquote",{},[692,712,713,714],{},"ℹ️ ",[715,716,717],"strong",{},"Note",[692,719,720,721,723],{},"想看成品视频和生产项目？请从",[696,722,19],{"href":20},"开始。",[725,726,732],"pre",{"className":727,"code":728,"language":729,"meta":730,"style":731},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx hyperframes init my-video --example \u003Cname>\n","bash","Terminal","",[733,734,735],"code",{"__ignoreMap":731},[736,737,740,744,748,751,754,757,761,764,768],"span",{"class":738,"line":739},"line",1,[736,741,743],{"class":742},"sBMFI","npx",[736,745,747],{"class":746},"sfazB"," hyperframes",[736,749,750],{"class":746}," init",[736,752,753],{"class":746}," my-video",[736,755,756],{"class":746}," --example",[736,758,760],{"class":759},"sMK4o"," \u003C",[736,762,763],{"class":746},"nam",[736,765,767],{"class":766},"sTEyZ","e",[736,769,770],{"class":759},">\n",[772,773,774],"h2",{"id":774},"横屏模板",[776,777,784,830,849,868,887,906,925],"div",{"className":778},[779,780,781,782,783],"not-prose","grid","grid-cols-2","gap-4","my-6",[776,785,795],{"className":786},[787,788,789,790,791,792,793,794],"tpl-card","relative","rounded-xl","overflow-hidden","bg-zinc-900","transition-transform","hover:-translate-y-0.5","hover:shadow-xl",[796,797,807],"video",{"className":798,"src":803,"poster":804,"muted":805,"loop":805,"playsInline":805,"preload":806},[799,800,801,802],"w-full","aspect-video","object-cover","block","https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Ftemplates\u002Fwarm-grain.mp4","https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Ftemplates\u002Fwarm-grain.png",true,"metadata",[776,808,817,824],{"className":809,"style":731},[810,811,812,813,814,815,816],"absolute","bottom-0","left-0","right-0","pt-6","pb-2","px-3",[715,818,823],{"className":819},[820,821,822,802],"text-sm","font-semibold","text-white","Warm Grain",[736,825,829],{"className":826},[827,828],"text-xs","text-zinc-300","品牌与生活方式",[776,831,833],{"className":832},[787,788,789,790,791,792,793,794],[796,834,838],{"className":835,"src":836,"poster":837,"muted":805,"loop":805,"playsInline":805,"preload":806},[799,800,801,802],"https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Ftemplates\u002Fplay-mode.mp4","https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Ftemplates\u002Fplay-mode.png",[776,839,841,845],{"className":840,"style":731},[810,811,812,813,814,815,816],[715,842,844],{"className":843},[820,821,822,802],"Play Mode",[736,846,848],{"className":847},[827,828],"社交媒体",[776,850,852],{"className":851},[787,788,789,790,791,792,793,794],[796,853,857],{"className":854,"src":855,"poster":856,"muted":805,"loop":805,"playsInline":805,"preload":806},[799,800,801,802],"https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Ftemplates\u002Fswiss-grid.mp4","https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Ftemplates\u002Fswiss-grid.png",[776,858,860,864],{"className":859,"style":731},[810,811,812,813,814,815,816],[715,861,863],{"className":862},[820,821,822,802],"Swiss Grid",[736,865,867],{"className":866},[827,828],"企业与技术",[776,869,871],{"className":870},[787,788,789,790,791,792,793,794],[796,872,876],{"className":873,"src":874,"poster":875,"muted":805,"loop":805,"playsInline":805,"preload":806},[799,800,801,802],"https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Ftemplates\u002Fkinetic-type.mp4","https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Ftemplates\u002Fkinetic-type.png",[776,877,879,883],{"className":878,"style":731},[810,811,812,813,814,815,816],[715,880,882],{"className":881},[820,821,822,802],"Kinetic Type",[736,884,886],{"className":885},[827,828],"促销与标题卡",[776,888,890],{"className":889},[787,788,789,790,791,792,793,794],[796,891,895],{"className":892,"src":893,"poster":894,"muted":805,"loop":805,"playsInline":805,"preload":806},[799,800,801,802],"https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Ftemplates\u002Fdecision-tree.mp4","https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Ftemplates\u002Fdecision-tree.png",[776,896,898,902],{"className":897,"style":731},[810,811,812,813,814,815,816],[715,899,901],{"className":900},[820,821,822,802],"Decision Tree",[736,903,905],{"className":904},[827,828],"讲解与教程",[776,907,909],{"className":908},[787,788,789,790,791,792,793,794],[796,910,914],{"className":911,"src":912,"poster":913,"muted":805,"loop":805,"playsInline":805,"preload":806},[799,800,801,802],"https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Ftemplates\u002Fproduct-promo.mp4","https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Ftemplates\u002Fproduct-promo.png",[776,915,917,921],{"className":916,"style":731},[810,811,812,813,814,815,816],[715,918,920],{"className":919},[820,821,822,802],"Product Promo",[736,922,924],{"className":923},[827,828],"产品展示",[776,926,928],{"className":927},[787,788,789,790,791,792,793,794],[796,929,933],{"className":930,"src":931,"poster":932,"muted":805,"loop":805,"playsInline":805,"preload":806},[799,800,801,802],"https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Ftemplates\u002Fnyt-graph.mp4","https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Ftemplates\u002Fnyt-graph.png",[776,934,936,940],{"className":935,"style":731},[810,811,812,813,814,815,816],[715,937,939],{"className":938},[820,821,822,802],"NYT Graph",[736,941,943],{"className":942},[827,828],"数据故事",[772,945,946],{"id":946},"竖屏模板",[776,948,952],{"className":949},[779,780,950,951,783],"grid-cols-3","gap-3",[776,953,955],{"className":954},[787,788,789,790,791,792,793,794],[796,956,960],{"className":957,"style":731,"src":958,"poster":959,"muted":805,"loop":805,"playsInline":805,"preload":806},[799,801,802],"https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Ftemplates\u002Fvignelli.mp4","https:\u002F\u002Fstatic.heygen.ai\u002Fhyperframes-oss\u002Fdocs\u002Fimages\u002Ftemplates\u002Fvignelli.png",[776,961,963,967],{"className":962,"style":731},[810,811,812,813,814,815,816],[715,964,966],{"className":965},[820,821,822,802],"Vignelli",[736,968,970],{"className":969},[827,828],"标题与公告",[709,972,973,979,986],{},[692,974,975,976],{},"💡 ",[715,977,978],{},"Tip",[692,980,981,982,985],{},"想要最简化的起点？使用 ",[715,983,984],{},"blank","——它只提供空合成和基础脚手架，不含任何视觉设计。",[725,987,989],{"className":727,"code":988,"language":729,"meta":730,"style":731},"npx hyperframes init my-video --example blank\n",[733,990,991],{"__ignoreMap":731},[736,992,993,995,997,999,1001,1003],{"class":738,"line":739},[736,994,743],{"class":742},[736,996,747],{"class":746},[736,998,750],{"class":746},[736,1000,753],{"class":746},[736,1002,756],{"class":746},[736,1004,1005],{"class":746}," blank\n",[772,1007,1008],{"id":1008},"如何选择示例",[1010,1011,1012,1030],"table",{},[1013,1014,1015],"thead",{},[1016,1017,1018,1021,1024,1027],"tr",{},[1019,1020,23],"th",{},[1019,1022,1023],{},"风格",[1019,1025,1026],{},"格式",[1019,1028,1029],{},"适用场景",[1031,1032,1033,1050,1065,1080,1095,1110,1125,1140,1156],"tbody",{},[1016,1034,1035,1041,1044,1047],{},[1036,1037,1038],"td",{},[733,1039,1040],{},"warm-grain",[1036,1042,1043],{},"温润质感",[1036,1045,1046],{},"横屏",[1036,1048,1049],{},"生活方式、品牌、编辑类",[1016,1051,1052,1057,1060,1062],{},[1036,1053,1054],{},[733,1055,1056],{},"play-mode",[1036,1058,1059],{},"活力弹性",[1036,1061,1046],{},[1036,1063,1064],{},"社交媒体、产品发布",[1016,1066,1067,1072,1075,1077],{},[1036,1068,1069],{},[733,1070,1071],{},"swiss-grid",[1036,1073,1074],{},"简洁结构",[1036,1076,1046],{},[1036,1078,1079],{},"企业、数据、技术类",[1016,1081,1082,1087,1090,1092],{},[1036,1083,1084],{},[733,1085,1086],{},"kinetic-type",[1036,1088,1089],{},"戏剧化字体",[1036,1091,1046],{},[1036,1093,1094],{},"促销、片头、标题卡",[1016,1096,1097,1102,1105,1107],{},[1036,1098,1099],{},[733,1100,1101],{},"decision-tree",[1036,1103,1104],{},"图表化",[1036,1106,1046],{},[1036,1108,1109],{},"讲解、教程",[1016,1111,1112,1117,1120,1122],{},[1036,1113,1114],{},[733,1115,1116],{},"product-promo",[1036,1118,1119],{},"多场景",[1036,1121,1046],{},[1036,1123,1124],{},"产品展示、演示",[1016,1126,1127,1132,1135,1137],{},[1036,1128,1129],{},[733,1130,1131],{},"nyt-graph",[1036,1133,1134],{},"编辑风格数据",[1036,1136,1046],{},[1036,1138,1139],{},"数据故事、报告",[1016,1141,1142,1147,1150,1153],{},[1036,1143,1144],{},[733,1145,1146],{},"vignelli",[1036,1148,1149],{},"大胆排版",[1036,1151,1152],{},"竖屏",[1036,1154,1155],{},"标题、公告",[1016,1157,1158,1162,1165,1168],{},[1036,1159,1160],{},[733,1161,984],{},[1036,1163,1164],{},"最简脚手架",[1036,1166,1167],{},"—",[1036,1169,1170],{},"完全控制，Agent 生成",[772,1172,1173],{"id":1173},"示例详情",[1175,1176,1040],"h3",{"id":1040},[1175,1178,1040],{"id":1179},"warm-grain-1",[692,1181,1182],{},"奶油色调美学，叠加颗粒纹理。",[692,1184,1185,1188],{},[715,1186,1187],{},"产出效果："," 包含温暖色调、纹理颗粒和流畅转场的合成。附带片头子合成和字幕支持。",[725,1190,1195],{"className":1191,"code":1193,"language":1194},[1192],"language-text","my-video\u002F\n├── meta.json\n├── index.html\n├── compositions\u002F\n│   ├── intro.html\n│   ├── graphics.html\n│   └── captions.html\n└── assets\u002F\n","text",[733,1196,1193],{"__ignoreMap":731},[1175,1198,1056],{"id":1056},[1175,1200,1056],{"id":1201},"play-mode-1",[692,1203,1204],{},"趣味弹性动画，大胆有力的运动效果。",[725,1206,1209],{"className":1207,"code":1208,"language":1194},[1192],"my-video\u002F\n├── meta.json\n├── index.html\n├── compositions\u002F\n│   ├── intro.html\n│   ├── stats.html\n│   └── captions.html\n└── assets\u002F\n",[733,1210,1208],{"__ignoreMap":731},[1175,1212,1071],{"id":1071},[1175,1214,1071],{"id":1215},"swiss-grid-1",[692,1217,1218],{},"灵感源自瑞士\u002F国际排版风格的结构化网格布局。",[725,1220,1222],{"className":1221,"code":1193,"language":1194},[1192],[733,1223,1193],{"__ignoreMap":731},[1175,1225,1146],{"id":1146},[1175,1227,1146],{"id":1228},"vignelli-1",[692,1230,1231],{},"大胆排版配红色点缀（1080x1920 竖屏）。",[725,1233,1236],{"className":1234,"code":1235,"language":1194},[1192],"my-video\u002F\n├── meta.json\n├── index.html\n├── compositions\u002F\n│   ├── overlays.html\n│   └── captions.html\n└── assets\u002F\n",[733,1237,1235],{"__ignoreMap":731},[1175,1239,1086],{"id":1086},[1175,1241,1086],{"id":1242},"kinetic-type-1",[692,1244,1245],{},"大胆的动态字体促销视频，配以戏剧化的文字动画。",[725,1247,1250],{"className":1248,"code":1249,"language":1194},[1192],"my-video\u002F\n├── meta.json\n├── index.html\n└── compositions\u002F\n└── main-graphics.html\n",[733,1251,1249],{"__ignoreMap":731},[1175,1253,1101],{"id":1101},[1175,1255,1101],{"id":1256},"decision-tree-1",[692,1258,1259],{},"动态流程图，支持分支路径和渐进展示。",[725,1261,1264],{"className":1262,"code":1263,"language":1194},[1192],"my-video\u002F\n├── meta.json\n├── index.html\n└── compositions\u002F\n└── decision_tree.html\n",[733,1265,1263],{"__ignoreMap":731},[1175,1267,1116],{"id":1116},[1175,1269,1116],{"id":1270},"product-promo-1",[692,1272,1273],{},"多场景产品展示，使用 SVG 资产。",[725,1275,1278],{"className":1276,"code":1277,"language":1194},[1192],"my-video\u002F\n├── meta.json\n├── index.html\n├── compositions\u002F\n│   ├── scene1-logo-intro.html\n│   ├── scene2-4-canvas.html\n│   └── scene5-logo-outro.html\n└── assets\u002F\n├── figma-cursors.svg\n├── figma-logo-pieces.svg\n└── figma-logo-pills.svg\n",[733,1279,1277],{"__ignoreMap":731},[1175,1281,1131],{"id":1131},[1175,1283,1131],{"id":1284},"nyt-graph-1",[692,1286,1287],{},"印刷编辑风格的动态数据图表。",[725,1289,1292],{"className":1290,"code":1291,"language":1194},[1192],"my-video\u002F\n├── meta.json\n├── index.html\n└── compositions\u002F\n└── nyt-chart.html\n",[733,1293,1291],{"__ignoreMap":731},[1175,1295,984],{"id":984},[1175,1297,984],{"id":1298},"blank-1",[692,1300,1301],{},"仅包含脚手架的空合成。",[725,1303,1306],{"className":1304,"code":1305,"language":1194},[1192],"my-video\u002F\n├── meta.json\n├── index.html\n└── compositions\u002F\n└── captions.html\n",[733,1307,1305],{"__ignoreMap":731},[772,1309,1310],{"id":1310},"传入源视频",[725,1312,1314],{"className":727,"code":1313,"language":729,"meta":730,"style":731},"npx hyperframes init my-video --example warm-grain --video .\u002Fmy-clip.mp4\n",[733,1315,1316],{"__ignoreMap":731},[736,1317,1318,1320,1322,1324,1326,1328,1331,1334],{"class":738,"line":739},[736,1319,743],{"class":742},[736,1321,747],{"class":746},[736,1323,750],{"class":746},[736,1325,753],{"class":746},[736,1327,756],{"class":746},[736,1329,1330],{"class":746}," warm-grain",[736,1332,1333],{"class":746}," --video",[736,1335,1336],{"class":746}," .\u002Fmy-clip.mp4\n",[692,1338,1339],{},"CLI 会自动探测视频的时长、分辨率和编码格式。如果视频使用了不兼容的编码格式，在 FFmpeg 可用的情况下会自动转码为 H.264 MP4。",[772,1341,1342],{"id":1342},"自定义示例",[692,1344,1345,1346,1349],{},"任何包含 ",[733,1347,1348],{},"index.html"," 的目录都可以作为示例。你的自定义示例需要：",[1351,1352,1353,1366,1375],"ol",{},[1354,1355,1356,1357,1363,1364],"li",{},"一个带有 ",[696,1358,1360],{"href":1359},"\u002Fconcepts\u002Fdata-attributes#%E5%90%88%E6%88%90%E5%B1%9E%E6%80%A7",[733,1361,1362],{},"data-composition-id"," 根元素的 ",[733,1365,1348],{},[1354,1367,1368,1369,1372,1373],{},"在 ",[733,1370,1371],{},"window.__timelines"," 中注册的 ",[696,1374,706],{"href":101},[1354,1376,1377],{},"同一目录或子目录中的资产文件",[725,1379,1383],{"className":1380,"code":1381,"language":1382,"meta":1348,"style":731},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv id=\"root\" data-composition-id=\"my-example\"\ndata-start=\"0\" data-width=\"1920\" data-height=\"1080\">\n\n\u003C!-- Your elements here -->\n\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fgsap@3\u002Fdist\u002Fgsap.min.js\">\u003C\u002Fscript>\n\u003Cscript>\nconst tl = gsap.timeline({ paused: true });\n\u002F\u002F Add your animations...\nwindow.__timelines = window.__timelines || {};\nwindow.__timelines[\"my-example\"] = tl;\n\u003C\u002Fscript>\n\u003C\u002Fdiv>\n","html",[733,1384,1385,1421,1462,1468,1475,1480,1507,1516,1562,1568,1594,1620,1630],{"__ignoreMap":731},[736,1386,1387,1390,1393,1397,1400,1403,1406,1408,1411,1413,1415,1418],{"class":738,"line":739},[736,1388,1389],{"class":759},"\u003C",[736,1391,776],{"class":1392},"swJcz",[736,1394,1396],{"class":1395},"spNyl"," id",[736,1398,1399],{"class":759},"=",[736,1401,1402],{"class":759},"\"",[736,1404,1405],{"class":746},"root",[736,1407,1402],{"class":759},[736,1409,1410],{"class":1395}," data-composition-id",[736,1412,1399],{"class":759},[736,1414,1402],{"class":759},[736,1416,1417],{"class":746},"my-example",[736,1419,1420],{"class":759},"\"\n",[736,1422,1424,1427,1429,1431,1434,1436,1439,1441,1443,1446,1448,1451,1453,1455,1458,1460],{"class":738,"line":1423},2,[736,1425,1426],{"class":1395},"data-start",[736,1428,1399],{"class":759},[736,1430,1402],{"class":759},[736,1432,1433],{"class":746},"0",[736,1435,1402],{"class":759},[736,1437,1438],{"class":1395}," data-width",[736,1440,1399],{"class":759},[736,1442,1402],{"class":759},[736,1444,1445],{"class":746},"1920",[736,1447,1402],{"class":759},[736,1449,1450],{"class":1395}," data-height",[736,1452,1399],{"class":759},[736,1454,1402],{"class":759},[736,1456,1457],{"class":746},"1080",[736,1459,1402],{"class":759},[736,1461,770],{"class":759},[736,1463,1465],{"class":738,"line":1464},3,[736,1466,1467],{"emptyLinePlaceholder":805},"\n",[736,1469,1471],{"class":738,"line":1470},4,[736,1472,1474],{"class":1473},"sHwdD","\u003C!-- Your elements here -->\n",[736,1476,1478],{"class":738,"line":1477},5,[736,1479,1467],{"emptyLinePlaceholder":805},[736,1481,1483,1485,1488,1491,1493,1495,1498,1500,1503,1505],{"class":738,"line":1482},6,[736,1484,1389],{"class":759},[736,1486,1487],{"class":1392},"script",[736,1489,1490],{"class":1395}," src",[736,1492,1399],{"class":759},[736,1494,1402],{"class":759},[736,1496,1497],{"class":746},"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fgsap@3\u002Fdist\u002Fgsap.min.js",[736,1499,1402],{"class":759},[736,1501,1502],{"class":759},">\u003C\u002F",[736,1504,1487],{"class":1392},[736,1506,770],{"class":759},[736,1508,1510,1512,1514],{"class":738,"line":1509},7,[736,1511,1389],{"class":759},[736,1513,1487],{"class":1392},[736,1515,770],{"class":759},[736,1517,1519,1522,1525,1527,1530,1533,1537,1540,1543,1546,1549,1553,1556,1559],{"class":738,"line":1518},8,[736,1520,1521],{"class":1395},"const",[736,1523,1524],{"class":766}," tl ",[736,1526,1399],{"class":759},[736,1528,1529],{"class":766}," gsap",[736,1531,1532],{"class":759},".",[736,1534,1536],{"class":1535},"s2Zo4","timeline",[736,1538,1539],{"class":766},"(",[736,1541,1542],{"class":759},"{",[736,1544,1545],{"class":1392}," paused",[736,1547,1548],{"class":759},":",[736,1550,1552],{"class":1551},"sfNiH"," true",[736,1554,1555],{"class":759}," }",[736,1557,1558],{"class":766},")",[736,1560,1561],{"class":759},";\n",[736,1563,1565],{"class":738,"line":1564},9,[736,1566,1567],{"class":1473},"\u002F\u002F Add your animations...\n",[736,1569,1571,1574,1576,1579,1581,1584,1586,1588,1591],{"class":738,"line":1570},10,[736,1572,1573],{"class":766},"window",[736,1575,1532],{"class":759},[736,1577,1578],{"class":766},"__timelines ",[736,1580,1399],{"class":759},[736,1582,1583],{"class":766}," window",[736,1585,1532],{"class":759},[736,1587,1578],{"class":766},[736,1589,1590],{"class":759},"||",[736,1592,1593],{"class":759}," {};\n",[736,1595,1597,1599,1601,1604,1606,1608,1610,1613,1615,1618],{"class":738,"line":1596},11,[736,1598,1573],{"class":766},[736,1600,1532],{"class":759},[736,1602,1603],{"class":766},"__timelines[",[736,1605,1402],{"class":759},[736,1607,1417],{"class":746},[736,1609,1402],{"class":759},[736,1611,1612],{"class":766},"] ",[736,1614,1399],{"class":759},[736,1616,1617],{"class":766}," tl",[736,1619,1561],{"class":759},[736,1621,1623,1626,1628],{"class":738,"line":1622},12,[736,1624,1625],{"class":759},"\u003C\u002F",[736,1627,1487],{"class":1392},[736,1629,770],{"class":759},[736,1631,1633,1635,1637],{"class":738,"line":1632},13,[736,1634,1625],{"class":759},[736,1636,776],{"class":1392},[736,1638,770],{"class":759},[692,1640,1641,1642,1646],{},"创建自定义示例后，使用",[696,1643,1645],{"href":1644},"\u002Fpackages\u002Fcli#lint","代码检查器","进行验证：",[725,1648,1650],{"className":727,"code":1649,"language":729,"meta":730,"style":731},"npx hyperframes lint\n",[733,1651,1652],{"__ignoreMap":731},[736,1653,1654,1656,1658],{"class":738,"line":739},[736,1655,743],{"class":742},[736,1657,747],{"class":746},[736,1659,1660],{"class":746}," lint\n",[772,1662,1663],{"id":1663},"下一步",[1665,1666,1667,1674,1681,1688],"ul",{},[1354,1668,1669,1673],{},[715,1670,1671],{},[696,1672,15],{"href":16},"\n创建、预览和渲染你的第一个视频",[1354,1675,1676,1680],{},[715,1677,1678],{},[696,1679,27],{"href":28},"\nHeyGen 产品发布的真实项目——开源供你阅读和二次创作。",[1354,1682,1683,1687],{},[715,1684,1685],{},[696,1686,100],{"href":101},"\n为示例添加动画效果",[1354,1689,1690,1694],{},[715,1691,1692],{},[696,1693,38],{"href":39},"\n了解合成数据模型",[1696,1697,1698],"style",{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .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 .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 .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":731,"searchDepth":739,"depth":1423,"links":1700},[1701,1702,1703,1704,1724,1725,1726],{"id":774,"depth":1423,"text":774},{"id":946,"depth":1423,"text":946},{"id":1008,"depth":1423,"text":1008},{"id":1173,"depth":1423,"text":1173,"children":1705},[1706,1707,1708,1709,1710,1711,1712,1713,1714,1715,1716,1717,1718,1719,1720,1721,1722,1723],{"id":1040,"depth":1464,"text":1040},{"id":1179,"depth":1464,"text":1040},{"id":1056,"depth":1464,"text":1056},{"id":1201,"depth":1464,"text":1056},{"id":1071,"depth":1464,"text":1071},{"id":1215,"depth":1464,"text":1071},{"id":1146,"depth":1464,"text":1146},{"id":1228,"depth":1464,"text":1146},{"id":1086,"depth":1464,"text":1086},{"id":1242,"depth":1464,"text":1086},{"id":1101,"depth":1464,"text":1101},{"id":1256,"depth":1464,"text":1101},{"id":1116,"depth":1464,"text":1116},{"id":1270,"depth":1464,"text":1116},{"id":1131,"depth":1464,"text":1131},{"id":1284,"depth":1464,"text":1131},{"id":984,"depth":1464,"text":984},{"id":1298,"depth":1464,"text":984},{"id":1310,"depth":1423,"text":1310},{"id":1342,"depth":1423,"text":1342},{"id":1663,"depth":1423,"text":1663},"内置示例，涵盖常见的视频模式。悬停可预览动画效果。","md",null,{},{"title":23,"description":1727},"STm3en0--Ozf21N46rfSrMSpIXfavjAUpTMY0lwfyQ4",[1734,1736],{"title":19,"path":20,"stem":21,"description":1735,"children":-1},"可以观看、阅读、运行和二次创作的 HyperFrames 视频成品。",{"title":27,"path":28,"stem":29,"description":1737,"children":-1},"HeyGen 产品发布视频背后的开源 HyperFrames 合成——真实的生产项目，你可以阅读、运行和二次创作。",1780322242735]