[{"data":1,"prerenderedAt":2021},["ShallowReactive",2],{"navigation":3,"\u002Fgetting-started\u002Fquickstart":686,"\u002Fgetting-started\u002Fquickstart-surround":2016},[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":15,"body":688,"description":2010,"extension":2011,"links":2012,"meta":2013,"navigation":1395,"path":16,"seo":2014,"stem":17,"__hash__":2015},"docs\u002F01.getting-started\u002F02.quickstart.md",{"type":689,"value":690,"toc":1993},"minimark",[691,695,700,703,732,783,809,814,817,826,834,841,861,868,879,886,891,901,924,928,931,945,949,952,965,980,984,987,1004,1022,1049,1052,1065,1083,1086,1089,1115,1122,1147,1152,1155,1158,1222,1229,1255,1261,1264,1278,1284,1293,1296,1299,1305,1756,1759,1806,1810,1830,1878,1885,1888,1956,1959,1990],[692,693,694],"p",{},"从零到渲染好的 MP4——可以通过 AI Agent 提示，也可以手动创建项目。",[696,697,699],"h2",{"id":698},"方式一使用-ai-编程-agent推荐","方式一：使用 AI 编程 Agent（推荐）",[692,701,702],{},"安装 HyperFrames Skills，然后描述你想要的视频：",[704,705,710],"pre",{"className":706,"code":707,"language":708,"meta":709,"style":709},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx skills add heygen-com\u002Fhyperframes\n","bash","",[711,712,713],"code",{"__ignoreMap":709},[714,715,718,722,726,729],"span",{"class":716,"line":717},"line",1,[714,719,721],{"class":720},"sBMFI","npx",[714,723,725],{"class":724},"sfazB"," skills",[714,727,728],{"class":724}," add",[714,730,731],{"class":724}," heygen-com\u002Fhyperframes\n",[692,733,734,735,738,739,741,742,745,746,749,750,753,754,757,758,761,762,765,766,738,769,738,772,738,775,778,779,782],{},"这将教会你的 Agent（Claude Code、Cursor、Gemini CLI、Codex、",[736,737,76],"a",{"href":77},"、",[736,740,80],{"href":81},"）如何编写正确的合成、GSAP 时间轴、Tailwind v4 浏览器运行时样式以及官方适配器动画。在 Claude Code 中，Skills 会注册为斜杠命令——",[711,743,744],{},"\u002Fhyperframes"," 用于合成编写，",[711,747,748],{},"\u002Fhyperframes-cli"," 用于开发循环命令（init、lint、preview、render），",[711,751,752],{},"\u002Fhyperframes-media"," 用于资产预处理（TTS、转录、背景移除），",[711,755,756],{},"\u002Ftailwind"," 用于 ",[711,759,760],{},"init --tailwind"," 项目，",[711,763,764],{},"\u002Fgsap"," 用于时间轴动画帮助，以及 ",[711,767,768],{},"\u002Fanimejs",[711,770,771],{},"\u002Fcss-animations",[711,773,774],{},"\u002Flottie",[711,776,777],{},"\u002Fthree"," 或 ",[711,780,781],{},"\u002Fwaapi","（当合成使用这些运行时时）。调用斜杠命令会显式加载 Skill 上下文，从而在第一次就产生正确的输出。",[784,785,786,793],"blockquote",{},[692,787,788,789],{},"ℹ️ ",[790,791,792],"strong",{},"Note",[692,794,795,796,804,805,808],{},"Claude Design 使用不同的入口路径。在 GitHub 上打开 ",[736,797,801],{"href":798,"rel":799},"https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes\u002Fblob\u002Fmain\u002Fdocs\u002Fguides\u002Fclaude-design-hyperframes.md",[800],"nofollow",[711,802,803],{},"docs\u002Fguides\u002Fclaude-design-hyperframes.md","，点击下载按钮（↓）保存，然后附加到你的 Claude Design 聊天中。它会生成一个有效的初稿，你可以在任何 AI 编程 Agent 中进行优化。详情请参阅 ",[736,806,807],{"href":85},"Claude Design 指南","。",[810,811,813],"h3",{"id":812},"试试看示例提示","试试看：示例提示",[692,815,816],{},"将以下任意提示复制到你的 Agent 中即可开始。",[818,819,820],"ul",{},[821,822,823],"li",{},[790,824,825],{},"冷启动——描述你想要的内容",[784,827,828],{},[692,829,830,831,833],{},"使用 ",[711,832,744],{},"，创建一个 10 秒的产品介绍视频，深色背景上带有淡入标题和柔和的背景音乐。",[818,835,836],{},[821,837,838],{},[790,839,840],{},"热启动——将现有内容转化为视频",[784,842,843],{},[692,844,845,846,851,852,854,855,857,858,860],{},"请查看这个 GitHub 仓库 ",[736,847,850],{"href":848,"rel":849},"https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes%EF%BC%8C%E4%BD%BF%E7%94%A8",[800],"https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes，使用"," ",[711,853,744],{}," 向我介绍它的用途和架构。  > 使用 ",[711,856,744],{}," 将这份 PDF 摘要转化为一个 45 秒的推介视频。  > 使用 ",[711,859,744],{}," 将这份 CSV 数据转化为动态柱状图竞赛视频。",[818,862,863],{},[821,864,865],{},[790,866,867],{},"特定格式",[784,869,870],{},[692,871,830,872,874,875,878],{},[711,873,744],{}," 制作一个 9:16 竖屏 TikTok 风格的钩子视频，主题为 ",[714,876,877],{},"话题","，包含与 TTS 旁白同步的弹跳字幕。",[818,880,881],{},[821,882,883],{},[790,884,885],{},"迭代——像视频编辑一样与 Agent 交互",[784,887,888],{},[692,889,890],{},"把标题放大 2 倍，切换到深色模式，并在结尾添加淡出效果。  > 在 0:03 处添加一个下方三分之一字幕条，显示我的名字和头衔。",[692,892,893,894,897,898,808],{},"Agent 会自动处理脚手架搭建、动画和渲染。更多提示模式请参阅",[736,895,896],{"href":93},"提示指南","，多段落视频的 7 步结构（设计、脚本、分镜……）请参阅",[736,899,900],{"href":65},"流水线指南",[784,902,903,909],{},[692,904,905,906],{},"💡 ",[790,907,908],{},"Tip",[692,910,911,912,915,916,919,920,923],{},"Skills 编码了 HyperFrames 特有的模式——例如定时元素上必须的 ",[711,913,914],{},"class=\"clip\"","、GSAP 时间轴注册、适配器注册表（如 ",[711,917,918],{},"window.__hfLottie","）以及 ",[711,921,922],{},"data-*"," 属性的语义——这些内容在通用的 Web 文档中找不到。使用 Skills 可以从一开始就生成正确的合成。",[696,925,927],{"id":926},"方式二手动创建项目","方式二：手动创建项目",[810,929,930],{"id":930},"前提条件",[818,932,933,939],{},[821,934,935,938],{},[790,936,937],{},"Node.js 22+"," — CLI 和开发服务器的运行时",[821,940,941,944],{},[790,942,943],{},"FFmpeg"," — 本地渲染的视频编码器",[810,946,948],{"id":947},"安装-nodejs-22","安装 Node.js 22+",[692,950,951],{},"Hyperframes 需要 Node.js 22 或更高版本。检查你的版本：",[704,953,955],{"className":706,"code":954,"language":708,"meta":709,"style":709},"node --version\n",[711,956,957],{"__ignoreMap":709},[714,958,959,962],{"class":716,"line":717},[714,960,961],{"class":720},"node",[714,963,964],{"class":724}," --version\n",[704,966,969],{"className":706,"code":967,"language":708,"meta":968,"style":709},"v22.0.0   # or any version >= 22\n","Expected output",[711,970,971],{"__ignoreMap":709},[714,972,973,976],{"class":716,"line":717},[714,974,975],{"class":720},"v22.0.0",[714,977,979],{"class":978},"sHwdD","   # or any version >= 22\n",[810,981,983],{"id":982},"安装-ffmpeg","安装 FFmpeg",[692,985,986],{},"本地视频渲染（将捕获的帧编码为 MP4）需要 FFmpeg。",[704,988,991],{"className":706,"code":989,"language":708,"meta":990,"style":709},"brew install ffmpeg\n","macOS",[711,992,993],{"__ignoreMap":709},[714,994,995,998,1001],{"class":716,"line":717},[714,996,997],{"class":720},"brew",[714,999,1000],{"class":724}," install",[714,1002,1003],{"class":724}," ffmpeg\n",[704,1005,1008],{"className":706,"code":1006,"language":708,"meta":1007,"style":709},"sudo apt install ffmpeg\n","Ubuntu \u002F Debian",[711,1009,1010],{"__ignoreMap":709},[714,1011,1012,1015,1018,1020],{"class":716,"line":717},[714,1013,1014],{"class":720},"sudo",[714,1016,1017],{"class":724}," apt",[714,1019,1000],{"class":724},[714,1021,1003],{"class":724},[704,1023,1026],{"className":706,"code":1024,"language":708,"meta":1025,"style":709},"# Download from https:\u002F\u002Fffmpeg.org\u002Fdownload.html\n# or install via winget:\nwinget install ffmpeg\n","Windows",[711,1027,1028,1033,1039],{"__ignoreMap":709},[714,1029,1030],{"class":716,"line":717},[714,1031,1032],{"class":978},"# Download from https:\u002F\u002Fffmpeg.org\u002Fdownload.html\n",[714,1034,1036],{"class":716,"line":1035},2,[714,1037,1038],{"class":978},"# or install via winget:\n",[714,1040,1042,1045,1047],{"class":716,"line":1041},3,[714,1043,1044],{"class":720},"winget",[714,1046,1000],{"class":724},[714,1048,1003],{"class":724},[692,1050,1051],{},"验证安装：",[704,1053,1055],{"className":706,"code":1054,"language":708,"meta":709,"style":709},"ffmpeg -version\n",[711,1056,1057],{"__ignoreMap":709},[714,1058,1059,1062],{"class":716,"line":717},[714,1060,1061],{"class":720},"ffmpeg",[714,1063,1064],{"class":724}," -version\n",[704,1066,1068],{"className":706,"code":1067,"language":708,"meta":968,"style":709},"ffmpeg version 7.x ...\n",[711,1069,1070],{"__ignoreMap":709},[714,1071,1072,1074,1077,1080],{"class":716,"line":717},[714,1073,1061],{"class":720},[714,1075,1076],{"class":724}," version",[714,1078,1079],{"class":724}," 7.x",[714,1081,1082],{"class":724}," ...\n",[810,1084,1085],{"id":1085},"创建你的第一个视频",[810,1087,1088],{"id":1088},"搭建项目脚手架",[704,1090,1092],{"className":706,"code":1091,"language":708,"meta":709,"style":709},"npx hyperframes init my-video\ncd my-video\n",[711,1093,1094,1107],{"__ignoreMap":709},[714,1095,1096,1098,1101,1104],{"class":716,"line":717},[714,1097,721],{"class":720},[714,1099,1100],{"class":724}," hyperframes",[714,1102,1103],{"class":724}," init",[714,1105,1106],{"class":724}," my-video\n",[714,1108,1109,1113],{"class":716,"line":1035},[714,1110,1112],{"class":1111},"s2Zo4","cd",[714,1114,1106],{"class":724},[692,1116,1117,1118,1121],{},"这将启动一个交互式向导，引导你完成示例选择和媒体导入。如需跳过提示（例如在 CI 中或由 Agent 操作），使用 ",[711,1119,1120],{},"--non-interactive","：",[704,1123,1125],{"className":706,"code":1124,"language":708,"meta":709,"style":709},"npx hyperframes init my-video --non-interactive --example blank\n",[711,1126,1127],{"__ignoreMap":709},[714,1128,1129,1131,1133,1135,1138,1141,1144],{"class":716,"line":717},[714,1130,721],{"class":720},[714,1132,1100],{"class":724},[714,1134,1103],{"class":724},[714,1136,1137],{"class":724}," my-video",[714,1139,1140],{"class":724}," --non-interactive",[714,1142,1143],{"class":724}," --example",[714,1145,1146],{"class":724}," blank\n",[692,1148,1149,1150,808],{},"所有可用示例请参阅",[736,1151,23],{"href":24},[692,1153,1154],{},"生成的项目结构如下：",[692,1156,1157],{},"my-video\u002F\nmeta.json\nindex.html\ncompositions\u002F\nintro.html\ncaptions.html\nassets\u002F\nvideo.mp4",[1159,1160,1161,1174],"table",{},[1162,1163,1164],"thead",{},[1165,1166,1167,1171],"tr",{},[1168,1169,1170],"th",{},"路径",[1168,1172,1173],{},"用途",[1175,1176,1177,1188,1198,1212],"tbody",{},[1165,1178,1179,1185],{},[1180,1181,1182],"td",{},[711,1183,1184],{},"meta.json",[1180,1186,1187],{},"项目元数据（名称、ID、创建日期）",[1165,1189,1190,1195],{},[1180,1191,1192],{},[711,1193,1194],{},"index.html",[1180,1196,1197],{},"根合成——你的视频入口文件",[1165,1199,1200,1205],{},[1180,1201,1202],{},[711,1203,1204],{},"compositions\u002F",[1180,1206,1207,1208,1211],{},"通过 ",[711,1209,1210],{},"data-composition-src"," 加载的子合成",[1165,1213,1214,1219],{},[1180,1215,1216],{},[711,1217,1218],{},"assets\u002F",[1180,1220,1221],{},"媒体文件（视频、音频、图片）",[692,1223,1224,1225,1228],{},"如果你有源视频，可以通过 ",[711,1226,1227],{},"--video"," 传入以自动转录和生成字幕：",[704,1230,1232],{"className":706,"code":1231,"language":708,"meta":709,"style":709},"npx hyperframes init my-video --example warm-grain --video .\u002Fintro.mp4\n",[711,1233,1234],{"__ignoreMap":709},[714,1235,1236,1238,1240,1242,1244,1246,1249,1252],{"class":716,"line":717},[714,1237,721],{"class":720},[714,1239,1100],{"class":724},[714,1241,1103],{"class":724},[714,1243,1137],{"class":724},[714,1245,1143],{"class":724},[714,1247,1248],{"class":724}," warm-grain",[714,1250,1251],{"class":724}," --video",[714,1253,1254],{"class":724}," .\u002Fintro.mp4\n",[692,1256,1257,1260],{},[711,1258,1259],{},"hyperframes init"," 会自动安装 AI Agent Skills，因此你可以随时将工作交接给 AI Agent。",[810,1262,1263],{"id":1263},"在浏览器中预览",[704,1265,1267],{"className":706,"code":1266,"language":708,"meta":709,"style":709},"npx hyperframes preview\n",[711,1268,1269],{"__ignoreMap":709},[714,1270,1271,1273,1275],{"class":716,"line":717},[714,1272,721],{"class":720},[714,1274,1100],{"class":724},[714,1276,1277],{"class":724}," preview\n",[692,1279,1280,1281,1283],{},"这将启动 Hyperframes Studio 并在浏览器中打开你的合成。编辑 ",[711,1282,1194],{}," 后会自动重载。",[784,1285,1286,1290],{},[692,1287,905,1288],{},[790,1289,908],{},[692,1291,1292],{},"开发服务器支持热重载——保存 HTML 文件后预览会即时更新，无需手动刷新。",[810,1294,1295],{"id":1295},"编辑合成",[692,1297,1298],{},"使用你的 AI 编程 Agent（Claude Code、Cursor 等）打开项目——Skills 已自动安装，Agent 知道如何创建和编辑合成。",[692,1300,1301,1302,1304],{},"或者直接编辑 ",[711,1303,1194],{},"——这是一个最简合成：",[704,1306,1310],{"className":1307,"code":1308,"language":1309,"meta":1194,"style":709},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003Cdiv id=\"root\" data-composition-id=\"my-video\"\ndata-start=\"0\" data-width=\"1920\" data-height=\"1080\">\n\n\u003C!-- 1. Define a timed text clip on track 0 -->\n\u003Ch1 id=\"title\" class=\"clip\"\ndata-start=\"0\" data-duration=\"5\" data-track-index=\"0\"\nstyle=\"font-size: 72px; color: white; text-align: center;\nposition: absolute; top: 50%; left: 50%;\nransform: translate(-50%, -50%);\">\nHello, Hyperframes!\n\u003C\u002Fh1>\n\n\u003C!-- 2. Load GSAP for animation -->\n\u003Cscript src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fgsap@3\u002Fdist\u002Fgsap.min.js\">\u003C\u002Fscript>\n\n\u003C!-- 3. Create a paused timeline and register it -->\n\u003Cscript>\nconst tl = gsap.timeline({ paused: true });\nl.from(\"#title\", { opacity: 0, y: -50, duration: 1 }, 0);\nwindow.__timelines = window.__timelines || {};\nwindow.__timelines[\"my-video\"] = tl;\n\u003C\u002Fscript>\n\u003C\u002Fdiv>\n","html",[711,1311,1312,1350,1391,1397,1403,1434,1470,1483,1489,1499,1506,1516,1521,1527,1554,1559,1565,1574,1619,1686,1712,1738,1747],{"__ignoreMap":709},[714,1313,1314,1318,1322,1326,1329,1332,1335,1337,1340,1342,1344,1347],{"class":716,"line":717},[714,1315,1317],{"class":1316},"sMK4o","\u003C",[714,1319,1321],{"class":1320},"swJcz","div",[714,1323,1325],{"class":1324},"spNyl"," id",[714,1327,1328],{"class":1316},"=",[714,1330,1331],{"class":1316},"\"",[714,1333,1334],{"class":724},"root",[714,1336,1331],{"class":1316},[714,1338,1339],{"class":1324}," data-composition-id",[714,1341,1328],{"class":1316},[714,1343,1331],{"class":1316},[714,1345,1346],{"class":724},"my-video",[714,1348,1349],{"class":1316},"\"\n",[714,1351,1352,1355,1357,1359,1362,1364,1367,1369,1371,1374,1376,1379,1381,1383,1386,1388],{"class":716,"line":1035},[714,1353,1354],{"class":1324},"data-start",[714,1356,1328],{"class":1316},[714,1358,1331],{"class":1316},[714,1360,1361],{"class":724},"0",[714,1363,1331],{"class":1316},[714,1365,1366],{"class":1324}," data-width",[714,1368,1328],{"class":1316},[714,1370,1331],{"class":1316},[714,1372,1373],{"class":724},"1920",[714,1375,1331],{"class":1316},[714,1377,1378],{"class":1324}," data-height",[714,1380,1328],{"class":1316},[714,1382,1331],{"class":1316},[714,1384,1385],{"class":724},"1080",[714,1387,1331],{"class":1316},[714,1389,1390],{"class":1316},">\n",[714,1392,1393],{"class":716,"line":1041},[714,1394,1396],{"emptyLinePlaceholder":1395},true,"\n",[714,1398,1400],{"class":716,"line":1399},4,[714,1401,1402],{"class":978},"\u003C!-- 1. Define a timed text clip on track 0 -->\n",[714,1404,1406,1408,1411,1413,1415,1417,1420,1422,1425,1427,1429,1432],{"class":716,"line":1405},5,[714,1407,1317],{"class":1316},[714,1409,1410],{"class":1320},"h1",[714,1412,1325],{"class":1324},[714,1414,1328],{"class":1316},[714,1416,1331],{"class":1316},[714,1418,1419],{"class":724},"title",[714,1421,1331],{"class":1316},[714,1423,1424],{"class":1324}," class",[714,1426,1328],{"class":1316},[714,1428,1331],{"class":1316},[714,1430,1431],{"class":724},"clip",[714,1433,1349],{"class":1316},[714,1435,1437,1439,1441,1443,1445,1447,1450,1452,1454,1457,1459,1462,1464,1466,1468],{"class":716,"line":1436},6,[714,1438,1354],{"class":1324},[714,1440,1328],{"class":1316},[714,1442,1331],{"class":1316},[714,1444,1361],{"class":724},[714,1446,1331],{"class":1316},[714,1448,1449],{"class":1324}," data-duration",[714,1451,1328],{"class":1316},[714,1453,1331],{"class":1316},[714,1455,1456],{"class":724},"5",[714,1458,1331],{"class":1316},[714,1460,1461],{"class":1324}," data-track-index",[714,1463,1328],{"class":1316},[714,1465,1331],{"class":1316},[714,1467,1361],{"class":724},[714,1469,1349],{"class":1316},[714,1471,1473,1476,1478,1480],{"class":716,"line":1472},7,[714,1474,1475],{"class":1324},"style",[714,1477,1328],{"class":1316},[714,1479,1331],{"class":1316},[714,1481,1482],{"class":724},"font-size: 72px; color: white; text-align: center;\n",[714,1484,1486],{"class":716,"line":1485},8,[714,1487,1488],{"class":724},"position: absolute; top: 50%; left: 50%;\n",[714,1490,1492,1495,1497],{"class":716,"line":1491},9,[714,1493,1494],{"class":724},"ransform: translate(-50%, -50%);",[714,1496,1331],{"class":1316},[714,1498,1390],{"class":1316},[714,1500,1502],{"class":716,"line":1501},10,[714,1503,1505],{"class":1504},"sTEyZ","Hello, Hyperframes!\n",[714,1507,1509,1512,1514],{"class":716,"line":1508},11,[714,1510,1511],{"class":1316},"\u003C\u002F",[714,1513,1410],{"class":1320},[714,1515,1390],{"class":1316},[714,1517,1519],{"class":716,"line":1518},12,[714,1520,1396],{"emptyLinePlaceholder":1395},[714,1522,1524],{"class":716,"line":1523},13,[714,1525,1526],{"class":978},"\u003C!-- 2. Load GSAP for animation -->\n",[714,1528,1530,1532,1535,1538,1540,1542,1545,1547,1550,1552],{"class":716,"line":1529},14,[714,1531,1317],{"class":1316},[714,1533,1534],{"class":1320},"script",[714,1536,1537],{"class":1324}," src",[714,1539,1328],{"class":1316},[714,1541,1331],{"class":1316},[714,1543,1544],{"class":724},"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fgsap@3\u002Fdist\u002Fgsap.min.js",[714,1546,1331],{"class":1316},[714,1548,1549],{"class":1316},">\u003C\u002F",[714,1551,1534],{"class":1320},[714,1553,1390],{"class":1316},[714,1555,1557],{"class":716,"line":1556},15,[714,1558,1396],{"emptyLinePlaceholder":1395},[714,1560,1562],{"class":716,"line":1561},16,[714,1563,1564],{"class":978},"\u003C!-- 3. Create a paused timeline and register it -->\n",[714,1566,1568,1570,1572],{"class":716,"line":1567},17,[714,1569,1317],{"class":1316},[714,1571,1534],{"class":1320},[714,1573,1390],{"class":1316},[714,1575,1577,1580,1583,1585,1588,1591,1594,1597,1600,1603,1606,1610,1613,1616],{"class":716,"line":1576},18,[714,1578,1579],{"class":1324},"const",[714,1581,1582],{"class":1504}," tl ",[714,1584,1328],{"class":1316},[714,1586,1587],{"class":1504}," gsap",[714,1589,1590],{"class":1316},".",[714,1592,1593],{"class":1111},"timeline",[714,1595,1596],{"class":1504},"(",[714,1598,1599],{"class":1316},"{",[714,1601,1602],{"class":1320}," paused",[714,1604,1605],{"class":1316},":",[714,1607,1609],{"class":1608},"sfNiH"," true",[714,1611,1612],{"class":1316}," }",[714,1614,1615],{"class":1504},")",[714,1617,1618],{"class":1316},";\n",[714,1620,1622,1625,1627,1630,1632,1634,1637,1639,1642,1645,1648,1650,1654,1656,1659,1661,1664,1667,1669,1672,1674,1677,1680,1682,1684],{"class":716,"line":1621},19,[714,1623,1624],{"class":1504},"l",[714,1626,1590],{"class":1316},[714,1628,1629],{"class":1111},"from",[714,1631,1596],{"class":1504},[714,1633,1331],{"class":1316},[714,1635,1636],{"class":724},"#title",[714,1638,1331],{"class":1316},[714,1640,1641],{"class":1316},",",[714,1643,1644],{"class":1316}," {",[714,1646,1647],{"class":1320}," opacity",[714,1649,1605],{"class":1316},[714,1651,1653],{"class":1652},"sbssI"," 0",[714,1655,1641],{"class":1316},[714,1657,1658],{"class":1320}," y",[714,1660,1605],{"class":1316},[714,1662,1663],{"class":1316}," -",[714,1665,1666],{"class":1652},"50",[714,1668,1641],{"class":1316},[714,1670,1671],{"class":1320}," duration",[714,1673,1605],{"class":1316},[714,1675,1676],{"class":1652}," 1",[714,1678,1679],{"class":1316}," },",[714,1681,1653],{"class":1652},[714,1683,1615],{"class":1504},[714,1685,1618],{"class":1316},[714,1687,1689,1692,1694,1697,1699,1702,1704,1706,1709],{"class":716,"line":1688},20,[714,1690,1691],{"class":1504},"window",[714,1693,1590],{"class":1316},[714,1695,1696],{"class":1504},"__timelines ",[714,1698,1328],{"class":1316},[714,1700,1701],{"class":1504}," window",[714,1703,1590],{"class":1316},[714,1705,1696],{"class":1504},[714,1707,1708],{"class":1316},"||",[714,1710,1711],{"class":1316}," {};\n",[714,1713,1715,1717,1719,1722,1724,1726,1728,1731,1733,1736],{"class":716,"line":1714},21,[714,1716,1691],{"class":1504},[714,1718,1590],{"class":1316},[714,1720,1721],{"class":1504},"__timelines[",[714,1723,1331],{"class":1316},[714,1725,1346],{"class":724},[714,1727,1331],{"class":1316},[714,1729,1730],{"class":1504},"] ",[714,1732,1328],{"class":1316},[714,1734,1735],{"class":1504}," tl",[714,1737,1618],{"class":1316},[714,1739,1741,1743,1745],{"class":716,"line":1740},22,[714,1742,1511],{"class":1316},[714,1744,1534],{"class":1320},[714,1746,1390],{"class":1316},[714,1748,1750,1752,1754],{"class":716,"line":1749},23,[714,1751,1511],{"class":1316},[714,1753,1321],{"class":1320},[714,1755,1390],{"class":1316},[692,1757,1758],{},"三条关键规则：",[818,1760,1761,1777,1793],{},[821,1762,1763,1766,1767,738,1770,1773,1774],{},[790,1764,1765],{},"根元素","必须包含 ",[711,1768,1769],{},"data-composition-id",[711,1771,1772],{},"data-width"," 和 ",[711,1775,1776],{},"data-height",[821,1778,1779,1782,1783,738,1785,738,1788,1773,1791],{},[790,1780,1781],{},"定时元素","需要 ",[711,1784,1354],{},[711,1786,1787],{},"data-duration",[711,1789,1790],{},"data-track-index",[711,1792,914],{},[821,1794,1795,1798,1799,1802,1803],{},[790,1796,1797],{},"GSAP 时间轴","必须使用 ",[711,1800,1801],{},"{ paused: true }"," 创建，并注册到 ",[711,1804,1805],{},"window.__timelines",[810,1807,1809],{"id":1808},"渲染为-mp4","渲染为 MP4",[704,1811,1813],{"className":706,"code":1812,"language":708,"meta":709,"style":709},"npx hyperframes render --output output.mp4\n",[711,1814,1815],{"__ignoreMap":709},[714,1816,1817,1819,1821,1824,1827],{"class":716,"line":717},[714,1818,721],{"class":720},[714,1820,1100],{"class":724},[714,1822,1823],{"class":724}," render",[714,1825,1826],{"class":724}," --output",[714,1828,1829],{"class":724}," output.mp4\n",[704,1831,1833],{"className":706,"code":1832,"language":708,"meta":968,"style":709},"✔ Capturing frames... 150\u002F150\n✔ Encoding MP4...\n✔ output.mp4 (1920x1080, 5.0s, 30fps)\n",[711,1834,1835,1849,1859],{"__ignoreMap":709},[714,1836,1837,1840,1843,1846],{"class":716,"line":717},[714,1838,1839],{"class":720},"✔",[714,1841,1842],{"class":724}," Capturing",[714,1844,1845],{"class":724}," frames...",[714,1847,1848],{"class":724}," 150\u002F150\n",[714,1850,1851,1853,1856],{"class":716,"line":1035},[714,1852,1839],{"class":720},[714,1854,1855],{"class":724}," Encoding",[714,1857,1858],{"class":724}," MP4...\n",[714,1860,1861,1863,1866,1869,1872,1875],{"class":716,"line":1041},[714,1862,1839],{"class":720},[714,1864,1865],{"class":724}," output.mp4",[714,1867,1868],{"class":1504}," (1920x1080, ",[714,1870,1871],{"class":724},"5.0s,",[714,1873,1874],{"class":724}," 30fps",[714,1876,1877],{"class":1504},")\n",[692,1879,1880,1881,1884],{},"你的视频已保存在 ",[711,1882,1883],{},"output.mp4","。用任意媒体播放器打开即可。",[696,1886,1887],{"id":1887},"依赖总结",[1159,1889,1890,1903],{},[1162,1891,1892],{},[1165,1893,1894,1897,1900],{},[1168,1895,1896],{},"依赖项",[1168,1898,1899],{},"必需",[1168,1901,1902],{},"说明",[1175,1904,1905,1919,1932,1943],{},[1165,1906,1907,1913,1916],{},[1180,1908,1909,1912],{},[790,1910,1911],{},"Node.js"," 22+",[1180,1914,1915],{},"是",[1180,1917,1918],{},"CLI 和开发服务器的运行时",[1165,1920,1921,1927,1929],{},[1180,1922,1923,1926],{},[790,1924,1925],{},"npm"," 或 bun",[1180,1928,1915],{},[1180,1930,1931],{},"包管理器",[1165,1933,1934,1938,1940],{},[1180,1935,1936],{},[790,1937,943],{},[1180,1939,1915],{},[1180,1941,1942],{},"本地渲染的视频编码器",[1165,1944,1945,1950,1953],{},[1180,1946,1947],{},[790,1948,1949],{},"Docker",[1180,1951,1952],{},"否",[1180,1954,1955],{},"可选——用于确定性、可复现的渲染",[696,1957,1958],{"id":1958},"下一步",[818,1960,1961,1969,1976,1983],{},[821,1962,1963,1968],{},[790,1964,1965],{},[736,1966,1967],{"href":520},"浏览组件库","\n50 多个开箱即用的组件——转场、叠加层、数据可视化和特效",[821,1970,1971,1975],{},[790,1972,1973],{},[736,1974,100],{"href":101},"\n为视频添加淡入淡出、滑动、缩放和自定义动画",[821,1977,1978,1982],{},[790,1979,1980],{},[736,1981,23],{"href":24},"\n从内置示例开始，如 Warm Grain 和 Swiss Grid",[821,1984,1985,1989],{},[790,1986,1987],{},[736,1988,104],{"href":105},"\n探索渲染选项：质量预设、Docker 模式和 GPU 加速",[1475,1991,1992],{},"html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .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 .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":709,"searchDepth":717,"depth":1035,"links":1994},[1995,1998,2008,2009],{"id":698,"depth":1035,"text":699,"children":1996},[1997],{"id":812,"depth":1041,"text":813},{"id":926,"depth":1035,"text":927,"children":1999},[2000,2001,2002,2003,2004,2005,2006,2007],{"id":930,"depth":1041,"text":930},{"id":947,"depth":1041,"text":948},{"id":982,"depth":1041,"text":983},{"id":1085,"depth":1041,"text":1085},{"id":1088,"depth":1041,"text":1088},{"id":1263,"depth":1041,"text":1263},{"id":1295,"depth":1041,"text":1295},{"id":1808,"depth":1041,"text":1809},{"id":1887,"depth":1035,"text":1887},{"id":1958,"depth":1035,"text":1958},"在两分钟内创建、预览和渲染你的第一个 Hyperframes 视频。","md",null,{},{"title":15,"description":2010},"jlJMxXSzIZc5RLr0R96Flr1EAqKiE8Q9u0Kkk5f1iW4",[2017,2019],{"title":11,"path":12,"stem":13,"description":2018,"children":-1},"编写 HTML，渲染视频，为 AI Agent 而生。",{"title":19,"path":20,"stem":21,"description":2020,"children":-1},"可以观看、阅读、运行和二次创作的 HyperFrames 视频成品。",1780322241569]