[{"data":1,"prerenderedAt":1906},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Fprompting":686,"\u002Fguides\u002Fprompting-surround":1901},[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":92,"body":688,"description":1894,"extension":1895,"links":1896,"meta":1897,"navigation":1898,"path":93,"seo":1899,"stem":94,"__hash__":1900},"docs\u002F03.guides\u002F08.prompting.md",{"type":689,"value":690,"toc":1870},"minimark",[691,703,707,710,739,747,861,876,879,894,902,913,916,919,924,927,935,946,949,977,981,984,998,1005,1013,1020,1023,1026,1029,1034,1039,1044,1049,1058,1061,1064,1067,1070,1073,1168,1174,1177,1180,1270,1276,1279,1285,1288,1291,1340,1343,1349,1352,1355,1424,1430,1439,1442,1445,1526,1532,1535,1538,1591,1597,1600,1644,1650,1653,1656,1739,1750,1753,1756,1799,1802,1832,1835,1866],[692,693,694,695,702],"p",{},"Hyperframes 专为 AI 代理构建——合成是纯 HTML，CLI 是非交互式的，框架提供 ",[696,697,701],"a",{"href":698,"rel":699},"https:\u002F\u002Fgithub.com\u002Fvercel-labs\u002Fskills",[700],"nofollow","skills"," 来教会代理文档无法单独覆盖的模式。本指南展示在安装 skills 后如何有效提示代理——改变输出的词汇、节省时间的迭代模式，以及防止出错的规则。",[704,705,706],"h2",{"id":706},"一次性设置",[692,708,709],{},"在你的项目中安装 skills（或为你的代理全局安装）：",[711,712,717],"pre",{"className":713,"code":714,"language":715,"meta":716,"style":716},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx skills add heygen-com\u002Fhyperframes\n","bash","",[718,719,720],"code",{"__ignoreMap":716},[721,722,725,729,733,736],"span",{"class":723,"line":724},"line",1,[721,726,728],{"class":727},"sBMFI","npx",[721,730,732],{"class":731},"sfazB"," skills",[721,734,735],{"class":731}," add",[721,737,738],{"class":731}," heygen-com\u002Fhyperframes\n",[692,740,741,742,746],{},"在 Claude Code 中，安装后重启会话。Skills 注册为",[743,744,745],"strong",{},"斜杠命令","：",[748,749,750,762],"table",{},[751,752,753],"thead",{},[754,755,756,759],"tr",{},[757,758,745],"th",{},[757,760,761],{},"加载内容",[763,764,765,776,805,824,838,851],"tbody",{},[754,766,767,773],{},[768,769,770],"td",{},[718,771,772],{},"\u002Fhyperframes",[768,774,775],{},"合成编写——HTML 结构、时序、字幕、TTS、过渡",[754,777,778,783],{},[768,779,780],{},[718,781,782],{},"\u002Fhyperframes-cli",[768,784,785,786,789,790,789,793,789,796,789,799,789,802],{},"开发循环 CLI——",[718,787,788],{},"init","、",[718,791,792],{},"lint",[718,794,795],{},"inspect",[718,797,798],{},"preview",[718,800,801],{},"render",[718,803,804],{},"doctor",[754,806,807,812],{},[768,808,809],{},[718,810,811],{},"\u002Fhyperframes-media",[768,813,814,815,789,818,789,821],{},"素材预处理——",[718,816,817],{},"tts",[718,819,820],{},"transcribe",[718,822,823],{},"remove-background",[754,825,826,831],{},[768,827,828],{},[718,829,830],{},"\u002Fhyperframes-registry",[768,832,833,834,837],{},"通过 ",[718,835,836],{},"hyperframes add"," 安装块和组件",[754,839,840,845],{},[768,841,842],{},[718,843,844],{},"\u002Fwebsite-to-hyperframes",[768,846,847,848],{},"采集 URL 并将其转化为视频；运行完整的 ",[696,849,850],{"href":65},"Hyperframes 流水线",[754,852,853,858],{},[768,854,855],{},[718,856,857],{},"\u002Fgsap",[768,859,860],{},"GSAP 动画 API——时间轴、缓动、ScrollTrigger、插件",[862,863,864,870],"blockquote",{},[692,865,866,867],{},"💡 ",[743,868,869],{},"Tip",[692,871,872,873,875],{},"始终在 Hyperframes 提示词前加上 ",[718,874,772],{},"（或以其他方式为非 Claude 代理调用 skill）。这会显式加载 skill 上下文，使代理首次就能正确理解合成规则，而不是依赖它对网页视频的记忆。",[704,877,84],{"id":878},"claude-design",[692,880,881,882,889,890,893],{},"Claude Design 使用不同的设置。从 GitHub 下载 ",[696,883,886],{"href":884,"rel":885},"https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes\u002Fblob\u002Fmain\u002Fdocs\u002Fguides\u002Fclaude-design-hyperframes.md",[700],[718,887,888],{},"claude-design-hyperframes.md","（点击 ↓ 按钮），然后",[743,891,892],{},"附加到你的聊天中","（不要粘贴 URL——文件附件产生更好的输出）：",[711,895,900],{"className":896,"code":898,"language":899,"meta":716},[897],"language-text","Use the attached skill. 25-second LinkedIn video for my startup.\n\nProblem: Sales teams waste 3 hours\u002Fday on manual CRM updates.\nSolution: AutoCRM — AI that logs every call, email, and meeting.\nTraction: 200+ teams, $1.2M ARR, 18% MoM growth.\nCTA: autocrmhq.com\n","text",[718,901,898],{"__ignoreMap":716},[692,903,904,905,908,909,912],{},"Claude Design 生成有效的初稿（品牌识别、场景内容、动画、过渡）。下载 ZIP 并在任何 AI 编程代理中精修，同时运行 ",[718,906,907],{},"npx hyperframes preview","。完整工作流请参见 ",[696,910,911],{"href":85},"Claude Design 指南","。",[704,914,915],{"id":915},"两种提示词模式",[692,917,918],{},"大多数成功的 Hyperframes 提示词属于以下两种模式之一。",[920,921,923],"h3",{"id":922},"冷启动描述视频","冷启动——描述视频",[692,925,926],{},"你从零开始告诉代理你想要什么。最适合你脑海中已有创意方向的全新工作。",[862,928,929],{},[692,930,931,932,934],{},"使用 ",[718,933,772],{},"，创建一个 10 秒的产品介绍，深色背景上带淡入标题和微妙的背景音乐。",[862,936,937],{},[692,938,931,939,941,942,945],{},[718,940,772],{},"，制作一个 9:16 TikTok 风格的钩子视频，关于",[721,943,944],{},"主题","，带弹跳字幕与 TTS 旁白同步。",[692,947,948],{},"冷启动提示词在你指定以下内容时效果最好：",[950,951,952,959,965,971],"ul",{},[953,954,955,958],"li",{},[743,956,957],{},"时长","（如\"10 秒\"、\"30s\"、\"5 个场景各 3 秒\"）",[953,960,961,964],{},[743,962,963],{},"宽高比","（\"16:9\"、\"9:16 竖屏\"、\"1:1 方形\"）——否则默认为 1920x1080",[953,966,967,970],{},[743,968,969],{},"氛围\u002F风格","（\"极简瑞士网格\"、\"温暖颗粒感模拟\"、\"高能量社交\"）",[953,972,973,976],{},[743,974,975],{},"关键元素","（标题、底部字幕条、字幕、背景视频、音乐）",[920,978,980],{"id":979},"热启动将上下文转化为视频","热启动——将上下文转化为视频",[692,982,983],{},"你给代理一些可用的东西——URL、文档、CSV、转录文本——然后要求它将这些合成为视频。这是 Hyperframes 大放异彩的地方，因为代理在一次流程中完成研究\u002F总结步骤_和_制作步骤。",[862,985,986],{},[692,987,988,989,994,995,997],{},"看看这个 GitHub 仓库 ",[696,990,993],{"href":991,"rel":992},"https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes%EF%BC%8C%E4%BD%BF%E7%94%A8",[700],"https:\u002F\u002Fgithub.com\u002Fheygen-com\u002Fhyperframes，使用"," ",[718,996,772],{}," 向我解释其用途和架构。",[862,999,1000],{},[692,1001,931,1002,1004],{},[718,1003,772],{}," 将附加的 PDF 总结为 45 秒的宣传视频。",[862,1006,1007],{},[692,1008,1009,1010,1012],{},"阅读此更新日志，使用 ",[718,1011,772],{}," 将前三项变更转化为 30 秒的发布公告视频。",[862,1014,1015],{},[692,1016,931,1017,1019],{},[718,1018,772],{}," 将此 CSV 转化为动画柱状图竞赛。",[692,1021,1022],{},"热启动提示词产生更丰富、更有依据的视频，因为代理是针对_具体事物_进行创作，而不是凭空编造文案。",[704,1024,1025],{"id":1025},"迭代",[692,1027,1028],{},"Hyperframes 是对话式的。在首次渲染后，像与视频编辑交谈一样与代理对话——不要从头重新提示：",[862,1030,1031],{},[692,1032,1033],{},"标题放大两倍。",[862,1035,1036],{},[692,1037,1038],{},"切换到深色模式。",[862,1040,1041],{},[692,1042,1043],{},"在结尾添加淡出，在 0:03 添加底部字幕条，带上我的名字和头衔。",[862,1045,1046],{},[692,1047,1048],{},"字幕太小并且与底部字幕条重叠。把它们上移并缩小。",[862,1050,1051],{},[692,1052,1053,1054,1057],{},"用 ",[718,1055,1056],{},"assets\u002Ftrack.mp3"," 替换背景音乐。",[692,1059,1060],{},"代理已经有打开的合成和加载的 skills——小的有针对性的编辑比冗长的重新描述产生更好的结果。",[704,1062,1063],{"id":1063},"改变输出的词汇",[692,1065,1066],{},"Skills 将自然语言形容词映射到具体的框架设置。使用正确的词语就能得到正确的结果，无需指定技术细节。",[920,1068,1069],{"id":1069},"动效与缓动",[692,1071,1072],{},"描述运动应该如何_感觉_，代理会匹配相应的 GSAP 缓动：",[748,1074,1075,1088],{},[751,1076,1077],{},[754,1078,1079,1082,1085],{},[757,1080,1081],{},"说这个词",[757,1083,1084],{},"代理使用",[757,1086,1087],{},"感觉像",[763,1089,1090,1103,1116,1129,1142,1155],{},[754,1091,1092,1095,1100],{},[768,1093,1094],{},"smooth（平滑）",[768,1096,1097],{},[718,1098,1099],{},"power2.out",[768,1101,1102],{},"自然减速",[754,1104,1105,1108,1113],{},[768,1106,1107],{},"snappy（干脆）",[768,1109,1110],{},[718,1111,1112],{},"power4.out",[768,1114,1115],{},"快速果断",[754,1117,1118,1121,1126],{},[768,1119,1120],{},"bouncy（弹跳）",[768,1122,1123],{},[718,1124,1125],{},"back.out",[768,1127,1128],{},"先过冲再稳定",[754,1130,1131,1134,1139],{},[768,1132,1133],{},"springy（弹簧）",[768,1135,1136],{},[718,1137,1138],{},"elastic.out",[768,1140,1141],{},"震荡归位",[754,1143,1144,1147,1152],{},[768,1145,1146],{},"dramatic（戏剧性）",[768,1148,1149],{},[718,1150,1151],{},"expo.out",[768,1153,1154],{},"快速启动，长距离滑行",[754,1156,1157,1160,1165],{},[768,1158,1159],{},"dreamy（梦幻）",[768,1161,1162],{},[718,1163,1164],{},"sine.inOut",[768,1166,1167],{},"缓慢，对称",[692,1169,1170,1173],{},[743,1171,1172],{},"时长速记："," 快速（0.2s）= 活力，中速（0.4s）= 专业，慢速（0.6s）= 奢华，极慢（1-2s）= 电影感。",[920,1175,1176],{"id":1176},"字幕风格",[692,1178,1179],{},"描述字幕的_能量_，代理会选择匹配的字体、大小和动画：",[748,1181,1182,1198],{},[751,1183,1184],{},[754,1185,1186,1189,1192,1195],{},[757,1187,1188],{},"风格",[757,1190,1191],{},"字体",[757,1193,1194],{},"动画",[757,1196,1197],{},"大小范围",[763,1199,1200,1214,1228,1242,1256],{},[754,1201,1202,1205,1208,1211],{},[768,1203,1204],{},"Hype（炒作）",[768,1206,1207],{},"粗体字体",[768,1209,1210],{},"缩放弹出",[768,1212,1213],{},"72–96px",[754,1215,1216,1219,1222,1225],{},[768,1217,1218],{},"Corporate（商务）",[768,1220,1221],{},"干净无衬线",[768,1223,1224],{},"淡入 + 滑动",[768,1226,1227],{},"56–72px",[754,1229,1230,1233,1236,1239],{},[768,1231,1232],{},"Tutorial（教程）",[768,1234,1235],{},"等宽字体",[768,1237,1238],{},"打字机效果",[768,1240,1241],{},"48–64px",[754,1243,1244,1247,1250,1253],{},[768,1245,1246],{},"Storytelling（叙事）",[768,1248,1249],{},"衬线字体",[768,1251,1252],{},"缓慢淡入",[768,1254,1255],{},"44–56px",[754,1257,1258,1261,1264,1267],{},[768,1259,1260],{},"Social（社交）",[768,1262,1263],{},"圆润、俏皮",[768,1265,1266],{},"弹跳",[768,1268,1269],{},"56–80px",[711,1271,1274],{"className":1272,"code":1273,"language":899},[897],"\"Hype-style captions with scale-pop\"\n\"Calm, elegant subtitles with slow fades\"\n\"Karaoke-style word highlighting\"\n",[718,1275,1273],{"__ignoreMap":716},[692,1277,1278],{},"逐字样式也可以：",[711,1280,1283],{"className":1281,"code":1282,"language":899},[897],"\"Make brand names larger with accent color\"\n\"Add bounce to emotional keywords\"\n\"Highlight numbers differently\"\n",[718,1284,1282],{"__ignoreMap":716},[920,1286,1287],{"id":1287},"过渡",[692,1289,1290],{},"每个多场景合成都受益于过渡。描述能量级别：",[748,1292,1293,1306],{},[751,1294,1295],{},[754,1296,1297,1300,1303],{},[757,1298,1299],{},"能量",[757,1301,1302],{},"CSS 选项",[757,1304,1305],{},"着色器选项",[763,1307,1308,1319,1329],{},[754,1309,1310,1313,1316],{},[768,1311,1312],{},"平静",[768,1314,1315],{},"模糊交叉淡入",[768,1317,1318],{},"交叉变形过渡",[754,1320,1321,1324,1327],{},[768,1322,1323],{},"中等",[768,1325,1326],{},"推动滑动",[768,1328,417],{},[754,1330,1331,1334,1337],{},[768,1332,1333],{},"高能",[768,1335,1336],{},"缩放穿越",[768,1338,1339],{},"故障、脊状燃烧",[692,1341,1342],{},"或按氛围描述：",[711,1344,1347],{"className":1345,"code":1346,"language":899},[897],"\"Warm transitions for this wellness brand\"\n\"Cold, clinical transitions for tech\"\n\"Playful bouncy transitions\"\n\"Dramatic zoom for the reveal\"\n",[718,1348,1346],{"__ignoreMap":716},[920,1350,1351],{"id":1351},"音频响应动画",[692,1353,1354],{},"将音频频率带映射到视觉属性。代理使用以下默认值：",[748,1356,1357,1370],{},[751,1358,1359],{},[754,1360,1361,1364,1367],{},[757,1362,1363],{},"音频带",[757,1365,1366],{},"映射到",[757,1368,1369],{},"视觉效果",[763,1371,1372,1385,1398,1411],{},[754,1373,1374,1377,1382],{},[768,1375,1376],{},"低音",[768,1378,1379],{},[718,1380,1381],{},"scale",[768,1383,1384],{},"跟随节拍脉冲",[754,1386,1387,1390,1395],{},[768,1388,1389],{},"高音",[768,1391,1392],{},[718,1393,1394],{},"glow",[768,1396,1397],{},"微光强度",[754,1399,1400,1403,1408],{},[768,1401,1402],{},"振幅",[768,1404,1405],{},[718,1406,1407],{},"opacity",[768,1409,1410],{},"呼吸感",[754,1412,1413,1416,1421],{},[768,1414,1415],{},"中音",[768,1417,1418],{},[718,1419,1420],{},"shape",[768,1422,1423],{},"变形",[711,1425,1428],{"className":1426,"code":1427,"language":899},[897],"\"Make the text pulse with the beat\"\n\"Add bass-driven scale to the logo\"\n\"Create glow that responds to treble\"\n",[718,1429,1427],{"__ignoreMap":716},[862,1431,1432,1436],{},[692,1433,866,1434],{},[743,1435,869],{},[692,1437,1438],{},"文本的音频响应效果保持微妙（3-6% 强度）。背景可以更大（10-30%）。",[920,1440,1441],{"id":1441},"马克笔高亮",[692,1443,1444],{},"手绘强调效果的文本：",[748,1446,1447,1459],{},[751,1448,1449],{},[754,1450,1451,1454,1456],{},[757,1452,1453],{},"模式",[757,1455,547],{},[757,1457,1458],{},"最适合",[763,1460,1461,1474,1487,1500,1513],{},[754,1462,1463,1468,1471],{},[768,1464,1465],{},[718,1466,1467],{},"highlight",[768,1469,1470],{},"马克笔扫过",[768,1472,1473],{},"关键词组",[754,1475,1476,1481,1484],{},[768,1477,1478],{},[718,1479,1480],{},"circle",[768,1482,1483],{},"手绘椭圆",[768,1485,1486],{},"单个词",[754,1488,1489,1494,1497],{},[768,1490,1491],{},[718,1492,1493],{},"burst",[768,1495,1496],{},"放射线",[768,1498,1499],{},"高潮时刻",[754,1501,1502,1507,1510],{},[768,1503,1504],{},[718,1505,1506],{},"scribble",[768,1508,1509],{},"混乱涂鸦",[768,1511,1512],{},"划掉文字",[754,1514,1515,1520,1523],{},[768,1516,1517],{},[718,1518,1519],{},"sketchout",[768,1521,1522],{},"矩形轮廓",[768,1524,1525],{},"标注",[711,1527,1530],{"className":1528,"code":1529,"language":899},[897],"\"Add a marker highlight sweep on 'revolutionary'\"\n\"Circle this keyword with hand-drawn effect\"\n\"Add burst lines around 'AMAZING'\"\n",[718,1531,1529],{"__ignoreMap":716},[920,1533,1534],{"id":1534},"文字转语音声音",[692,1536,1537],{},"TTS 通过 Kokoro 在本地运行（无需 API 密钥）。描述内容，代理会选择声音，或直接指定：",[748,1539,1540,1550],{},[751,1541,1542],{},[754,1543,1544,1547],{},[757,1545,1546],{},"内容类型",[757,1548,1549],{},"推荐声音",[763,1551,1552,1565,1578],{},[754,1553,1554,1557],{},[768,1555,1556],{},"产品演示",[768,1558,1559,789,1562],{},[718,1560,1561],{},"af_heart",[718,1563,1564],{},"af_nova",[754,1566,1567,1570],{},[768,1568,1569],{},"教程",[768,1571,1572,789,1575],{},[718,1573,1574],{},"am_adam",[718,1576,1577],{},"bf_emma",[754,1579,1580,1583],{},[768,1581,1582],{},"营销",[768,1584,1585,789,1588],{},[718,1586,1587],{},"af_sky",[718,1589,1590],{},"am_michael",[711,1592,1595],{"className":1593,"code":1594,"language":899},[897],"\"Generate narration for this script\"\n\"Create voiceover with a professional female voice\"\n\"Add TTS with British male voice at 1.1x speed\"\n",[718,1596,1594],{"__ignoreMap":716},[920,1598,1599],{"id":1599},"渲染质量",[748,1601,1602,1612],{},[751,1603,1604],{},[754,1605,1606,1609],{},[757,1607,1608],{},"质量",[757,1610,1611],{},"用途",[763,1613,1614,1624,1634],{},[754,1615,1616,1621],{},[768,1617,1618],{},[718,1619,1620],{},"draft",[768,1622,1623],{},"快速迭代",[754,1625,1626,1631],{},[768,1627,1628],{},[718,1629,1630],{},"standard",[768,1632,1633],{},"审查和反馈",[754,1635,1636,1641],{},[768,1637,1638],{},[718,1639,1640],{},"high",[768,1642,1643],{},"最终交付",[711,1645,1648],{"className":1646,"code":1647,"language":899},[897],"\"Quick draft render\"\n\"Render at high quality\"\n\"Export as transparent WebM\"\n",[718,1649,1647],{"__ignoreMap":716},[704,1651,1652],{"id":1652},"需要知道的规则",[692,1654,1655],{},"Skills 会自动执行这些规则，但如果你手动编辑合成或调试问题，以下是重要的规则：",[1657,1658,1659,1669,1682,1691,1708,1727,1733],"ol",{},[953,1660,1661,1668],{},[743,1662,1663,1664,1667],{},"在 ",[718,1665,1666],{},"window.__timelines"," 上注册所有时间轴","——渲染器无法定位它不知道的动画。",[953,1670,1671,1677,1678,1681],{},[743,1672,1673,1674],{},"视频元素必须是 ",[718,1675,1676],{},"muted","——音频放在单独的 ",[718,1679,1680],{},"\u003Caudio>"," 元素中以便渲染器混合。",[953,1683,1684,1690],{},[743,1685,1686,1687],{},"不使用 ",[718,1688,1689],{},"Math.random()","——随机值在每次渲染时产生不同帧，破坏确定性。如果需要伪随机值，使用种子 PRNG（如 mulberry32）。",[953,1692,1693,1696,1697,1700,1701,1704,1705,912],{},[743,1694,1695],{},"同步时间轴构建","——GSAP 时间轴设置期间不使用 ",[718,1698,1699],{},"async","\u002F",[718,1702,1703],{},"await"," 或 ",[718,1706,1707],{},"fetch()",[953,1709,1710,1716,1717,789,1720,1723,1724,912],{},[743,1711,1712,1713],{},"定时元素需要 ",[718,1714,1715],{},"class=\"clip\"","——加上 ",[718,1718,1719],{},"data-start",[718,1721,1722],{},"data-duration"," 和 ",[718,1725,1726],{},"data-track-index",[953,1728,1729,1732],{},[743,1730,1731],{},"为每个场景添加入场动画","——没有动画的元素在视频中会显得有问题。",[953,1734,1735,1738],{},[743,1736,1737],{},"在场景之间添加过渡","——合成视频中场景之间的跳切几乎总是无意的。",[862,1740,1741,1747],{},[692,1742,1743,1744],{},"⚠️ ",[743,1745,1746],{},"Warning",[692,1748,1749],{},"规则 1-5 是技术要求——违反会导致渲染不正确。规则 6-7 是最佳实践，skills 默认应用。你有理由时可以覆盖它们。",[704,1751,1752],{"id":1752},"反模式",[692,1754,1755],{},"导致摩擦（或错误输出）的做法：",[950,1757,1758,1765,1768,1779,1789],{},[953,1759,1760,1761,1764],{},"**不要要求 React \u002F Vue 组件。**Hyperframes 合成是带有 ",[718,1762,1763],{},"data-*"," 属性和 GSAP 时间轴的纯 HTML。要求\"给片头做一个 React 组件\"会迫使代理后续进行转换。",[953,1766,1767],{},"**不要要求 4K 或 60fps，除非你确实需要。**默认值（1920×1080、30fps）渲染快且效果好。更高的规格会显著减慢渲染速度。",[953,1769,1770,1771,1773,1774,789,1776,1778],{},"**不要跳过斜杠命令。**没有 ",[718,1772,772],{},"，代理可能猜测 HTML 视频惯例，而不是使用框架的实际规则（定时元素上的 ",[718,1775,1715],{},[718,1777,1666],{}," 注册等）。",[953,1780,1781,1782,1723,1785,1788],{},"**不要将长错误日志直接粘贴到提示词中而不提供上下文。**先运行 ",[718,1783,1784],{},"npx hyperframes lint",[718,1786,1787],{},"npx hyperframes validate","——lint 捕获结构问题，validate 捕获运行时错误（JS 异常、缺失素材、对比度问题）。",[953,1790,1791,1792,789,1795,1798],{},"**不要假设代理知道你的素材。**明确提及文件路径（",[718,1793,1794],{},"assets\u002Fintro.mp4",[718,1796,1797],{},"assets\u002Flogo.png","）——代理会检查现有内容，但提示能加快速度。",[704,1800,1801],{"id":1801},"推荐工作流",[1657,1803,1804,1810,1813,1818,1823,1826],{},[953,1805,1806,1809],{},[718,1807,1808],{},"npx hyperframes init my-video","——搭建项目（skills 自动安装）",[953,1811,1812],{},"在 Claude Code（或 Cursor \u002F Codex）中打开项目",[953,1814,931,1815,1817],{},[718,1816,772],{}," 和上述模式之一进行提示",[953,1819,1820,1822],{},[718,1821,907],{},"——在浏览器中观看代理编辑",[953,1824,1825],{},"使用小的有针对性的提示进行迭代",[953,1827,1828,1831],{},[718,1829,1830],{},"npx hyperframes render --output final.mp4","——满意后渲染",[704,1833,1834],{"id":1834},"下一步",[950,1836,1837,1844,1851,1858],{},[953,1838,1839,1843],{},[743,1840,1841],{},[696,1842,15],{"href":16},"\n构建并渲染你的第一个视频",[953,1845,1846,1850],{},[743,1847,1848],{},[696,1849,132],{"href":133},"\nLinter 无法捕获的陷阱",[953,1852,1853,1857],{},[743,1854,1855],{},[696,1856,100],{"href":101},"\n添加淡入、滑动、缩放和自定义动画",[953,1859,1860,1865],{},[743,1861,1862],{},[696,1863,1864],{"href":520},"素材目录","\n50+ 即用型块和组件",[1867,1868,1869],"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);}",{"title":716,"searchDepth":724,"depth":1871,"links":1872},2,[1873,1874,1875,1880,1881,1890,1891,1892,1893],{"id":706,"depth":1871,"text":706},{"id":878,"depth":1871,"text":84},{"id":915,"depth":1871,"text":915,"children":1876},[1877,1879],{"id":922,"depth":1878,"text":923},3,{"id":979,"depth":1878,"text":980},{"id":1025,"depth":1871,"text":1025},{"id":1063,"depth":1871,"text":1063,"children":1882},[1883,1884,1885,1886,1887,1888,1889],{"id":1069,"depth":1878,"text":1069},{"id":1176,"depth":1878,"text":1176},{"id":1287,"depth":1878,"text":1287},{"id":1351,"depth":1878,"text":1351},{"id":1441,"depth":1878,"text":1441},{"id":1534,"depth":1878,"text":1534},{"id":1599,"depth":1878,"text":1599},{"id":1652,"depth":1871,"text":1652},{"id":1752,"depth":1871,"text":1752},{"id":1801,"depth":1871,"text":1801},{"id":1834,"depth":1871,"text":1834},"如何提示 Claude Code、Cursor、Codex、Google Antigravity、GitHub Copilot CLI 和其他 AI 代理来编写 Hyperframes 合成——包含可直接复制粘贴的示例和词汇表。","md",null,{},true,{"title":92,"description":1894},"RKj8ZqJg0CiwEJMw-ASNQT1EqOTZTPVTQEY1IVz_uZo",[1902,1904],{"title":88,"path":89,"stem":90,"description":1903,"children":-1},"在 Open Design 中创建 HyperFrames 视频草稿——开源、自带 API 密钥的 Claude Design 替代方案——然后在任意 AI 编程代理中进行精修。",{"title":96,"path":97,"stem":98,"description":1905,"children":-1},"我们为什么构建 Hyperframes、它在实践中与 Remotion 有何不同，以及每个工具适合的场景。",1780322242388]