[{"data":1,"prerenderedAt":1970},["ShallowReactive",2],{"navigation":3,"\u002Fguides\u002Fhtml-in-canvas":686,"\u002Fguides\u002Fhtml-in-canvas-surround":1965},[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":68,"body":688,"description":1959,"extension":1960,"links":1961,"meta":1962,"navigation":946,"path":69,"seo":1963,"stem":70,"__hash__":1964},"docs\u002F03.guides\u002F02.html-in-canvas.md",{"type":689,"value":690,"toc":1951},"minimark",[691,700,749,753,775,999,1201,1204,1218,1248,1251,1254,1505,1508,1514,1733,1737,1740,1762,1765,1921,1923,1926,1945,1948],[692,693,694,695,699],"p",{},"HTML-in-Canvas API（",[696,697,698],"code",{},"drawElementImage","）让你以 GPU 速度将实时渲染的 DOM 元素直接捕获到 canvas 中。这意味着你可以获取任何 HTML——仪表板、表单、落地页、应用 UI——并在 WebGL 场景中将它们渲染为纹理，使用着色器、3D 变换和后处理效果。",[701,702,703,710,719,742],"blockquote",{},[692,704,705,706],{},"⚠️ ",[707,708,709],"strong",{},"Warning",[692,711,712,715,716,718],{},[707,713,714],{},"需要 Chrome 标志。"," ",[696,717,698],{}," API 是实验性的，必须手动启用：",[720,721,722,729,739],"ol",{},[723,724,725,726],"li",{},"在 Chrome 或 Brave 中打开 ",[696,727,728],{},"chrome:\u002F\u002Fflags\u002F#canvas-draw-element",[723,730,731,732,735,736],{},"将 ",[707,733,734],{},"CanvasDrawElement"," 设置为 ",[707,737,738],{},"Enabled",[723,740,741],{},"重启浏览器",[692,743,744,745,748],{},"HyperFrames 在渲染期间自动启用此标志（",[696,746,747],{},"--enable-features=CanvasDrawElement","），因此渲染后的视频无需手动设置即可工作。该标志仅在 Studio 中的实时预览时需要。",[750,751,752],"h2",{"id":752},"工作原理",[720,754,755,762,765,772],{},[723,756,757,758,761],{},"将 HTML 内容放在 ",[696,759,760],{},"\u003Ccanvas layoutsubtree>"," 元素内",[723,763,764],{},"浏览器将 HTML 子元素作为普通 DOM 渲染",[723,766,767,768,771],{},"调用 ",[696,769,770],{},"ctx.drawElementImage(element, x, y, w, h)"," 将渲染的像素捕获到 canvas 中",[723,773,774],{},"将 canvas 用作 Three.js 纹理，应用着色器，映射到 3D 几何体",[776,777,782],"pre",{"className":778,"code":779,"language":780,"meta":781,"style":781},"language-html shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u003C!-- 1. HTML 内容位于 canvas 内 -->\n\u003Ccanvas id=\"capture\" layoutsubtree width=\"1920\" height=\"1080\">\n\u003Cdiv class=\"my-dashboard\">\n\u003Ch1>Revenue: $4.2M\u003C\u002Fh1>\n\u003Cdiv class=\"chart\">...\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\u003C\u002Fcanvas>\n\n\u003C!-- 2. 用于 3D 渲染的 WebGL canvas -->\n\u003Ccanvas id=\"theater\" width=\"1920\" height=\"1080\">\u003C\u002Fcanvas>\n","html","",[696,783,784,793,850,872,894,923,932,941,948,954],{"__ignoreMap":781},[785,786,789],"span",{"class":787,"line":788},"line",1,[785,790,792],{"class":791},"sHwdD","\u003C!-- 1. HTML 内容位于 canvas 内 -->\n",[785,794,796,800,804,808,811,814,818,820,823,826,828,830,833,835,838,840,842,845,847],{"class":787,"line":795},2,[785,797,799],{"class":798},"sMK4o","\u003C",[785,801,803],{"class":802},"swJcz","canvas",[785,805,807],{"class":806},"spNyl"," id",[785,809,810],{"class":798},"=",[785,812,813],{"class":798},"\"",[785,815,817],{"class":816},"sfazB","capture",[785,819,813],{"class":798},[785,821,822],{"class":806}," layoutsubtree",[785,824,825],{"class":806}," width",[785,827,810],{"class":798},[785,829,813],{"class":798},[785,831,832],{"class":816},"1920",[785,834,813],{"class":798},[785,836,837],{"class":806}," height",[785,839,810],{"class":798},[785,841,813],{"class":798},[785,843,844],{"class":816},"1080",[785,846,813],{"class":798},[785,848,849],{"class":798},">\n",[785,851,853,855,858,861,863,865,868,870],{"class":787,"line":852},3,[785,854,799],{"class":798},[785,856,857],{"class":802},"div",[785,859,860],{"class":806}," class",[785,862,810],{"class":798},[785,864,813],{"class":798},[785,866,867],{"class":816},"my-dashboard",[785,869,813],{"class":798},[785,871,849],{"class":798},[785,873,875,877,880,883,887,890,892],{"class":787,"line":874},4,[785,876,799],{"class":798},[785,878,879],{"class":802},"h1",[785,881,882],{"class":798},">",[785,884,886],{"class":885},"sTEyZ","Revenue: $4.2M",[785,888,889],{"class":798},"\u003C\u002F",[785,891,879],{"class":802},[785,893,849],{"class":798},[785,895,897,899,901,903,905,907,910,912,914,917,919,921],{"class":787,"line":896},5,[785,898,799],{"class":798},[785,900,857],{"class":802},[785,902,860],{"class":806},[785,904,810],{"class":798},[785,906,813],{"class":798},[785,908,909],{"class":816},"chart",[785,911,813],{"class":798},[785,913,882],{"class":798},[785,915,916],{"class":885},"...",[785,918,889],{"class":798},[785,920,857],{"class":802},[785,922,849],{"class":798},[785,924,926,928,930],{"class":787,"line":925},6,[785,927,889],{"class":798},[785,929,857],{"class":802},[785,931,849],{"class":798},[785,933,935,937,939],{"class":787,"line":934},7,[785,936,889],{"class":798},[785,938,803],{"class":802},[785,940,849],{"class":798},[785,942,944],{"class":787,"line":943},8,[785,945,947],{"emptyLinePlaceholder":946},true,"\n",[785,949,951],{"class":787,"line":950},9,[785,952,953],{"class":791},"\u003C!-- 2. 用于 3D 渲染的 WebGL canvas -->\n",[785,955,957,959,961,963,965,967,970,972,974,976,978,980,982,984,986,988,990,992,995,997],{"class":787,"line":956},10,[785,958,799],{"class":798},[785,960,803],{"class":802},[785,962,807],{"class":806},[785,964,810],{"class":798},[785,966,813],{"class":798},[785,968,969],{"class":816},"theater",[785,971,813],{"class":798},[785,973,825],{"class":806},[785,975,810],{"class":798},[785,977,813],{"class":798},[785,979,832],{"class":816},[785,981,813],{"class":798},[785,983,837],{"class":806},[785,985,810],{"class":798},[785,987,813],{"class":798},[785,989,844],{"class":816},[785,991,813],{"class":798},[785,993,994],{"class":798},">\u003C\u002F",[785,996,803],{"class":802},[785,998,849],{"class":798},[776,1000,1004],{"className":1001,"code":1002,"language":1003,"meta":781,"style":781},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F 3. 将 HTML 捕获到 canvas\nvar capCanvas = document.getElementById(\"capture\");\nvar ctx = capCanvas.getContext(\"2d\");\nctx.drawElementImage(capCanvas.querySelector(\".my-dashboard\"), 0, 0, 1920, 1080);\n\n\u002F\u002F 4. 用作 Three.js 纹理\nvar texture = new THREE.CanvasTexture(capCanvas);\nvar material = new THREE.MeshBasicMaterial({ map: texture });\n","javascript",[696,1005,1006,1011,1046,1076,1129,1133,1138,1163],{"__ignoreMap":781},[785,1007,1008],{"class":787,"line":788},[785,1009,1010],{"class":791},"\u002F\u002F 3. 将 HTML 捕获到 canvas\n",[785,1012,1013,1016,1019,1021,1024,1027,1031,1034,1036,1038,1040,1043],{"class":787,"line":795},[785,1014,1015],{"class":806},"var",[785,1017,1018],{"class":885}," capCanvas ",[785,1020,810],{"class":798},[785,1022,1023],{"class":885}," document",[785,1025,1026],{"class":798},".",[785,1028,1030],{"class":1029},"s2Zo4","getElementById",[785,1032,1033],{"class":885},"(",[785,1035,813],{"class":798},[785,1037,817],{"class":816},[785,1039,813],{"class":798},[785,1041,1042],{"class":885},")",[785,1044,1045],{"class":798},";\n",[785,1047,1048,1050,1053,1055,1058,1060,1063,1065,1067,1070,1072,1074],{"class":787,"line":852},[785,1049,1015],{"class":806},[785,1051,1052],{"class":885}," ctx ",[785,1054,810],{"class":798},[785,1056,1057],{"class":885}," capCanvas",[785,1059,1026],{"class":798},[785,1061,1062],{"class":1029},"getContext",[785,1064,1033],{"class":885},[785,1066,813],{"class":798},[785,1068,1069],{"class":816},"2d",[785,1071,813],{"class":798},[785,1073,1042],{"class":885},[785,1075,1045],{"class":798},[785,1077,1078,1081,1083,1085,1088,1090,1093,1095,1097,1100,1102,1104,1107,1111,1113,1115,1117,1120,1122,1125,1127],{"class":787,"line":874},[785,1079,1080],{"class":885},"ctx",[785,1082,1026],{"class":798},[785,1084,698],{"class":1029},[785,1086,1087],{"class":885},"(capCanvas",[785,1089,1026],{"class":798},[785,1091,1092],{"class":1029},"querySelector",[785,1094,1033],{"class":885},[785,1096,813],{"class":798},[785,1098,1099],{"class":816},".my-dashboard",[785,1101,813],{"class":798},[785,1103,1042],{"class":885},[785,1105,1106],{"class":798},",",[785,1108,1110],{"class":1109},"sbssI"," 0",[785,1112,1106],{"class":798},[785,1114,1110],{"class":1109},[785,1116,1106],{"class":798},[785,1118,1119],{"class":1109}," 1920",[785,1121,1106],{"class":798},[785,1123,1124],{"class":1109}," 1080",[785,1126,1042],{"class":885},[785,1128,1045],{"class":798},[785,1130,1131],{"class":787,"line":896},[785,1132,947],{"emptyLinePlaceholder":946},[785,1134,1135],{"class":787,"line":925},[785,1136,1137],{"class":791},"\u002F\u002F 4. 用作 Three.js 纹理\n",[785,1139,1140,1142,1145,1147,1150,1153,1155,1158,1161],{"class":787,"line":934},[785,1141,1015],{"class":806},[785,1143,1144],{"class":885}," texture ",[785,1146,810],{"class":798},[785,1148,1149],{"class":798}," new",[785,1151,1152],{"class":885}," THREE",[785,1154,1026],{"class":798},[785,1156,1157],{"class":1029},"CanvasTexture",[785,1159,1160],{"class":885},"(capCanvas)",[785,1162,1045],{"class":798},[785,1164,1165,1167,1170,1172,1174,1176,1178,1181,1183,1186,1189,1192,1194,1197,1199],{"class":787,"line":943},[785,1166,1015],{"class":806},[785,1168,1169],{"class":885}," material ",[785,1171,810],{"class":798},[785,1173,1149],{"class":798},[785,1175,1152],{"class":885},[785,1177,1026],{"class":798},[785,1179,1180],{"class":1029},"MeshBasicMaterial",[785,1182,1033],{"class":885},[785,1184,1185],{"class":798},"{",[785,1187,1188],{"class":802}," map",[785,1190,1191],{"class":798},":",[785,1193,1144],{"class":885},[785,1195,1196],{"class":798},"}",[785,1198,1042],{"class":885},[785,1200,1045],{"class":798},[750,1202,1203],{"id":1203},"与其他方案的区别",[692,1205,1206,1207,1210,1211,1214,1215,1217],{},"传统方法如 ",[696,1208,1209],{},"html2canvas"," 在 JavaScript 中重新解析和重新渲染 DOM——它们速度慢、有损，且遗漏 CSS 特性如 ",[696,1212,1213],{},"backdrop-filter","、复杂阴影和 Web 字体。",[696,1216,698],{}," API 使用浏览器自己的合成器，因此：",[1219,1220,1221,1227,1233,1239],"ul",{},[723,1222,1223,1226],{},[707,1224,1225],{},"像素完美"," — 每个 CSS 特性都受支持，因为浏览器原生渲染它",[723,1228,1229,1232],{},[707,1230,1231],{},"GPU 加速"," — 以 60fps 捕获，足够快以实现实时动画",[723,1234,1235,1238],{},[707,1236,1237],{},"实时内容"," — HTML 可以在捕获之间进行动画、滚动和变化",[723,1240,1241,1244,1245,1247],{},[707,1242,1243],{},"同时多次捕获"," — 无嵌套限制，多个 ",[696,1246,760],{}," 元素可以在同一合成中捕获不同内容",[750,1249,1250],{"id":1250},"特性检测",[692,1252,1253],{},"使用 API 前始终进行特性检测。合成应该为未启用该标志的浏览器提供优雅降级。",[776,1255,1257],{"className":1001,"code":1256,"language":1003,"meta":781,"style":781},"function isSupported() {\nvar tc = document.createElement(\"canvas\");\nif (!(\"layoutSubtree\" in tc)) return false;\nc.setAttribute(\"layoutsubtree\", \"\");\nvar ctx = tc.getContext(\"2d\");\nreturn ctx && typeof ctx.drawElementImage === \"function\";\n}\n\nif (isSupported()) {\nctx.drawElementImage(element, 0, 0, w, h);\n} else {\n\u002F\u002F 降级：直接在 canvas 上绘制文本、使用静态图片等\n}\n",[696,1258,1259,1273,1302,1340,1368,1395,1425,1430,1434,1449,1484,1494,1500],{"__ignoreMap":781},[785,1260,1261,1264,1267,1270],{"class":787,"line":788},[785,1262,1263],{"class":806},"function",[785,1265,1266],{"class":1029}," isSupported",[785,1268,1269],{"class":798},"()",[785,1271,1272],{"class":798}," {\n",[785,1274,1275,1277,1280,1283,1285,1287,1290,1292,1294,1296,1298,1300],{"class":787,"line":795},[785,1276,1015],{"class":806},[785,1278,1279],{"class":885}," tc",[785,1281,1282],{"class":798}," =",[785,1284,1023],{"class":885},[785,1286,1026],{"class":798},[785,1288,1289],{"class":1029},"createElement",[785,1291,1033],{"class":802},[785,1293,813],{"class":798},[785,1295,803],{"class":816},[785,1297,813],{"class":798},[785,1299,1042],{"class":802},[785,1301,1045],{"class":798},[785,1303,1304,1308,1311,1314,1316,1318,1321,1323,1326,1328,1331,1334,1338],{"class":787,"line":852},[785,1305,1307],{"class":1306},"s7zQu","if",[785,1309,1310],{"class":802}," (",[785,1312,1313],{"class":798},"!",[785,1315,1033],{"class":802},[785,1317,813],{"class":798},[785,1319,1320],{"class":816},"layoutSubtree",[785,1322,813],{"class":798},[785,1324,1325],{"class":798}," in",[785,1327,1279],{"class":885},[785,1329,1330],{"class":802},")) ",[785,1332,1333],{"class":1306},"return",[785,1335,1337],{"class":1336},"sfNiH"," false",[785,1339,1045],{"class":798},[785,1341,1342,1345,1347,1350,1352,1354,1357,1359,1361,1364,1366],{"class":787,"line":874},[785,1343,1344],{"class":885},"c",[785,1346,1026],{"class":798},[785,1348,1349],{"class":1029},"setAttribute",[785,1351,1033],{"class":802},[785,1353,813],{"class":798},[785,1355,1356],{"class":816},"layoutsubtree",[785,1358,813],{"class":798},[785,1360,1106],{"class":798},[785,1362,1363],{"class":798}," \"\"",[785,1365,1042],{"class":802},[785,1367,1045],{"class":798},[785,1369,1370,1372,1375,1377,1379,1381,1383,1385,1387,1389,1391,1393],{"class":787,"line":896},[785,1371,1015],{"class":806},[785,1373,1374],{"class":885}," ctx",[785,1376,1282],{"class":798},[785,1378,1279],{"class":885},[785,1380,1026],{"class":798},[785,1382,1062],{"class":1029},[785,1384,1033],{"class":802},[785,1386,813],{"class":798},[785,1388,1069],{"class":816},[785,1390,813],{"class":798},[785,1392,1042],{"class":802},[785,1394,1045],{"class":798},[785,1396,1397,1399,1401,1404,1407,1409,1411,1413,1416,1419,1421,1423],{"class":787,"line":925},[785,1398,1333],{"class":1306},[785,1400,1374],{"class":885},[785,1402,1403],{"class":798}," &&",[785,1405,1406],{"class":798}," typeof",[785,1408,1374],{"class":885},[785,1410,1026],{"class":798},[785,1412,698],{"class":885},[785,1414,1415],{"class":798}," ===",[785,1417,1418],{"class":798}," \"",[785,1420,1263],{"class":816},[785,1422,813],{"class":798},[785,1424,1045],{"class":798},[785,1426,1427],{"class":787,"line":934},[785,1428,1429],{"class":798},"}\n",[785,1431,1432],{"class":787,"line":943},[785,1433,947],{"emptyLinePlaceholder":946},[785,1435,1436,1438,1440,1443,1446],{"class":787,"line":950},[785,1437,1307],{"class":1306},[785,1439,1310],{"class":885},[785,1441,1442],{"class":1029},"isSupported",[785,1444,1445],{"class":885},"()) ",[785,1447,1448],{"class":798},"{\n",[785,1450,1451,1453,1455,1457,1459,1462,1464,1466,1468,1470,1472,1475,1477,1480,1482],{"class":787,"line":956},[785,1452,1080],{"class":885},[785,1454,1026],{"class":798},[785,1456,698],{"class":1029},[785,1458,1033],{"class":802},[785,1460,1461],{"class":885},"element",[785,1463,1106],{"class":798},[785,1465,1110],{"class":1109},[785,1467,1106],{"class":798},[785,1469,1110],{"class":1109},[785,1471,1106],{"class":798},[785,1473,1474],{"class":885}," w",[785,1476,1106],{"class":798},[785,1478,1479],{"class":885}," h",[785,1481,1042],{"class":802},[785,1483,1045],{"class":798},[785,1485,1487,1489,1492],{"class":787,"line":1486},11,[785,1488,1196],{"class":798},[785,1490,1491],{"class":1306}," else",[785,1493,1272],{"class":798},[785,1495,1497],{"class":787,"line":1496},12,[785,1498,1499],{"class":791},"\u002F\u002F 降级：直接在 canvas 上绘制文本、使用静态图片等\n",[785,1501,1503],{"class":787,"line":1502},13,[785,1504,1429],{"class":798},[750,1506,1507],{"id":1507},"每帧重新捕获",[692,1509,1510,1511,1513],{},"对于动画内容（滚动、过渡、计数器），在渲染循环内调用 ",[696,1512,698],{}," 以每帧更新纹理：",[776,1515,1517],{"className":1001,"code":1516,"language":1003,"meta":781,"style":781},"function render() {\n\u002F\u002F 更新 HTML 状态\nscrollContainer.style.transform = \"translateY(-\" + scrollOffset + \"px)\";\ncounterEl.textContent = Math.round(currentValue);\n\n\u002F\u002F 重新捕获\nctx.clearRect(0, 0, W, H);\nctx.drawElementImage(htmlElement, 0, 0, W, H);\nexture.needsUpdate = true;\n\n\u002F\u002F 使用更新的纹理渲染 3D 场景\nrenderer.render(scene, camera);\n}\n",[696,1518,1519,1530,1535,1576,1605,1609,1614,1646,1679,1696,1700,1705,1729],{"__ignoreMap":781},[785,1520,1521,1523,1526,1528],{"class":787,"line":788},[785,1522,1263],{"class":806},[785,1524,1525],{"class":1029}," render",[785,1527,1269],{"class":798},[785,1529,1272],{"class":798},[785,1531,1532],{"class":787,"line":795},[785,1533,1534],{"class":791},"\u002F\u002F 更新 HTML 状态\n",[785,1536,1537,1540,1542,1545,1547,1550,1552,1554,1557,1559,1562,1565,1567,1569,1572,1574],{"class":787,"line":852},[785,1538,1539],{"class":885},"scrollContainer",[785,1541,1026],{"class":798},[785,1543,1544],{"class":885},"style",[785,1546,1026],{"class":798},[785,1548,1549],{"class":885},"transform",[785,1551,1282],{"class":798},[785,1553,1418],{"class":798},[785,1555,1556],{"class":816},"translateY(-",[785,1558,813],{"class":798},[785,1560,1561],{"class":798}," +",[785,1563,1564],{"class":885}," scrollOffset",[785,1566,1561],{"class":798},[785,1568,1418],{"class":798},[785,1570,1571],{"class":816},"px)",[785,1573,813],{"class":798},[785,1575,1045],{"class":798},[785,1577,1578,1581,1583,1586,1588,1591,1593,1596,1598,1601,1603],{"class":787,"line":874},[785,1579,1580],{"class":885},"counterEl",[785,1582,1026],{"class":798},[785,1584,1585],{"class":885},"textContent",[785,1587,1282],{"class":798},[785,1589,1590],{"class":885}," Math",[785,1592,1026],{"class":798},[785,1594,1595],{"class":1029},"round",[785,1597,1033],{"class":802},[785,1599,1600],{"class":885},"currentValue",[785,1602,1042],{"class":802},[785,1604,1045],{"class":798},[785,1606,1607],{"class":787,"line":896},[785,1608,947],{"emptyLinePlaceholder":946},[785,1610,1611],{"class":787,"line":925},[785,1612,1613],{"class":791},"\u002F\u002F 重新捕获\n",[785,1615,1616,1618,1620,1623,1625,1628,1630,1632,1634,1637,1639,1642,1644],{"class":787,"line":934},[785,1617,1080],{"class":885},[785,1619,1026],{"class":798},[785,1621,1622],{"class":1029},"clearRect",[785,1624,1033],{"class":802},[785,1626,1627],{"class":1109},"0",[785,1629,1106],{"class":798},[785,1631,1110],{"class":1109},[785,1633,1106],{"class":798},[785,1635,1636],{"class":885}," W",[785,1638,1106],{"class":798},[785,1640,1641],{"class":885}," H",[785,1643,1042],{"class":802},[785,1645,1045],{"class":798},[785,1647,1648,1650,1652,1654,1656,1659,1661,1663,1665,1667,1669,1671,1673,1675,1677],{"class":787,"line":943},[785,1649,1080],{"class":885},[785,1651,1026],{"class":798},[785,1653,698],{"class":1029},[785,1655,1033],{"class":802},[785,1657,1658],{"class":885},"htmlElement",[785,1660,1106],{"class":798},[785,1662,1110],{"class":1109},[785,1664,1106],{"class":798},[785,1666,1110],{"class":1109},[785,1668,1106],{"class":798},[785,1670,1636],{"class":885},[785,1672,1106],{"class":798},[785,1674,1641],{"class":885},[785,1676,1042],{"class":802},[785,1678,1045],{"class":798},[785,1680,1681,1684,1686,1689,1691,1694],{"class":787,"line":950},[785,1682,1683],{"class":885},"exture",[785,1685,1026],{"class":798},[785,1687,1688],{"class":885},"needsUpdate",[785,1690,1282],{"class":798},[785,1692,1693],{"class":1336}," true",[785,1695,1045],{"class":798},[785,1697,1698],{"class":787,"line":956},[785,1699,947],{"emptyLinePlaceholder":946},[785,1701,1702],{"class":787,"line":1486},[785,1703,1704],{"class":791},"\u002F\u002F 使用更新的纹理渲染 3D 场景\n",[785,1706,1707,1710,1712,1715,1717,1720,1722,1725,1727],{"class":787,"line":1496},[785,1708,1709],{"class":885},"renderer",[785,1711,1026],{"class":798},[785,1713,1714],{"class":1029},"render",[785,1716,1033],{"class":802},[785,1718,1719],{"class":885},"scene",[785,1721,1106],{"class":798},[785,1723,1724],{"class":885}," camera",[785,1726,1042],{"class":802},[785,1728,1045],{"class":798},[785,1730,1731],{"class":787,"line":1502},[785,1732,1429],{"class":798},[750,1734,1736],{"id":1735},"目录-blocks","目录 blocks",[692,1738,1739],{},"一次安装所有 HTML-in-Canvas blocks：",[776,1741,1745],{"className":1742,"code":1743,"language":1744,"meta":781,"style":781},"language-bash shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","npx hyperframes add html-in-canvas\n","bash",[696,1746,1747],{"__ignoreMap":781},[785,1748,1749,1753,1756,1759],{"class":787,"line":788},[785,1750,1752],{"class":1751},"sBMFI","npx",[785,1754,1755],{"class":816}," hyperframes",[785,1757,1758],{"class":816}," add",[785,1760,1761],{"class":816}," html-in-canvas\n",[692,1763,1764],{},"或单独安装：",[1766,1767,1768,1784],"table",{},[1769,1770,1771],"thead",{},[1772,1773,1774,1778,1781],"tr",{},[1775,1776,1777],"th",{},"Block",[1775,1779,1780],{},"描述",[1775,1782,1783],{},"安装",[1785,1786,1787,1803,1817,1831,1846,1861,1876,1891,1906],"tbody",{},[1772,1788,1789,1795,1798],{},[1790,1791,1792],"td",{},[1793,1794,277],"a",{"href":278},[1790,1796,1797],{},"带有实时 Liquid Glass 通知和小组件的 iPhone 主屏幕",[1790,1799,1800],{},[696,1801,1802],{},"npx hyperframes add ios26-liquid-glass",[1772,1804,1805,1809,1812],{},[1790,1806,1807],{},[1793,1808,297],{"href":298},[1790,1810,1811],{},"带有液态玻璃窗口、Dock 和通知的 MacBook 桌面",[1790,1813,1814],{},[696,1815,1816],{},"npx hyperframes add macos-tahoe-liquid-glass",[1772,1818,1819,1823,1826],{},[1790,1820,1821],{},[1793,1822,289],{"href":290},[1790,1824,1825],{},"具有原生感的玻璃通知堆栈，带进度和回复状态",[1790,1827,1828],{},[696,1829,1830],{},"npx hyperframes add liquid-glass-notification",[1772,1832,1833,1838,1841],{},[1790,1834,1835],{},[1793,1836,1837],{"href":302},"iPhone & MacBook",[1790,1839,1840],{},"带有实时 HTML 屏幕的真实 3D GLTF 设备",[1790,1842,1843],{},[696,1844,1845],{},"npx hyperframes add vfx-iphone-device",[1772,1847,1848,1853,1856],{},[1790,1849,1850],{},[1793,1851,1852],{"href":322},"Text Cursor",[1790,1854,1855],{},"带有色彩阴影的戏剧性文本揭示",[1790,1857,1858],{},[696,1859,1860],{},"npx hyperframes add vfx-text-cursor",[1772,1862,1863,1868,1871],{},[1790,1864,1865],{},[1793,1866,1867],{"href":314},"Portal",[1790,1869,1870],{},"带有体积光的维度突破",[1790,1872,1873],{},[696,1874,1875],{},"npx hyperframes add vfx-portal",[1772,1877,1878,1883,1886],{},[1790,1879,1880],{},[1793,1881,1882],{"href":318},"Shatter",[1790,1884,1885],{},"HTML 碎裂成玻璃碎片",[1790,1887,1888],{},[696,1889,1890],{},"npx hyperframes add vfx-shatter",[1772,1892,1893,1898,1901],{},[1790,1894,1895],{},[1793,1896,1897],{"href":310},"Magnetic",[1790,1899,1900],{},"磁场粒子可视化",[1790,1902,1903],{},[696,1904,1905],{},"npx hyperframes add vfx-magnetic",[1772,1907,1908,1913,1916],{},[1790,1909,1910],{},[1793,1911,1912],{"href":306},"Liquid Background",[1790,1914,1915],{},"有机液体模拟",[1790,1917,1918],{},[696,1919,1920],{},"npx hyperframes add vfx-liquid-background",[750,1922,104],{"id":104},[692,1924,1925],{},"HyperFrames 在渲染期间自动启用 Chrome 标志。无需特殊配置：",[776,1927,1929],{"className":1742,"code":1928,"language":1744,"meta":781,"style":781},"npx hyperframes render --output my-video.mp4\n",[696,1930,1931],{"__ignoreMap":781},[785,1932,1933,1935,1937,1939,1942],{"class":787,"line":788},[785,1934,1752],{"class":1751},[785,1936,1755],{"class":816},[785,1938,1525],{"class":816},[785,1940,1941],{"class":816}," --output",[785,1943,1944],{"class":816}," my-video.mp4\n",[692,1946,1947],{},"对于 Docker 渲染，该标志也会在容器内自动启用。",[1544,1949,1950],{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}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 .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sfNiH, html code.shiki .sfNiH{--shiki-light:#FF5370;--shiki-default:#FF9CAC;--shiki-dark:#FF9CAC}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}",{"title":781,"searchDepth":788,"depth":795,"links":1952},[1953,1954,1955,1956,1957,1958],{"id":752,"depth":795,"text":752},{"id":1203,"depth":795,"text":1203},{"id":1250,"depth":795,"text":1250},{"id":1507,"depth":795,"text":1507},{"id":1735,"depth":795,"text":1736},{"id":104,"depth":795,"text":104},"将实时 HTML 渲染为 WebGL 纹理——对任何 DOM 内容使用 GPU 着色器、3D 几何体和电影效果。","md",null,{},{"title":68,"description":1959},"jf6zn0WfcVJS8zHoEUN4yVpqCKhAXh6YzZnYqEfw6tg",[1966,1968],{"title":64,"path":65,"stem":66,"description":1967,"children":-1},"制作任何 HyperFrames 视频的 7 步流水线：采集、设计、脚本、故事板、配音、构建、验证。",{"title":72,"path":73,"stem":74,"description":1969,"children":-1},"捕获任何网站并通过一条提示词将其转化为生产级视频。",1780322247920]