[{"data":1,"prerenderedAt":1730},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Fwebsite-to-video":686,"\u002Fguides\u002Fwebsite-to-video-surround":1725},[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":72,"body":688,"description":1718,"extension":1719,"links":1720,"meta":1721,"navigation":1722,"path":73,"seo":1723,"stem":74,"__hash__":1724},"docs\u002F03.guides\u002F03.website-to-video.md",{"type":689,"value":690,"toc":1695},"minimark",[691,695,706,709,714,717,743,771,774,777,783,786,799,802,817,820,824,844,850,868,871,878,1008,1015,1018,1021,1116,1135,1139,1148,1155,1182,1186,1192,1195,1199,1205,1208,1246,1252,1255,1258,1275,1281,1372,1375,1466,1469,1472,1495,1551,1554,1557,1588,1594,1596,1657,1660,1691],[692,693,694],"p",{},"给你的 AI 代理一个 URL 和创意方向。它会捕获网站、提取品牌识别、编写脚本和故事板、生成配音、构建动画合成，并交付可渲染的视频。",[696,697,702],"pre",{"className":698,"code":700,"language":701},[699],"language-text","\"Create a 20-second product launch video from https:\u002F\u002Flinear.app.\nMake it feel like an Apple keynote announcement.\"\n","text",[703,704,700],"code",{"__ignoreMap":705},"",[707,708,15],"h2",{"id":15},[710,711,713],"h3",{"id":712},"安装-skills","安装 skills",[692,715,716],{},"Skills 教会你的 AI 代理如何捕获网站和创建 HyperFrames 合成。安装一次——跨会话持续存在。",[696,718,722],{"className":719,"code":720,"language":721,"meta":705,"style":705},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx skills add heygen-com\u002Fhyperframes\n","bash",[703,723,724],{"__ignoreMap":705},[725,726,729,733,737,740],"span",{"class":727,"line":728},"line",1,[725,730,732],{"class":731},"sBMFI","npx",[725,734,736],{"class":735},"sfazB"," skills",[725,738,739],{"class":735}," add",[725,741,742],{"class":735}," heygen-com\u002Fhyperframes\n",[692,744,745,746,753,754,753,759,764,765,770],{},"适用于 ",[747,748,752],"a",{"href":749,"rel":750},"https:\u002F\u002Fclaude.ai\u002Fclaude-code",[751],"nofollow","Claude Code","、",[747,755,758],{"href":756,"rel":757},"https:\u002F\u002Fcursor.sh",[751],"Cursor",[747,760,763],{"href":761,"rel":762},"https:\u002F\u002Fgithub.com\u002Fgoogle-gemini\u002Fgemini-cli",[751],"Gemini CLI"," 和 ",[747,766,769],{"href":767,"rel":768},"https:\u002F\u002Fgithub.com\u002Fopenai\u002Fcodex",[751],"Codex CLI","。",[710,772,773],{"id":773},"提示你的代理",[692,775,776],{},"在任意目录中打开你的代理并描述你想要的视频：",[696,778,781],{"className":779,"code":780,"language":701},[699],"Create a 25-second product launch video from https:\u002F\u002Fexample.com. Bold, cinematic, dark theme energy.\n",[703,782,780],{"__ignoreMap":705},[692,784,785],{},"代理在看到 URL 和视频请求时加载 skill，并运行完整流水线——采集、设计、脚本、故事板、配音、构建、验证。",[787,788,789,796],"blockquote",{},[692,790,791,792],{},"ℹ️ ",[793,794,795],"strong",{},"Note",[692,797,798],{},"代理在看到 URL 和视频请求时也会自动触发此 skill。",[710,800,801],{"id":801},"预览",[696,803,805],{"className":719,"code":804,"language":721,"meta":705,"style":705},"npx hyperframes preview\n",[703,806,807],{"__ignoreMap":705},[725,808,809,811,814],{"class":727,"line":728},[725,810,732],{"class":731},[725,812,813],{"class":735}," hyperframes",[725,815,816],{"class":735}," preview\n",[692,818,819],{},"在浏览器中打开视频。编辑自动重新加载。",[710,821,823],{"id":822},"渲染为-mp4","渲染为 MP4",[696,825,827],{"className":719,"code":826,"language":721,"meta":705,"style":705},"npx hyperframes render --output my-video.mp4\n",[703,828,829],{"__ignoreMap":705},[725,830,831,833,835,838,841],{"class":727,"line":728},[725,832,732],{"class":731},[725,834,813],{"class":735},[725,836,837],{"class":735}," render",[725,839,840],{"class":735}," --output",[725,842,843],{"class":735}," my-video.mp4\n",[696,845,848],{"className":846,"code":847,"language":701},[699],"✓ Captured 750 frames in 12.4s\n✓ Encoded to my-video.mp4 (25.0s, 1920×1080, 6.8MB)\n",[703,849,847],{"__ignoreMap":705},[787,851,852,856],{},[692,853,791,854],{},[793,855,795],{},[692,857,858,859,862,863,867],{},"你不需要手动运行 ",[703,860,861],{},"npx hyperframes capture","——skill 会指示代理在第一步进行采集。采集命令在",[747,864,866],{"href":865},"#capture-command","下方","有高级用法文档。",[707,869,870],{"id":870},"流水线如何工作",[692,872,873,874,877],{},"Skill 遵循 ",[747,875,876],{"href":65},"Hyperframes 流水线","：七个步骤，每个步骤产生一个命名产物供下一步使用。",[879,880,881,897],"table",{},[882,883,884],"thead",{},[885,886,887,891,894],"tr",{},[888,889,890],"th",{},"步骤",[888,892,893],{},"输出",[888,895,896],{},"操作",[898,899,900,916,931,946,961,980,995],"tbody",{},[885,901,902,908,913],{},[903,904,905],"td",{},[793,906,907],{},"采集",[903,909,910],{},[703,911,912],{},"capture\u002F",[903,914,915],{},"提取截图、设计令牌、字体、素材、动画",[885,917,918,923,928],{},[903,919,920],{},[793,921,922],{},"设计",[903,924,925],{},[703,926,927],{},"DESIGN.md",[903,929,930],{},"品牌参考——颜色、字体、注意事项",[885,932,933,938,943],{},[903,934,935],{},[793,936,937],{},"脚本",[903,939,940],{},[703,941,942],{},"SCRIPT.md",[903,944,945],{},"包含开头钩子、故事、证据、CTA 的旁白文本",[885,947,948,953,958],{},[903,949,950],{},[793,951,952],{},"故事板",[903,954,955],{},[703,956,957],{},"STORYBOARD.md",[903,959,960],{},"逐拍创意方向——氛围、素材、动画、过渡",[885,962,963,968,977],{},[903,964,965],{},[793,966,967],{},"配音 + 时序",[903,969,970,973,974],{},[703,971,972],{},"narration.wav"," + ",[703,975,976],{},"transcript.json",[903,978,979],{},"带词级时间戳的 TTS 音频",[885,981,982,987,992],{},[903,983,984],{},[793,985,986],{},"构建",[903,988,989],{},[703,990,991],{},"compositions\u002F*.html",[903,993,994],{},"动画 HTML 合成，每个拍一个",[885,996,997,1002,1005],{},[903,998,999],{},[793,1000,1001],{},"验证",[903,1003,1004],{},"快照 PNG",[903,1006,1007],{},"交付前的视觉验证",[692,1009,1010,1011,1014],{},"每个步骤的详细说明、每个生成文件的内容以及如何在不重新运行整个流水线的情况下迭代，请参见",[747,1012,1013],{"href":65},"流水线指南","。此结构对任何 Hyperframes 项目都有用，不仅仅是网站采集。",[707,1016,1017],{"id":1017},"视频类型",[692,1019,1020],{},"提示词决定格式。包含时长和创意方向：",[879,1022,1023,1035],{},[882,1024,1025],{},[885,1026,1027,1030,1033],{},[888,1028,1029],{},"类型",[888,1031,1032],{},"时长",[888,1034,23],{},[898,1036,1037,1051,1064,1077,1090,1103],{},[885,1038,1039,1042,1045],{},[903,1040,1041],{},"社交广告",[903,1043,1044],{},"10-15s",[903,1046,1047],{},[1048,1049,1050],"em",{},"\"15 秒 Instagram 轮播。充满活力，快节奏剪辑。\"",[885,1052,1053,1056,1059],{},[903,1054,1055],{},"产品发布",[903,1057,1058],{},"20-30s",[903,1060,1061],{},[1048,1062,1063],{},"\"25 秒产品发布。Apple 发布会风格。\"",[885,1065,1066,1069,1072],{},[903,1067,1068],{},"产品导览",[903,1070,1071],{},"30-60s",[903,1073,1074],{},[1048,1075,1076],{},"\"45 秒导览，展示前 3 个功能。\"",[885,1078,1079,1082,1085],{},[903,1080,1081],{},"品牌宣传",[903,1083,1084],{},"15-30s",[903,1086,1087],{},[1048,1088,1089],{},"\"20 秒品牌视频。展示设计理念。\"",[885,1091,1092,1095,1098],{},[903,1093,1094],{},"功能公告",[903,1096,1097],{},"15-25s",[903,1099,1100],{},[1048,1101,1102],{},"\"功能公告，突出新的 AI 代理。\"",[885,1104,1105,1108,1111],{},[903,1106,1107],{},"预告片",[903,1109,1110],{},"8-15s",[903,1112,1113],{},[1048,1114,1115],{},"\"10 秒预告片。超级极简。只有钩子。\"",[787,1117,1118,1124],{},[692,1119,1120,1121],{},"💡 ",[793,1122,1123],{},"Tip",[692,1125,1126,1127,1130,1131,1134],{},"创意方向比格式更重要。",[1048,1128,1129],{},"\"俏皮、手工感\""," 或 ",[1048,1132,1133],{},"\"暗色、面向开发者、展示代码\""," 会塑造故事板并驱动代理做出的每个视觉决策。",[707,1136,1138],{"id":1137},"通过-gemini-vision-增强采集","通过 Gemini Vision 增强采集",[692,1140,1141,1142,1147],{},"默认情况下，采集使用 DOM 上下文描述素材——alt 文本、附近标题、CSS 类。添加 ",[747,1143,1146],{"href":1144,"rel":1145},"https:\u002F\u002Faistudio.google.com\u002Fapikey",[751],"Gemini API 密钥","可获得使用视觉的更丰富的 AI 驱动描述。",[692,1149,1150,1151,1154],{},"在项目根目录创建 ",[703,1152,1153],{},".env"," 文件：",[696,1156,1158],{"className":719,"code":1157,"language":721,"meta":705,"style":705},"echo \"GEMINI_API_KEY=your-key-here\" > .env\n",[703,1159,1160],{"__ignoreMap":705},[725,1161,1162,1166,1170,1173,1176,1179],{"class":727,"line":728},[725,1163,1165],{"class":1164},"s2Zo4","echo",[725,1167,1169],{"class":1168},"sMK4o"," \"",[725,1171,1172],{"class":735},"GEMINI_API_KEY=your-key-here",[725,1174,1175],{"class":1168},"\"",[725,1177,1178],{"class":1168}," >",[725,1180,1181],{"class":735}," .env\n",[710,1183,1185],{"id":1184},"不使用-gemini","不使用 Gemini",[696,1187,1190],{"className":1188,"code":1189,"language":701},[699],"- hero-bg.png — 582KB, section: \"Hero\", above fold\n",[703,1191,1189],{"__ignoreMap":705},[692,1193,1194],{},"代理知道文件存在及其在页面上的位置，但不知道它长什么样。",[710,1196,1198],{"id":1197},"使用-gemini","使用 Gemini",[696,1200,1203],{"className":1201,"code":1202,"language":701},[699],"- hero-bg.png — 582KB, A gradient wave in purple and blue sweeps\nacross a dark background, creating an aurora-like effect.\n",[703,1204,1202],{"__ignoreMap":705},[692,1206,1207],{},"代理知道图片实际显示的内容，从而在故事板中做出更好的创意决策。",[879,1209,1210,1223],{},[882,1211,1212],{},[885,1213,1214,1217,1220],{},[888,1215,1216],{},"层级",[888,1218,1219],{},"速率限制",[888,1221,1222],{},"每张图片费用",[898,1224,1225,1235],{},[885,1226,1227,1230,1233],{},[903,1228,1229],{},"免费",[903,1231,1232],{},"5 RPM",[903,1234,1229],{},[885,1236,1237,1240,1243],{},[903,1238,1239],{},"付费",[903,1241,1242],{},"2,000 RPM",[903,1244,1245],{},"约 $0.001",[692,1247,1248,1249,770],{},"典型包含 40 张图片的采集在付费层费用约为 ",[793,1250,1251],{},"$0.04",[707,1253,1254],{"id":1254},"采集命令",[692,1256,1257],{},"Skill 自动运行采集，但你可以直接运行它用于预缓存、调试或将数据用于视频制作之外。",[696,1259,1261],{"className":719,"code":1260,"language":721,"meta":705,"style":705},"npx hyperframes capture https:\u002F\u002Fstripe.com\n",[703,1262,1263],{"__ignoreMap":705},[725,1264,1265,1267,1269,1272],{"class":727,"line":728},[725,1266,732],{"class":731},[725,1268,813],{"class":735},[725,1270,1271],{"class":735}," capture",[725,1273,1274],{"class":735}," https:\u002F\u002Fstripe.com\n",[696,1276,1279],{"className":1277,"code":1278,"language":701},[699],"◇  Captured Stripe | Financial Infrastructure → captures\u002Fstripe-com\n\nScreenshots: 12\nAssets: 45\nSections: 15\nFonts: sohne-var\n",[703,1280,1278],{"__ignoreMap":705},[879,1282,1283,1296],{},[882,1284,1285],{},[885,1286,1287,1290,1293],{},[888,1288,1289],{},"标志",[888,1291,1292],{},"默认值",[888,1294,1295],{},"描述",[898,1297,1298,1313,1328,1343,1358],{},[885,1299,1300,1305,1310],{},[903,1301,1302],{},[703,1303,1304],{},"-o, --output",[903,1306,1307],{},[703,1308,1309],{},"captures\u002F\u003Chostname>",[903,1311,1312],{},"输出目录",[885,1314,1315,1320,1325],{},[903,1316,1317],{},[703,1318,1319],{},"--timeout",[903,1321,1322],{},[703,1323,1324],{},"120000",[903,1326,1327],{},"页面加载超时（毫秒）",[885,1329,1330,1335,1340],{},[903,1331,1332],{},[703,1333,1334],{},"--skip-assets",[903,1336,1337],{},[703,1338,1339],{},"false",[903,1341,1342],{},"跳过下载图片和字体",[885,1344,1345,1350,1355],{},[903,1346,1347],{},[703,1348,1349],{},"--max-screenshots",[903,1351,1352],{},[703,1353,1354],{},"24",[903,1356,1357],{},"最大截图数量",[885,1359,1360,1365,1369],{},[903,1361,1362],{},[703,1363,1364],{},"--json",[903,1366,1367],{},[703,1368,1339],{},[903,1370,1371],{},"输出结构化 JSON 供程序化使用",[710,1373,1374],{"id":1374},"采集了什么",[879,1376,1377,1385],{},[882,1378,1379],{},[885,1380,1381,1383],{},[888,1382,513],{},[888,1384,1295],{},[898,1386,1387,1397,1407,1417,1427,1437,1447,1456],{},[885,1388,1389,1394],{},[903,1390,1391],{},[793,1392,1393],{},"截图",[903,1395,1396],{},"每个滚动深度的视口捕获——基于页面高度的动态数量",[885,1398,1399,1404],{},[903,1400,1401],{},[793,1402,1403],{},"颜色",[903,1405,1406],{},"像素采样的主色 + 计算样式，包括 oklch\u002Flab 转换",[885,1408,1409,1414],{},[903,1410,1411],{},[793,1412,1413],{},"字体",[903,1415,1416],{},"CSS 字体族 + 下载的 woff2 文件",[885,1418,1419,1424],{},[903,1420,1421],{},[793,1422,1423],{},"素材",[903,1425,1426],{},"带语义名称的图片、SVG、Lottie 动画、视频预览",[885,1428,1429,1434],{},[903,1430,1431],{},[793,1432,1433],{},"文本",[903,1435,1436],{},"DOM 顺序中的所有可见文本",[885,1438,1439,1444],{},[903,1440,1441],{},[793,1442,1443],{},"动画",[903,1445,1446],{},"Web Animations API、滚动触发动画、WebGL 着色器",[885,1448,1449,1453],{},[903,1450,1451],{},[793,1452,585],{},[903,1454,1455],{},"带标题、类型、背景颜色的页面结构",[885,1457,1458,1463],{},[903,1459,1460],{},[793,1461,1462],{},"CTA",[903,1464,1465],{},"通过类名和文本模式检测到的按钮和链接",[707,1467,1468],{"id":1468},"快照命令",[692,1470,1471],{},"从构建的视频中捕获关键帧为 PNG——无需完整渲染即可验证合成：",[696,1473,1475],{"className":719,"code":1474,"language":721,"meta":705,"style":705},"npx hyperframes snapshot my-project --at 2.9,10.4,18.7\n",[703,1476,1477],{"__ignoreMap":705},[725,1478,1479,1481,1483,1486,1489,1492],{"class":727,"line":728},[725,1480,732],{"class":731},[725,1482,813],{"class":735},[725,1484,1485],{"class":735}," snapshot",[725,1487,1488],{"class":735}," my-project",[725,1490,1491],{"class":735}," --at",[725,1493,1494],{"class":735}," 2.9,10.4,18.7\n",[879,1496,1497,1507],{},[882,1498,1499],{},[885,1500,1501,1503,1505],{},[888,1502,1289],{},[888,1504,1292],{},[888,1506,1295],{},[898,1508,1509,1524,1537],{},[885,1510,1511,1516,1521],{},[903,1512,1513],{},[703,1514,1515],{},"--frames",[903,1517,1518],{},[703,1519,1520],{},"5",[903,1522,1523],{},"均匀间隔的帧数",[885,1525,1526,1531,1534],{},[903,1527,1528],{},[703,1529,1530],{},"--at",[903,1532,1533],{},"—",[903,1535,1536],{},"以逗号分隔的时间戳（秒）",[885,1538,1539,1543,1548],{},[903,1540,1541],{},[703,1542,1319],{},[903,1544,1545],{},[703,1546,1547],{},"5000",[903,1549,1550],{},"等待运行时初始化的毫秒数",[707,1552,1553],{"id":1553},"迭代",[692,1555,1556],{},"你不需要重新运行整个流水线来进行更改：",[1558,1559,1560,1570,1580],"ul",{},[1561,1562,1563,1566,1567,1569],"li",{},[793,1564,1565],{},"编辑故事板","——",[703,1568,957],{}," 是创意北极星。更改一个拍的氛围或素材，然后要求代理仅重建该拍。",[1561,1571,1572,1575,1576,1579],{},[793,1573,1574],{},"编辑合成","——直接打开 ",[703,1577,1578],{},"compositions\u002Fbeat-3-proof.html"," 并调整动画、颜色或布局。",[1561,1581,1582,1566,1585],{},[793,1583,1584],{},"重建一个拍",[1048,1586,1587],{},"\"重建拍 2，更有活力。使用产品截图作为全出血背景。\"",[692,1589,1590,1591,770],{},"更多重新进入模式请参见",[747,1592,1013],{"href":1593},"\u002Fguides\u002Fpipeline#%E8%BF%AD%E4%BB%A3",[707,1595,136],{"id":136},[1597,1598,1599,1600,1623,1626,1633,1636,1650],"accordion-group",{},"\n对于使用 Cloudflare 或重客户端渲染的站点，增加超时：\n",[696,1601,1603],{"className":719,"code":1602,"language":721,"meta":705,"style":705},"npx hyperframes capture https:\u002F\u002Fexample.com --timeout 180000\n",[703,1604,1605],{"__ignoreMap":705},[725,1606,1607,1609,1611,1613,1616,1619],{"class":727,"line":728},[725,1608,732],{"class":731},[725,1610,813],{"class":735},[725,1612,1271],{"class":735},[725,1614,1615],{"class":735}," https:\u002F\u002Fexample.com",[725,1617,1618],{"class":735}," --timeout",[725,1620,1622],{"class":1621},"sbssI"," 180000\n",[692,1624,1625],{},"使用 Framer 等框架的站点通过 IntersectionObserver 延迟加载图片。采集会滚动页面触发加载，但非常长的页面可能会遗漏底部的图片。添加 Gemini 密钥可以改善采集素材的描述，但不会增加数量。",[692,1627,1628,1629,1632],{},"采集使用像素采样结合 DOM 计算样式。暗色站点应在调色板中显示暗色。检查 ",[703,1630,1631],{},"captures\u002F\u003Cname>\u002Fscreenshots\u002F"," 中的滚动截图查看采集实际看到的内容。",[692,1634,1635],{},"验证 skills 已安装：",[696,1637,1638],{"className":719,"code":720,"language":721,"meta":705,"style":705},[703,1639,1640],{"__ignoreMap":705},[725,1641,1642,1644,1646,1648],{"class":727,"line":728},[725,1643,732],{"class":731},[725,1645,736],{"class":735},[725,1647,739],{"class":735},[725,1649,742],{"class":735},[692,1651,1652,1653,1656],{},"在提示词开头加上 ",[1048,1654,1655],{},"\"Use the \u002Fwebsite-to-hyperframes skill\""," 以获得最可靠的结果。代理在看到 URL 和视频请求时也会自动发现它。",[707,1658,1659],{"id":1659},"下一步",[1558,1661,1662,1670,1677,1684],{},[1561,1663,1664,1669],{},[793,1665,1666],{},[747,1667,1668],{"href":65},"流水线","\n此工作流遵循的规范 7 步结构。",[1561,1671,1672,1676],{},[793,1673,1674],{},[747,1675,15],{"href":16},"\nHyperFrames 新手？从这里开始。",[1561,1678,1679,1683],{},[793,1680,1681],{},[747,1682,100],{"href":101},"\n合成中使用的动画模式。",[1561,1685,1686,1690],{},[793,1687,1688],{},[747,1689,104],{"href":105},"\n渲染为 MP4、MOV 或 WebM。",[1692,1693,1694],"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 .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":705,"searchDepth":728,"depth":1696,"links":1697},2,[1698,1705,1706,1707,1711,1714,1715,1716,1717],{"id":15,"depth":1696,"text":15,"children":1699},[1700,1702,1703,1704],{"id":712,"depth":1701,"text":713},3,{"id":773,"depth":1701,"text":773},{"id":801,"depth":1701,"text":801},{"id":822,"depth":1701,"text":823},{"id":870,"depth":1696,"text":870},{"id":1017,"depth":1696,"text":1017},{"id":1137,"depth":1696,"text":1138,"children":1708},[1709,1710],{"id":1184,"depth":1701,"text":1185},{"id":1197,"depth":1701,"text":1198},{"id":1254,"depth":1696,"text":1254,"children":1712},[1713],{"id":1374,"depth":1701,"text":1374},{"id":1468,"depth":1696,"text":1468},{"id":1553,"depth":1696,"text":1553},{"id":136,"depth":1696,"text":136},{"id":1659,"depth":1696,"text":1659},"捕获任何网站并通过一条提示词将其转化为生产级视频。","md",null,{},true,{"title":72,"description":1718},"V8-vx5uAot0zh9HpkgveyJulvyro6uAYLhT4afmcjdg",[1726,1728],{"title":68,"path":69,"stem":70,"description":1727,"children":-1},"将实时 HTML 渲染为 WebGL 纹理——对任何 DOM 内容使用 GPU 着色器、3D 几何体和电影效果。",{"title":76,"path":77,"stem":78,"description":1729,"children":-1},"在 Google Antigravity 中设置 HyperFrames——安装 skills、创作合成并从 agent 优先的 IDE 渲染视频。",1780322247474]