[{"data":1,"prerenderedAt":1717},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Fpipeline":686,"\u002Fguides\u002Fpipeline-surround":1712},[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":64,"body":688,"description":1705,"extension":1706,"links":1707,"meta":1708,"navigation":1709,"path":65,"seo":1710,"stem":66,"__hash__":1711},"docs\u002F03.guides\u002F01.pipeline.md",{"type":689,"value":690,"toc":1691},"minimark",[691,695,706,710,713,877,889,892,895,905,911,915,923,926,958,966,972,975,979,986,991,997,1071,1085,1093,1097,1103,1108,1131,1137,1144,1148,1154,1159,1164,1251,1254,1261,1265,1282,1285,1326,1388,1402,1416,1420,1428,1434,1437,1454,1457,1461,1469,1472,1524,1536,1543,1562,1571,1574,1577,1615,1618,1621,1624,1646,1652,1655,1687],[692,693,694],"p",{},"每个结构良好的 Hyperframes 视频都经历相同的 7 个步骤，无论它源自网站、PDF、CSV 还是空白页。每个步骤产生一个命名的产物，供下一步使用，因此你的 AI 代理（和你）始终知道什么已完成、什么接下来进行、以及创意决策存储在磁盘的什么位置。",[692,696,697,698,702,703,705],{},"这个流水线是",[699,700,701],"a",{"href":73},"网站转视频工作流","的核心，但它同样适用于从零开始编写品牌宣传视频、将研究笔记转化为发布预告片，或首次学习 Hyperframes。大多数生产级",[699,704,27],{"href":28},"都是按此方式组织的。",[707,708,709],"h2",{"id":709},"七个步骤",[692,711,712],{},"每个步骤产生一个供下一步使用的产物：",[714,715,716,735],"table",{},[717,718,719],"thead",{},[720,721,722,726,729,732],"tr",{},[723,724,725],"th",{},"#",[723,727,728],{},"步骤",[723,730,731],{},"输出",[723,733,734],{},"操作",[736,737,738,759,777,795,813,835,853],"tbody",{},[720,739,740,744,750,756],{},[741,742,743],"td",{},"1",[741,745,746],{},[747,748,749],"strong",{},"采集",[741,751,752],{},[753,754,755],"code",{},"capture\u002F",[741,757,758],{},"从源中提取截图、设计令牌、字体、素材、动画",[720,760,761,764,769,774],{},[741,762,763],{},"2",[741,765,766],{},[747,767,768],{},"设计",[741,770,771],{},[753,772,773],{},"DESIGN.md",[741,775,776],{},"品牌参考：颜色、字体、组件、注意事项",[720,778,779,782,787,792],{},[741,780,781],{},"3",[741,783,784],{},[747,785,786],{},"脚本",[741,788,789],{},[753,790,791],{},"SCRIPT.md",[741,793,794],{},"包含开头钩子、故事、证据和 CTA 的旁白文本",[720,796,797,800,805,810],{},[741,798,799],{},"4",[741,801,802],{},[747,803,804],{},"故事板",[741,806,807],{},[753,808,809],{},"STORYBOARD.md",[741,811,812],{},"逐拍创意方向：氛围、素材、动画、过渡",[720,814,815,818,823,832],{},[741,816,817],{},"5",[741,819,820],{},[747,821,822],{},"配音 + 时序",[741,824,825,828,829],{},[753,826,827],{},"narration.wav"," + ",[753,830,831],{},"transcript.json",[741,833,834],{},"带有词级时间戳的 TTS 音频",[720,836,837,840,845,850],{},[741,838,839],{},"6",[741,841,842],{},[747,843,844],{},"构建",[741,846,847],{},[753,848,849],{},"compositions\u002F*.html",[741,851,852],{},"动画 HTML 合成，每个拍一帧",[720,854,855,858,863,874],{},[741,856,857],{},"7",[741,859,860],{},[747,861,862],{},"验证",[741,864,865,866,869,870,873],{},"快照 PNG + ",[753,867,868],{},"lint","\u002F",[753,871,872],{},"validate"," 通过",[741,875,876],{},"交付前的视觉验证和运行时检查",[878,879,880,886],"blockquote",{},[692,881,882,883],{},"💡 ",[747,884,885],{},"Tip",[692,887,888],{},"并非每个项目都使用每个步骤。无旁白的品牌宣传视频跳过步骤 5；手工编写的合成跳过步骤 1-2。但顺序很重要：场景时长来自旁白，动画选择来自故事板，故事板依赖设计参考。只有当你不需要下游使用其产物时才跳过某个步骤。",[707,890,891],{"id":891},"项目目录结构",[692,893,894],{},"流水线运行后典型的项目目录：",[896,897,902],"pre",{"className":898,"code":900,"language":901},[899],"language-text","my-video\u002F\n├── capture\u002F                    # Step 1, only present when capturing a source\n│   ├── screenshots\u002F            # scroll-000.png, scroll-001.png, …\n│   ├── assets\u002F                 # downloaded images, SVGs, fonts\n│   ├── extracted\u002F              # tokens.json, visible-text.txt, asset-descriptions.md\n│   ├── AGENTS.md               # capture summary for AI agents\n│   └── CLAUDE.md\n├── DESIGN.md                   # Step 2, brand cheat sheet\n├── SCRIPT.md                   # Step 3, narration backbone\n├── STORYBOARD.md               # Step 4, beat-by-beat creative plan\n├── narration.wav               # Step 5, TTS audio\n├── narration.txt               # Step 5, exact spoken text (with pronunciation subs)\n├── transcript.json             # Step 5, word-level timestamps\n├── compositions\u002F               # Step 6, one HTML file per beat\n│   ├── beat-1-hook.html\n│   ├── beat-2-story.html\n│   └── …\n├── snapshots\u002F                  # Step 7, visual verification PNGs\n├── renders\u002F                    # optional final MP4 outputs\n└── index.html                  # root project file wiring compositions into a timeline\n","text",[753,903,900],{"__ignoreMap":904},"",[692,906,907,908,910],{},"采集产物保留在 ",[753,909,755],{}," 中，与构建输出清晰分离。所有下游内容位于项目根目录。",[707,912,914],{"id":913},"步骤-1采集","步骤 1：采集",[692,916,917,920,921],{},[747,918,919],{},"输出："," ",[753,922,755],{},[692,924,925],{},"当视频基于现有源（网站、品牌站点、竞品参考）时，从采集开始。Hyperframes 内置了一个用于网站的采集命令：",[896,927,931],{"className":928,"code":929,"language":930,"meta":904,"style":904},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx hyperframes capture https:\u002F\u002Fexample.com -o my-video\u002Fcapture\n","bash",[753,932,933],{"__ignoreMap":904},[934,935,938,942,946,949,952,955],"span",{"class":936,"line":937},"line",1,[934,939,941],{"class":940},"sBMFI","npx",[934,943,945],{"class":944},"sfazB"," hyperframes",[934,947,948],{"class":944}," capture",[934,950,951],{"class":944}," https:\u002F\u002Fexample.com",[934,953,954],{"class":944}," -o",[934,956,957],{"class":944}," my-video\u002Fcapture\n",[692,959,960,961,965],{},"这会在每个滚动深度提取截图、像素采样的调色板、CSS 字体栈（及下载的 woff2 文件）、带语义名称的图片和 SVG、Lottie 动画以及页面上检测到的动画。可选的 ",[699,962,964],{"href":963},"\u002Fguides\u002Fwebsite-to-video#%E9%80%9A%E8%BF%87-gemini-vision-%E5%A2%9E%E5%BC%BA%E9%87%87%E9%9B%86","Gemini 视觉增强","为每个采集的素材添加 AI 驱动的描述。",[692,967,968,969,971],{},"对于非网站源（PDF、演示文稿、CSV、笔记），采集不是字面意义上的命令。它是你将素材收集到 ",[753,970,755],{}," 的步骤，以便后续步骤可以引用路径而不是内联内容。",[692,973,974],{},"**完成标准：**你可以用一两句话描述源的视觉识别，并说出其主要颜色、字体和突出素材。",[707,976,978],{"id":977},"步骤-2设计","步骤 2：设计",[692,980,981,983,984],{},[747,982,919],{}," 项目根目录中的 ",[753,985,773],{},[692,987,988,990],{},[753,989,773],{}," 是品牌速查表。它客观编码视觉识别，使每个下游决策都可以引用确切的颜色、字体和组件，而不是自行发明。它是参考文档，不是创意计划。创意工作在故事板中进行。",[692,992,993,994,996],{},"典型的 ",[753,995,773],{}," 有六个部分：",[714,998,999,1009],{},[717,1000,1001],{},[720,1002,1003,1006],{},[723,1004,1005],{},"部分",[723,1007,1008],{},"内容",[736,1010,1011,1021,1031,1041,1051,1061],{},[720,1012,1013,1018],{},[741,1014,1015],{},[747,1016,1017],{},"概述",[741,1019,1020],{},"3-4 句话描述布局模式、颜色策略、字体风格",[720,1022,1023,1028],{},[741,1024,1025],{},[747,1026,1027],{},"颜色",[741,1029,1030],{},"5-10 个 HEX 值及其语义角色（主色调、暖色强调等）",[720,1032,1033,1038],{},[741,1034,1035],{},[747,1036,1037],{},"字体",[741,1039,1040],{},"字体族及其粗细、角色和特色用法",[720,1042,1043,1048],{},[741,1044,1045],{},[747,1046,1047],{},"组件",[741,1049,1050],{},"品牌使用的模式：便当格、logo 墙、渐变网格",[720,1052,1053,1058],{},[741,1054,1055],{},[747,1056,1057],{},"图片",[741,1059,1060],{},"素材类别及品牌使用方式",[720,1062,1063,1068],{},[741,1064,1065],{},[747,1066,1067],{},"注意事项",[741,1069,1070],{},"硬性规则：\"白色背景，从不深色\"，\"无阴影\"",[692,1072,1073,1075,1076,1078,1079,1081,1082,1084],{},[753,1074,773],{}," 也是 ",[699,1077,88],{"href":89}," 和 ",[699,1080,84],{"href":85}," 的输入格式；两者都生成你可以直接放入 Hyperframes 项目的 ",[753,1083,773],{},"。",[692,1086,1087,1090,1092],{},[747,1088,1089],{},"完成标准：",[753,1091,773],{}," 存在，所有六个部分都用真实采集数据填充（或为全新项目刻意选择）。",[707,1094,1096],{"id":1095},"步骤-3脚本","步骤 3：脚本",[692,1098,1099,983,1101],{},[747,1100,919],{},[753,1102,791],{},[692,1104,1105,1107],{},[753,1106,791],{}," 是旁白骨架。场景时长来自旁白而非猜测，因此在故事板之前编写脚本，并按口头用语为拍定时间。",[692,1109,1110,1111,1114,1115,1118,1119,1122,1123,1126,1127,1130],{},"典型结构：",[747,1112,1113],{},"开头钩子","（一句话赢得注意力）、",[747,1116,1117],{},"故事","（产品或主题是什么）、",[747,1120,1121],{},"证据","（数字、组件、客户）、",[747,1124,1125],{},"CTA","（一个明确的动作）。引用 ",[753,1128,1129],{},"capture\u002Fextracted\u002Fvisible-text.txt"," 中的真实功能、真实统计数据和真实组件。不要编造源不支持的声明。",[692,1132,1133,1134,1136],{},"对于无旁白视频（品牌宣传、音乐驱动的预告片），",[753,1135,791],{}," 变为逐拍文案计划：屏幕上的文本和标题，并附上时间说明。",[692,1138,1139,1141,1143],{},[747,1140,1089],{},[753,1142,791],{}," 存在于项目根目录。",[707,1145,1147],{"id":1146},"步骤-4故事板","步骤 4：故事板",[692,1149,1150,983,1152],{},[747,1151,919],{},[753,1153,809],{},[692,1155,1156,1158],{},[753,1157,809],{}," 告诉工程师（人类或代理）每个拍需要构建什么：氛围、镜头、动画、过渡、素材、深度层、音效。这是创意选择被确定的地方。",[692,1160,1161,1163],{},[753,1162,809],{}," 中每个拍通常涵盖：",[714,1165,1166,1176],{},[717,1167,1168],{},[720,1169,1170,1173],{},[723,1171,1172],{},"字段",[723,1174,1175],{},"说明",[736,1177,1178,1191,1199,1207,1215,1230,1238],{},[720,1179,1180,1183],{},[741,1181,1182],{},"时间",[741,1184,1185,1188,1189],{},[753,1186,1187],{},"0.0s - 5.8s","，在步骤 5 运行后取自 ",[753,1190,831],{},[720,1192,1193,1196],{},[741,1194,1195],{},"旁白行",[741,1197,1198],{},"此拍期间说的确切词语",[720,1200,1201,1204],{},[741,1202,1203],{},"氛围与镜头",[741,1205,1206],{},"一句描述感觉和镜头的话",[720,1208,1209,1212],{},[741,1210,1211],{},"素材",[741,1213,1214],{},"哪些采集的图片、图标和字体用于此拍，通过路径引用",[720,1216,1217,1220],{},[741,1218,1219],{},"技法",[741,1221,1222,1223,1229],{},"从",[699,1224,1228],{"href":1225,"rel":1226},"https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes\u002Fblob\u002Fmain\u002Fskills\u002Fhyperframes\u002Freferences\u002Ftechniques.md",[1227],"nofollow","技法库","中选择 2-3 种：SVG 路径绘制、Canvas 2D、CSS 3D、逐字排版、Lottie、视频合成、打字效果、可变字体、MotionPath、速度过渡、音频响应",[720,1231,1232,1235],{},[741,1233,1234],{},"过渡",[741,1236,1237],{},"此拍如何从前一个进入、如何退出到下一个",[720,1239,1240,1243],{},[741,1241,1242],{},"音效",[741,1244,1245,1246,1250],{},"简短、具体的音效（如 ",[1247,1248,1249],"em",{},"\"logo 入场时的嗖嗖声，计数器的轻柔滴答声\"","）",[692,1252,1253],{},"故事板通常以全局方向块开头：格式、配音方向、风格基础以及适用于每个拍的保护措施。",[692,1255,1256,1258,1260],{},[747,1257,1089],{},[753,1259,809],{}," 存在，包含逐拍方向和列出每个使用文件的素材审计。",[707,1262,1264],{"id":1263},"步骤-5配音和时序","步骤 5：配音和时序",[692,1266,1267,920,1269,1271,1272,1275,1276,1279,1280],{},[747,1268,919],{},[753,1270,827],{},"（或 ",[753,1273,1274],{},".mp3","）、",[753,1277,1278],{},"narration.txt","、",[753,1281,831],{},[692,1283,1284],{},"生成 TTS 旁白，然后转录以获取词级时间戳。这些时间戳是下游每个拍时长的真实来源。",[896,1286,1288],{"className":928,"code":1287,"language":930,"meta":904,"style":904},"npx hyperframes tts SCRIPT.md --voice af_nova --output narration.wav\nnpx hyperframes transcribe narration.wav\n",[753,1289,1290,1314],{"__ignoreMap":904},[934,1291,1292,1294,1296,1299,1302,1305,1308,1311],{"class":936,"line":937},[934,1293,941],{"class":940},[934,1295,945],{"class":944},[934,1297,1298],{"class":944}," tts",[934,1300,1301],{"class":944}," SCRIPT.md",[934,1303,1304],{"class":944}," --voice",[934,1306,1307],{"class":944}," af_nova",[934,1309,1310],{"class":944}," --output",[934,1312,1313],{"class":944}," narration.wav\n",[934,1315,1317,1319,1321,1324],{"class":936,"line":1316},2,[934,1318,941],{"class":940},[934,1320,945],{"class":944},[934,1322,1323],{"class":944}," transcribe",[934,1325,1313],{"class":944},[714,1327,1328,1337],{},[717,1329,1330],{},[720,1331,1332,1335],{},[723,1333,1334],{},"文件",[723,1336,1008],{},[736,1338,1339,1348,1375],{},[720,1340,1341,1345],{},[741,1342,1343],{},[753,1344,827],{},[741,1346,1347],{},"与最终渲染一起交付的 TTS 音频",[720,1349,1350,1354],{},[741,1351,1352],{},[753,1353,1278],{},[741,1355,1356,1357,1360,1361,1364,1365,1360,1368,1371,1372,1374],{},"经发音替换后的准确口头文本（",[753,1358,1359],{},"API"," → ",[753,1362,1363],{},"A P I","，",[753,1366,1367],{},"$2T",[753,1369,1370],{},"two trillion","）。与 ",[753,1373,791],{}," 不同，这样你以后可以用不同声音重新生成音频而无需重新做替换。",[720,1376,1377,1381],{},[741,1378,1379],{},[753,1380,831],{},[741,1382,1383,1384,1387],{},"每个词的 ",[753,1385,1386],{},"[{ text, start, end }]","。后续每个步骤都读取此文件获取时间。",[692,1389,1390,1391,1396,1397,1399,1400,1084],{},"Hyperframes 提供多个 TTS 适配器（Kokoro、ElevenLabs、HeyGen）；参见 ",[699,1392,1393],{"href":93},[753,1394,1395],{},"\u002Fhyperframes-media"," 了解选择适配器的 skill。生成音频后，用 ",[753,1398,831],{}," 中的真实拍边界更新 ",[753,1401,809],{},[692,1403,1404,1406,1279,1408,1078,1410,1412,1413,1415],{},[747,1405,1089],{},[753,1407,827],{},[753,1409,1278],{},[753,1411,831],{}," 存在。",[753,1414,809],{}," 的拍时间引用真实时间戳，而非估计值。",[707,1417,1419],{"id":1418},"步骤-6构建","步骤 6：构建",[692,1421,1422,920,1424,1427],{},[747,1423,919],{},[753,1425,1426],{},"compositions\u002F\u003Cbeat-name>.html","，每个拍一个 HTML 文件",[692,1429,1430,1431,1433],{},"这是故事板变为可运行 HTML 的地方。每个合成是一个自包含文件，通过路径导入采集的素材，使用 ",[753,1432,773],{}," 中确切的颜色和字体，并使用故事板选定的技法进行动画。",[692,1435,1436],{},"对于多拍视频，为每个拍启动一个专注的子代理。每个子代理获得新鲜的上下文、其拍对应的故事板部分、需要的素材路径以及相关的技法参考。这比在一个长时间运行的上下文中构建所有拍产生明显更好的输出。",[692,1438,1439,1440,1445,1446,1449,1450,1453],{},"每个合成构建完成后，运行自审查以检查布局、素材放置和动画质量。",[699,1441,1442],{"href":93},[753,1443,1444],{},"\u002Fhyperframes"," skill 编码了合成规则：必需的 ",[753,1447,1448],{},"class=\"clip\""," 属性、GSAP 时间轴注册、",[753,1451,1452],{},"data-*"," 属性语义以及适配器注册表。",[692,1455,1456],{},"**完成标准：**每个合成都经过自审查。没有重叠的元素，没有错放的素材，没有未动画的静态图片。",[707,1458,1460],{"id":1459},"步骤-7验证","步骤 7：验证",[692,1462,1463,920,1465,1468],{},[747,1464,919],{},[753,1466,1467],{},"snapshots\u002Fframe-*.png","，lint 和 validate 零错误通过",[692,1470,1471],{},"交付前的三项检查：",[896,1473,1475],{"className":928,"code":1474,"language":930,"meta":904,"style":904},"npx hyperframes lint                              # static HTML structure checks\nnpx hyperframes validate                          # loads in headless Chrome, catches runtime errors\nnpx hyperframes snapshot my-video --at 2.9,10.4   # PNGs at beat midpoints\n",[753,1476,1477,1490,1502],{"__ignoreMap":904},[934,1478,1479,1481,1483,1486],{"class":936,"line":937},[934,1480,941],{"class":940},[934,1482,945],{"class":944},[934,1484,1485],{"class":944}," lint",[934,1487,1489],{"class":1488},"sHwdD","                              # static HTML structure checks\n",[934,1491,1492,1494,1496,1499],{"class":936,"line":1316},[934,1493,941],{"class":940},[934,1495,945],{"class":944},[934,1497,1498],{"class":944}," validate",[934,1500,1501],{"class":1488},"                          # loads in headless Chrome, catches runtime errors\n",[934,1503,1505,1507,1509,1512,1515,1518,1521],{"class":936,"line":1504},3,[934,1506,941],{"class":940},[934,1508,945],{"class":944},[934,1510,1511],{"class":944}," snapshot",[934,1513,1514],{"class":944}," my-video",[934,1516,1517],{"class":944}," --at",[934,1519,1520],{"class":944}," 2.9,10.4",[934,1522,1523],{"class":1488},"   # PNGs at beat midpoints\n",[692,1525,1526,1528,1529,1531,1532,1535],{},[753,1527,868],{}," 捕获缺失属性、时间轴注册问题、补间冲突和 CSS 变换与 GSAP 的冲突。",[753,1530,872],{}," 在无头 Chrome 中加载每个合成，显示运行时 JS 错误、缺失素材和失败的网络请求。",[753,1533,1534],{},"snapshot"," 在特定时间戳捕获帧，让你无需完整渲染即可_看到_输出。",[692,1537,1538,1539,1542],{},"流水线将 localhost Studio URL 作为交付物。你的 AI 代理运行 ",[753,1540,1541],{},"npx hyperframes preview"," 并分享项目 URL。渲染为 MP4 是按需的：",[896,1544,1546],{"className":928,"code":1545,"language":930,"meta":904,"style":904},"npx hyperframes render --output my-video.mp4\n",[753,1547,1548],{"__ignoreMap":904},[934,1549,1550,1552,1554,1557,1559],{"class":936,"line":937},[934,1551,941],{"class":940},[934,1553,945],{"class":944},[934,1555,1556],{"class":944}," render",[934,1558,1310],{"class":944},[934,1560,1561],{"class":944}," my-video.mp4\n",[692,1563,1564,1566,1078,1568,1570],{},[747,1565,1089],{},[753,1567,868],{},[753,1569,872],{}," 零错误通过。快照帧看起来正确。Studio 预览 URL 准备好分享。",[707,1572,1573],{"id":1573},"迭代",[692,1575,1576],{},"流水线围绕磁盘上的命名产物构建，因此你可以从任何地方重新进入而无需重新运行所有内容：",[1578,1579,1580,1587,1597,1609],"ul",{},[1581,1582,1583,1584,1586],"li",{},"要重新制作创意计划，编辑 ",[753,1585,809],{},"：更改拍的氛围、替换素材、调整入场时间，然后要求代理仅重建该拍。",[1581,1588,1589,1590,1593,1594,1596],{},"对于精细调整，直接打开合成文件（如 ",[753,1591,1592],{},"compositions\u002Fbeat-3-proof.html","）并调整动画、颜色或布局。",[753,1595,1541],{}," 实时显示更改。",[1581,1598,1599,1600,1603,1604,1279,1606,1608],{},"要从零重建一个拍，提示代理：",[1247,1601,1602],{},"\"重建拍 2，更有活力。使用产品截图作为全出血背景。\""," 它会读取 ",[753,1605,809],{},[753,1607,773],{}," 和转录文本，然后仅重新生成该文件。",[1581,1610,1611,1612,1614],{},"要更换声音而不重新执行步骤 3，对 ",[753,1613,1278],{}," 重新运行 TTS，它已经内置了发音替换。",[692,1616,1617],{},"每个产物都是一个检查点，因此你可以停止、交给人工审查者，或明天回来，代理仍然拥有继续工作所需的一切。",[707,1619,1620],{"id":1620},"何时使用流水线",[692,1622,1623],{},"流水线是以下情况的推荐结构：",[1578,1625,1626,1633,1640,1643],{},[1581,1627,1628,1629,1632],{},"使用 ",[699,1630,1631],{"href":93},"\u002Fwebsite-to-hyperframes"," skill 采集网站，该 skill 端到端执行此流程。",[1581,1634,1635,1636,1639],{},"发布产品发布。大多数 ",[699,1637,1638],{"href":28},"HeyGen 发布视频","使用此产物布局。",[1581,1641,1642],{},"任何有三个或更多拍的叙事视频，故事板在此情况下物有所值。",[1581,1644,1645],{},"学习 Hyperframes，因为产物使每个创意决策在磁盘上可检查。",[692,1647,1648,1649,1651],{},"对于 5 秒的一次性动画，单个手工编写的合成就够了；流水线是你不需要的开销。大致的判断标准：如果非创作者需要理解_为什么_一个拍看起来是这样的，就把它写在 ",[753,1650,809],{}," 中。",[707,1653,1654],{"id":1654},"下一步",[1578,1656,1657,1664,1672,1679],{},[1581,1658,1659,1663],{},[747,1660,1661],{},[699,1662,72],{"href":73},"\n基于此流水线构建的完整网站转视频工作流。",[1581,1665,1666,1671],{},[747,1667,1668],{},[699,1669,1670],{"href":93},"提示词","\n如何通过 AI 代理调用流水线。",[1581,1673,1674,1678],{},[747,1675,1676],{},[699,1677,27],{"href":28},"\n围绕此流水线组织的真实生产项目。",[1581,1680,1681,1686],{},[747,1682,1683],{},[699,1684,1685],{"href":196},"CLI 参考","\n流水线调用的每个命令。",[1688,1689,1690],"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}",{"title":904,"searchDepth":937,"depth":1316,"links":1692},[1693,1694,1695,1696,1697,1698,1699,1700,1701,1702,1703,1704],{"id":709,"depth":1316,"text":709},{"id":891,"depth":1316,"text":891},{"id":913,"depth":1316,"text":914},{"id":977,"depth":1316,"text":978},{"id":1095,"depth":1316,"text":1096},{"id":1146,"depth":1316,"text":1147},{"id":1263,"depth":1316,"text":1264},{"id":1418,"depth":1316,"text":1419},{"id":1459,"depth":1316,"text":1460},{"id":1573,"depth":1316,"text":1573},{"id":1620,"depth":1316,"text":1620},{"id":1654,"depth":1316,"text":1654},"制作任何 HyperFrames 视频的 7 步流水线：采集、设计、脚本、故事板、配音、构建、验证。","md",null,{},true,{"title":64,"description":1705},"BGiQ9_lSgG5D904GZFuXuz3ww35r22xgZlOcfATv4SY",[1713,1715],{"title":54,"path":55,"stem":56,"description":1714,"children":-1},"相同的输入，完全相同的输出。每次如此。",{"title":68,"path":69,"stem":70,"description":1716,"children":-1},"将实时 HTML 渲染为 WebGL 纹理——对任何 DOM 内容使用 GPU 着色器、3D 几何体和电影效果。",1780322242388]