[{"data":1,"prerenderedAt":2094},["ShallowReactive",2],{"navigation":3,"\u002Fpackages\u002Fstudio":686,"\u002Fpackages\u002Fstudio-surround":2089},[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":191,"body":688,"description":2083,"extension":2084,"links":2085,"meta":2086,"navigation":861,"path":192,"seo":2087,"stem":193,"__hash__":2088},"docs\u002F05.packages\u002F05.studio.md",{"type":689,"value":690,"toc":2053},"minimark",[691,695,721,725,734,747,752,780,801,805,810,826,829,833,884,887,890,929,943,946,949,1117,1120,1322,1325,1415,1418,1462,1466,1472,1475,1530,1536,1539,1630,1636,1639,1689,1695,1698,1748,1751,1754,1757,1764,1787,1790,1793,1818,1821,1823,1826,1829,1854,1859,1862,1865,1891,1894,1897,1900,1903,1937,1941,1944,2010,2013,2049],[692,693,694],"p",{},"studio 包提供了一个基于浏览器的可视化编辑器，用于创建和预览 Hyperframes 合成。它为你提供视频的实时预览、所有 clip 的可视化时间轴，以及用于跳转和播放的播放器控件 — 所有这些在你编辑 HTML 时都会实时更新。",[696,697,702],"pre",{"className":698,"code":699,"language":700,"meta":701,"style":701},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npm install @hyperframes\u002Fstudio\n","bash","",[703,704,705],"code",{"__ignoreMap":701},[706,707,710,714,718],"span",{"class":708,"line":709},"line",1,[706,711,713],{"class":712},"sBMFI","npm",[706,715,717],{"class":716},"sfazB"," install",[706,719,720],{"class":716}," @hyperframes\u002Fstudio\n",[722,723,724],"h2",{"id":724},"何时使用",[692,726,727],{},[728,729,730,731,733],"strong",{},"在以下场景使用 ",[703,732,191],{},"：",[735,736,737,741,744],"ul",{},[738,739,740],"li",{},"构建自定义合成编辑器 UI（例如嵌入到你自己的 Web 应用中）",[738,742,743],{},"将 Hyperframes 预览播放器集成到更大的产品中",[738,745,746],{},"使用自定义面板、工具栏或集成扩展编辑器",[692,748,749],{},[728,750,751],{},"如果需要以下功能，请使用其他包：",[735,753,754,765,774],{},[738,755,756,757,760,761,764],{},"开发期间预览合成 — 使用 ",[758,759,195],"a",{"href":196},"（",[703,762,763],{},"npx hyperframes preview","），它会为你启动 studio",[738,766,767,768,770,771],{},"将合渲染为 MP4 — 使用 ",[758,769,195],{"href":196}," 或 ",[758,772,773],{"href":188},"producer",[738,775,776,777],{},"以编程方式捕获帧 — 使用 ",[758,778,779],{"href":180},"engine",[781,782,783,789],"blockquote",{},[692,784,785,786],{},"💡 ",[728,787,788],{},"Tip",[692,790,791,794,795,797,798,800],{},[728,792,793],{},"对于大多数开发工作流，你不需要直接安装 studio。"," 运行 ",[703,796,763],{}," 会自动启动带有热重载的 studio。只有在将编辑器嵌入到你自己的应用中时才需要安装 ",[703,799,191],{},"。",[722,802,804],{"id":803},"运行-studio","运行 Studio",[806,807,809],"h3",{"id":808},"通过-cli推荐","通过 CLI（推荐）",[696,811,813],{"className":698,"code":812,"language":700,"meta":701,"style":701},"npx hyperframes preview\n",[703,814,815],{"__ignoreMap":701},[706,816,817,820,823],{"class":708,"line":709},[706,818,819],{"class":712},"npx",[706,821,822],{"class":716}," hyperframes",[706,824,825],{"class":716}," preview\n",[692,827,828],{},"这会启动 studio 开发服务器，在浏览器中打开你的合成，并监视文件更改。这是获取实时预览的最简单方式。",[806,830,832],{"id":831},"从-monorepo","从 monorepo",[696,834,836],{"className":698,"code":835,"language":700,"meta":701,"style":701},"# 从根目录\nbun run dev\n\n# 或直接指定 studio 包\nbun run --filter @hyperframes\u002Fstudio dev\n",[703,837,838,844,856,863,869],{"__ignoreMap":701},[706,839,840],{"class":708,"line":709},[706,841,843],{"class":842},"sHwdD","# 从根目录\n",[706,845,847,850,853],{"class":708,"line":846},2,[706,848,849],{"class":712},"bun",[706,851,852],{"class":716}," run",[706,854,855],{"class":716}," dev\n",[706,857,859],{"class":708,"line":858},3,[706,860,862],{"emptyLinePlaceholder":861},true,"\n",[706,864,866],{"class":708,"line":865},4,[706,867,868],{"class":842},"# 或直接指定 studio 包\n",[706,870,872,874,876,879,882],{"class":708,"line":871},5,[706,873,849],{"class":712},[706,875,852],{"class":716},[706,877,878],{"class":716}," --filter",[706,880,881],{"class":716}," @hyperframes\u002Fstudio",[706,883,855],{"class":716},[722,885,886],{"id":886},"包导出",[692,888,889],{},"studio 有两个入口点：",[891,892,893,906],"table",{},[894,895,896],"thead",{},[897,898,899,903],"tr",{},[900,901,902],"th",{},"导入路径",[900,904,905],{},"描述",[907,908,909,919],"tbody",{},[897,910,911,916],{},[912,913,914],"td",{},[703,915,191],{},[912,917,918],{},"React 组件、hooks 和类型",[897,920,921,926],{},[912,922,923],{},[703,924,925],{},"@hyperframes\u002Fstudio\u002Ftailwind-preset",[912,927,928],{},"Studio 样式的 Tailwind CSS 预设",[692,930,931,932,935,936,935,939,942],{},"对等依赖：",[703,933,934],{},"react"," (18 或 19)、",[703,937,938],{},"react-dom",[703,940,941],{},"zustand"," (4 或 5)。",[722,944,945],{"id":945},"组件",[806,947,948],{"id":948},"布局",[696,950,954],{"className":951,"code":952,"language":953,"meta":701,"style":701},"language-typescript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","import { NLELayout, NLEPreview, CompositionBreadcrumb } from '@hyperframes\u002Fstudio';\nimport type { CompositionLevel } from '@hyperframes\u002Fstudio';\n\n\u002F\u002F 主 NLE（非线性编辑器）布局容器\n\u003CNLELayout>\n{\u002F* 预览、时间轴和编辑器面板 *\u002F}\n\u003C\u002FNLELayout>\n\n\u002F\u002F 预览面板\n\u003CNLEPreview \u002F>\n\n\u002F\u002F 嵌套合成的面包屑导航\n\u003CCompositionBreadcrumb levels={levels} \u002F>\n","typescript",[703,955,956,998,1022,1026,1031,1042,1054,1064,1069,1075,1086,1091,1097],{"__ignoreMap":701},[706,957,958,962,966,970,973,976,978,981,984,987,990,992,995],{"class":708,"line":709},[706,959,961],{"class":960},"s7zQu","import",[706,963,965],{"class":964},"sMK4o"," {",[706,967,969],{"class":968},"sTEyZ"," NLELayout",[706,971,972],{"class":964},",",[706,974,975],{"class":968}," NLEPreview",[706,977,972],{"class":964},[706,979,980],{"class":968}," CompositionBreadcrumb",[706,982,983],{"class":964}," }",[706,985,986],{"class":960}," from",[706,988,989],{"class":964}," '",[706,991,191],{"class":716},[706,993,994],{"class":964},"'",[706,996,997],{"class":964},";\n",[706,999,1000,1002,1005,1007,1010,1012,1014,1016,1018,1020],{"class":708,"line":846},[706,1001,961],{"class":960},[706,1003,1004],{"class":960}," type",[706,1006,965],{"class":964},[706,1008,1009],{"class":968}," CompositionLevel",[706,1011,983],{"class":964},[706,1013,986],{"class":960},[706,1015,989],{"class":964},[706,1017,191],{"class":716},[706,1019,994],{"class":964},[706,1021,997],{"class":964},[706,1023,1024],{"class":708,"line":858},[706,1025,862],{"emptyLinePlaceholder":861},[706,1027,1028],{"class":708,"line":865},[706,1029,1030],{"class":842},"\u002F\u002F 主 NLE（非线性编辑器）布局容器\n",[706,1032,1033,1036,1039],{"class":708,"line":871},[706,1034,1035],{"class":968},"\u003C",[706,1037,1038],{"class":712},"NLELayout",[706,1040,1041],{"class":968},">\n",[706,1043,1045,1048,1051],{"class":708,"line":1044},6,[706,1046,1047],{"class":964},"{",[706,1049,1050],{"class":842},"\u002F* 预览、时间轴和编辑器面板 *\u002F",[706,1052,1053],{"class":964},"}\n",[706,1055,1057,1060,1062],{"class":708,"line":1056},7,[706,1058,1059],{"class":964},"\u003C\u002F",[706,1061,1038],{"class":968},[706,1063,1041],{"class":964},[706,1065,1067],{"class":708,"line":1066},8,[706,1068,862],{"emptyLinePlaceholder":861},[706,1070,1072],{"class":708,"line":1071},9,[706,1073,1074],{"class":842},"\u002F\u002F 预览面板\n",[706,1076,1078,1080,1083],{"class":708,"line":1077},10,[706,1079,1035],{"class":964},[706,1081,1082],{"class":968},"NLEPreview ",[706,1084,1085],{"class":964},"\u002F>\n",[706,1087,1089],{"class":708,"line":1088},11,[706,1090,862],{"emptyLinePlaceholder":861},[706,1092,1094],{"class":708,"line":1093},12,[706,1095,1096],{"class":842},"\u002F\u002F 嵌套合成的面包屑导航\n",[706,1098,1100,1102,1105,1108,1111,1114],{"class":708,"line":1099},13,[706,1101,1035],{"class":964},[706,1103,1104],{"class":968},"CompositionBreadcrumb levels",[706,1106,1107],{"class":964},"={",[706,1109,1110],{"class":968},"levels",[706,1112,1113],{"class":964},"}",[706,1115,1116],{"class":964}," \u002F>\n",[806,1118,1119],{"id":1119},"播放器与时间轴",[696,1121,1123],{"className":951,"code":1122,"language":953,"meta":701,"style":701},"import {\nPlayer,\nPlayerControls,\nTimeline,\nPreviewPanel,\nAgentActivityTrack,\n} from '@hyperframes\u002Fstudio';\nimport type { AgentActivity, TimelineElement, ActiveEdits } from '@hyperframes\u002Fstudio';\n\n\u002F\u002F 嵌入预览播放器\n\u003CPlayer \u002F>\n\n\u002F\u002F 播放控制（播放、暂停、跳转、逐帧前进）\n\u003CPlayerControls \u002F>\n\n\u002F\u002F 带拖动条的时间轴编辑器\n\u003CTimeline \u002F>\n\n\u002F\u002F 预览显示区域\n\u003CPreviewPanel \u002F>\n\n\u002F\u002F 活动可视化轨道（用于 Agent 工作流）\n\u003CAgentActivityTrack activities={activities} \u002F>\n",[703,1124,1125,1132,1140,1147,1154,1161,1168,1182,1215,1219,1224,1233,1237,1242,1252,1257,1263,1273,1278,1284,1294,1299,1305],{"__ignoreMap":701},[706,1126,1127,1129],{"class":708,"line":709},[706,1128,961],{"class":960},[706,1130,1131],{"class":964}," {\n",[706,1133,1134,1137],{"class":708,"line":846},[706,1135,1136],{"class":968},"Player",[706,1138,1139],{"class":964},",\n",[706,1141,1142,1145],{"class":708,"line":858},[706,1143,1144],{"class":968},"PlayerControls",[706,1146,1139],{"class":964},[706,1148,1149,1152],{"class":708,"line":865},[706,1150,1151],{"class":968},"Timeline",[706,1153,1139],{"class":964},[706,1155,1156,1159],{"class":708,"line":871},[706,1157,1158],{"class":968},"PreviewPanel",[706,1160,1139],{"class":964},[706,1162,1163,1166],{"class":708,"line":1044},[706,1164,1165],{"class":968},"AgentActivityTrack",[706,1167,1139],{"class":964},[706,1169,1170,1172,1174,1176,1178,1180],{"class":708,"line":1056},[706,1171,1113],{"class":964},[706,1173,986],{"class":960},[706,1175,989],{"class":964},[706,1177,191],{"class":716},[706,1179,994],{"class":964},[706,1181,997],{"class":964},[706,1183,1184,1186,1188,1190,1193,1195,1198,1200,1203,1205,1207,1209,1211,1213],{"class":708,"line":1066},[706,1185,961],{"class":960},[706,1187,1004],{"class":960},[706,1189,965],{"class":964},[706,1191,1192],{"class":968}," AgentActivity",[706,1194,972],{"class":964},[706,1196,1197],{"class":968}," TimelineElement",[706,1199,972],{"class":964},[706,1201,1202],{"class":968}," ActiveEdits",[706,1204,983],{"class":964},[706,1206,986],{"class":960},[706,1208,989],{"class":964},[706,1210,191],{"class":716},[706,1212,994],{"class":964},[706,1214,997],{"class":964},[706,1216,1217],{"class":708,"line":1071},[706,1218,862],{"emptyLinePlaceholder":861},[706,1220,1221],{"class":708,"line":1077},[706,1222,1223],{"class":842},"\u002F\u002F 嵌入预览播放器\n",[706,1225,1226,1228,1231],{"class":708,"line":1088},[706,1227,1035],{"class":964},[706,1229,1230],{"class":968},"Player ",[706,1232,1085],{"class":964},[706,1234,1235],{"class":708,"line":1093},[706,1236,862],{"emptyLinePlaceholder":861},[706,1238,1239],{"class":708,"line":1099},[706,1240,1241],{"class":842},"\u002F\u002F 播放控制（播放、暂停、跳转、逐帧前进）\n",[706,1243,1245,1247,1250],{"class":708,"line":1244},14,[706,1246,1035],{"class":964},[706,1248,1249],{"class":968},"PlayerControls ",[706,1251,1085],{"class":964},[706,1253,1255],{"class":708,"line":1254},15,[706,1256,862],{"emptyLinePlaceholder":861},[706,1258,1260],{"class":708,"line":1259},16,[706,1261,1262],{"class":842},"\u002F\u002F 带拖动条的时间轴编辑器\n",[706,1264,1266,1268,1271],{"class":708,"line":1265},17,[706,1267,1035],{"class":964},[706,1269,1270],{"class":968},"Timeline ",[706,1272,1085],{"class":964},[706,1274,1276],{"class":708,"line":1275},18,[706,1277,862],{"emptyLinePlaceholder":861},[706,1279,1281],{"class":708,"line":1280},19,[706,1282,1283],{"class":842},"\u002F\u002F 预览显示区域\n",[706,1285,1287,1289,1292],{"class":708,"line":1286},20,[706,1288,1035],{"class":964},[706,1290,1291],{"class":968},"PreviewPanel ",[706,1293,1085],{"class":964},[706,1295,1297],{"class":708,"line":1296},21,[706,1298,862],{"emptyLinePlaceholder":861},[706,1300,1302],{"class":708,"line":1301},22,[706,1303,1304],{"class":842},"\u002F\u002F 活动可视化轨道（用于 Agent 工作流）\n",[706,1306,1308,1310,1313,1315,1318,1320],{"class":708,"line":1307},23,[706,1309,1035],{"class":964},[706,1311,1312],{"class":968},"AgentActivityTrack activities",[706,1314,1107],{"class":964},[706,1316,1317],{"class":968},"activities",[706,1319,1113],{"class":964},[706,1321,1116],{"class":964},[806,1323,1324],{"id":1324},"编辑器组件",[696,1326,1328],{"className":951,"code":1327,"language":953,"meta":701,"style":701},"import { SourceEditor, PropertyPanel, FileTree } from '@hyperframes\u002Fstudio';\n\n\u002F\u002F 代码编辑器（基于 CodeMirror），用于 HTML、CSS 和 JavaScript\n\u003CSourceEditor \u002F>\n\n\u002F\u002F 选中元素的属性检查器\n\u003CPropertyPanel \u002F>\n\n\u002F\u002F 项目文件浏览器\n\u003CFileTree \u002F>\n",[703,1329,1330,1361,1365,1370,1379,1383,1388,1397,1401,1406],{"__ignoreMap":701},[706,1331,1332,1334,1336,1339,1341,1344,1346,1349,1351,1353,1355,1357,1359],{"class":708,"line":709},[706,1333,961],{"class":960},[706,1335,965],{"class":964},[706,1337,1338],{"class":968}," SourceEditor",[706,1340,972],{"class":964},[706,1342,1343],{"class":968}," PropertyPanel",[706,1345,972],{"class":964},[706,1347,1348],{"class":968}," FileTree",[706,1350,983],{"class":964},[706,1352,986],{"class":960},[706,1354,989],{"class":964},[706,1356,191],{"class":716},[706,1358,994],{"class":964},[706,1360,997],{"class":964},[706,1362,1363],{"class":708,"line":846},[706,1364,862],{"emptyLinePlaceholder":861},[706,1366,1367],{"class":708,"line":858},[706,1368,1369],{"class":842},"\u002F\u002F 代码编辑器（基于 CodeMirror），用于 HTML、CSS 和 JavaScript\n",[706,1371,1372,1374,1377],{"class":708,"line":865},[706,1373,1035],{"class":964},[706,1375,1376],{"class":968},"SourceEditor ",[706,1378,1085],{"class":964},[706,1380,1381],{"class":708,"line":871},[706,1382,862],{"emptyLinePlaceholder":861},[706,1384,1385],{"class":708,"line":1044},[706,1386,1387],{"class":842},"\u002F\u002F 选中元素的属性检查器\n",[706,1389,1390,1392,1395],{"class":708,"line":1056},[706,1391,1035],{"class":964},[706,1393,1394],{"class":968},"PropertyPanel ",[706,1396,1085],{"class":964},[706,1398,1399],{"class":708,"line":1066},[706,1400,862],{"emptyLinePlaceholder":861},[706,1402,1403],{"class":708,"line":1071},[706,1404,1405],{"class":842},"\u002F\u002F 项目文件浏览器\n",[706,1407,1408,1410,1413],{"class":708,"line":1077},[706,1409,1035],{"class":964},[706,1411,1412],{"class":968},"FileTree ",[706,1414,1085],{"class":964},[806,1416,1417],{"id":1417},"完整应用",[696,1419,1421],{"className":951,"code":1420,"language":953,"meta":701,"style":701},"import { StudioApp } from '@hyperframes\u002Fstudio';\n\n\u002F\u002F 完整的 studio 应用（封装所有组件）\n\u003CStudioApp \u002F>\n",[703,1422,1423,1444,1448,1453],{"__ignoreMap":701},[706,1424,1425,1427,1429,1432,1434,1436,1438,1440,1442],{"class":708,"line":709},[706,1426,961],{"class":960},[706,1428,965],{"class":964},[706,1430,1431],{"class":968}," StudioApp",[706,1433,983],{"class":964},[706,1435,986],{"class":960},[706,1437,989],{"class":964},[706,1439,191],{"class":716},[706,1441,994],{"class":964},[706,1443,997],{"class":964},[706,1445,1446],{"class":708,"line":846},[706,1447,862],{"emptyLinePlaceholder":861},[706,1449,1450],{"class":708,"line":858},[706,1451,1452],{"class":842},"\u002F\u002F 完整的 studio 应用（封装所有组件）\n",[706,1454,1455,1457,1460],{"class":708,"line":865},[706,1456,1035],{"class":964},[706,1458,1459],{"class":968},"StudioApp ",[706,1461,1085],{"class":964},[722,1463,1465],{"id":1464},"hooks","Hooks",[806,1467,1469],{"id":1468},"usetimelineplayer",[703,1470,1471],{},"useTimelinePlayer",[692,1473,1474],{},"管理播放器状态和播放控制：",[696,1476,1478],{"className":951,"code":1477,"language":953,"meta":701,"style":701},"import { useTimelinePlayer } from '@hyperframes\u002Fstudio';\n\nconst player = useTimelinePlayer();\n\u002F\u002F player.play(), player.pause(), player.seek(time), player.stepForward(), player.stepBackward()\n",[703,1479,1480,1501,1505,1525],{"__ignoreMap":701},[706,1481,1482,1484,1486,1489,1491,1493,1495,1497,1499],{"class":708,"line":709},[706,1483,961],{"class":960},[706,1485,965],{"class":964},[706,1487,1488],{"class":968}," useTimelinePlayer",[706,1490,983],{"class":964},[706,1492,986],{"class":960},[706,1494,989],{"class":964},[706,1496,191],{"class":716},[706,1498,994],{"class":964},[706,1500,997],{"class":964},[706,1502,1503],{"class":708,"line":846},[706,1504,862],{"emptyLinePlaceholder":861},[706,1506,1507,1511,1514,1517,1520,1523],{"class":708,"line":858},[706,1508,1510],{"class":1509},"spNyl","const",[706,1512,1513],{"class":968}," player ",[706,1515,1516],{"class":964},"=",[706,1518,1488],{"class":1519},"s2Zo4",[706,1521,1522],{"class":968},"()",[706,1524,997],{"class":964},[706,1526,1527],{"class":708,"line":865},[706,1528,1529],{"class":842},"\u002F\u002F player.play(), player.pause(), player.seek(time), player.stepForward(), player.stepBackward()\n",[806,1531,1533],{"id":1532},"useplayerstore",[703,1534,1535],{},"usePlayerStore",[692,1537,1538],{},"用于播放器状态的 Zustand store：",[696,1540,1542],{"className":951,"code":1541,"language":953,"meta":701,"style":701},"import { usePlayerStore, liveTime, formatTime } from '@hyperframes\u002Fstudio';\n\nconst store = usePlayerStore();\n\u002F\u002F 访问当前时间、时长、播放状态等\n\n\u002F\u002F 格式化时间用于显示\nconst display = formatTime(liveTime.current);\n",[703,1543,1544,1575,1579,1594,1599,1603,1608],{"__ignoreMap":701},[706,1545,1546,1548,1550,1553,1555,1558,1560,1563,1565,1567,1569,1571,1573],{"class":708,"line":709},[706,1547,961],{"class":960},[706,1549,965],{"class":964},[706,1551,1552],{"class":968}," usePlayerStore",[706,1554,972],{"class":964},[706,1556,1557],{"class":968}," liveTime",[706,1559,972],{"class":964},[706,1561,1562],{"class":968}," formatTime",[706,1564,983],{"class":964},[706,1566,986],{"class":960},[706,1568,989],{"class":964},[706,1570,191],{"class":716},[706,1572,994],{"class":964},[706,1574,997],{"class":964},[706,1576,1577],{"class":708,"line":846},[706,1578,862],{"emptyLinePlaceholder":861},[706,1580,1581,1583,1586,1588,1590,1592],{"class":708,"line":858},[706,1582,1510],{"class":1509},[706,1584,1585],{"class":968}," store ",[706,1587,1516],{"class":964},[706,1589,1552],{"class":1519},[706,1591,1522],{"class":968},[706,1593,997],{"class":964},[706,1595,1596],{"class":708,"line":865},[706,1597,1598],{"class":842},"\u002F\u002F 访问当前时间、时长、播放状态等\n",[706,1600,1601],{"class":708,"line":871},[706,1602,862],{"emptyLinePlaceholder":861},[706,1604,1605],{"class":708,"line":1044},[706,1606,1607],{"class":842},"\u002F\u002F 格式化时间用于显示\n",[706,1609,1610,1612,1615,1617,1619,1622,1625,1628],{"class":708,"line":1056},[706,1611,1510],{"class":1509},[706,1613,1614],{"class":968}," display ",[706,1616,1516],{"class":964},[706,1618,1562],{"class":1519},[706,1620,1621],{"class":968},"(liveTime",[706,1623,1624],{"class":964},".",[706,1626,1627],{"class":968},"current)",[706,1629,997],{"class":964},[806,1631,1633],{"id":1632},"usecodeeditor",[703,1634,1635],{},"useCodeEditor",[692,1637,1638],{},"代码编辑器状态和编辑功能：",[696,1640,1642],{"className":951,"code":1641,"language":953,"meta":701,"style":701},"import { useCodeEditor } from '@hyperframes\u002Fstudio';\n\nconst editor = useCodeEditor();\n\u002F\u002F editor.code, editor.setCode(), editor.diff, editor.onChange()\n",[703,1643,1644,1665,1669,1684],{"__ignoreMap":701},[706,1645,1646,1648,1650,1653,1655,1657,1659,1661,1663],{"class":708,"line":709},[706,1647,961],{"class":960},[706,1649,965],{"class":964},[706,1651,1652],{"class":968}," useCodeEditor",[706,1654,983],{"class":964},[706,1656,986],{"class":960},[706,1658,989],{"class":964},[706,1660,191],{"class":716},[706,1662,994],{"class":964},[706,1664,997],{"class":964},[706,1666,1667],{"class":708,"line":846},[706,1668,862],{"emptyLinePlaceholder":861},[706,1670,1671,1673,1676,1678,1680,1682],{"class":708,"line":858},[706,1672,1510],{"class":1509},[706,1674,1675],{"class":968}," editor ",[706,1677,1516],{"class":964},[706,1679,1652],{"class":1519},[706,1681,1522],{"class":968},[706,1683,997],{"class":964},[706,1685,1686],{"class":708,"line":865},[706,1687,1688],{"class":842},"\u002F\u002F editor.code, editor.setCode(), editor.diff, editor.onChange()\n",[806,1690,1692],{"id":1691},"useelementpicker",[703,1693,1694],{},"useElementPicker",[692,1696,1697],{},"从预览中选择元素：",[696,1699,1701],{"className":951,"code":1700,"language":953,"meta":701,"style":701},"import { useElementPicker } from '@hyperframes\u002Fstudio';\n\nconst picker = useElementPicker();\n\u002F\u002F picker.selectedElement, picker.selectElement(id), picker.clearSelection()\n",[703,1702,1703,1724,1728,1743],{"__ignoreMap":701},[706,1704,1705,1707,1709,1712,1714,1716,1718,1720,1722],{"class":708,"line":709},[706,1706,961],{"class":960},[706,1708,965],{"class":964},[706,1710,1711],{"class":968}," useElementPicker",[706,1713,983],{"class":964},[706,1715,986],{"class":960},[706,1717,989],{"class":964},[706,1719,191],{"class":716},[706,1721,994],{"class":964},[706,1723,997],{"class":964},[706,1725,1726],{"class":708,"line":846},[706,1727,862],{"emptyLinePlaceholder":861},[706,1729,1730,1732,1735,1737,1739,1741],{"class":708,"line":858},[706,1731,1510],{"class":1509},[706,1733,1734],{"class":968}," picker ",[706,1736,1516],{"class":964},[706,1738,1711],{"class":1519},[706,1740,1522],{"class":968},[706,1742,997],{"class":964},[706,1744,1745],{"class":708,"line":865},[706,1746,1747],{"class":842},"\u002F\u002F picker.selectedElement, picker.selectElement(id), picker.clearSelection()\n",[722,1749,1750],{"id":1750},"功能",[806,1752,1753],{"id":1753},"实时预览",[692,1755,1756],{},"studio 在 iframe 中使用 Hyperframes 运行时渲染你的合成。你在预览中看到的内容与渲染期间捕获的内容完全一致 — 相同的运行时代码、相同的跳转逻辑、相同的 clip 生命周期。",[692,1758,1759,1760,1763],{},"对 HTML 的更改会通过热重载自动捕获，因此你可以在编辑器中编辑 ",[703,1761,1762],{},"index.html"," 并在毫秒内看到浏览器中的结果。",[781,1765,1766,1772],{},[692,1767,1768,1769],{},"ℹ️ ",[728,1770,1771],{},"Note",[692,1773,1774,1775,1779,1780,1783,1784,1786],{},"预览的",[1776,1777,1778],"em",{},"视觉","输出与渲染完全匹配。实时",[1776,1781,1782],{},"播放流畅度","则取决于你的硬件，因为预览实际上在你的浏览器中以 30\u002F60fps 播放合成。渲染没有这个限制 — 它通过跳转驱动的管道逐帧捕获，因此耗时较长的帧会使渲染变慢但永远不会丢帧。如果你在预览中看到卡顿但渲染的 mp4 是流畅的，这是预期行为。参见",[758,1785,120],{"href":121},"了解最常导致此问题的模式。",[806,1788,1789],{"id":1789},"时间轴视图",[692,1791,1792],{},"时间轴面板提供了合成结构的可视化表示：",[735,1794,1795,1798,1808,1811],{},[738,1796,1797],{},"每个 clip 显示为轨道上的彩色条",[738,1799,1800,1801,1804,1805],{},"条的位置和宽度反映 ",[703,1802,1803],{},"data-start"," 和 ",[703,1806,1807],{},"data-duration",[738,1809,1810],{},"视觉上更高的行渲染在前面；更低的行渲染在下面",[738,1812,1813,1814,1817],{},"相对时序引用（例如 ",[703,1815,1816],{},"data-start=\"intro\"","）会被解析并显示为绝对位置",[692,1819,1820],{},"这使得理解具有多个重叠 clip 的复杂合成的时间结构变得容易。",[806,1822,124],{"id":124},[692,1824,1825],{},"时间轴支持移动和修剪操作，这些操作会直接持久化回你的 HTML 源文件。",[692,1827,1828],{},"有关以下内容的完整说明：",[735,1830,1831,1834,1848,1851],{},[738,1832,1833],{},"时间轴编辑目前能做什么",[738,1835,1836,1837,1839,1840,1839,1842,1804,1845],{},"每个操作如何映射到 ",[703,1838,1803],{},"、",[703,1841,1807],{},[703,1843,1844],{},"data-track-index",[703,1846,1847],{},"z-index",[738,1849,1850],{},"哪些 clip 类型支持起始修剪",[738,1852,1853],{},"当前限制和心智模型",[692,1855,1856,1857,800],{},"请参阅",[758,1858,124],{"href":125},[806,1860,1861],{"id":1861},"播放器控件",[692,1863,1864],{},"studio 包含一套完整的播放控制：",[735,1866,1867,1873,1879,1885],{},[738,1868,1869,1872],{},[728,1870,1871],{},"播放 \u002F 暂停"," — 开始和停止播放",[738,1874,1875,1878],{},[728,1876,1877],{},"跳转"," — 点击时间轴上的任意位置跳转到该点",[738,1880,1881,1884],{},[728,1882,1883],{},"拖动"," — 拖动播放头逐帧浏览合成",[738,1886,1887,1890],{},[728,1888,1889],{},"逐帧前进"," — 一次前进或后退一帧以精确定位",[806,1892,1893],{"id":1893},"热重载",[692,1895,1896],{},"文件更改会被检测并应用，无需重启服务器。预览会尽可能保持当前播放位置，因此你可以在 5 秒处调整动画而无需在每次保存后重新跳转回去。",[722,1898,1899],{"id":1899},"架构",[692,1901,1902],{},"studio 是一个 React 应用，具有以下结构：",[1904,1905,1906,1912,1922,1931],"ol",{},[738,1907,1908,1911],{},[728,1909,1910],{},"Iframe 预览"," — 你的合成 HTML 在一个隔离的 iframe 中加载，并注入 Hyperframes 运行时。这确保预览使用与生产相同的渲染路径。",[738,1913,1914,1917,1918,1921],{},[728,1915,1916],{},"运行时桥接"," — studio 通过 ",[703,1919,1920],{},"postMessage"," 与 iframe 通信，控制播放（播放、暂停、跳转）并接收状态更新（当前时间、时长、就绪状态）。",[738,1923,1924,1927,1928,1930],{},[728,1925,1926],{},"时间轴组件"," — 使用 ",[703,1929,175],{}," 解析合成以提取 clip 时序数据，并渲染可视化时间轴面板。",[738,1932,1933,1936],{},[728,1934,1935],{},"文件监视器"," — 开发服务器（基于 Vite）监视你的项目文件，并在检测到更改时触发热模块替换。",[722,1938,1940],{"id":1939},"tailwind-css-预设","Tailwind CSS 预设",[692,1942,1943],{},"studio 导出了一个 Tailwind CSS 预设以保持一致的样式：",[696,1945,1947],{"className":951,"code":1946,"language":953,"meta":701,"style":701},"\u002F\u002F tailwind.config.ts\nimport studioPreset from '@hyperframes\u002Fstudio\u002Ftailwind-preset';\n\nexport default {\npresets: [studioPreset],\n\u002F\u002F ... 你的配置\n};\n",[703,1948,1949,1954,1972,1976,1986,2000,2005],{"__ignoreMap":701},[706,1950,1951],{"class":708,"line":709},[706,1952,1953],{"class":842},"\u002F\u002F tailwind.config.ts\n",[706,1955,1956,1958,1961,1964,1966,1968,1970],{"class":708,"line":846},[706,1957,961],{"class":960},[706,1959,1960],{"class":968}," studioPreset ",[706,1962,1963],{"class":960},"from",[706,1965,989],{"class":964},[706,1967,925],{"class":716},[706,1969,994],{"class":964},[706,1971,997],{"class":964},[706,1973,1974],{"class":708,"line":858},[706,1975,862],{"emptyLinePlaceholder":861},[706,1977,1978,1981,1984],{"class":708,"line":865},[706,1979,1980],{"class":960},"export",[706,1982,1983],{"class":960}," default",[706,1985,1131],{"class":964},[706,1987,1988,1992,1995,1998],{"class":708,"line":871},[706,1989,1991],{"class":1990},"swJcz","presets",[706,1993,1994],{"class":964},":",[706,1996,1997],{"class":968}," [studioPreset]",[706,1999,1139],{"class":964},[706,2001,2002],{"class":708,"line":1044},[706,2003,2004],{"class":842},"\u002F\u002F ... 你的配置\n",[706,2006,2007],{"class":708,"line":1056},[706,2008,2009],{"class":964},"};\n",[722,2011,2012],{"id":2012},"相关包",[735,2014,2015,2025,2033,2041],{},[738,2016,2017,2021,2022,2024],{},[728,2018,2019],{},[758,2020,195],{"href":196},"\n通过 ",[703,2023,763],{}," 启动 studio — 预览合成的最简单方式。",[738,2026,2027,2032],{},[728,2028,2029],{},[758,2030,2031],{"href":176},"Core","\nstudio 用于预览和时间轴渲染的类型、解析和运行时。",[738,2034,2035,2040],{},[728,2036,2037],{},[758,2038,2039],{"href":188},"Producer","\n将你在 studio 中构建的合渲染为成品 MP4 文件。",[738,2042,2043,2048],{},[728,2044,2045],{},[758,2046,2047],{"href":180},"Engine","\n驱动合成生产渲染的捕获引擎。",[2050,2051,2052],"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 .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 .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .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 pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}",{"title":701,"searchDepth":709,"depth":846,"links":2054},[2055,2056,2060,2061,2067,2073,2080,2081,2082],{"id":724,"depth":846,"text":724},{"id":803,"depth":846,"text":804,"children":2057},[2058,2059],{"id":808,"depth":858,"text":809},{"id":831,"depth":858,"text":832},{"id":886,"depth":846,"text":886},{"id":945,"depth":846,"text":945,"children":2062},[2063,2064,2065,2066],{"id":948,"depth":858,"text":948},{"id":1119,"depth":858,"text":1119},{"id":1324,"depth":858,"text":1324},{"id":1417,"depth":858,"text":1417},{"id":1464,"depth":846,"text":1465,"children":2068},[2069,2070,2071,2072],{"id":1468,"depth":858,"text":1471},{"id":1532,"depth":858,"text":1535},{"id":1632,"depth":858,"text":1635},{"id":1691,"depth":858,"text":1694},{"id":1750,"depth":846,"text":1750,"children":2074},[2075,2076,2077,2078,2079],{"id":1753,"depth":858,"text":1753},{"id":1789,"depth":858,"text":1789},{"id":124,"depth":858,"text":124},{"id":1861,"depth":858,"text":1861},{"id":1893,"depth":858,"text":1893},{"id":1899,"depth":846,"text":1899},{"id":1939,"depth":846,"text":1940},{"id":2012,"depth":846,"text":2012},"可视化合成编辑器，支持实时预览、时间轴视图和热重载。","md",null,{},{"title":191,"description":2083},"DZzCjd50_3toOfuy4NTh9CcCsxGUN3amfbjDa-d25OI",[2090,2092],{"title":187,"path":188,"stem":189,"description":2091,"children":-1},"完整的 HTML 到视频渲染管道，支持编码、音频混音和 Docker。",{"title":195,"path":196,"stem":197,"description":2093,"children":-1},"从命令行创建、预览和渲染 HTML 视频合成。",1780322245334]