{ "schemaVersion": "1.0.0", "source": { "humanGuide": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "generatedAt": "2026-06-29", "registryReadableItems": 133, "blocks": 108, "components": 25, "failedItems": [ "code-morph" ] }, "taxonomies": { "intentDomains": [ "branding_outro", "caption_style", "data_visualization", "developer_demo", "device_showcase", "podcast_interview", "product_launch", "social_media", "transition", "vfx", "visual_enhancement" ], "formats": [ "landscape_16_9", "portrait_9_16", "square", "custom", "flexible", "unknown" ], "assetRoles": [ "caption", "device_showcase", "effect", "main_scene", "outro", "overlay", "transition" ], "styleTags": [ "apple_like", "cinematic", "cyberpunk", "dark", "editorial", "light", "minimal", "news", "playful", "premium", "retro" ], "motionTags": [ "blur", "bounce", "glitch", "morph", "pan", "parallax", "particle", "reveal", "scroll", "shader", "slam", "staggered_reveal", "typing", "wipe", "zoom" ] }, "scoringModel": { "keywordMatch": 0.3, "intentDomainMatch": 0.25, "formatMatch": 0.15, "assetRoleMatch": 0.1, "styleMatch": 0.1, "motionMatch": 0.05, "constraintsMatch": 0.05 }, "askUserQuestionTemplates": { "clarify_intent": { "question": "你这次视频/动画主要用于什么场景？", "choices": [ "product_launch", "developer_demo", "data_visualization", "podcast_interview", "social_media", "caption_style", "transition" ] }, "clarify_format": { "question": "目标画幅是什么？", "choices": [ "landscape_16_9", "portrait_9_16", "square", "unknown" ] }, "clarify_style_after_candidates": { "question": "这次更想要哪种视觉方向？", "choices": [ "apple_like", "cinematic", "minimal", "social_dynamic", "cyberpunk", "editorial", "news" ] } }, "items": [ { "id": "data-chart", "title": "Data Chart", "type": "block", "category": { "id": "01", "name": "数据、地图与图解" }, "intentDomains": [ "data_visualization" ], "styleTags": [ "editorial" ], "motionTags": [ "reveal", "staggered_reveal" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "data-chart", "Data Chart", "data", "chart", "statistics", "数据", "图表", "地图", "流程图", "市场复盘", "年度总结" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 15.0 }, "install": { "command": "hyperframes add data-chart", "path": "compositions/data-chart.html", "includeSnippet": "
" }, "customizableParams": [ "--bg-color", "--text-color" ], "assetCount": null, "hasPreview": true, "bestFor": [ "适合财务、增长、排行榜、统计结论等数据可视化段落。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示的是趋势、对比、排行榜、地图位置，还是流程关系？" ], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "headline", "data", "labels", "sourceNote" ], "recommendedCompanionComponents": [ "caption-weight-shift", "vignette" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "data-chart": 0.15, "Data Chart": 0.15, "data": 0.15, "chart": 0.15, "statistics": 0.15, "数据": 0.15, "图表": 0.15, "地图": 0.15, "流程图": 0.15, "市场复盘": 0.15, "年度总结": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `data-chart`
Data Chart
#data #chart #statistics | Block | Animated bar + line chart with staggered reveal, NYT-style typography, and value labels | 适合财务、增长、排行榜、统计结论等数据可视化段落。 | `hyperframes add data-chart`
`
` | 可调参数: --bg-color, --text-color; 有预览视频 |" } }, { "id": "flowchart", "title": "Flowchart", "type": "block", "category": { "id": "01", "name": "数据、地图与图解" }, "intentDomains": [ "data_visualization" ], "styleTags": [], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "flowchart", "Flowchart", "diagram", "interactive", "数据", "图表", "地图", "流程图", "市场复盘", "年度总结" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 12.0 }, "install": { "command": "hyperframes add flowchart", "path": "compositions/flowchart.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合讲解流程、决策树、因果关系、产品路径或教程中的逻辑结构。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示的是趋势、对比、排行榜、地图位置，还是流程关系？" ], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "headline", "data", "labels", "sourceNote" ], "recommendedCompanionComponents": [ "caption-weight-shift", "vignette" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "flowchart": 0.15, "Flowchart": 0.15, "diagram": 0.15, "interactive": 0.15, "数据": 0.15, "图表": 0.15, "地图": 0.15, "流程图": 0.15, "市场复盘": 0.15, "年度总结": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `flowchart`
Flowchart
#diagram #flowchart #interactive | Block | Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction | 适合讲解流程、决策树、因果关系、产品路径或教程中的逻辑结构。 | `hyperframes add flowchart`
`
` | 有预览视频 |" } }, { "id": "flowchart-vertical", "title": "Flowchart Vertical", "type": "block", "category": { "id": "01", "name": "数据、地图与图解" }, "intentDomains": [ "data_visualization" ], "styleTags": [], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "flowchart-vertical", "Flowchart Vertical", "diagram", "flowchart", "interactive", "portrait", "数据", "图表", "地图", "流程图", "市场复盘", "年度总结" ], "format": { "width": 1440, "height": 2560, "aspect": "portrait_9_16", "durationSeconds": 12.0 }, "install": { "command": "hyperframes add flowchart-vertical", "path": "compositions/flowchart-vertical.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合讲解流程、决策树、因果关系、产品路径或教程中的逻辑结构。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示的是趋势、对比、排行榜、地图位置，还是流程关系？" ], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "headline", "data", "labels", "sourceNote" ], "recommendedCompanionComponents": [ "caption-weight-shift", "vignette" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "flowchart-vertical": 0.15, "Flowchart Vertical": 0.15, "diagram": 0.15, "flowchart": 0.15, "interactive": 0.15, "portrait": 0.15, "数据": 0.15, "图表": 0.15, "地图": 0.15, "流程图": 0.15, "市场复盘": 0.15, "年度总结": 0.15 }, "formatMatches": { "portrait_9_16": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `flowchart-vertical`
Flowchart Vertical
#diagram #flowchart #interactive #portrait | Block | Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction | 适合讲解流程、决策树、因果关系、产品路径或教程中的逻辑结构。 | `hyperframes add flowchart-vertical`
`
` | 有预览视频 |" } }, { "id": "north-korea-locked-down", "title": "North Korea Locked Down", "type": "block", "category": { "id": "01", "name": "数据、地图与图解" }, "intentDomains": [ "data_visualization", "social_media", "product_launch" ], "styleTags": [ "editorial" ], "motionTags": [ "zoom" ], "assetRoles": [ "main_scene", "transition" ], "naturalLanguageTriggers": [ "north-korea-locked-down", "North Korea Locked Down", "showcase", "map", "annotation", "youtube", "kinetic", "数据", "图表", "地图", "流程图", "市场复盘", "年度总结" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 7.0 }, "install": { "command": "hyperframes add north-korea-locked-down", "path": "compositions/north-korea-locked-down.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 1, "hasPreview": true, "bestFor": [ "适合解释地理范围、路线、区域对比、政策/事件位置、数据新闻地图。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示的是趋势、对比、排行榜、地图位置，还是流程关系？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "north-korea-locked-down": 0.15, "North Korea Locked Down": 0.15, "showcase": 0.15, "map": 0.15, "annotation": 0.15, "youtube": 0.15, "kinetic": 0.15, "数据": 0.15, "图表": 0.15, "地图": 0.15, "流程图": 0.15, "市场复盘": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `north-korea-locked-down`
North Korea Locked Down
#showcase #map #annotation #youtube #kinetic | Block | Realistic map zoom into North Korea with a red scribble circle, locked-down pop-up label, and reddish editorial wash. | 适合解释地理范围、路线、区域对比、政策/事件位置、数据新闻地图。 | `hyperframes add north-korea-locked-down`
`
` | 包含 1 个 asset; 有预览视频 |" } }, { "id": "nyc-paris-flight", "title": "NYC Paris Flight", "type": "block", "category": { "id": "01", "name": "数据、地图与图解" }, "intentDomains": [ "data_visualization", "social_media", "product_launch" ], "styleTags": [ "apple_like", "light" ], "motionTags": [], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "nyc-paris-flight", "NYC Paris Flight", "showcase", "travel", "map", "youtube", "sfx", "数据", "图表", "地图", "流程图", "市场复盘", "年度总结" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 6.0 }, "install": { "command": "hyperframes add nyc-paris-flight", "path": "compositions/nyc-paris-flight.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 2, "hasPreview": true, "bestFor": [ "适合解释地理范围、路线、区域对比、政策/事件位置、数据新闻地图。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示的是趋势、对比、排行榜、地图位置，还是流程关系？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "nyc-paris-flight": 0.15, "NYC Paris Flight": 0.15, "showcase": 0.15, "travel": 0.15, "map": 0.15, "youtube": 0.15, "sfx": 0.15, "数据": 0.15, "图表": 0.15, "地图": 0.15, "流程图": 0.15, "市场复盘": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `nyc-paris-flight`
NYC Paris Flight
#showcase #travel #map #youtube #sfx | Block | Apple-style realistic map animation with a plane flying from New York to Paris, marker circle, landing pop, and sound effects. | 适合解释地理范围、路线、区域对比、政策/事件位置、数据新闻地图。 | `hyperframes add nyc-paris-flight`
`
` | 包含 2 个 asset; 有预览视频 |" } }, { "id": "spain-map", "title": "Spain Map", "type": "block", "category": { "id": "01", "name": "数据、地图与图解" }, "intentDomains": [ "data_visualization" ], "styleTags": [], "motionTags": [ "reveal", "staggered_reveal" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "spain-map", "Spain Map", "data", "map", "geography", "spain", "europe", "choropleth", "数据", "图表", "地图", "流程图", "市场复盘", "年度总结" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 12.0 }, "install": { "command": "hyperframes add spain-map", "path": "compositions/spain-map.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合解释地理范围、路线、区域对比、政策/事件位置、数据新闻地图。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示的是趋势、对比、排行榜、地图位置，还是流程关系？" ], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "headline", "data", "labels", "sourceNote" ], "recommendedCompanionComponents": [ "caption-weight-shift", "vignette" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "spain-map": 0.15, "Spain Map": 0.15, "data": 0.15, "map": 0.15, "geography": 0.15, "spain": 0.15, "europe": 0.15, "choropleth": 0.15, "数据": 0.15, "图表": 0.15, "地图": 0.15, "流程图": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `spain-map`
Spain Map
#data #map #geography #spain #europe #choropleth | Block | Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection | 适合解释地理范围、路线、区域对比、政策/事件位置、数据新闻地图。 | `hyperframes add spain-map`
`
` | 有预览视频 |" } }, { "id": "us-map", "title": "US Map", "type": "block", "category": { "id": "01", "name": "数据、地图与图解" }, "intentDomains": [ "data_visualization" ], "styleTags": [], "motionTags": [ "reveal", "staggered_reveal" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "us-map", "US Map", "data", "map", "geography", "usa", "choropleth", "数据", "图表", "地图", "流程图", "市场复盘", "年度总结" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 12.0 }, "install": { "command": "hyperframes add us-map", "path": "compositions/us-map.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合解释地理范围、路线、区域对比、政策/事件位置、数据新闻地图。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示的是趋势、对比、排行榜、地图位置，还是流程关系？" ], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "headline", "data", "labels", "sourceNote" ], "recommendedCompanionComponents": [ "caption-weight-shift", "vignette" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "us-map": 0.15, "US Map": 0.15, "data": 0.15, "map": 0.15, "geography": 0.15, "usa": 0.15, "choropleth": 0.15, "数据": 0.15, "图表": 0.15, "地图": 0.15, "流程图": 0.15, "市场复盘": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `us-map`
US Map
#data #map #geography #usa #choropleth | Block | Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP | 适合解释地理范围、路线、区域对比、政策/事件位置、数据新闻地图。 | `hyperframes add us-map`
`
` | 有预览视频 |" } }, { "id": "us-map-bubble", "title": "US Bubble Map", "type": "block", "category": { "id": "01", "name": "数据、地图与图解" }, "intentDomains": [ "data_visualization" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "us-map-bubble", "US Bubble Map", "data", "map", "geography", "usa", "bubble", "cities", "数据", "图表", "地图", "流程图", "市场复盘", "年度总结" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 12.0 }, "install": { "command": "hyperframes add us-map-bubble", "path": "compositions/us-map-bubble.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合解释地理范围、路线、区域对比、政策/事件位置、数据新闻地图。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示的是趋势、对比、排行榜、地图位置，还是流程关系？" ], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "headline", "data", "labels", "sourceNote" ], "recommendedCompanionComponents": [ "caption-weight-shift", "vignette" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "us-map-bubble": 0.15, "US Bubble Map": 0.15, "data": 0.15, "map": 0.15, "geography": 0.15, "usa": 0.15, "bubble": 0.15, "cities": 0.15, "数据": 0.15, "图表": 0.15, "地图": 0.15, "流程图": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `us-map-bubble`
US Bubble Map
#data #map #geography #usa #bubble #cities | Block | Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map | 适合解释地理范围、路线、区域对比、政策/事件位置、数据新闻地图。 | `hyperframes add us-map-bubble`
`
` | 有预览视频 |" } }, { "id": "us-map-flow", "title": "US Flow Map", "type": "block", "category": { "id": "01", "name": "数据、地图与图解" }, "intentDomains": [ "data_visualization" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "us-map-flow", "US Flow Map", "data", "map", "geography", "usa", "flow", "connections", "arcs", "数据", "图表", "地图", "流程图", "市场复盘", "年度总结" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 12.0 }, "install": { "command": "hyperframes add us-map-flow", "path": "compositions/us-map-flow.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合解释地理范围、路线、区域对比、政策/事件位置、数据新闻地图。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示的是趋势、对比、排行榜、地图位置，还是流程关系？" ], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "headline", "data", "labels", "sourceNote" ], "recommendedCompanionComponents": [ "caption-weight-shift", "vignette" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "us-map-flow": 0.15, "US Flow Map": 0.15, "data": 0.15, "map": 0.15, "geography": 0.15, "usa": 0.15, "flow": 0.15, "connections": 0.15, "arcs": 0.15, "数据": 0.15, "图表": 0.15, "地图": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `us-map-flow`
US Flow Map
#data #map #geography #usa #flow #connections #arcs | Block | Animated connection arcs between US cities over a base map — composable origin-destination flow visualization | 适合解释地理范围、路线、区域对比、政策/事件位置、数据新闻地图。 | `hyperframes add us-map-flow`
`
` | 有预览视频 |" } }, { "id": "us-map-hex", "title": "US Hex Grid Map", "type": "block", "category": { "id": "01", "name": "数据、地图与图解" }, "intentDomains": [ "data_visualization" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "us-map-hex", "US Hex Grid Map", "data", "map", "geography", "usa", "hexgrid", "tilegrid", "数据", "图表", "地图", "流程图", "市场复盘", "年度总结" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 10.0 }, "install": { "command": "hyperframes add us-map-hex", "path": "compositions/us-map-hex.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合解释地理范围、路线、区域对比、政策/事件位置、数据新闻地图。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示的是趋势、对比、排行榜、地图位置，还是流程关系？" ], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "headline", "data", "labels", "sourceNote" ], "recommendedCompanionComponents": [ "caption-weight-shift", "vignette" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "us-map-hex": 0.15, "US Hex Grid Map": 0.15, "data": 0.15, "map": 0.15, "geography": 0.15, "usa": 0.15, "hexgrid": 0.15, "tilegrid": 0.15, "数据": 0.15, "图表": 0.15, "地图": 0.15, "流程图": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `us-map-hex`
US Hex Grid Map
#data #map #geography #usa #hexgrid #tilegrid | Block | Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label | 适合解释地理范围、路线、区域对比、政策/事件位置、数据新闻地图。 | `hyperframes add us-map-hex`
`
` | 有预览视频 |" } }, { "id": "world-map", "title": "World Map", "type": "block", "category": { "id": "01", "name": "数据、地图与图解" }, "intentDomains": [ "data_visualization" ], "styleTags": [], "motionTags": [ "reveal" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "world-map", "World Map", "data", "map", "geography", "world", "choropleth", "数据", "图表", "地图", "流程图", "市场复盘", "年度总结" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 14.0 }, "install": { "command": "hyperframes add world-map", "path": "compositions/world-map.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合解释地理范围、路线、区域对比、政策/事件位置、数据新闻地图。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示的是趋势、对比、排行榜、地图位置，还是流程关系？" ], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "headline", "data", "labels", "sourceNote" ], "recommendedCompanionComponents": [ "caption-weight-shift", "vignette" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "world-map": 0.15, "World Map": 0.15, "data": 0.15, "map": 0.15, "geography": 0.15, "world": 0.15, "choropleth": 0.15, "数据": 0.15, "图表": 0.15, "地图": 0.15, "流程图": 0.15, "市场复盘": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `world-map`
World Map
#data #map #geography #world #choropleth | Block | Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection | 适合解释地理范围、路线、区域对比、政策/事件位置、数据新闻地图。 | `hyperframes add world-map`
`
` | 有预览视频 |" } }, { "id": "apple-money-count", "title": "Apple Money Count", "type": "block", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "social_media", "product_launch" ], "styleTags": [ "apple_like" ], "motionTags": [], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "apple-money-count", "Apple Money Count", "showcase", "finance", "kinetic", "youtube", "sfx", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 5.0 }, "install": { "command": "hyperframes add apple-money-count", "path": "compositions/apple-money-count.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 1, "hasPreview": true, "bestFor": [ "适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "apple-money-count": 0.15, "Apple Money Count": 0.15, "showcase": 0.15, "finance": 0.15, "kinetic": 0.15, "youtube": 0.15, "sfx": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `apple-money-count`
Apple Money Count
#showcase #finance #kinetic #youtube #sfx | Block | Apple-style finance counter that counts from $0 to $10,000, flashes green, and bursts money icons with sound. | 适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。 | `hyperframes add apple-money-count`
`
` | 包含 1 个 asset; 有预览视频 |" } }, { "id": "instagram-follow", "title": "Instagram Follow", "type": "block", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "social_media" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene", "effect" ], "naturalLanguageTriggers": [ "instagram-follow", "Instagram Follow", "social", "overlay", "instagram", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": 1080, "height": 1920, "aspect": "portrait_9_16", "durationSeconds": 4.5 }, "install": { "command": "hyperframes add instagram-follow", "path": "compositions/instagram-follow.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 1, "hasPreview": true, "bestFor": [ "适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "instagram-follow": 0.15, "Instagram Follow": 0.15, "social": 0.15, "overlay": 0.15, "instagram": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15, "新闻条": 0.15 }, "formatMatches": { "portrait_9_16": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `instagram-follow`
Instagram Follow
#social #overlay #instagram | Block | Animated Instagram follow overlay with profile card and follow button | 适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。 | `hyperframes add instagram-follow`
`
` | 包含 1 个 asset; 有预览视频 |" } }, { "id": "lower-third-bild", "title": "Lower Third — BILD Style", "type": "block", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "podcast_interview" ], "styleTags": [ "news" ], "motionTags": [], "assetRoles": [ "main_scene", "effect" ], "naturalLanguageTriggers": [ "lower-third-bild", "Lower Third — BILD Style", "broadcast", "lower-third", "news", "overlay", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 8.0 }, "install": { "command": "hyperframes add lower-third-bild", "path": "compositions/lower-third-bild.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 2, "hasPreview": false, "bestFor": [ "适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "嘉宾名牌更偏极简、新闻感、还是高能动感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "lower-third-bild": 0.15, "Lower Third — BILD Style": 0.15, "broadcast": 0.15, "lower-third": 0.15, "news": 0.15, "overlay": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15, "新闻条": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `lower-third-bild`
Lower Third — BILD Style
#broadcast #lower-third #news #overlay | Block | News-style lower third with tight-fit text boxes: white headline bar with red drop-shadow, red sub-line with white drop-shadow. | 适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。 | `hyperframes add lower-third-bild`
`
` | 包含 2 个 asset |" } }, { "id": "lt-accent-underline", "title": "Lower Third — Accent Underline", "type": "block", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "podcast_interview" ], "styleTags": [ "minimal" ], "motionTags": [], "assetRoles": [ "main_scene", "effect" ], "naturalLanguageTriggers": [ "lt-accent-underline", "Lower Third — Accent Underline", "lower-third", "overlay", "podcast", "interview", "minimal", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.8 }, "install": { "command": "hyperframes add lt-accent-underline", "path": "compositions/lt-accent-underline.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": false, "bestFor": [ "适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "嘉宾名牌更偏极简、新闻感、还是高能动感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "lt-accent-underline": 0.15, "Lower Third — Accent Underline": 0.15, "lower-third": 0.15, "overlay": 0.15, "podcast": 0.15, "interview": 0.15, "minimal": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `lt-accent-underline`
Lower Third — Accent Underline
#lower-third #overlay #podcast #interview #minimal | Block | Cardless lower third for footage overlay: name rises, an accent rule draws left-to-right, role fades in; text-shadowed for legibility | 适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。 | `hyperframes add lt-accent-underline`
`
` | - |" } }, { "id": "lt-bold-block", "title": "Lower Third — Bold Block", "type": "block", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "podcast_interview" ], "styleTags": [ "dark" ], "motionTags": [ "wipe", "slam" ], "assetRoles": [ "main_scene", "transition", "effect" ], "naturalLanguageTriggers": [ "lt-bold-block", "Lower Third — Bold Block", "lower-third", "overlay", "podcast", "interview", "bold", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.8 }, "install": { "command": "hyperframes add lt-bold-block", "path": "compositions/lt-bold-block.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": false, "bestFor": [ "适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "嘉宾名牌更偏极简、新闻感、还是高能动感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "lt-bold-block": 0.15, "Lower Third — Bold Block": 0.15, "lower-third": 0.15, "overlay": 0.15, "podcast": 0.15, "interview": 0.15, "bold": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `lt-bold-block`
Lower Third — Bold Block
#lower-third #overlay #podcast #interview #bold | Block | High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops | 适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。 | `hyperframes add lt-bold-block`
`
` | - |" } }, { "id": "lt-clean-bar", "title": "Lower Third — Clean Bar", "type": "block", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "podcast_interview" ], "styleTags": [ "minimal" ], "motionTags": [ "wipe" ], "assetRoles": [ "main_scene", "transition", "effect" ], "naturalLanguageTriggers": [ "lt-clean-bar", "Lower Third — Clean Bar", "lower-third", "overlay", "podcast", "interview", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.8 }, "install": { "command": "hyperframes add lt-clean-bar", "path": "compositions/lt-clean-bar.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": false, "bestFor": [ "适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "嘉宾名牌更偏极简、新闻感、还是高能动感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "lt-clean-bar": 0.15, "Lower Third — Clean Bar": 0.15, "lower-third": 0.15, "overlay": 0.15, "podcast": 0.15, "interview": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15, "新闻条": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `lt-clean-bar`
Lower Third — Clean Bar
#lower-third #overlay #podcast #interview | Block | Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance | 适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。 | `hyperframes add lt-clean-bar`
`
` | - |" } }, { "id": "lt-color-block", "title": "Lower Third — Color Block", "type": "block", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "podcast_interview" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene", "effect" ], "naturalLanguageTriggers": [ "lt-color-block", "Lower Third — Color Block", "lower-third", "overlay", "podcast", "interview", "bold", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.8 }, "install": { "command": "hyperframes add lt-color-block", "path": "compositions/lt-color-block.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": false, "bestFor": [ "适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "嘉宾名牌更偏极简、新闻感、还是高能动感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "lt-color-block": 0.15, "Lower Third — Color Block": 0.15, "lower-third": 0.15, "overlay": 0.15, "podcast": 0.15, "interview": 0.15, "bold": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `lt-color-block`
Lower Third — Color Block
#lower-third #overlay #podcast #interview #bold | Block | High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role | 适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。 | `hyperframes add lt-color-block`
`
` | - |" } }, { "id": "lt-dark-card", "title": "Lower Third — Dark Card", "type": "block", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "podcast_interview" ], "styleTags": [ "dark" ], "motionTags": [], "assetRoles": [ "main_scene", "effect" ], "naturalLanguageTriggers": [ "lt-dark-card", "Lower Third — Dark Card", "lower-third", "overlay", "podcast", "interview", "dark", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.8 }, "install": { "command": "hyperframes add lt-dark-card", "path": "compositions/lt-dark-card.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": false, "bestFor": [ "适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "嘉宾名牌更偏极简、新闻感、还是高能动感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "lt-dark-card": 0.15, "Lower Third — Dark Card": 0.15, "lower-third": 0.15, "overlay": 0.15, "podcast": 0.15, "interview": 0.15, "dark": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `lt-dark-card`
Lower Third — Dark Card
#lower-third #overlay #podcast #interview #dark | Block | Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance | 适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。 | `hyperframes add lt-dark-card`
`
` | - |" } }, { "id": "lt-kicker-name", "title": "Lower Third — Kicker Name", "type": "block", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "podcast_interview" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene", "effect" ], "naturalLanguageTriggers": [ "lt-kicker-name", "Lower Third — Kicker Name", "lower-third", "overlay", "podcast", "interview", "bold", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.8 }, "install": { "command": "hyperframes add lt-kicker-name", "path": "compositions/lt-kicker-name.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": false, "bestFor": [ "适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "嘉宾名牌更偏极简、新闻感、还是高能动感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "lt-kicker-name": 0.15, "Lower Third — Kicker Name": 0.15, "lower-third": 0.15, "overlay": 0.15, "podcast": 0.15, "interview": 0.15, "bold": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `lt-kicker-name`
Lower Third — Kicker Name
#lower-third #overlay #podcast #interview #bold | Block | Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage | 适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。 | `hyperframes add lt-kicker-name`
`
` | - |" } }, { "id": "lt-mask-reveal", "title": "Lower Third — Mask Reveal", "type": "block", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "podcast_interview" ], "styleTags": [], "motionTags": [ "wipe", "reveal" ], "assetRoles": [ "main_scene", "effect" ], "naturalLanguageTriggers": [ "lt-mask-reveal", "Lower Third — Mask Reveal", "lower-third", "overlay", "podcast", "interview", "bold", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.8 }, "install": { "command": "hyperframes add lt-mask-reveal", "path": "compositions/lt-mask-reveal.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": false, "bestFor": [ "适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "嘉宾名牌更偏极简、新闻感、还是高能动感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "lt-mask-reveal": 0.15, "Lower Third — Mask Reveal": 0.15, "lower-third": 0.15, "overlay": 0.15, "podcast": 0.15, "interview": 0.15, "bold": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `lt-mask-reveal`
Lower Third — Mask Reveal
#lower-third #overlay #podcast #interview #bold | Block | Cardless lower third: an accent sweep crosses and clip-path-reveals a heavy name, role fades up; for footage | 适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。 | `hyperframes add lt-mask-reveal`
`
` | - |" } }, { "id": "lt-side-rule", "title": "Lower Third — Side Rule", "type": "block", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "podcast_interview" ], "styleTags": [ "minimal" ], "motionTags": [], "assetRoles": [ "main_scene", "effect" ], "naturalLanguageTriggers": [ "lt-side-rule", "Lower Third — Side Rule", "lower-third", "overlay", "podcast", "interview", "minimal", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.8 }, "install": { "command": "hyperframes add lt-side-rule", "path": "compositions/lt-side-rule.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": false, "bestFor": [ "适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "嘉宾名牌更偏极简、新闻感、还是高能动感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "lt-side-rule": 0.15, "Lower Third — Side Rule": 0.15, "lower-third": 0.15, "overlay": 0.15, "podcast": 0.15, "interview": 0.15, "minimal": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `lt-side-rule`
Lower Third — Side Rule
#lower-third #overlay #podcast #interview #minimal | Block | Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage | 适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。 | `hyperframes add lt-side-rule`
`
` | - |" } }, { "id": "lt-soft-pill", "title": "Lower Third — Soft Pill", "type": "block", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "podcast_interview" ], "styleTags": [ "minimal" ], "motionTags": [], "assetRoles": [ "main_scene", "effect" ], "naturalLanguageTriggers": [ "lt-soft-pill", "Lower Third — Soft Pill", "lower-third", "overlay", "podcast", "interview", "minimal", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.8 }, "install": { "command": "hyperframes add lt-soft-pill", "path": "compositions/lt-soft-pill.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": false, "bestFor": [ "适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "嘉宾名牌更偏极简、新闻感、还是高能动感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "lt-soft-pill": 0.15, "Lower Third — Soft Pill": 0.15, "lower-third": 0.15, "overlay": 0.15, "podcast": 0.15, "interview": 0.15, "minimal": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `lt-soft-pill`
Lower Third — Soft Pill
#lower-third #overlay #podcast #interview #minimal | Block | Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance | 适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。 | `hyperframes add lt-soft-pill`
`
` | - |" } }, { "id": "lt-stack-bars", "title": "Lower Third — Stack Bars", "type": "block", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "podcast_interview" ], "styleTags": [ "dark" ], "motionTags": [ "wipe" ], "assetRoles": [ "main_scene", "transition", "effect" ], "naturalLanguageTriggers": [ "lt-stack-bars", "Lower Third — Stack Bars", "lower-third", "overlay", "podcast", "interview", "bold", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.8 }, "install": { "command": "hyperframes add lt-stack-bars", "path": "compositions/lt-stack-bars.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": false, "bestFor": [ "适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "嘉宾名牌更偏极简、新闻感、还是高能动感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "lt-stack-bars": 0.15, "Lower Third — Stack Bars": 0.15, "lower-third": 0.15, "overlay": 0.15, "podcast": 0.15, "interview": 0.15, "bold": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `lt-stack-bars`
Lower Third — Stack Bars
#lower-third #overlay #podcast #interview #bold | Block | Two stacked bars: a dark name bar wipes from the left, an accent role bar wipes from the right | 适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。 | `hyperframes add lt-stack-bars`
`
` | - |" } }, { "id": "macos-notification", "title": "macOS Notification", "type": "block", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "social_media", "product_launch" ], "styleTags": [ "apple_like" ], "motionTags": [], "assetRoles": [ "main_scene", "effect" ], "naturalLanguageTriggers": [ "macos-notification", "macOS Notification", "social", "overlay", "notification", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 5.0 }, "install": { "command": "hyperframes add macos-notification", "path": "compositions/macos-notification.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "macos-notification": 0.15, "macOS Notification": 0.15, "social": 0.15, "overlay": 0.15, "notification": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15, "新闻条": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `macos-notification`
macOS Notification
#social #overlay #notification | Block | Animated macOS-style notification banner with app icon and message | 适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。 | `hyperframes add macos-notification`
`
` | 有预览视频 |" } }, { "id": "news-ticker", "title": "News Ticker", "type": "block", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "podcast_interview" ], "styleTags": [ "news", "premium" ], "motionTags": [ "scroll" ], "assetRoles": [ "main_scene", "effect" ], "naturalLanguageTriggers": [ "news-ticker", "News Ticker", "lower-third", "overlay", "news", "ticker", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 7.0 }, "install": { "command": "hyperframes add news-ticker", "path": "compositions/news-ticker.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": false, "bestFor": [ "适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "嘉宾名牌更偏极简、新闻感、还是高能动感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "news-ticker": 0.15, "News Ticker": 0.15, "lower-third": 0.15, "overlay": 0.15, "news": 0.15, "ticker": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15, "新闻条": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `news-ticker`
News Ticker
#lower-third #overlay #news #ticker | Block | Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl. | 适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。 | `hyperframes add news-ticker`
`
` | - |" } }, { "id": "reddit-post", "title": "Reddit Post Card", "type": "block", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "social_media" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene", "effect" ], "naturalLanguageTriggers": [ "reddit-post", "Reddit Post Card", "social", "overlay", "reddit", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 5.0 }, "install": { "command": "hyperframes add reddit-post", "path": "compositions/reddit-post.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "reddit-post": 0.15, "Reddit Post Card": 0.15, "social": 0.15, "overlay": 0.15, "reddit": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15, "新闻条": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `reddit-post`
Reddit Post Card
#social #overlay #reddit | Block | Animated Reddit post card overlay with upvotes and comments | 适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。 | `hyperframes add reddit-post`
`
` | 有预览视频 |" } }, { "id": "spotify-card", "title": "Spotify Now Playing", "type": "block", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "social_media" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene", "effect" ], "naturalLanguageTriggers": [ "spotify-card", "Spotify Now Playing", "social", "overlay", "spotify", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": 1080, "height": 1920, "aspect": "portrait_9_16", "durationSeconds": 5.0 }, "install": { "command": "hyperframes add spotify-card", "path": "compositions/spotify-card.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "spotify-card": 0.15, "Spotify Now Playing": 0.15, "social": 0.15, "overlay": 0.15, "spotify": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15, "新闻条": 0.15 }, "formatMatches": { "portrait_9_16": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `spotify-card`
Spotify Now Playing
#social #overlay #spotify | Block | Animated Spotify now-playing card with album art and progress bar | 适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。 | `hyperframes add spotify-card`
`
` | 有预览视频 |" } }, { "id": "tiktok-follow", "title": "TikTok Follow", "type": "block", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "social_media" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene", "effect" ], "naturalLanguageTriggers": [ "tiktok-follow", "TikTok Follow", "social", "overlay", "tiktok", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": 1080, "height": 1920, "aspect": "portrait_9_16", "durationSeconds": 4.5 }, "install": { "command": "hyperframes add tiktok-follow", "path": "compositions/tiktok-follow.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 1, "hasPreview": true, "bestFor": [ "适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "tiktok-follow": 0.15, "TikTok Follow": 0.15, "social": 0.15, "overlay": 0.15, "tiktok": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15, "新闻条": 0.15 }, "formatMatches": { "portrait_9_16": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `tiktok-follow`
TikTok Follow
#social #overlay #tiktok | Block | Animated TikTok follow overlay with profile card and follow button | 适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。 | `hyperframes add tiktok-follow`
`
` | 包含 1 个 asset; 有预览视频 |" } }, { "id": "vpn-youtube-spot", "title": "VPN YouTube Spot", "type": "block", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "social_media", "product_launch" ], "styleTags": [ "apple_like" ], "motionTags": [], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "vpn-youtube-spot", "VPN YouTube Spot", "app", "showcase", "youtube", "sfx", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 7.0 }, "install": { "command": "hyperframes add vpn-youtube-spot", "path": "compositions/vpn-youtube-spot.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 1, "hasPreview": true, "bestFor": [ "适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "vpn-youtube-spot": 0.15, "VPN YouTube Spot": 0.15, "app": 0.15, "showcase": 0.15, "youtube": 0.15, "sfx": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15, "新闻条": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `vpn-youtube-spot`
VPN YouTube Spot
#app #showcase #youtube #sfx | Block | Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects. | 适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。 | `hyperframes add vpn-youtube-spot`
`
` | 包含 1 个 asset; 有预览视频 |" } }, { "id": "x-post", "title": "X Post Card", "type": "block", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "social_media" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene", "effect" ], "naturalLanguageTriggers": [ "x-post", "X Post Card", "social", "overlay", "twitter", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 5.0 }, "install": { "command": "hyperframes add x-post", "path": "compositions/x-post.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "x-post": 0.15, "X Post Card": 0.15, "social": 0.15, "overlay": 0.15, "twitter": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15, "新闻条": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `x-post`
X Post Card
#social #overlay #twitter | Block | Animated X/Twitter post card overlay with engagement metrics | 适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。 | `hyperframes add x-post`
`
` | 有预览视频 |" } }, { "id": "yt-lower-third", "title": "YouTube Lower Third", "type": "block", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "podcast_interview", "social_media" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene", "effect" ], "naturalLanguageTriggers": [ "yt-lower-third", "YouTube Lower Third", "social", "overlay", "youtube", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.5 }, "install": { "command": "hyperframes add yt-lower-third", "path": "compositions/yt-lower-third.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 1, "hasPreview": true, "bestFor": [ "适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "嘉宾名牌更偏极简、新闻感、还是高能动感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "yt-lower-third": 0.15, "YouTube Lower Third": 0.15, "social": 0.15, "overlay": 0.15, "youtube": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15, "新闻条": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `yt-lower-third`
YouTube Lower Third
#social #overlay #youtube | Block | Animated YouTube subscribe lower third with avatar and channel info | 适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。 | `hyperframes add yt-lower-third`
`
` | 包含 1 个 asset; 有预览视频 |" } }, { "id": "caption-emoji-pop", "title": "Emoji Pop", "type": "component", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "social_media", "caption_style" ], "styleTags": [ "playful" ], "motionTags": [], "assetRoles": [ "overlay", "caption" ], "naturalLanguageTriggers": [ "caption-emoji-pop", "Emoji Pop", "captions", "caption-style", "emoji", "social", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add caption-emoji-pop", "path": "compositions/components/caption-emoji-pop.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "字幕需要逐词高亮、整句强调、故障科技感，还是杂志排版感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [ "captionText", "emphasisWords", "timing" ], "recommendedCompanionComponents": [], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "caption-emoji-pop": 0.15, "Emoji Pop": 0.15, "captions": 0.15, "caption-style": 0.15, "emoji": 0.15, "social": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15, "新闻条": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `caption-emoji-pop`
Emoji Pop
#captions #caption-style #emoji #social | Component | Emoji integration with stroked text and horizontal squeeze entrance | 适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。 | `hyperframes add caption-emoji-pop`
`` | 有预览视频 |" } }, { "id": "caption-highlight", "title": "Highlight", "type": "component", "category": { "id": "02", "name": "社媒、播客与下三分之一字幕条" }, "intentDomains": [ "social_media", "caption_style" ], "styleTags": [ "light" ], "motionTags": [], "assetRoles": [ "overlay", "caption" ], "naturalLanguageTriggers": [ "caption-highlight", "Highlight", "captions", "caption-style", "highlight", "social", "tiktok", "播客", "采访", "嘉宾名牌", "社交媒体", "关注引导", "新闻条" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add caption-highlight", "path": "compositions/components/caption-highlight.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "字幕需要逐词高亮、整句强调、故障科技感，还是杂志排版感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [ "captionText", "emphasisWords", "timing" ], "recommendedCompanionComponents": [], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "caption-highlight": 0.15, "Highlight": 0.15, "captions": 0.15, "caption-style": 0.15, "highlight": 0.15, "social": 0.15, "tiktok": 0.15, "播客": 0.15, "采访": 0.15, "嘉宾名牌": 0.15, "社交媒体": 0.15, "关注引导": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `caption-highlight`
Highlight
#captions #caption-style #highlight #social #tiktok | Component | Red background sweep behind each active word, TikTok-style | 适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。 | `hyperframes add caption-highlight`
`` | 有预览视频 |" } }, { "id": "code-3d-extrude", "title": "Code 3D Extrude", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "vfx" ], "styleTags": [ "light" ], "motionTags": [], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-3d-extrude", "Code 3D Extrude", "code", "code-animation", "3d", "webgl", "developer", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 8.0 }, "install": { "command": "hyperframes add code-3d-extrude", "path": "compositions/code-3d-extrude.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合把代码变化、重点行、diff、滚动、粒子/3D 编译感做成叙事镜头。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "code", "filename", "terminalCommands", "callout" ], "recommendedCompanionComponents": [ "shimmer-sweep", "grain-overlay" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-3d-extrude": 0.15, "Code 3D Extrude": 0.15, "code": 0.15, "code-animation": 0.15, "3d": 0.15, "webgl": 0.15, "developer": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15, "VS Code": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-3d-extrude`
Code 3D Extrude
#code #code-animation #3d #webgl #developer | Block | Syntax-highlighted code on a lit, beveled 3D slab that rotates through real space and settles to a readable rest — true WebGL depth and lighting, not a 2D transform. | 适合把代码变化、重点行、diff、滚动、粒子/3D 编译感做成叙事镜头。 | `hyperframes add code-3d-extrude`
`
` | 有预览视频 |" } }, { "id": "code-diff", "title": "Code Diff", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "vfx" ], "styleTags": [], "motionTags": [ "pan" ], "assetRoles": [ "main_scene", "transition" ], "naturalLanguageTriggers": [ "code-diff", "Code Diff", "code", "code-animation", "diff", "developer", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 6.0 }, "install": { "command": "hyperframes add code-diff", "path": "compositions/code-diff.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合把代码变化、重点行、diff、滚动、粒子/3D 编译感做成叙事镜头。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "code", "filename", "terminalCommands", "callout" ], "recommendedCompanionComponents": [ "shimmer-sweep", "grain-overlay" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-diff": 0.15, "Code Diff": 0.15, "code": 0.15, "code-animation": 0.15, "diff": 0.15, "developer": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15, "VS Code": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-diff`
Code Diff
#code #code-animation #diff #developer | Block | An edit shown as a colored diff — removed lines collapse in red, added lines expand in green. | 适合把代码变化、重点行、diff、滚动、粒子/3D 编译感做成叙事镜头。 | `hyperframes add code-diff`
`
` | 有预览视频 |" } }, { "id": "code-highlight", "title": "Code Highlight Sweep", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "vfx" ], "styleTags": [ "light" ], "motionTags": [], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-highlight", "Code Highlight Sweep", "code", "code-animation", "highlight", "developer", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 5.0 }, "install": { "command": "hyperframes add code-highlight", "path": "compositions/code-highlight.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合把代码变化、重点行、diff、滚动、粒子/3D 编译感做成叙事镜头。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "code", "filename", "terminalCommands", "callout" ], "recommendedCompanionComponents": [ "shimmer-sweep", "grain-overlay" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-highlight": 0.15, "Code Highlight Sweep": 0.15, "code": 0.15, "code-animation": 0.15, "highlight": 0.15, "developer": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15, "VS Code": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-highlight`
Code Highlight Sweep
#code #code-animation #highlight #developer | Block | A highlight band sweeps across a target line while the surrounding context dims — draws the eye to one line. | 适合把代码变化、重点行、diff、滚动、粒子/3D 编译感做成叙事镜头。 | `hyperframes add code-highlight`
`
` | 有预览视频 |" } }, { "id": "code-particle-assemble", "title": "Code Particle Assemble", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "vfx" ], "styleTags": [ "light" ], "motionTags": [ "typing", "particle" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-particle-assemble", "Code Particle Assemble", "code", "code-animation", "particles", "gpu", "webgl", "developer", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 8.0 }, "install": { "command": "hyperframes add code-particle-assemble", "path": "compositions/code-particle-assemble.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合把代码变化、重点行、diff、滚动、粒子/3D 编译感做成叙事镜头。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "code", "filename", "terminalCommands", "callout" ], "recommendedCompanionComponents": [ "shimmer-sweep", "grain-overlay" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-particle-assemble": 0.15, "Code Particle Assemble": 0.15, "code": 0.15, "code-animation": 0.15, "particles": 0.15, "gpu": 0.15, "webgl": 0.15, "developer": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-particle-assemble`
Code Particle Assemble
#code #code-animation #particles #gpu #webgl #developer | Block | Thousands of GPU points scatter through space and fly to the exact glyph pixels of the code, resolving into readable syntax-highlighted text — a particle system, not a token tween. | 适合把代码变化、重点行、diff、滚动、粒子/3D 编译感做成叙事镜头。 | `hyperframes add code-particle-assemble`
`
` | 有预览视频 |" } }, { "id": "code-scroll", "title": "Code Scroll To Line", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "vfx" ], "styleTags": [ "light" ], "motionTags": [ "scroll" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-scroll", "Code Scroll To Line", "code", "code-animation", "scroll", "developer", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 6.0 }, "install": { "command": "hyperframes add code-scroll", "path": "compositions/code-scroll.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合把代码变化、重点行、diff、滚动、粒子/3D 编译感做成叙事镜头。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "code", "filename", "terminalCommands", "callout" ], "recommendedCompanionComponents": [ "shimmer-sweep", "grain-overlay" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-scroll": 0.15, "Code Scroll To Line": 0.15, "code": 0.15, "code-animation": 0.15, "scroll": 0.15, "developer": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15, "VS Code": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-scroll`
Code Scroll To Line
#code #code-animation #scroll #developer | Block | The camera scrolls a long file to bring a target line to center and spotlights it — for walking through real modules. | 适合把代码变化、重点行、diff、滚动、粒子/3D 编译感做成叙事镜头。 | `hyperframes add code-scroll`
`
` | 有预览视频 |" } }, { "id": "code-shader-dissolve", "title": "Code Shader Dissolve", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "transition", "vfx" ], "styleTags": [], "motionTags": [ "shader" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-shader-dissolve", "Code Shader Dissolve", "code", "code-animation", "shader", "webgl", "developer", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 7.0 }, "install": { "command": "hyperframes add code-shader-dissolve", "path": "compositions/code-shader-dissolve.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合把代码变化、重点行、diff、滚动、粒子/3D 编译感做成叙事镜头。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "code", "filename", "terminalCommands", "callout" ], "recommendedCompanionComponents": [ "shimmer-sweep", "grain-overlay" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-shader-dissolve": 0.15, "Code Shader Dissolve": 0.15, "code": 0.15, "code-animation": 0.15, "shader": 0.15, "webgl": 0.15, "developer": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15, "VS Code": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-shader-dissolve`
Code Shader Dissolve
#code #code-animation #shader #webgl #developer | Block | The code compiles into existence: a GPU fragment shader resolves it out of seeded noise with a chromatic dissolve front and edge glow, then holds crisp. | 适合把代码变化、重点行、diff、滚动、粒子/3D 编译感做成叙事镜头。 | `hyperframes add code-shader-dissolve`
`
` | 有预览视频 |" } }, { "id": "code-snippet-apple-terminal-basic", "title": "Code Snippet - Apple Terminal Basic", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [ "apple_like" ], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-apple-terminal-basic", "Code Snippet - Apple Terminal Basic", "code", "developer", "showcase", "terminal", "apple", "apple-terminal", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 12.0 }, "install": { "command": "hyperframes add code-snippet-apple-terminal-basic", "path": "compositions/code-snippet-apple-terminal-basic.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-apple-terminal-basic": 0.15, "Code Snippet - Apple Terminal Basic": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "terminal": 0.15, "apple": 0.15, "apple-terminal": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-apple-terminal-basic`
Code Snippet - Apple Terminal Basic
#code #developer #showcase #terminal #apple #apple-terminal | Block | Apple Terminal Basic profile: white background, black text, per-character typing animation of a shell session. | 适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。 | `hyperframes add code-snippet-apple-terminal-basic`
`
` | 有预览视频 |" } }, { "id": "code-snippet-apple-terminal-clear-dark", "title": "Code Snippet - Apple Terminal Clear Dark", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [ "apple_like", "dark" ], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-apple-terminal-clear-dark", "Code Snippet - Apple Terminal Clear Dark", "code", "developer", "showcase", "terminal", "apple", "apple-terminal", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 12.0 }, "install": { "command": "hyperframes add code-snippet-apple-terminal-clear-dark", "path": "compositions/code-snippet-apple-terminal-clear-dark.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-apple-terminal-clear-dark": 0.15, "Code Snippet - Apple Terminal Clear Dark": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "terminal": 0.15, "apple": 0.15, "apple-terminal": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-apple-terminal-clear-dark`
Code Snippet - Apple Terminal Clear Dark
#code #developer #showcase #terminal #apple #apple-terminal | Block | Apple Terminal Clear Dark profile: semi-transparent dark background, per-character typing animation of a shell session. | 适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。 | `hyperframes add code-snippet-apple-terminal-clear-dark`
`
` | 有预览视频 |" } }, { "id": "code-snippet-apple-terminal-clear-light", "title": "Code Snippet - Apple Terminal Clear Light", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [ "apple_like", "light" ], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-apple-terminal-clear-light", "Code Snippet - Apple Terminal Clear Light", "code", "developer", "showcase", "terminal", "apple", "apple-terminal", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 12.0 }, "install": { "command": "hyperframes add code-snippet-apple-terminal-clear-light", "path": "compositions/code-snippet-apple-terminal-clear-light.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-apple-terminal-clear-light": 0.15, "Code Snippet - Apple Terminal Clear Light": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "terminal": 0.15, "apple": 0.15, "apple-terminal": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-apple-terminal-clear-light`
Code Snippet - Apple Terminal Clear Light
#code #developer #showcase #terminal #apple #apple-terminal | Block | Apple Terminal Clear Light profile: semi-transparent light background, per-character typing animation of a shell session. | 适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。 | `hyperframes add code-snippet-apple-terminal-clear-light`
`
` | 有预览视频 |" } }, { "id": "code-snippet-apple-terminal-grass", "title": "Code Snippet - Apple Terminal Grass", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [ "apple_like" ], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-apple-terminal-grass", "Code Snippet - Apple Terminal Grass", "code", "developer", "showcase", "terminal", "apple", "apple-terminal", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 12.0 }, "install": { "command": "hyperframes add code-snippet-apple-terminal-grass", "path": "compositions/code-snippet-apple-terminal-grass.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-apple-terminal-grass": 0.15, "Code Snippet - Apple Terminal Grass": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "terminal": 0.15, "apple": 0.15, "apple-terminal": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-apple-terminal-grass`
Code Snippet - Apple Terminal Grass
#code #developer #showcase #terminal #apple #apple-terminal | Block | Apple Terminal Grass profile: black background with green text, per-character typing animation of a shell session. | 适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。 | `hyperframes add code-snippet-apple-terminal-grass`
`
` | 有预览视频 |" } }, { "id": "code-snippet-apple-terminal-homebrew", "title": "Code Snippet - Apple Terminal Homebrew", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [ "apple_like" ], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-apple-terminal-homebrew", "Code Snippet - Apple Terminal Homebrew", "code", "developer", "showcase", "terminal", "apple", "apple-terminal", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 12.0 }, "install": { "command": "hyperframes add code-snippet-apple-terminal-homebrew", "path": "compositions/code-snippet-apple-terminal-homebrew.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-apple-terminal-homebrew": 0.15, "Code Snippet - Apple Terminal Homebrew": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "terminal": 0.15, "apple": 0.15, "apple-terminal": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-apple-terminal-homebrew`
Code Snippet - Apple Terminal Homebrew
#code #developer #showcase #terminal #apple #apple-terminal | Block | Apple Terminal Homebrew profile: black background with bright green text and lime cursor, per-character typing animation of a shell session. | 适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。 | `hyperframes add code-snippet-apple-terminal-homebrew`
`
` | 有预览视频 |" } }, { "id": "code-snippet-apple-terminal-man-page", "title": "Code Snippet - Apple Terminal Man Page", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [ "apple_like" ], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-apple-terminal-man-page", "Code Snippet - Apple Terminal Man Page", "code", "developer", "showcase", "terminal", "apple", "apple-terminal", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 12.0 }, "install": { "command": "hyperframes add code-snippet-apple-terminal-man-page", "path": "compositions/code-snippet-apple-terminal-man-page.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-apple-terminal-man-page": 0.15, "Code Snippet - Apple Terminal Man Page": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "terminal": 0.15, "apple": 0.15, "apple-terminal": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-apple-terminal-man-page`
Code Snippet - Apple Terminal Man Page
#code #developer #showcase #terminal #apple #apple-terminal | Block | Apple Terminal Man Page profile: pale yellow background with black text, per-character typing animation of a shell session. | 适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。 | `hyperframes add code-snippet-apple-terminal-man-page`
`
` | 有预览视频 |" } }, { "id": "code-snippet-apple-terminal-novel", "title": "Code Snippet - Apple Terminal Novel", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [ "apple_like", "dark" ], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-apple-terminal-novel", "Code Snippet - Apple Terminal Novel", "code", "developer", "showcase", "terminal", "apple", "apple-terminal", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 12.0 }, "install": { "command": "hyperframes add code-snippet-apple-terminal-novel", "path": "compositions/code-snippet-apple-terminal-novel.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-apple-terminal-novel": 0.15, "Code Snippet - Apple Terminal Novel": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "terminal": 0.15, "apple": 0.15, "apple-terminal": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-apple-terminal-novel`
Code Snippet - Apple Terminal Novel
#code #developer #showcase #terminal #apple #apple-terminal | Block | Apple Terminal Novel profile: warm parchment background with dark brown text, per-character typing animation of a shell session. | 适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。 | `hyperframes add code-snippet-apple-terminal-novel`
`
` | 有预览视频 |" } }, { "id": "code-snippet-apple-terminal-ocean", "title": "Code Snippet - Apple Terminal Ocean", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [ "apple_like" ], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-apple-terminal-ocean", "Code Snippet - Apple Terminal Ocean", "code", "developer", "showcase", "terminal", "apple", "apple-terminal", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 12.0 }, "install": { "command": "hyperframes add code-snippet-apple-terminal-ocean", "path": "compositions/code-snippet-apple-terminal-ocean.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-apple-terminal-ocean": 0.15, "Code Snippet - Apple Terminal Ocean": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "terminal": 0.15, "apple": 0.15, "apple-terminal": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-apple-terminal-ocean`
Code Snippet - Apple Terminal Ocean
#code #developer #showcase #terminal #apple #apple-terminal | Block | Apple Terminal Ocean profile: deep blue background with white text, per-character typing animation of a shell session. | 适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。 | `hyperframes add code-snippet-apple-terminal-ocean`
`
` | 有预览视频 |" } }, { "id": "code-snippet-apple-terminal-pro", "title": "Code Snippet - Apple Terminal Pro", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [ "apple_like" ], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-apple-terminal-pro", "Code Snippet - Apple Terminal Pro", "code", "developer", "showcase", "terminal", "apple", "apple-terminal", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 12.0 }, "install": { "command": "hyperframes add code-snippet-apple-terminal-pro", "path": "compositions/code-snippet-apple-terminal-pro.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-apple-terminal-pro": 0.15, "Code Snippet - Apple Terminal Pro": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "terminal": 0.15, "apple": 0.15, "apple-terminal": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-apple-terminal-pro`
Code Snippet - Apple Terminal Pro
#code #developer #showcase #terminal #apple #apple-terminal | Block | Apple Terminal Pro profile: black background with grey text and lime green cursor, per-character typing animation of a shell session. | 适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。 | `hyperframes add code-snippet-apple-terminal-pro`
`
` | 有预览视频 |" } }, { "id": "code-snippet-apple-terminal-red-sands", "title": "Code Snippet - Apple Terminal Red Sands", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [ "apple_like" ], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-apple-terminal-red-sands", "Code Snippet - Apple Terminal Red Sands", "code", "developer", "showcase", "terminal", "apple", "apple-terminal", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 12.0 }, "install": { "command": "hyperframes add code-snippet-apple-terminal-red-sands", "path": "compositions/code-snippet-apple-terminal-red-sands.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-apple-terminal-red-sands": 0.15, "Code Snippet - Apple Terminal Red Sands": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "terminal": 0.15, "apple": 0.15, "apple-terminal": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-apple-terminal-red-sands`
Code Snippet - Apple Terminal Red Sands
#code #developer #showcase #terminal #apple #apple-terminal | Block | Apple Terminal Red Sands profile: deep red background with sandy text, per-character typing animation of a shell session. | 适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。 | `hyperframes add code-snippet-apple-terminal-red-sands`
`
` | 有预览视频 |" } }, { "id": "code-snippet-apple-terminal-silver-aerogel", "title": "Code Snippet - Apple Terminal Silver Aerogel", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [ "apple_like", "dark" ], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-apple-terminal-silver-aerogel", "Code Snippet - Apple Terminal Silver Aerogel", "code", "developer", "showcase", "terminal", "apple", "apple-terminal", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 12.0 }, "install": { "command": "hyperframes add code-snippet-apple-terminal-silver-aerogel", "path": "compositions/code-snippet-apple-terminal-silver-aerogel.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-apple-terminal-silver-aerogel": 0.15, "Code Snippet - Apple Terminal Silver Aerogel": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "terminal": 0.15, "apple": 0.15, "apple-terminal": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-apple-terminal-silver-aerogel`
Code Snippet - Apple Terminal Silver Aerogel
#code #developer #showcase #terminal #apple #apple-terminal | Block | Apple Terminal Silver Aerogel profile: dark grey background with white text, per-character typing animation of a shell session. | 适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。 | `hyperframes add code-snippet-apple-terminal-silver-aerogel`
`
` | 有预览视频 |" } }, { "id": "code-snippet-apple-terminal-solid-colors", "title": "Code Snippet - Apple Terminal Solid Colors", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [ "apple_like" ], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-apple-terminal-solid-colors", "Code Snippet - Apple Terminal Solid Colors", "code", "developer", "showcase", "terminal", "apple", "apple-terminal", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 12.0 }, "install": { "command": "hyperframes add code-snippet-apple-terminal-solid-colors", "path": "compositions/code-snippet-apple-terminal-solid-colors.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-apple-terminal-solid-colors": 0.15, "Code Snippet - Apple Terminal Solid Colors": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "terminal": 0.15, "apple": 0.15, "apple-terminal": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-apple-terminal-solid-colors`
Code Snippet - Apple Terminal Solid Colors
#code #developer #showcase #terminal #apple #apple-terminal | Block | Apple Terminal Solid Colors profile: deep purple background with white text, per-character typing animation of a shell session. | 适合命令行教程、安装过程、黑客/开发氛围、产品 CLI 演示。 | `hyperframes add code-snippet-apple-terminal-solid-colors`
`
` | 有预览视频 |" } }, { "id": "code-snippet-dark-2026", "title": "Code Snippet - Dark 2026", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [ "dark" ], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-dark-2026", "Code Snippet - Dark 2026", "code", "developer", "showcase", "vscode", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 11.0 }, "install": { "command": "hyperframes add code-snippet-dark-2026", "path": "compositions/code-snippet-dark-2026.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 1, "hasPreview": false, "bestFor": [ "适合展示真实编辑器界面、代码教学、功能发布、开发工作流。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-dark-2026": 0.15, "Code Snippet - Dark 2026": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "vscode": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15, "VS Code": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-dark-2026`
Code Snippet - Dark 2026
#code #developer #showcase #vscode | Block | VS Code workbench with per-character typing animation in the Dark 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar. | 适合展示真实编辑器界面、代码教学、功能发布、开发工作流。 | `hyperframes add code-snippet-dark-2026`
`
` | 包含 1 个 asset |" } }, { "id": "code-snippet-dark-modern", "title": "Code Snippet - Dark Modern", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [ "dark" ], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-dark-modern", "Code Snippet - Dark Modern", "code", "developer", "showcase", "vscode", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 11.0 }, "install": { "command": "hyperframes add code-snippet-dark-modern", "path": "compositions/code-snippet-dark-modern.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 1, "hasPreview": false, "bestFor": [ "适合展示真实编辑器界面、代码教学、功能发布、开发工作流。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-dark-modern": 0.15, "Code Snippet - Dark Modern": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "vscode": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15, "VS Code": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-dark-modern`
Code Snippet - Dark Modern
#code #developer #showcase #vscode | Block | VS Code workbench with per-character typing animation in the Dark Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar. | 适合展示真实编辑器界面、代码教学、功能发布、开发工作流。 | `hyperframes add code-snippet-dark-modern`
`
` | 包含 1 个 asset |" } }, { "id": "code-snippet-dark-plus", "title": "Code Snippet - Dark+", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [ "dark" ], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-dark-plus", "Code Snippet - Dark+", "code", "developer", "showcase", "vscode", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 11.0 }, "install": { "command": "hyperframes add code-snippet-dark-plus", "path": "compositions/code-snippet-dark-plus.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 1, "hasPreview": false, "bestFor": [ "适合展示真实编辑器界面、代码教学、功能发布、开发工作流。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-dark-plus": 0.15, "Code Snippet - Dark+": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "vscode": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15, "VS Code": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-dark-plus`
Code Snippet - Dark+
#code #developer #showcase #vscode | Block | VS Code workbench with per-character typing animation in the Dark+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar. | 适合展示真实编辑器界面、代码教学、功能发布、开发工作流。 | `hyperframes add code-snippet-dark-plus`
`
` | 包含 1 个 asset |" } }, { "id": "code-snippet-flight", "title": "Code Snippet Flight", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "vfx" ], "styleTags": [ "light" ], "motionTags": [ "staggered_reveal" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-flight", "Code Snippet Flight", "code", "code-animation", "flight", "developer", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 6.0 }, "install": { "command": "hyperframes add code-snippet-flight", "path": "compositions/code-snippet-flight.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合把代码变化、重点行、diff、滚动、粒子/3D 编译感做成叙事镜头。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "code", "filename", "terminalCommands", "callout" ], "recommendedCompanionComponents": [ "shimmer-sweep", "grain-overlay" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-flight": 0.15, "Code Snippet Flight": 0.15, "code": 0.15, "code-animation": 0.15, "flight": 0.15, "developer": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15, "VS Code": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-flight`
Code Snippet Flight
#code #code-animation #flight #developer | Block | Discrete code snippets fly in from the side and assemble into a stacked program, staggered. Block-level FLIP. | 适合把代码变化、重点行、diff、滚动、粒子/3D 编译感做成叙事镜头。 | `hyperframes add code-snippet-flight`
`
` | 有预览视频 |" } }, { "id": "code-snippet-high-contrast", "title": "Code Snippet - High Contrast", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-high-contrast", "Code Snippet - High Contrast", "code", "developer", "showcase", "vscode", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 11.0 }, "install": { "command": "hyperframes add code-snippet-high-contrast", "path": "compositions/code-snippet-high-contrast.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 1, "hasPreview": false, "bestFor": [ "适合展示真实编辑器界面、代码教学、功能发布、开发工作流。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-high-contrast": 0.15, "Code Snippet - High Contrast": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "vscode": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15, "VS Code": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-high-contrast`
Code Snippet - High Contrast
#code #developer #showcase #vscode | Block | VS Code workbench with per-character typing animation in the High Contrast theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar. | 适合展示真实编辑器界面、代码教学、功能发布、开发工作流。 | `hyperframes add code-snippet-high-contrast`
`
` | 包含 1 个 asset |" } }, { "id": "code-snippet-high-contrast-light", "title": "Code Snippet - High Contrast Light", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [ "light" ], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-high-contrast-light", "Code Snippet - High Contrast Light", "code", "developer", "showcase", "vscode", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 11.0 }, "install": { "command": "hyperframes add code-snippet-high-contrast-light", "path": "compositions/code-snippet-high-contrast-light.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 1, "hasPreview": false, "bestFor": [ "适合展示真实编辑器界面、代码教学、功能发布、开发工作流。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-high-contrast-light": 0.15, "Code Snippet - High Contrast Light": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "vscode": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15, "VS Code": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-high-contrast-light`
Code Snippet - High Contrast Light
#code #developer #showcase #vscode | Block | VS Code workbench with per-character typing animation in the High Contrast Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar. | 适合展示真实编辑器界面、代码教学、功能发布、开发工作流。 | `hyperframes add code-snippet-high-contrast-light`
`
` | 包含 1 个 asset |" } }, { "id": "code-snippet-light-2026", "title": "Code Snippet - Light 2026", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [ "light" ], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-light-2026", "Code Snippet - Light 2026", "code", "developer", "showcase", "vscode", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 11.0 }, "install": { "command": "hyperframes add code-snippet-light-2026", "path": "compositions/code-snippet-light-2026.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 1, "hasPreview": false, "bestFor": [ "适合展示真实编辑器界面、代码教学、功能发布、开发工作流。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-light-2026": 0.15, "Code Snippet - Light 2026": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "vscode": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15, "VS Code": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-light-2026`
Code Snippet - Light 2026
#code #developer #showcase #vscode | Block | VS Code workbench with per-character typing animation in the Light 2026 theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar. | 适合展示真实编辑器界面、代码教学、功能发布、开发工作流。 | `hyperframes add code-snippet-light-2026`
`
` | 包含 1 个 asset |" } }, { "id": "code-snippet-light-modern", "title": "Code Snippet - Light Modern", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [ "light" ], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-light-modern", "Code Snippet - Light Modern", "code", "developer", "showcase", "vscode", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 11.0 }, "install": { "command": "hyperframes add code-snippet-light-modern", "path": "compositions/code-snippet-light-modern.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 1, "hasPreview": false, "bestFor": [ "适合展示真实编辑器界面、代码教学、功能发布、开发工作流。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-light-modern": 0.15, "Code Snippet - Light Modern": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "vscode": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15, "VS Code": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-light-modern`
Code Snippet - Light Modern
#code #developer #showcase #vscode | Block | VS Code workbench with per-character typing animation in the Light Modern theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar. | 适合展示真实编辑器界面、代码教学、功能发布、开发工作流。 | `hyperframes add code-snippet-light-modern`
`
` | 包含 1 个 asset |" } }, { "id": "code-snippet-light-plus", "title": "Code Snippet - Light+", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [ "light" ], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-light-plus", "Code Snippet - Light+", "code", "developer", "showcase", "vscode", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 11.0 }, "install": { "command": "hyperframes add code-snippet-light-plus", "path": "compositions/code-snippet-light-plus.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 1, "hasPreview": false, "bestFor": [ "适合展示真实编辑器界面、代码教学、功能发布、开发工作流。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-light-plus": 0.15, "Code Snippet - Light+": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "vscode": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15, "VS Code": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-light-plus`
Code Snippet - Light+
#code #developer #showcase #vscode | Block | VS Code workbench with per-character typing animation in the Light+ theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar. | 适合展示真实编辑器界面、代码教学、功能发布、开发工作流。 | `hyperframes add code-snippet-light-plus`
`
` | 包含 1 个 asset |" } }, { "id": "code-snippet-monokai", "title": "Code Snippet - Monokai", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-monokai", "Code Snippet - Monokai", "code", "developer", "showcase", "vscode", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 11.0 }, "install": { "command": "hyperframes add code-snippet-monokai", "path": "compositions/code-snippet-monokai.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 1, "hasPreview": false, "bestFor": [ "适合展示真实编辑器界面、代码教学、功能发布、开发工作流。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-monokai": 0.15, "Code Snippet - Monokai": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "vscode": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15, "VS Code": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-monokai`
Code Snippet - Monokai
#code #developer #showcase #vscode | Block | VS Code workbench with per-character typing animation in the Monokai theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar. | 适合展示真实编辑器界面、代码教学、功能发布、开发工作流。 | `hyperframes add code-snippet-monokai`
`
` | 包含 1 个 asset |" } }, { "id": "code-snippet-solarized-light", "title": "Code Snippet - Solarized Light", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [ "light" ], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-solarized-light", "Code Snippet - Solarized Light", "code", "developer", "showcase", "vscode", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 11.0 }, "install": { "command": "hyperframes add code-snippet-solarized-light", "path": "compositions/code-snippet-solarized-light.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 1, "hasPreview": false, "bestFor": [ "适合展示真实编辑器界面、代码教学、功能发布、开发工作流。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-solarized-light": 0.15, "Code Snippet - Solarized Light": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "vscode": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15, "VS Code": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-solarized-light`
Code Snippet - Solarized Light
#code #developer #showcase #vscode | Block | VS Code workbench with per-character typing animation in the Solarized Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar. | 适合展示真实编辑器界面、代码教学、功能发布、开发工作流。 | `hyperframes add code-snippet-solarized-light`
`
` | 包含 1 个 asset |" } }, { "id": "code-snippet-visual-studio-dark", "title": "Code Snippet - Visual Studio Dark", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [ "dark" ], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-visual-studio-dark", "Code Snippet - Visual Studio Dark", "code", "developer", "showcase", "vscode", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 11.0 }, "install": { "command": "hyperframes add code-snippet-visual-studio-dark", "path": "compositions/code-snippet-visual-studio-dark.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 1, "hasPreview": false, "bestFor": [ "适合展示真实编辑器界面、代码教学、功能发布、开发工作流。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-visual-studio-dark": 0.15, "Code Snippet - Visual Studio Dark": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "vscode": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15, "VS Code": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-visual-studio-dark`
Code Snippet - Visual Studio Dark
#code #developer #showcase #vscode | Block | VS Code workbench with per-character typing animation in the Visual Studio Dark theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar. | 适合展示真实编辑器界面、代码教学、功能发布、开发工作流。 | `hyperframes add code-snippet-visual-studio-dark`
`
` | 包含 1 个 asset |" } }, { "id": "code-snippet-visual-studio-light", "title": "Code Snippet - Visual Studio Light", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "product_launch" ], "styleTags": [ "light" ], "motionTags": [ "typing" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-snippet-visual-studio-light", "Code Snippet - Visual Studio Light", "code", "developer", "showcase", "vscode", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 11.0 }, "install": { "command": "hyperframes add code-snippet-visual-studio-light", "path": "compositions/code-snippet-visual-studio-light.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 1, "hasPreview": false, "bestFor": [ "适合展示真实编辑器界面、代码教学、功能发布、开发工作流。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-snippet-visual-studio-light": 0.15, "Code Snippet - Visual Studio Light": 0.15, "code": 0.15, "developer": 0.15, "showcase": 0.15, "vscode": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15, "VS Code": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-snippet-visual-studio-light`
Code Snippet - Visual Studio Light
#code #developer #showcase #vscode | Block | VS Code workbench with per-character typing animation in the Visual Studio Light theme. Full editor chrome with activity bar, sidebar, tabs, terminal, and status bar. | 适合展示真实编辑器界面、代码教学、功能发布、开发工作流。 | `hyperframes add code-snippet-visual-studio-light`
`
` | 包含 1 个 asset |" } }, { "id": "code-typing", "title": "Code Typing", "type": "block", "category": { "id": "03", "name": "开发者、代码与终端演示" }, "intentDomains": [ "developer_demo", "vfx" ], "styleTags": [], "motionTags": [ "typing", "reveal" ], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "code-typing", "Code Typing", "code", "code-animation", "typing", "developer", "代码演示", "编程教程", "终端演示", "CLI", "VS Code" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 5.0 }, "install": { "command": "hyperframes add code-typing", "path": "compositions/code-typing.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合把代码变化、重点行、diff、滚动、粒子/3D 编译感做成叙事镜头。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "code", "filename", "terminalCommands", "callout" ], "recommendedCompanionComponents": [ "shimmer-sweep", "grain-overlay" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "code-typing": 0.15, "Code Typing": 0.15, "code": 0.15, "code-animation": 0.15, "typing": 0.15, "developer": 0.15, "代码演示": 0.15, "编程教程": 0.15, "终端演示": 0.15, "CLI": 0.15, "VS Code": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `code-typing`
Code Typing
#code #code-animation #typing #developer | Block | Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation. | 适合把代码变化、重点行、diff、滚动、粒子/3D 编译感做成叙事镜头。 | `hyperframes add code-typing`
`
` | 有预览视频 |" } }, { "id": "caption-blend-difference", "title": "Blend Difference", "type": "component", "category": { "id": "04", "name": "口播字幕与文字样式" }, "intentDomains": [ "caption_style", "social_media" ], "styleTags": [], "motionTags": [], "assetRoles": [ "overlay", "caption" ], "naturalLanguageTriggers": [ "caption-blend-difference", "Blend Difference", "text", "text-effect", "effect", "blend-mode", "contrast", "inversion", "字幕", "口播", "关键词强调", "短视频字幕" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add caption-blend-difference", "path": "compositions/components/caption-blend-difference.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": false, "bestFor": [ "适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "字幕需要逐词高亮、整句强调、故障科技感，还是杂志排版感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [ "captionText", "emphasisWords", "timing" ], "recommendedCompanionComponents": [], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "caption-blend-difference": 0.15, "Blend Difference": 0.15, "text": 0.15, "text-effect": 0.15, "effect": 0.15, "blend-mode": 0.15, "contrast": 0.15, "inversion": 0.15, "字幕": 0.15, "口播": 0.15, "关键词强调": 0.15, "短视频字幕": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `caption-blend-difference`
Blend Difference
#text #text-effect #effect #blend-mode #contrast #inversion | Component | Auto-inverting text using mix-blend-mode: difference — flips between white and black per-pixel against the background | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-blend-difference`
`` | - |" } }, { "id": "caption-clip-wipe", "title": "Clip Wipe", "type": "component", "category": { "id": "04", "name": "口播字幕与文字样式" }, "intentDomains": [ "caption_style", "social_media" ], "styleTags": [], "motionTags": [ "wipe", "reveal" ], "assetRoles": [ "overlay", "caption", "transition" ], "naturalLanguageTriggers": [ "caption-clip-wipe", "Clip Wipe", "captions", "caption-style", "wipe", "clip-path", "reveal", "字幕", "口播", "关键词强调", "短视频字幕" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add caption-clip-wipe", "path": "compositions/components/caption-clip-wipe.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "字幕需要逐词高亮、整句强调、故障科技感，还是杂志排版感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [ "captionText", "emphasisWords", "timing" ], "recommendedCompanionComponents": [], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "caption-clip-wipe": 0.15, "Clip Wipe": 0.15, "captions": 0.15, "caption-style": 0.15, "wipe": 0.15, "clip-path": 0.15, "reveal": 0.15, "字幕": 0.15, "口播": 0.15, "关键词强调": 0.15, "短视频字幕": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `caption-clip-wipe`
Clip Wipe
#captions #caption-style #wipe #clip-path #reveal | Component | Left-to-right clip-path wipe reveal per word | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-clip-wipe`
`` | 有预览视频 |" } }, { "id": "caption-editorial-emphasis", "title": "Editorial Emphasis", "type": "component", "category": { "id": "04", "name": "口播字幕与文字样式" }, "intentDomains": [ "caption_style", "social_media" ], "styleTags": [ "editorial" ], "motionTags": [], "assetRoles": [ "overlay", "caption" ], "naturalLanguageTriggers": [ "caption-editorial-emphasis", "Editorial Emphasis", "captions", "caption-style", "editorial", "typography", "emphasis", "字幕", "口播", "关键词强调", "短视频字幕" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add caption-editorial-emphasis", "path": "compositions/components/caption-editorial-emphasis.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "字幕需要逐词高亮、整句强调、故障科技感，还是杂志排版感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [ "captionText", "emphasisWords", "timing" ], "recommendedCompanionComponents": [], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "caption-editorial-emphasis": 0.15, "Editorial Emphasis": 0.15, "captions": 0.15, "caption-style": 0.15, "editorial": 0.15, "typography": 0.15, "emphasis": 0.15, "字幕": 0.15, "口播": 0.15, "关键词强调": 0.15, "短视频字幕": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `caption-editorial-emphasis`
Editorial Emphasis
#captions #caption-style #editorial #typography #emphasis | Component | Dual-font system with dramatic size contrast for emphasis words | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-editorial-emphasis`
`` | 有预览视频 |" } }, { "id": "caption-glitch-rgb", "title": "Glitch RGB", "type": "component", "category": { "id": "04", "name": "口播字幕与文字样式" }, "intentDomains": [ "caption_style", "social_media" ], "styleTags": [ "cyberpunk" ], "motionTags": [ "glitch" ], "assetRoles": [ "overlay", "caption", "effect" ], "naturalLanguageTriggers": [ "caption-glitch-rgb", "Glitch RGB", "captions", "caption-style", "glitch", "cyber", "tech", "字幕", "口播", "关键词强调", "短视频字幕" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add caption-glitch-rgb", "path": "compositions/components/caption-glitch-rgb.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "字幕需要逐词高亮、整句强调、故障科技感，还是杂志排版感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [ "captionText", "emphasisWords", "timing" ], "recommendedCompanionComponents": [], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "caption-glitch-rgb": 0.15, "Glitch RGB": 0.15, "captions": 0.15, "caption-style": 0.15, "glitch": 0.15, "cyber": 0.15, "tech": 0.15, "字幕": 0.15, "口播": 0.15, "关键词强调": 0.15, "短视频字幕": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `caption-glitch-rgb`
Glitch RGB
#captions #caption-style #glitch #cyber #tech | Component | RGB chromatic aberration with CRT scanline overlay | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-glitch-rgb`
`` | 有预览视频 |" } }, { "id": "caption-gradient-fill", "title": "Gradient Fill", "type": "component", "category": { "id": "04", "name": "口播字幕与文字样式" }, "intentDomains": [ "caption_style", "social_media" ], "styleTags": [], "motionTags": [ "wipe", "bounce" ], "assetRoles": [ "overlay", "caption" ], "naturalLanguageTriggers": [ "caption-gradient-fill", "Gradient Fill", "captions", "caption-style", "gradient", "colorful", "字幕", "口播", "关键词强调", "短视频字幕" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add caption-gradient-fill", "path": "compositions/components/caption-gradient-fill.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "字幕需要逐词高亮、整句强调、故障科技感，还是杂志排版感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [ "captionText", "emphasisWords", "timing" ], "recommendedCompanionComponents": [], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "caption-gradient-fill": 0.15, "Gradient Fill": 0.15, "captions": 0.15, "caption-style": 0.15, "gradient": 0.15, "colorful": 0.15, "字幕": 0.15, "口播": 0.15, "关键词强调": 0.15, "短视频字幕": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `caption-gradient-fill`
Gradient Fill
#captions #caption-style #gradient #colorful | Component | Gradient-clipped text with elastic bounce entrance | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-gradient-fill`
`` | 有预览视频 |" } }, { "id": "caption-kinetic-slam", "title": "Kinetic Slam", "type": "component", "category": { "id": "04", "name": "口播字幕与文字样式" }, "intentDomains": [ "caption_style", "social_media" ], "styleTags": [], "motionTags": [ "slam" ], "assetRoles": [ "overlay", "caption" ], "naturalLanguageTriggers": [ "caption-kinetic-slam", "Kinetic Slam", "captions", "caption-style", "kinetic", "typography", "slam", "字幕", "口播", "关键词强调", "短视频字幕" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add caption-kinetic-slam", "path": "compositions/components/caption-kinetic-slam.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "字幕需要逐词高亮、整句强调、故障科技感，还是杂志排版感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [ "captionText", "emphasisWords", "timing" ], "recommendedCompanionComponents": [], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "caption-kinetic-slam": 0.15, "Kinetic Slam": 0.15, "captions": 0.15, "caption-style": 0.15, "kinetic": 0.15, "typography": 0.15, "slam": 0.15, "字幕": 0.15, "口播": 0.15, "关键词强调": 0.15, "短视频字幕": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `caption-kinetic-slam`
Kinetic Slam
#captions #caption-style #kinetic #typography #slam | Component | Full-screen single-word display with alternating entrance directions | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-kinetic-slam`
`` | 有预览视频 |" } }, { "id": "caption-matrix-decode", "title": "Matrix Decode", "type": "component", "category": { "id": "04", "name": "口播字幕与文字样式" }, "intentDomains": [ "caption_style", "developer_demo", "social_media" ], "styleTags": [], "motionTags": [ "reveal" ], "assetRoles": [ "overlay", "caption" ], "naturalLanguageTriggers": [ "caption-matrix-decode", "Matrix Decode", "captions", "caption-style", "matrix", "scramble", "decode", "字幕", "口播", "关键词强调", "短视频字幕" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add caption-matrix-decode", "path": "compositions/components/caption-matrix-decode.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示真实编辑器、终端命令，还是代码变化/重点行？" ], "afterSelection": [ "字幕需要逐词高亮、整句强调、故障科技感，还是杂志排版感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [ "captionText", "emphasisWords", "timing" ], "recommendedCompanionComponents": [ "shimmer-sweep", "grain-overlay" ], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "caption-matrix-decode": 0.15, "Matrix Decode": 0.15, "captions": 0.15, "caption-style": 0.15, "matrix": 0.15, "scramble": 0.15, "decode": 0.15, "字幕": 0.15, "口播": 0.15, "关键词强调": 0.15, "短视频字幕": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `caption-matrix-decode`
Matrix Decode
#captions #caption-style #matrix #scramble #decode | Component | Character scramble animation before text reveal | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-matrix-decode`
`` | 有预览视频 |" } }, { "id": "caption-neon-accent", "title": "Neon Accent", "type": "component", "category": { "id": "04", "name": "口播字幕与文字样式" }, "intentDomains": [ "caption_style", "social_media" ], "styleTags": [], "motionTags": [], "assetRoles": [ "overlay", "caption" ], "naturalLanguageTriggers": [ "caption-neon-accent", "Neon Accent", "captions", "caption-style", "neon", "glow", "accent", "字幕", "口播", "关键词强调", "短视频字幕" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add caption-neon-accent", "path": "compositions/components/caption-neon-accent.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "字幕需要逐词高亮、整句强调、故障科技感，还是杂志排版感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [ "captionText", "emphasisWords", "timing" ], "recommendedCompanionComponents": [], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "caption-neon-accent": 0.15, "Neon Accent": 0.15, "captions": 0.15, "caption-style": 0.15, "neon": 0.15, "glow": 0.15, "accent": 0.15, "字幕": 0.15, "口播": 0.15, "关键词强调": 0.15, "短视频字幕": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `caption-neon-accent`
Neon Accent
#captions #caption-style #neon #glow #accent | Component | Multi-color neon glow accents with wiggle drift animation | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-neon-accent`
`` | 有预览视频 |" } }, { "id": "caption-neon-glow", "title": "Neon Glow", "type": "component", "category": { "id": "04", "name": "口播字幕与文字样式" }, "intentDomains": [ "caption_style", "social_media" ], "styleTags": [], "motionTags": [], "assetRoles": [ "overlay", "caption" ], "naturalLanguageTriggers": [ "caption-neon-glow", "Neon Glow", "captions", "caption-style", "neon", "glow", "gaming", "字幕", "口播", "关键词强调", "短视频字幕" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add caption-neon-glow", "path": "compositions/components/caption-neon-glow.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "字幕需要逐词高亮、整句强调、故障科技感，还是杂志排版感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [ "captionText", "emphasisWords", "timing" ], "recommendedCompanionComponents": [], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "caption-neon-glow": 0.15, "Neon Glow": 0.15, "captions": 0.15, "caption-style": 0.15, "neon": 0.15, "glow": 0.15, "gaming": 0.15, "字幕": 0.15, "口播": 0.15, "关键词强调": 0.15, "短视频字幕": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `caption-neon-glow`
Neon Glow
#captions #caption-style #neon #glow #gaming | Component | Cyan and magenta neon glow with keyword accent colors | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-neon-glow`
`` | 有预览视频 |" } }, { "id": "caption-parallax-layers", "title": "Parallax Layers", "type": "component", "category": { "id": "04", "name": "口播字幕与文字样式" }, "intentDomains": [ "caption_style", "social_media", "vfx" ], "styleTags": [], "motionTags": [ "parallax" ], "assetRoles": [ "overlay", "caption" ], "naturalLanguageTriggers": [ "caption-parallax-layers", "Parallax Layers", "captions", "caption-style", "parallax", "3d", "depth", "字幕", "口播", "关键词强调", "短视频字幕" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add caption-parallax-layers", "path": "compositions/components/caption-parallax-layers.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "字幕需要逐词高亮、整句强调、故障科技感，还是杂志排版感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [ "captionText", "emphasisWords", "timing" ], "recommendedCompanionComponents": [], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "caption-parallax-layers": 0.15, "Parallax Layers": 0.15, "captions": 0.15, "caption-style": 0.15, "parallax": 0.15, "3d": 0.15, "depth": 0.15, "字幕": 0.15, "口播": 0.15, "关键词强调": 0.15, "短视频字幕": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `caption-parallax-layers`
Parallax Layers
#captions #caption-style #parallax #3d #depth | Component | Behind-subject 3D text layering with vertical stretch effect | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-parallax-layers`
`` | 有预览视频 |" } }, { "id": "caption-particle-burst", "title": "Particle Burst", "type": "component", "category": { "id": "04", "name": "口播字幕与文字样式" }, "intentDomains": [ "caption_style", "social_media" ], "styleTags": [], "motionTags": [ "particle" ], "assetRoles": [ "overlay", "caption" ], "naturalLanguageTriggers": [ "caption-particle-burst", "Particle Burst", "captions", "caption-style", "particles", "burst", "effects", "字幕", "口播", "关键词强调", "短视频字幕" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add caption-particle-burst", "path": "compositions/components/caption-particle-burst.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "字幕需要逐词高亮、整句强调、故障科技感，还是杂志排版感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [ "captionText", "emphasisWords", "timing" ], "recommendedCompanionComponents": [], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "caption-particle-burst": 0.15, "Particle Burst": 0.15, "captions": 0.15, "caption-style": 0.15, "particles": 0.15, "burst": 0.15, "effects": 0.15, "字幕": 0.15, "口播": 0.15, "关键词强调": 0.15, "短视频字幕": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `caption-particle-burst`
Particle Burst
#captions #caption-style #particles #burst #effects | Component | Keyword words trigger colored particle explosions | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-particle-burst`
`` | 有预览视频 |" } }, { "id": "caption-pill-karaoke", "title": "Pill Karaoke", "type": "component", "category": { "id": "04", "name": "口播字幕与文字样式" }, "intentDomains": [ "caption_style", "social_media" ], "styleTags": [ "light" ], "motionTags": [], "assetRoles": [ "overlay", "caption" ], "naturalLanguageTriggers": [ "caption-pill-karaoke", "Pill Karaoke", "captions", "caption-style", "karaoke", "pill", "字幕", "口播", "关键词强调", "短视频字幕" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add caption-pill-karaoke", "path": "compositions/components/caption-pill-karaoke.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "字幕需要逐词高亮、整句强调、故障科技感，还是杂志排版感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [ "captionText", "emphasisWords", "timing" ], "recommendedCompanionComponents": [], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "caption-pill-karaoke": 0.15, "Pill Karaoke": 0.15, "captions": 0.15, "caption-style": 0.15, "karaoke": 0.15, "pill": 0.15, "字幕": 0.15, "口播": 0.15, "关键词强调": 0.15, "短视频字幕": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `caption-pill-karaoke`
Pill Karaoke
#captions #caption-style #karaoke #pill | Component | Pill-shaped container with per-word karaoke color highlight | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-pill-karaoke`
`` | 有预览视频 |" } }, { "id": "caption-texture", "title": "Texture", "type": "component", "category": { "id": "04", "name": "口播字幕与文字样式" }, "intentDomains": [ "caption_style", "social_media" ], "styleTags": [], "motionTags": [], "assetRoles": [ "overlay", "caption", "effect" ], "naturalLanguageTriggers": [ "caption-texture", "Texture", "captions", "caption-style", "texture", "mask", "字幕", "口播", "关键词强调", "短视频字幕" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add caption-texture", "path": "compositions/components/caption-texture.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": 6, "hasPreview": true, "bestFor": [ "适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "字幕需要逐词高亮、整句强调、故障科技感，还是杂志排版感？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [ "captionText", "emphasisWords", "timing" ], "recommendedCompanionComponents": [], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "caption-texture": 0.15, "Texture": 0.15, "captions": 0.15, "caption-style": 0.15, "texture": 0.15, "mask": 0.15, "字幕": 0.15, "口播": 0.15, "关键词强调": 0.15, "短视频字幕": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `caption-texture`
Texture
#captions #caption-style #texture #mask | Component | Flowing texture mask over large uppercase text — ships with 6 textures (lava, marble, metal, wood, concrete, rock), configurable via the texture variable | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-texture`
`` | 包含 6 个 asset; 有预览视频 |" } }, { "id": "caption-weight-shift", "title": "Weight Shift", "type": "component", "category": { "id": "04", "name": "口播字幕与文字样式" }, "intentDomains": [ "caption_style", "social_media", "transition" ], "styleTags": [ "minimal" ], "motionTags": [], "assetRoles": [ "overlay", "caption", "transition" ], "naturalLanguageTriggers": [ "caption-weight-shift", "Weight Shift", "captions", "caption-style", "minimal", "typography", "字幕", "口播", "关键词强调", "短视频字幕" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add caption-weight-shift", "path": "compositions/components/caption-weight-shift.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "字幕需要逐词高亮、整句强调、故障科技感，还是杂志排版感？", "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [ "captionText", "emphasisWords", "timing" ], "recommendedCompanionComponents": [], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "caption-weight-shift": 0.15, "Weight Shift": 0.15, "captions": 0.15, "caption-style": 0.15, "minimal": 0.15, "typography": 0.15, "字幕": 0.15, "口播": 0.15, "关键词强调": 0.15, "短视频字幕": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `caption-weight-shift`
Weight Shift
#captions #caption-style #minimal #typography | Component | Elegant font-weight transition between caption lines | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-weight-shift`
`` | 有预览视频 |" } }, { "id": "chromatic-radial-split", "title": "Chromatic Radial Split", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition" ], "styleTags": [ "cinematic" ], "motionTags": [ "shader" ], "assetRoles": [ "main_scene", "transition", "effect" ], "naturalLanguageTriggers": [ "chromatic-radial-split", "Chromatic Radial Split", "transition", "shader", "转场", "镜头切换", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.0 }, "install": { "command": "hyperframes add chromatic-radial-split", "path": "compositions/chromatic-radial-split.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "chromatic-radial-split": 0.15, "Chromatic Radial Split": 0.15, "transition": 0.15, "shader": 0.15, "转场": 0.15, "镜头切换": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `chromatic-radial-split`
Chromatic Radial Split
#transition #shader | Block | Shader transition with chromatic aberration radial split | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add chromatic-radial-split`
`
` | 有预览视频 |" } }, { "id": "cinematic-zoom", "title": "Cinematic Zoom", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition" ], "styleTags": [ "cinematic" ], "motionTags": [ "zoom", "shader", "blur" ], "assetRoles": [ "main_scene", "transition", "effect" ], "naturalLanguageTriggers": [ "cinematic-zoom", "Cinematic Zoom", "transition", "shader", "转场", "镜头切换", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.0 }, "install": { "command": "hyperframes add cinematic-zoom", "path": "compositions/cinematic-zoom.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "cinematic-zoom": 0.15, "Cinematic Zoom": 0.15, "transition": 0.15, "shader": 0.15, "转场": 0.15, "镜头切换": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `cinematic-zoom`
Cinematic Zoom
#transition #shader | Block | Shader transition with dramatic zoom blur | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add cinematic-zoom`
`
` | 有预览视频 |" } }, { "id": "cross-warp-morph", "title": "Cross Warp Morph", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition" ], "styleTags": [ "cinematic" ], "motionTags": [ "shader", "morph" ], "assetRoles": [ "main_scene", "transition", "effect" ], "naturalLanguageTriggers": [ "cross-warp-morph", "Cross Warp Morph", "transition", "shader", "转场", "镜头切换", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.0 }, "install": { "command": "hyperframes add cross-warp-morph", "path": "compositions/cross-warp-morph.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "cross-warp-morph": 0.15, "Cross Warp Morph": 0.15, "transition": 0.15, "shader": 0.15, "转场": 0.15, "镜头切换": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `cross-warp-morph`
Cross Warp Morph
#transition #shader | Block | Shader transition with cross-warped morphing | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add cross-warp-morph`
`
` | 有预览视频 |" } }, { "id": "domain-warp-dissolve", "title": "Domain Warp Dissolve", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition" ], "styleTags": [ "cinematic" ], "motionTags": [ "shader" ], "assetRoles": [ "main_scene", "transition", "effect" ], "naturalLanguageTriggers": [ "domain-warp-dissolve", "Domain Warp Dissolve", "transition", "shader", "转场", "镜头切换", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.0 }, "install": { "command": "hyperframes add domain-warp-dissolve", "path": "compositions/domain-warp-dissolve.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "domain-warp-dissolve": 0.15, "Domain Warp Dissolve": 0.15, "transition": 0.15, "shader": 0.15, "转场": 0.15, "镜头切换": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `domain-warp-dissolve`
Domain Warp Dissolve
#transition #shader | Block | Shader transition with fractal noise domain warping | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add domain-warp-dissolve`
`
` | 有预览视频 |" } }, { "id": "flash-through-white", "title": "Flash Through White", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition" ], "styleTags": [ "cinematic" ], "motionTags": [ "shader" ], "assetRoles": [ "main_scene", "transition", "effect" ], "naturalLanguageTriggers": [ "flash-through-white", "Flash Through White", "transition", "shader", "转场", "镜头切换", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.0 }, "install": { "command": "hyperframes add flash-through-white", "path": "compositions/flash-through-white.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "flash-through-white": 0.15, "Flash Through White": 0.15, "transition": 0.15, "shader": 0.15, "转场": 0.15, "镜头切换": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `flash-through-white`
Flash Through White
#transition #shader | Block | Shader transition with white flash crossfade | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add flash-through-white`
`
` | 有预览视频 |" } }, { "id": "glitch", "title": "Glitch", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition" ], "styleTags": [ "cinematic", "cyberpunk" ], "motionTags": [ "glitch", "shader" ], "assetRoles": [ "main_scene", "transition", "effect" ], "naturalLanguageTriggers": [ "glitch", "Glitch", "transition", "shader", "转场", "镜头切换", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.0 }, "install": { "command": "hyperframes add glitch", "path": "compositions/glitch.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "glitch": 0.15, "Glitch": 0.15, "transition": 0.15, "shader": 0.15, "转场": 0.15, "镜头切换": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `glitch`
Glitch
#transition #shader | Block | Shader transition with digital glitch artifacts | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add glitch`
`
` | 有预览视频 |" } }, { "id": "gravitational-lens", "title": "Gravitational Lens", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition" ], "styleTags": [ "cinematic" ], "motionTags": [ "shader" ], "assetRoles": [ "main_scene", "transition", "effect" ], "naturalLanguageTriggers": [ "gravitational-lens", "Gravitational Lens", "transition", "shader", "转场", "镜头切换", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.0 }, "install": { "command": "hyperframes add gravitational-lens", "path": "compositions/gravitational-lens.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "gravitational-lens": 0.15, "Gravitational Lens": 0.15, "transition": 0.15, "shader": 0.15, "转场": 0.15, "镜头切换": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `gravitational-lens`
Gravitational Lens
#transition #shader | Block | Shader transition with gravitational lensing distortion | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add gravitational-lens`
`
` | 有预览视频 |" } }, { "id": "light-leak", "title": "Light Leak", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition" ], "styleTags": [ "cinematic", "light" ], "motionTags": [ "shader" ], "assetRoles": [ "main_scene", "transition", "effect" ], "naturalLanguageTriggers": [ "light-leak", "Light Leak", "transition", "shader", "转场", "镜头切换", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.0 }, "install": { "command": "hyperframes add light-leak", "path": "compositions/light-leak.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "light-leak": 0.15, "Light Leak": 0.15, "transition": 0.15, "shader": 0.15, "转场": 0.15, "镜头切换": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `light-leak`
Light Leak
#transition #shader | Block | Shader transition with cinematic light leak overlay | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add light-leak`
`
` | 有预览视频 |" } }, { "id": "ridged-burn", "title": "Ridged Burn", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition" ], "styleTags": [ "cinematic" ], "motionTags": [ "shader" ], "assetRoles": [ "main_scene", "transition", "effect" ], "naturalLanguageTriggers": [ "ridged-burn", "Ridged Burn", "transition", "shader", "转场", "镜头切换", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.0 }, "install": { "command": "hyperframes add ridged-burn", "path": "compositions/ridged-burn.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "ridged-burn": 0.15, "Ridged Burn": 0.15, "transition": 0.15, "shader": 0.15, "转场": 0.15, "镜头切换": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `ridged-burn`
Ridged Burn
#transition #shader | Block | Shader transition with ridged turbulence burn effect | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add ridged-burn`
`
` | 有预览视频 |" } }, { "id": "ripple-waves", "title": "Ripple Waves", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition" ], "styleTags": [ "cinematic" ], "motionTags": [ "shader" ], "assetRoles": [ "main_scene", "transition", "effect" ], "naturalLanguageTriggers": [ "ripple-waves", "Ripple Waves", "transition", "shader", "转场", "镜头切换", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.0 }, "install": { "command": "hyperframes add ripple-waves", "path": "compositions/ripple-waves.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "ripple-waves": 0.15, "Ripple Waves": 0.15, "transition": 0.15, "shader": 0.15, "转场": 0.15, "镜头切换": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `ripple-waves`
Ripple Waves
#transition #shader | Block | Shader transition with concentric ripple wave distortion | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add ripple-waves`
`
` | 有预览视频 |" } }, { "id": "sdf-iris", "title": "SDF Iris", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition" ], "styleTags": [ "cinematic" ], "motionTags": [ "shader", "reveal" ], "assetRoles": [ "main_scene", "transition", "effect" ], "naturalLanguageTriggers": [ "sdf-iris", "SDF Iris", "transition", "shader", "转场", "镜头切换", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.0 }, "install": { "command": "hyperframes add sdf-iris", "path": "compositions/sdf-iris.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "sdf-iris": 0.15, "SDF Iris": 0.15, "transition": 0.15, "shader": 0.15, "转场": 0.15, "镜头切换": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `sdf-iris`
SDF Iris
#transition #shader | Block | Shader transition with signed distance field iris reveal | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add sdf-iris`
`
` | 有预览视频 |" } }, { "id": "swirl-vortex", "title": "Swirl Vortex", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition" ], "styleTags": [ "cinematic" ], "motionTags": [ "shader" ], "assetRoles": [ "main_scene", "transition", "effect" ], "naturalLanguageTriggers": [ "swirl-vortex", "Swirl Vortex", "transition", "shader", "转场", "镜头切换", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.0 }, "install": { "command": "hyperframes add swirl-vortex", "path": "compositions/swirl-vortex.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "swirl-vortex": 0.15, "Swirl Vortex": 0.15, "transition": 0.15, "shader": 0.15, "转场": 0.15, "镜头切换": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `swirl-vortex`
Swirl Vortex
#transition #shader | Block | Shader transition with swirling vortex distortion | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add swirl-vortex`
`
` | 有预览视频 |" } }, { "id": "thermal-distortion", "title": "Thermal Distortion", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition" ], "styleTags": [ "cinematic" ], "motionTags": [ "shader" ], "assetRoles": [ "main_scene", "transition", "effect" ], "naturalLanguageTriggers": [ "thermal-distortion", "Thermal Distortion", "transition", "shader", "转场", "镜头切换", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.0 }, "install": { "command": "hyperframes add thermal-distortion", "path": "compositions/thermal-distortion.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "thermal-distortion": 0.15, "Thermal Distortion": 0.15, "transition": 0.15, "shader": 0.15, "转场": 0.15, "镜头切换": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `thermal-distortion`
Thermal Distortion
#transition #shader | Block | Shader transition with heat haze thermal distortion | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add thermal-distortion`
`
` | 有预览视频 |" } }, { "id": "transitions-3d", "title": "3D Transitions", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch", "vfx" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene", "transition" ], "naturalLanguageTriggers": [ "transitions-3d", "3D Transitions", "transition", "showcase", "转场", "镜头切换", "shader", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 11.0 }, "install": { "command": "hyperframes add transitions-3d", "path": "compositions/transitions-3d.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？", "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "transitions-3d": 0.15, "3D Transitions": 0.15, "transition": 0.15, "showcase": 0.15, "转场": 0.15, "镜头切换": 0.15, "shader": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `transitions-3d`
3D Transitions
#transition #showcase | Block | Showcase of 3D perspective flip and rotate transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-3d`
`
` | 有预览视频 |" } }, { "id": "transitions-blur", "title": "Blur Transitions", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch" ], "styleTags": [], "motionTags": [ "blur" ], "assetRoles": [ "main_scene", "transition", "effect" ], "naturalLanguageTriggers": [ "transitions-blur", "Blur Transitions", "transition", "showcase", "转场", "镜头切换", "shader", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 20.0 }, "install": { "command": "hyperframes add transitions-blur", "path": "compositions/transitions-blur.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？", "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "transitions-blur": 0.15, "Blur Transitions": 0.15, "transition": 0.15, "showcase": 0.15, "转场": 0.15, "镜头切换": 0.15, "shader": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `transitions-blur`
Blur Transitions
#transition #showcase | Block | Showcase of blur-based transitions between scenes | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-blur`
`
` | 有预览视频 |" } }, { "id": "transitions-cover", "title": "Cover Transitions", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene", "transition" ], "naturalLanguageTriggers": [ "transitions-cover", "Cover Transitions", "transition", "showcase", "转场", "镜头切换", "shader", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 21.0 }, "install": { "command": "hyperframes add transitions-cover", "path": "compositions/transitions-cover.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？", "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "transitions-cover": 0.15, "Cover Transitions": 0.15, "transition": 0.15, "showcase": 0.15, "转场": 0.15, "镜头切换": 0.15, "shader": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `transitions-cover`
Cover Transitions
#transition #showcase | Block | Showcase of cover/uncover slide transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-cover`
`
` | 有预览视频 |" } }, { "id": "transitions-destruction", "title": "Destruction Transitions", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene", "transition" ], "naturalLanguageTriggers": [ "transitions-destruction", "Destruction Transitions", "transition", "showcase", "转场", "镜头切换", "shader", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 14.0 }, "install": { "command": "hyperframes add transitions-destruction", "path": "compositions/transitions-destruction.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？", "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "transitions-destruction": 0.15, "Destruction Transitions": 0.15, "transition": 0.15, "showcase": 0.15, "转场": 0.15, "镜头切换": 0.15, "shader": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `transitions-destruction`
Destruction Transitions
#transition #showcase | Block | Showcase of destructive break-apart transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-destruction`
`
` | 有预览视频 |" } }, { "id": "transitions-dissolve", "title": "Dissolve Transitions", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene", "transition" ], "naturalLanguageTriggers": [ "transitions-dissolve", "Dissolve Transitions", "transition", "showcase", "转场", "镜头切换", "shader", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 24.0 }, "install": { "command": "hyperframes add transitions-dissolve", "path": "compositions/transitions-dissolve.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？", "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "transitions-dissolve": 0.15, "Dissolve Transitions": 0.15, "transition": 0.15, "showcase": 0.15, "转场": 0.15, "镜头切换": 0.15, "shader": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `transitions-dissolve`
Dissolve Transitions
#transition #showcase | Block | Showcase of dissolve and fade transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-dissolve`
`
` | 有预览视频 |" } }, { "id": "transitions-distortion", "title": "Distortion Transitions", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene", "transition" ], "naturalLanguageTriggers": [ "transitions-distortion", "Distortion Transitions", "transition", "showcase", "转场", "镜头切换", "shader", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 21.0 }, "install": { "command": "hyperframes add transitions-distortion", "path": "compositions/transitions-distortion.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？", "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "transitions-distortion": 0.15, "Distortion Transitions": 0.15, "transition": 0.15, "showcase": 0.15, "转场": 0.15, "镜头切换": 0.15, "shader": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `transitions-distortion`
Distortion Transitions
#transition #showcase | Block | Showcase of warp and distortion transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-distortion`
`
` | 有预览视频 |" } }, { "id": "transitions-grid", "title": "Grid Transitions", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene", "transition" ], "naturalLanguageTriggers": [ "transitions-grid", "Grid Transitions", "transition", "showcase", "转场", "镜头切换", "shader", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 11.0 }, "install": { "command": "hyperframes add transitions-grid", "path": "compositions/transitions-grid.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？", "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "transitions-grid": 0.15, "Grid Transitions": 0.15, "transition": 0.15, "showcase": 0.15, "转场": 0.15, "镜头切换": 0.15, "shader": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `transitions-grid`
Grid Transitions
#transition #showcase | Block | Showcase of grid-based tile transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-grid`
`
` | 有预览视频 |" } }, { "id": "transitions-light", "title": "Light Transitions", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch" ], "styleTags": [ "light" ], "motionTags": [], "assetRoles": [ "main_scene", "transition" ], "naturalLanguageTriggers": [ "transitions-light", "Light Transitions", "transition", "showcase", "转场", "镜头切换", "shader", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 21.0 }, "install": { "command": "hyperframes add transitions-light", "path": "compositions/transitions-light.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？", "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "transitions-light": 0.15, "Light Transitions": 0.15, "transition": 0.15, "showcase": 0.15, "转场": 0.15, "镜头切换": 0.15, "shader": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `transitions-light`
Light Transitions
#transition #showcase | Block | Showcase of light-based glow and flash transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-light`
`
` | 有预览视频 |" } }, { "id": "transitions-mechanical", "title": "Mechanical Transitions", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene", "transition" ], "naturalLanguageTriggers": [ "transitions-mechanical", "Mechanical Transitions", "transition", "showcase", "转场", "镜头切换", "shader", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 15.0 }, "install": { "command": "hyperframes add transitions-mechanical", "path": "compositions/transitions-mechanical.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？", "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "transitions-mechanical": 0.15, "Mechanical Transitions": 0.15, "transition": 0.15, "showcase": 0.15, "转场": 0.15, "镜头切换": 0.15, "shader": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `transitions-mechanical`
Mechanical Transitions
#transition #showcase | Block | Showcase of mechanical shutter and iris transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-mechanical`
`
` | 有预览视频 |" } }, { "id": "transitions-other", "title": "Other Transitions", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene", "transition" ], "naturalLanguageTriggers": [ "transitions-other", "Other Transitions", "transition", "showcase", "转场", "镜头切换", "shader", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 20.0 }, "install": { "command": "hyperframes add transitions-other", "path": "compositions/transitions-other.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？", "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "transitions-other": 0.15, "Other Transitions": 0.15, "transition": 0.15, "showcase": 0.15, "转场": 0.15, "镜头切换": 0.15, "shader": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `transitions-other`
Other Transitions
#transition #showcase | Block | Showcase of miscellaneous creative transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-other`
`
` | 有预览视频 |" } }, { "id": "transitions-push", "title": "Push Transitions", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene", "transition" ], "naturalLanguageTriggers": [ "transitions-push", "Push Transitions", "transition", "showcase", "转场", "镜头切换", "shader", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 24.0 }, "install": { "command": "hyperframes add transitions-push", "path": "compositions/transitions-push.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？", "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "transitions-push": 0.15, "Push Transitions": 0.15, "transition": 0.15, "showcase": 0.15, "转场": 0.15, "镜头切换": 0.15, "shader": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `transitions-push`
Push Transitions
#transition #showcase | Block | Showcase of push and slide transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-push`
`
` | 有预览视频 |" } }, { "id": "transitions-radial", "title": "Radial Transitions", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch" ], "styleTags": [], "motionTags": [ "wipe", "reveal" ], "assetRoles": [ "main_scene", "transition" ], "naturalLanguageTriggers": [ "transitions-radial", "Radial Transitions", "transition", "showcase", "转场", "镜头切换", "shader", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 20.0 }, "install": { "command": "hyperframes add transitions-radial", "path": "compositions/transitions-radial.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？", "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "transitions-radial": 0.15, "Radial Transitions": 0.15, "transition": 0.15, "showcase": 0.15, "转场": 0.15, "镜头切换": 0.15, "shader": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `transitions-radial`
Radial Transitions
#transition #showcase | Block | Showcase of radial wipe and reveal transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-radial`
`
` | 有预览视频 |" } }, { "id": "transitions-scale", "title": "Scale Transitions", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch" ], "styleTags": [], "motionTags": [ "zoom" ], "assetRoles": [ "main_scene", "transition" ], "naturalLanguageTriggers": [ "transitions-scale", "Scale Transitions", "transition", "showcase", "转场", "镜头切换", "shader", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 15.0 }, "install": { "command": "hyperframes add transitions-scale", "path": "compositions/transitions-scale.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？", "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "transitions-scale": 0.15, "Scale Transitions": 0.15, "transition": 0.15, "showcase": 0.15, "转场": 0.15, "镜头切换": 0.15, "shader": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `transitions-scale`
Scale Transitions
#transition #showcase | Block | Showcase of scale and zoom transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-scale`
`
` | 有预览视频 |" } }, { "id": "vfx-text-cursor", "title": "VFX Text Cursor", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition" ], "styleTags": [ "cinematic", "light" ], "motionTags": [ "shader", "reveal" ], "assetRoles": [ "main_scene", "transition", "effect" ], "naturalLanguageTriggers": [ "vfx-text-cursor", "VFX Text Cursor", "html-in-canvas", "text", "shader", "cursor", "chromatic", "转场", "镜头切换", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 8.0 }, "install": { "command": "hyperframes add vfx-text-cursor", "path": "compositions/vfx-text-cursor.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "vfx-text-cursor": 0.15, "VFX Text Cursor": 0.15, "html-in-canvas": 0.15, "text": 0.15, "shader": 0.15, "cursor": 0.15, "chromatic": 0.15, "转场": 0.15, "镜头切换": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `vfx-text-cursor`
VFX Text Cursor
#html-in-canvas #text #shader #cursor #chromatic | Block | Dramatic text reveal with cursor glow, chromatic shadow rays, and directional lighting on a black stage. Canvas-based shader post-processing with spectral color edges. | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add vfx-text-cursor`
`
` | 有预览视频 |" } }, { "id": "whip-pan", "title": "Whip Pan", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition" ], "styleTags": [ "cinematic" ], "motionTags": [ "pan", "shader" ], "assetRoles": [ "main_scene", "transition", "effect" ], "naturalLanguageTriggers": [ "whip-pan", "Whip Pan", "transition", "shader", "转场", "镜头切换", "动效过渡" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 4.0 }, "install": { "command": "hyperframes add whip-pan", "path": "compositions/whip-pan.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "whip-pan": 0.15, "Whip Pan": 0.15, "transition": 0.15, "shader": 0.15, "转场": 0.15, "镜头切换": 0.15, "动效过渡": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `whip-pan`
Whip Pan
#transition #shader | Block | Shader transition simulating a fast camera whip pan | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add whip-pan`
`
` | 有预览视频 |" } }, { "id": "grid-pixelate-wipe", "title": "Grid Pixelate Wipe", "type": "component", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition" ], "styleTags": [], "motionTags": [ "wipe", "staggered_reveal" ], "assetRoles": [ "overlay", "transition" ], "naturalLanguageTriggers": [ "grid-pixelate-wipe", "Grid Pixelate Wipe", "transition", "wipe", "grid", "pixelate", "转场", "镜头切换", "shader", "动效过渡" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add grid-pixelate-wipe", "path": "compositions/components/grid-pixelate-wipe.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": false, "bestFor": [ "适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "grid-pixelate-wipe": 0.15, "Grid Pixelate Wipe": 0.15, "transition": 0.15, "wipe": 0.15, "grid": 0.15, "pixelate": 0.15, "转场": 0.15, "镜头切换": 0.15, "shader": 0.15, "动效过渡": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `grid-pixelate-wipe`
Grid Pixelate Wipe
#transition #wipe #grid #pixelate | Component | Transition effect where the screen dissolves into a grid of squares that fade out with staggered timing — use between scenes | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add grid-pixelate-wipe`
`` | - |" } }, { "id": "parallax-unzoom", "title": "Parallax Unzoom", "type": "component", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition" ], "styleTags": [], "motionTags": [ "zoom", "parallax", "reveal" ], "assetRoles": [ "overlay", "transition" ], "naturalLanguageTriggers": [ "parallax-unzoom", "Parallax Unzoom", "transition", "reveal", "unzoom", "parallax", "grid", "hero", "转场", "镜头切换", "shader", "动效过渡" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add parallax-unzoom", "path": "compositions/components/parallax-unzoom.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": false, "bestFor": [ "适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "parallax-unzoom": 0.15, "Parallax Unzoom": 0.15, "transition": 0.15, "reveal": 0.15, "unzoom": 0.15, "parallax": 0.15, "grid": 0.15, "hero": 0.15, "转场": 0.15, "镜头切换": 0.15, "shader": 0.15, "动效过渡": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `parallax-unzoom`
Parallax Unzoom
#transition #reveal #unzoom #parallax #grid #hero | Component | Reveal transition — focus card scales down from full frame as siblings parallax in to form a grid (reverse of parallax-zoom) | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add parallax-unzoom`
`` | - |" } }, { "id": "parallax-zoom", "title": "Parallax Zoom", "type": "component", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition" ], "styleTags": [], "motionTags": [ "zoom", "parallax" ], "assetRoles": [ "overlay", "transition" ], "naturalLanguageTriggers": [ "parallax-zoom", "Parallax Zoom", "transition", "zoom", "parallax", "grid", "hero", "转场", "镜头切换", "shader", "动效过渡" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add parallax-zoom", "path": "compositions/components/parallax-zoom.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": false, "bestFor": [ "适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "parallax-zoom": 0.15, "Parallax Zoom": 0.15, "transition": 0.15, "zoom": 0.15, "parallax": 0.15, "grid": 0.15, "hero": 0.15, "转场": 0.15, "镜头切换": 0.15, "shader": 0.15, "动效过渡": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `parallax-zoom`
Parallax Zoom
#transition #zoom #parallax #grid #hero | Component | Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add parallax-zoom`
`` | - |" } }, { "id": "app-showcase", "title": "App Showcase", "type": "block", "category": { "id": "06", "name": "3D、WebGL/WebGPU 与设备展示" }, "intentDomains": [ "product_launch", "vfx", "device_showcase" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene", "device_showcase" ], "naturalLanguageTriggers": [ "app-showcase", "App Showcase", "showcase", "app", "3d", "产品发布", "设备展示", "App 展示", "液态玻璃", "3D" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 5.5 }, "install": { "command": "hyperframes add app-showcase", "path": "compositions/app-showcase.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "app-showcase": 0.15, "App Showcase": 0.15, "showcase": 0.15, "app": 0.15, "3d": 0.15, "产品发布": 0.15, "设备展示": 0.15, "App 展示": 0.15, "液态玻璃": 0.15, "3D": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `app-showcase`
App Showcase
#showcase #app #3d | Block | Fitness app product showcase with three floating smartphone screens | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add app-showcase`
`
` | 有预览视频 |" } }, { "id": "ios26-liquid-glass", "title": "iOS 26 Liquid Glass Home Screen", "type": "block", "category": { "id": "06", "name": "3D、WebGL/WebGPU 与设备展示" }, "intentDomains": [ "product_launch", "vfx", "transition", "device_showcase" ], "styleTags": [ "apple_like", "premium" ], "motionTags": [ "shader" ], "assetRoles": [ "main_scene", "effect", "device_showcase" ], "naturalLanguageTriggers": [ "ios26-liquid-glass", "iOS 26 Liquid Glass Home Screen", "liquid-glass-html-in-canvas", "webgpu", "3d", "iphone", "ios26", "notifications", "gltf", "html-in-canvas", "产品发布", "设备展示", "App 展示", "液态玻璃", "3D" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 15.0 }, "install": { "command": "hyperframes add ios26-liquid-glass", "path": "compositions/ios26-liquid-glass.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 28, "hasPreview": true, "bestFor": [ "适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？", "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "ios26-liquid-glass": 0.15, "iOS 26 Liquid Glass Home Screen": 0.15, "liquid-glass-html-in-canvas": 0.15, "webgpu": 0.15, "3d": 0.15, "iphone": 0.15, "ios26": 0.15, "notifications": 0.15, "gltf": 0.15, "html-in-canvas": 0.15, "产品发布": 0.15, "设备展示": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `ios26-liquid-glass`
iOS 26 Liquid Glass Home Screen
#liquid-glass-html-in-canvas #webgpu #3d #iphone #ios26 #notifications #gltf #html-in-canvas | Block | 3D iPhone with a normal iOS 26 home screen, liquid glass app icons, shader wallpaper, dock, and fluid glass notifications that drop from the status area onto a GLTF device model. | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add ios26-liquid-glass`
`
` | 包含 28 个 asset; 有预览视频 |" } }, { "id": "liquid-glass-context-menu", "title": "Liquid Glass Context Menu", "type": "block", "category": { "id": "06", "name": "3D、WebGL/WebGPU 与设备展示" }, "intentDomains": [ "product_launch", "vfx", "transition", "device_showcase" ], "styleTags": [ "premium" ], "motionTags": [ "pan", "shader" ], "assetRoles": [ "main_scene", "transition", "device_showcase" ], "naturalLanguageTriggers": [ "liquid-glass-context-menu", "Liquid Glass Context Menu", "html-in-canvas", "liquid-glass-html-in-canvas", "webgpu", "产品发布", "设备展示", "App 展示", "液态玻璃", "3D" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 8.0 }, "install": { "command": "hyperframes add liquid-glass-context-menu", "path": "compositions/liquid-glass-context-menu.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？", "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "liquid-glass-context-menu": 0.15, "Liquid Glass Context Menu": 0.15, "html-in-canvas": 0.15, "liquid-glass-html-in-canvas": 0.15, "webgpu": 0.15, "产品发布": 0.15, "设备展示": 0.15, "App 展示": 0.15, "液态玻璃": 0.15, "3D": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `liquid-glass-context-menu`
Liquid Glass Context Menu
#html-in-canvas #liquid-glass-html-in-canvas #webgpu | Block | Frosted glass context menu panel drifting over an aurora shader background | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add liquid-glass-context-menu`
`
` | 有预览视频 |" } }, { "id": "liquid-glass-media-controls", "title": "Liquid Glass Media Controls", "type": "block", "category": { "id": "06", "name": "3D、WebGL/WebGPU 与设备展示" }, "intentDomains": [ "product_launch", "vfx", "transition", "device_showcase" ], "styleTags": [ "premium" ], "motionTags": [ "pan", "shader" ], "assetRoles": [ "main_scene", "transition", "device_showcase" ], "naturalLanguageTriggers": [ "liquid-glass-media-controls", "Liquid Glass Media Controls", "html-in-canvas", "liquid-glass-html-in-canvas", "webgpu", "产品发布", "设备展示", "App 展示", "液态玻璃", "3D" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 8.0 }, "install": { "command": "hyperframes add liquid-glass-media-controls", "path": "compositions/liquid-glass-media-controls.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？", "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "liquid-glass-media-controls": 0.15, "Liquid Glass Media Controls": 0.15, "html-in-canvas": 0.15, "liquid-glass-html-in-canvas": 0.15, "webgpu": 0.15, "产品发布": 0.15, "设备展示": 0.15, "App 展示": 0.15, "液态玻璃": 0.15, "3D": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `liquid-glass-media-controls`
Liquid Glass Media Controls
#html-in-canvas #liquid-glass-html-in-canvas #webgpu | Block | Frosted glass media control panels spreading over an aurora shader background | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add liquid-glass-media-controls`
`
` | 有预览视频 |" } }, { "id": "liquid-glass-notification", "title": "Liquid Glass Notification", "type": "block", "category": { "id": "06", "name": "3D、WebGL/WebGPU 与设备展示" }, "intentDomains": [ "product_launch", "vfx", "transition", "device_showcase" ], "styleTags": [ "premium" ], "motionTags": [ "shader" ], "assetRoles": [ "main_scene", "effect", "device_showcase" ], "naturalLanguageTriggers": [ "liquid-glass-notification", "Liquid Glass Notification", "html-in-canvas", "liquid-glass-html-in-canvas", "webgpu", "产品发布", "设备展示", "App 展示", "液态玻璃", "3D" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 8.0 }, "install": { "command": "hyperframes add liquid-glass-notification", "path": "compositions/liquid-glass-notification.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 1, "hasPreview": true, "bestFor": [ "适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？", "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "liquid-glass-notification": 0.15, "Liquid Glass Notification": 0.15, "html-in-canvas": 0.15, "liquid-glass-html-in-canvas": 0.15, "webgpu": 0.15, "产品发布": 0.15, "设备展示": 0.15, "App 展示": 0.15, "液态玻璃": 0.15, "3D": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `liquid-glass-notification`
Liquid Glass Notification
#html-in-canvas #liquid-glass-html-in-canvas #webgpu | Block | Frosted glass notification cards floating over an aurora shader background | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add liquid-glass-notification`
`
` | 包含 1 个 asset; 有预览视频 |" } }, { "id": "liquid-glass-widgets", "title": "Liquid Glass Widgets", "type": "block", "category": { "id": "06", "name": "3D、WebGL/WebGPU 与设备展示" }, "intentDomains": [ "product_launch", "vfx", "transition", "device_showcase" ], "styleTags": [ "premium" ], "motionTags": [ "pan", "shader" ], "assetRoles": [ "main_scene", "transition", "device_showcase" ], "naturalLanguageTriggers": [ "liquid-glass-widgets", "Liquid Glass Widgets", "html-in-canvas", "liquid-glass-html-in-canvas", "webgpu", "产品发布", "设备展示", "App 展示", "液态玻璃", "3D" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 8.0 }, "install": { "command": "hyperframes add liquid-glass-widgets", "path": "compositions/liquid-glass-widgets.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 1, "hasPreview": true, "bestFor": [ "适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？", "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "liquid-glass-widgets": 0.15, "Liquid Glass Widgets": 0.15, "html-in-canvas": 0.15, "liquid-glass-html-in-canvas": 0.15, "webgpu": 0.15, "产品发布": 0.15, "设备展示": 0.15, "App 展示": 0.15, "液态玻璃": 0.15, "3D": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `liquid-glass-widgets`
Liquid Glass Widgets
#html-in-canvas #liquid-glass-html-in-canvas #webgpu | Block | Frosted glass stat cards, showcase panel and pill chips over an aurora shader background | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add liquid-glass-widgets`
`
` | 包含 1 个 asset; 有预览视频 |" } }, { "id": "macos-tahoe-liquid-glass", "title": "macOS Tahoe Liquid Glass Desktop", "type": "block", "category": { "id": "06", "name": "3D、WebGL/WebGPU 与设备展示" }, "intentDomains": [ "product_launch", "vfx", "device_showcase" ], "styleTags": [ "cinematic", "apple_like", "premium" ], "motionTags": [], "assetRoles": [ "main_scene", "device_showcase" ], "naturalLanguageTriggers": [ "macos-tahoe-liquid-glass", "macOS Tahoe Liquid Glass Desktop", "html-in-canvas", "3d", "macos", "tahoe", "gltf", "产品发布", "设备展示", "App 展示", "液态玻璃", "3D" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 15.0 }, "install": { "command": "hyperframes add macos-tahoe-liquid-glass", "path": "compositions/macos-tahoe-liquid-glass.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 18, "hasPreview": true, "bestFor": [ "适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "macos-tahoe-liquid-glass": 0.15, "macOS Tahoe Liquid Glass Desktop": 0.15, "html-in-canvas": 0.15, "3d": 0.15, "macos": 0.15, "tahoe": 0.15, "gltf": 0.15, "产品发布": 0.15, "设备展示": 0.15, "App 展示": 0.15, "液态玻璃": 0.15, "3D": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `macos-tahoe-liquid-glass`
macOS Tahoe Liquid Glass Desktop
#html-in-canvas #3d #macos #tahoe #gltf | Block | 3D MacBook with a macOS Tahoe-style desktop, glass menu bar, Finder window, dock, and cinematic device camera move. | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add macos-tahoe-liquid-glass`
`
` | 包含 18 个 asset; 有预览视频 |" } }, { "id": "ui-3d-reveal", "title": "3D UI Reveal", "type": "block", "category": { "id": "06", "name": "3D、WebGL/WebGPU 与设备展示" }, "intentDomains": [ "product_launch", "vfx", "device_showcase" ], "styleTags": [], "motionTags": [ "reveal" ], "assetRoles": [ "main_scene", "device_showcase" ], "naturalLanguageTriggers": [ "ui-3d-reveal", "3D UI Reveal", "showcase", "3d", "reveal", "产品发布", "设备展示", "App 展示", "液态玻璃", "3D" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 13.0 }, "install": { "command": "hyperframes add ui-3d-reveal", "path": "compositions/ui-3d-reveal.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "ui-3d-reveal": 0.15, "3D UI Reveal": 0.15, "showcase": 0.15, "3d": 0.15, "reveal": 0.15, "产品发布": 0.15, "设备展示": 0.15, "App 展示": 0.15, "液态玻璃": 0.15, "3D": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `ui-3d-reveal`
3D UI Reveal
#showcase #3d #reveal | Block | Perspective 3D reveal animation for UI elements | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add ui-3d-reveal`
`
` | 有预览视频 |" } }, { "id": "vfx-iphone-device", "title": "iPhone & MacBook 3D Showcase", "type": "block", "category": { "id": "06", "name": "3D、WebGL/WebGPU 与设备展示" }, "intentDomains": [ "product_launch", "vfx", "device_showcase" ], "styleTags": [], "motionTags": [ "morph" ], "assetRoles": [ "main_scene", "device_showcase" ], "naturalLanguageTriggers": [ "vfx-iphone-device", "iPhone & MacBook 3D Showcase", "html-in-canvas", "3d", "device", "iphone", "macbook", "gltf", "产品发布", "设备展示", "App 展示", "液态玻璃", "3D" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 15.0 }, "install": { "command": "hyperframes add vfx-iphone-device", "path": "compositions/vfx-iphone-device.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 4, "hasPreview": true, "bestFor": [ "适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "vfx-iphone-device": 0.15, "iPhone & MacBook 3D Showcase": 0.15, "html-in-canvas": 0.15, "3d": 0.15, "device": 0.15, "iphone": 0.15, "macbook": 0.15, "gltf": 0.15, "产品发布": 0.15, "设备展示": 0.15, "App 展示": 0.15, "液态玻璃": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `vfx-iphone-device`
iPhone & MacBook 3D Showcase
#html-in-canvas #3d #device #iphone #macbook #gltf | Block | Real GLTF iPhone 15 Pro Max and MacBook Pro models with live HTML-in-Canvas screen content, morphing glass lens, product review camera choreography, and 360° turntable. | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add vfx-iphone-device`
`
` | 包含 4 个 asset; 有预览视频 |" } }, { "id": "vfx-liquid-background", "title": "Liquid Background", "type": "block", "category": { "id": "06", "name": "3D、WebGL/WebGPU 与设备展示" }, "intentDomains": [ "product_launch", "vfx", "device_showcase" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene", "device_showcase" ], "naturalLanguageTriggers": [ "vfx-liquid-background", "Liquid Background", "html-in-canvas", "liquid", "webgl", "displacement", "background", "产品发布", "设备展示", "App 展示", "液态玻璃", "3D" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 12.0 }, "install": { "command": "hyperframes add vfx-liquid-background", "path": "compositions/vfx-liquid-background.html", "includeSnippet": "
" }, "customizableParams": [ "--bg-color", "--text-color" ], "assetCount": null, "hasPreview": true, "bestFor": [ "适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "vfx-liquid-background": 0.15, "Liquid Background": 0.15, "html-in-canvas": 0.15, "liquid": 0.15, "webgl": 0.15, "displacement": 0.15, "background": 0.15, "产品发布": 0.15, "设备展示": 0.15, "App 展示": 0.15, "液态玻璃": 0.15, "3D": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `vfx-liquid-background`
Liquid Background
#html-in-canvas #liquid #webgl #displacement #background | Block | Organic liquid simulation with vertex displacement on a subdivided plane. HTML content floats above rippling fluid surface with real-time wave dynamics. | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add vfx-liquid-background`
`
` | 可调参数: --bg-color, --text-color; 有预览视频 |" } }, { "id": "vfx-liquid-glass", "title": "Liquid Glass", "type": "block", "category": { "id": "06", "name": "3D、WebGL/WebGPU 与设备展示" }, "intentDomains": [ "product_launch", "vfx", "device_showcase" ], "styleTags": [ "premium" ], "motionTags": [], "assetRoles": [ "main_scene", "device_showcase" ], "naturalLanguageTriggers": [ "vfx-liquid-glass", "Liquid Glass", "html-in-canvas", "webgl", "产品发布", "设备展示", "App 展示", "液态玻璃", "3D" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 20.0 }, "install": { "command": "hyperframes add vfx-liquid-glass", "path": "compositions/vfx-liquid-glass.html", "includeSnippet": "
" }, "customizableParams": [ "--bg-color", "--accent-color" ], "assetCount": null, "hasPreview": true, "bestFor": [ "适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "vfx-liquid-glass": 0.15, "Liquid Glass": 0.15, "html-in-canvas": 0.15, "webgl": 0.15, "产品发布": 0.15, "设备展示": 0.15, "App 展示": 0.15, "液态玻璃": 0.15, "3D": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `vfx-liquid-glass`
Liquid Glass
#html-in-canvas #webgl | Block | VFX composition block | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add vfx-liquid-glass`
`
` | 可调参数: --bg-color, --accent-color; 有预览视频 |" } }, { "id": "vfx-magnetic", "title": "Magnetic", "type": "block", "category": { "id": "06", "name": "3D、WebGL/WebGPU 与设备展示" }, "intentDomains": [ "product_launch", "vfx", "device_showcase" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene", "device_showcase" ], "naturalLanguageTriggers": [ "vfx-magnetic", "Magnetic", "html-in-canvas", "webgl", "产品发布", "设备展示", "App 展示", "液态玻璃", "3D" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 15.0 }, "install": { "command": "hyperframes add vfx-magnetic", "path": "compositions/vfx-magnetic.html", "includeSnippet": "
" }, "customizableParams": [ "--bg-color", "--text-color" ], "assetCount": null, "hasPreview": true, "bestFor": [ "适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "vfx-magnetic": 0.15, "Magnetic": 0.15, "html-in-canvas": 0.15, "webgl": 0.15, "产品发布": 0.15, "设备展示": 0.15, "App 展示": 0.15, "液态玻璃": 0.15, "3D": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `vfx-magnetic`
Magnetic
#html-in-canvas #webgl | Block | VFX composition block | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add vfx-magnetic`
`
` | 可调参数: --bg-color, --text-color; 有预览视频 |" } }, { "id": "vfx-portal", "title": "Portal", "type": "block", "category": { "id": "06", "name": "3D、WebGL/WebGPU 与设备展示" }, "intentDomains": [ "product_launch", "vfx", "device_showcase" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene", "device_showcase" ], "naturalLanguageTriggers": [ "vfx-portal", "Portal", "html-in-canvas", "webgl", "产品发布", "设备展示", "App 展示", "液态玻璃", "3D" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 10.0 }, "install": { "command": "hyperframes add vfx-portal", "path": "compositions/vfx-portal.html", "includeSnippet": "
" }, "customizableParams": [ "--bg-color", "--portal-color" ], "assetCount": null, "hasPreview": true, "bestFor": [ "适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "vfx-portal": 0.15, "Portal": 0.15, "html-in-canvas": 0.15, "webgl": 0.15, "产品发布": 0.15, "设备展示": 0.15, "App 展示": 0.15, "液态玻璃": 0.15, "3D": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `vfx-portal`
Portal
#html-in-canvas #webgl | Block | VFX composition block | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add vfx-portal`
`
` | 可调参数: --bg-color, --portal-color; 有预览视频 |" } }, { "id": "vfx-shatter", "title": "Shatter", "type": "block", "category": { "id": "06", "name": "3D、WebGL/WebGPU 与设备展示" }, "intentDomains": [ "product_launch", "vfx", "device_showcase" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene", "device_showcase" ], "naturalLanguageTriggers": [ "vfx-shatter", "Shatter", "html-in-canvas", "webgl", "产品发布", "设备展示", "App 展示", "液态玻璃", "3D" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 12.0 }, "install": { "command": "hyperframes add vfx-shatter", "path": "compositions/vfx-shatter.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "vfx-shatter": 0.15, "Shatter": 0.15, "html-in-canvas": 0.15, "webgl": 0.15, "产品发布": 0.15, "设备展示": 0.15, "App 展示": 0.15, "液态玻璃": 0.15, "3D": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `vfx-shatter`
Shatter
#html-in-canvas #webgl | Block | VFX composition block | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add vfx-shatter`
`
` | 有预览视频 |" } }, { "id": "blue-sweater-intro-video", "title": "Blue Sweater Intro Video", "type": "block", "category": { "id": "07", "name": "覆盖层、品牌收尾与视觉增强" }, "intentDomains": [ "visual_enhancement", "product_launch" ], "styleTags": [], "motionTags": [], "assetRoles": [ "main_scene" ], "naturalLanguageTriggers": [ "blue-sweater-intro-video", "Blue Sweater Intro Video", "showcase", "ai", "creator", "sfx", "品牌片尾", "质感增强", "暗角", "颗粒", "文字特效" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 12.0 }, "install": { "command": "hyperframes add blue-sweater-intro-video", "path": "compositions/blue-sweater-intro-video.html", "includeSnippet": "
" }, "customizableParams": [], "assetCount": 2, "hasPreview": true, "bestFor": [ "适合需要快速插入一个可复用视觉模块的场景。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "blue-sweater-intro-video": 0.15, "Blue Sweater Intro Video": 0.15, "showcase": 0.15, "ai": 0.15, "creator": 0.15, "sfx": 0.15, "品牌片尾": 0.15, "质感增强": 0.15, "暗角": 0.15, "颗粒": 0.15, "文字特效": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `blue-sweater-intro-video`
Blue Sweater Intro Video
#showcase #ai #creator #sfx | Block | Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_. | 适合需要快速插入一个可复用视觉模块的场景。 | `hyperframes add blue-sweater-intro-video`
`
` | 包含 2 个 asset; 有预览视频 |" } }, { "id": "logo-outro", "title": "Logo Outro", "type": "block", "category": { "id": "07", "name": "覆盖层、品牌收尾与视觉增强" }, "intentDomains": [ "visual_enhancement", "branding_outro" ], "styleTags": [ "cinematic" ], "motionTags": [ "reveal" ], "assetRoles": [ "main_scene", "outro" ], "naturalLanguageTriggers": [ "logo-outro", "Logo Outro", "branding", "outro", "logo", "品牌片尾", "质感增强", "暗角", "颗粒", "文字特效" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 6.0 }, "install": { "command": "hyperframes add logo-outro", "path": "compositions/logo-outro.html", "includeSnippet": "
" }, "customizableParams": [ "--bg-color", "--accent-color" ], "assetCount": null, "hasPreview": true, "bestFor": [ "适合品牌片尾、频道收尾、产品 logo reveal。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "include_installed_block", "generateNew": "generate_full_hyperframes_block" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "include_installed_block", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true }, "confidenceBoosts": { "keywords": { "logo-outro": 0.15, "Logo Outro": 0.15, "branding": 0.15, "outro": 0.15, "logo": 0.15, "品牌片尾": 0.15, "质感增强": 0.15, "暗角": 0.15, "颗粒": 0.15, "文字特效": 0.15 }, "formatMatches": { "landscape_16_9": 0.1 } }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `logo-outro`
Logo Outro
#branding #outro #logo | Block | Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill | 适合品牌片尾、频道收尾、产品 logo reveal。 | `hyperframes add logo-outro`
`
` | 可调参数: --bg-color, --accent-color; 有预览视频 |" } }, { "id": "grain-overlay", "title": "Grain Overlay", "type": "component", "category": { "id": "07", "name": "覆盖层、品牌收尾与视觉增强" }, "intentDomains": [ "visual_enhancement" ], "styleTags": [ "retro" ], "motionTags": [], "assetRoles": [ "overlay", "effect" ], "naturalLanguageTriggers": [ "grain-overlay", "Grain Overlay", "texture", "grain", "overlay", "film", "品牌片尾", "质感增强", "暗角", "颗粒", "文字特效" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add grain-overlay", "path": "compositions/components/grain-overlay.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": false, "bestFor": [ "适合作为现有镜头的氛围增强层、质感覆盖、聚焦或高级感处理。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "grain-overlay": 0.15, "Grain Overlay": 0.15, "texture": 0.15, "grain": 0.15, "overlay": 0.15, "film": 0.15, "品牌片尾": 0.15, "质感增强": 0.15, "暗角": 0.15, "颗粒": 0.15, "文字特效": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `grain-overlay`
Grain Overlay
#texture #grain #overlay #film | Component | Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition | 适合作为现有镜头的氛围增强层、质感覆盖、聚焦或高级感处理。 | `hyperframes add grain-overlay`
`` | - |" } }, { "id": "morph-text", "title": "Morph Text", "type": "component", "category": { "id": "07", "name": "覆盖层、品牌收尾与视觉增强" }, "intentDomains": [ "visual_enhancement", "transition" ], "styleTags": [], "motionTags": [ "morph", "blur" ], "assetRoles": [ "overlay", "transition", "effect" ], "naturalLanguageTriggers": [ "morph-text", "Morph Text", "text", "text-effect", "typography", "morph", "gooey", "kinetic", "animation", "品牌片尾", "质感增强", "暗角", "颗粒", "文字特效" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add morph-text", "path": "compositions/components/morph-text.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": true, "bestFor": [ "适合需要快速插入一个可复用视觉模块的场景。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "转场更想要柔和、快速、故障、电影感，还是强视觉冲击？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "morph-text": 0.15, "Morph Text": 0.15, "text": 0.15, "text-effect": 0.15, "typography": 0.15, "morph": 0.15, "gooey": 0.15, "kinetic": 0.15, "animation": 0.15, "品牌片尾": 0.15, "质感增强": 0.15, "暗角": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `morph-text`
Morph Text
#text #text-effect #typography #morph #gooey #kinetic #animation | Component | Gooey text morph — cycles through an editable word list using SVG threshold + GSAP-driven blur for a fluid, satisfying transition effect | 适合需要快速插入一个可复用视觉模块的场景。 | `hyperframes add morph-text`
`` | 有预览视频 |" } }, { "id": "motion-blur", "title": "Motion Blur", "type": "component", "category": { "id": "07", "name": "覆盖层、品牌收尾与视觉增强" }, "intentDomains": [ "visual_enhancement", "product_launch" ], "styleTags": [], "motionTags": [ "blur" ], "assetRoles": [ "overlay", "effect" ], "naturalLanguageTriggers": [ "motion-blur", "Motion Blur", "effect", "velocity", "animation", "physics", "品牌片尾", "质感增强", "暗角", "颗粒", "文字特效" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add motion-blur", "path": "compositions/components/motion-blur.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": false, "bestFor": [ "适合作为现有镜头的氛围增强层、质感覆盖、聚焦或高级感处理。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [ "产品展示更偏 Apple 风高级感、科技暗调，还是社媒快节奏？" ] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [ "productName", "screenshots", "featureBullets", "logo" ], "recommendedCompanionComponents": [ "vignette", "shimmer-sweep" ], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "motion-blur": 0.15, "Motion Blur": 0.15, "effect": 0.15, "velocity": 0.15, "animation": 0.15, "physics": 0.15, "品牌片尾": 0.15, "质感增强": 0.15, "暗角": 0.15, "颗粒": 0.15, "文字特效": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `motion-blur`
Motion Blur
#effect #motion-blur #velocity #animation #physics | Component | Velocity-driven motion blur — samples element position each frame and applies a one-sided SVG feGaussianBlur ghost trail proportional to speed | 适合作为现有镜头的氛围增强层、质感覆盖、聚焦或高级感处理。 | `hyperframes add motion-blur`
`` | - |" } }, { "id": "shimmer-sweep", "title": "Shimmer Sweep", "type": "component", "category": { "id": "07", "name": "覆盖层、品牌收尾与视觉增强" }, "intentDomains": [ "visual_enhancement" ], "styleTags": [ "premium", "light" ], "motionTags": [ "reveal" ], "assetRoles": [ "overlay", "effect" ], "naturalLanguageTriggers": [ "shimmer-sweep", "Shimmer Sweep", "text", "shimmer", "highlight", "effect", "品牌片尾", "质感增强", "暗角", "颗粒", "文字特效" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add shimmer-sweep", "path": "compositions/components/shimmer-sweep.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": false, "bestFor": [ "适合作为现有镜头的氛围增强层、质感覆盖、聚焦或高级感处理。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "shimmer-sweep": 0.15, "Shimmer Sweep": 0.15, "text": 0.15, "shimmer": 0.15, "highlight": 0.15, "effect": 0.15, "品牌片尾": 0.15, "质感增强": 0.15, "暗角": 0.15, "颗粒": 0.15, "文字特效": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `shimmer-sweep`
Shimmer Sweep
#text #shimmer #highlight #effect | Component | Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals | 适合作为现有镜头的氛围增强层、质感覆盖、聚焦或高级感处理。 | `hyperframes add shimmer-sweep`
`` | - |" } }, { "id": "texture-mask-text", "title": "Texture Mask Text", "type": "component", "category": { "id": "07", "name": "覆盖层、品牌收尾与视觉增强" }, "intentDomains": [ "visual_enhancement", "data_visualization" ], "styleTags": [], "motionTags": [], "assetRoles": [ "overlay", "effect" ], "naturalLanguageTriggers": [ "texture-mask-text", "Texture Mask Text", "text", "text-effect", "effect", "texture", "mask", "品牌片尾", "质感增强", "暗角", "颗粒", "文字特效" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add texture-mask-text", "path": "compositions/components/texture-mask-text/texture-mask-text.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": 66, "hasPreview": false, "bestFor": [ "适合作为现有镜头的氛围增强层、质感覆盖、聚焦或高级感处理。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [ "你要展示的是趋势、对比、排行榜、地图位置，还是流程关系？" ], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [ "headline", "data", "labels", "sourceNote" ], "recommendedCompanionComponents": [ "caption-weight-shift", "vignette" ], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "texture-mask-text": 0.15, "Texture Mask Text": 0.15, "text": 0.15, "text-effect": 0.15, "effect": 0.15, "texture": 0.15, "mask": 0.15, "品牌片尾": 0.15, "质感增强": 0.15, "暗角": 0.15, "颗粒": 0.15, "文字特效": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `texture-mask-text`
Texture Mask Text
#text #text-effect #effect #texture #mask | Component | CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps | 适合作为现有镜头的氛围增强层、质感覆盖、聚焦或高级感处理。 | `hyperframes add texture-mask-text`
`` | 包含 66 个 asset |" } }, { "id": "vignette", "title": "Vignette", "type": "component", "category": { "id": "07", "name": "覆盖层、品牌收尾与视觉增强" }, "intentDomains": [ "visual_enhancement" ], "styleTags": [ "cinematic", "dark" ], "motionTags": [], "assetRoles": [ "overlay", "effect" ], "naturalLanguageTriggers": [ "vignette", "Vignette", "overlay", "cinematic", "effect", "品牌片尾", "质感增强", "暗角", "颗粒", "文字特效" ], "format": { "width": null, "height": null, "aspect": "flexible", "durationSeconds": null }, "install": { "command": "hyperframes add vignette", "path": "compositions/components/vignette.html", "includeSnippet": "" }, "customizableParams": [], "assetCount": null, "hasPreview": false, "bestFor": [ "适合作为现有镜头的氛围增强层、质感覆盖、聚焦或高级感处理。" ], "avoidWhen": [], "clarifyingQuestions": { "beforeSelection": [], "afterSelection": [] }, "generationHints": { "htmlStrategy": { "assembleExisting": "paste_installed_component_snippet", "generateNew": "generate_paste_safe_component" }, "contentSlots": [], "recommendedCompanionComponents": [], "catalogAssemblyMode": "paste_component_snippet", "recommendedGenerationModes": [ "assemble_existing_catalog_items", "generate_new_hyperframes_html" ], "patternsRequiredForGenerateNew": true, "componentSnippetWarning": "install.includeSnippet may be a paste instruction comment; resolve to actual installed snippet before render." }, "confidenceBoosts": { "keywords": { "vignette": 0.15, "Vignette": 0.15, "overlay": 0.15, "cinematic": 0.15, "effect": 0.15, "品牌片尾": 0.15, "质感增强": 0.15, "暗角": 0.15, "颗粒": 0.15, "文字特效": 0.15 }, "formatMatches": {} }, "source": { "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md", "sourceRow": "| `vignette`
Vignette
#vignette #overlay #cinematic #effect | Component | Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center | 适合作为现有镜头的氛围增强层、质感覆盖、聚焦或高级感处理。 | `hyperframes add vignette`
`` | - |" } }, { "id": "shader-domain-warp", "title": "Domain Warp Shader Transition", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch", "vfx" ], "styleTags": [ "cinematic", "dark" ], "motionTags": [ "shader", "reveal" ], "assetRoles": [ "transition", "effect" ], "naturalLanguageTriggers": [ "domain warp", "domain-warp", "有机扭曲", "噪声转场", "shader transition", "转场特效", "shader转场" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 0.8 }, "install": { "command": "npm install @hyperframes/shader-transitions", "includeSnippet": "" }, "assetCount": 1, "hasPreview": false, "bestFor": "有机噪声驱动扭曲，带发光边缘", "avoidWhen": "极简风格、静态内容、无场景切换的短动画", "generationHints": { "cdnScript": "", "initCall": "HyperframesShaderTransitions.init({ bgColor, scenes: [...], transitions: [{ time, shader: 'shader-domain-warp', duration }], timeline, compositionId })", "durationRange": "0.6-0.9s, auto-calculated from adjacent scene duration" } }, { "id": "shader-ridged-burn", "title": "Ridged Burn Shader Transition", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch", "vfx" ], "styleTags": [ "cyberpunk", "dark" ], "motionTags": [ "shader", "glitch_cyber" ], "assetRoles": [ "transition", "effect" ], "naturalLanguageTriggers": [ "ridged burn", "ridged-burn", "脊状灼烧", "烧灼转场", "shader transition", "转场特效", "shader转场" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 0.8 }, "install": { "command": "npm install @hyperframes/shader-transitions", "includeSnippet": "" }, "assetCount": 1, "hasPreview": false, "bestFor": "脊状噪声灼烧，带火花和热辉光", "avoidWhen": "极简风格、静态内容、无场景切换的短动画", "generationHints": { "cdnScript": "", "initCall": "HyperframesShaderTransitions.init({ bgColor, scenes: [...], transitions: [{ time, shader: 'shader-ridged-burn', duration }], timeline, compositionId })", "durationRange": "0.6-0.9s, auto-calculated from adjacent scene duration" } }, { "id": "shader-whip-pan", "title": "Whip Pan Shader Transition", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch", "vfx" ], "styleTags": [ "social_dynamic" ], "motionTags": [ "shader", "fast_impact" ], "assetRoles": [ "transition", "effect" ], "naturalLanguageTriggers": [ "whip pan", "whip-pan", "甩镜头", "快速摇镜", "shader transition", "转场特效", "shader转场" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 0.8 }, "install": { "command": "npm install @hyperframes/shader-transitions", "includeSnippet": "" }, "assetCount": 1, "hasPreview": false, "bestFor": "水平运动模糊模拟快速镜头甩动", "avoidWhen": "极简风格、静态内容、无场景切换的短动画", "generationHints": { "cdnScript": "", "initCall": "HyperframesShaderTransitions.init({ bgColor, scenes: [...], transitions: [{ time, shader: 'shader-whip-pan', duration }], timeline, compositionId })", "durationRange": "0.6-0.9s, auto-calculated from adjacent scene duration" } }, { "id": "shader-sdf-iris", "title": "SDF Iris Shader Transition", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch", "vfx" ], "styleTags": [ "apple_like", "premium" ], "motionTags": [ "shader", "steady_premium" ], "assetRoles": [ "transition", "effect" ], "naturalLanguageTriggers": [ "sdf iris", "sdf-iris", "虹膜转场", "圆形擦拭", "shader transition", "转场特效", "shader转场" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 0.8 }, "install": { "command": "npm install @hyperframes/shader-transitions", "includeSnippet": "" }, "assetCount": 1, "hasPreview": false, "bestFor": "圆形虹膜擦拭，带发光环边缘", "avoidWhen": "极简风格、静态内容、无场景切换的短动画", "generationHints": { "cdnScript": "", "initCall": "HyperframesShaderTransitions.init({ bgColor, scenes: [...], transitions: [{ time, shader: 'shader-sdf-iris', duration }], timeline, compositionId })", "durationRange": "0.6-0.9s, auto-calculated from adjacent scene duration" } }, { "id": "shader-ripple-waves", "title": "Ripple Waves Shader Transition", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch", "vfx" ], "styleTags": [ "minimal", "light" ], "motionTags": [ "shader", "soft_fluid" ], "assetRoles": [ "transition", "effect" ], "naturalLanguageTriggers": [ "ripple waves", "ripple-waves", "涟漪", "水波转场", "shader transition", "转场特效", "shader转场" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 0.8 }, "install": { "command": "npm install @hyperframes/shader-transitions", "includeSnippet": "" }, "assetCount": 1, "hasPreview": false, "bestFor": "从中心扩散的同心涟漪扭曲", "avoidWhen": "极简风格、静态内容、无场景切换的短动画", "generationHints": { "cdnScript": "", "initCall": "HyperframesShaderTransitions.init({ bgColor, scenes: [...], transitions: [{ time, shader: 'shader-ripple-waves', duration }], timeline, compositionId })", "durationRange": "0.6-0.9s, auto-calculated from adjacent scene duration" } }, { "id": "shader-gravitational-lens", "title": "Gravitational Lens Shader Transition", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch", "vfx" ], "styleTags": [ "cinematic", "cyberpunk" ], "motionTags": [ "shader", "glitch_cyber" ], "assetRoles": [ "transition", "effect" ], "naturalLanguageTriggers": [ "gravitational lens", "gravitational-lens", "引力透镜", "色差扭曲", "shader transition", "转场特效", "shader转场" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 0.8 }, "install": { "command": "npm install @hyperframes/shader-transitions", "includeSnippet": "" }, "assetCount": 1, "hasPreview": false, "bestFor": "引力透镜扭曲，带色差畸变", "avoidWhen": "极简风格、静态内容、无场景切换的短动画", "generationHints": { "cdnScript": "", "initCall": "HyperframesShaderTransitions.init({ bgColor, scenes: [...], transitions: [{ time, shader: 'shader-gravitational-lens', duration }], timeline, compositionId })", "durationRange": "0.6-0.9s, auto-calculated from adjacent scene duration" } }, { "id": "shader-cinematic-zoom", "title": "Cinematic Zoom Shader Transition", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch", "vfx" ], "styleTags": [ "cinematic", "apple_like" ], "motionTags": [ "shader", "reveal" ], "assetRoles": [ "transition", "effect" ], "naturalLanguageTriggers": [ "cinematic zoom", "cinematic-zoom", "电影级缩放", "径向模糊", "shader transition", "转场特效", "shader转场" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 0.8 }, "install": { "command": "npm install @hyperframes/shader-transitions", "includeSnippet": "" }, "assetCount": 1, "hasPreview": false, "bestFor": "径向缩放模糊，带色差边缘", "avoidWhen": "极简风格、静态内容、无场景切换的短动画", "generationHints": { "cdnScript": "", "initCall": "HyperframesShaderTransitions.init({ bgColor, scenes: [...], transitions: [{ time, shader: 'shader-cinematic-zoom', duration }], timeline, compositionId })", "durationRange": "0.6-0.9s, auto-calculated from adjacent scene duration" } }, { "id": "shader-chromatic-split", "title": "Chromatic Split Shader Transition", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch", "vfx" ], "styleTags": [ "cyberpunk", "dark" ], "motionTags": [ "shader", "glitch_cyber" ], "assetRoles": [ "transition", "effect" ], "naturalLanguageTriggers": [ "chromatic split", "chromatic-split", "色差分离", "RGB分离", "shader transition", "转场特效", "shader转场" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 0.8 }, "install": { "command": "npm install @hyperframes/shader-transitions", "includeSnippet": "" }, "assetCount": 1, "hasPreview": false, "bestFor": "RGB 通道分离从中心扩展", "avoidWhen": "极简风格、静态内容、无场景切换的短动画", "generationHints": { "cdnScript": "", "initCall": "HyperframesShaderTransitions.init({ bgColor, scenes: [...], transitions: [{ time, shader: 'shader-chromatic-split', duration }], timeline, compositionId })", "durationRange": "0.6-0.9s, auto-calculated from adjacent scene duration" } }, { "id": "shader-glitch", "title": "Glitch Shader Transition", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch", "vfx" ], "styleTags": [ "cyberpunk", "dark" ], "motionTags": [ "shader", "glitch_cyber" ], "assetRoles": [ "transition", "effect" ], "naturalLanguageTriggers": [ "glitch", "故障", "数字故障", "glitch transition", "shader transition", "转场特效", "shader转场" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 0.8 }, "install": { "command": "npm install @hyperframes/shader-transitions", "includeSnippet": "" }, "assetCount": 1, "hasPreview": false, "bestFor": "数字故障效果，带方块位移和扫描线", "avoidWhen": "极简风格、静态内容、无场景切换的短动画", "generationHints": { "cdnScript": "", "initCall": "HyperframesShaderTransitions.init({ bgColor, scenes: [...], transitions: [{ time, shader: 'shader-glitch', duration }], timeline, compositionId })", "durationRange": "0.6-0.9s, auto-calculated from adjacent scene duration" } }, { "id": "shader-swirl-vortex", "title": "Swirl Vortex Shader Transition", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch", "vfx" ], "styleTags": [ "cyberpunk", "dark" ], "motionTags": [ "shader", "glitch_cyber" ], "assetRoles": [ "transition", "effect" ], "naturalLanguageTriggers": [ "swirl vortex", "swirl-vortex", "漩涡", "螺旋转场", "shader transition", "转场特效", "shader转场" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 0.8 }, "install": { "command": "npm install @hyperframes/shader-transitions", "includeSnippet": "" }, "assetCount": 1, "hasPreview": false, "bestFor": "螺旋旋转，带噪声扭曲", "avoidWhen": "极简风格、静态内容、无场景切换的短动画", "generationHints": { "cdnScript": "", "initCall": "HyperframesShaderTransitions.init({ bgColor, scenes: [...], transitions: [{ time, shader: 'shader-swirl-vortex', duration }], timeline, compositionId })", "durationRange": "0.6-0.9s, auto-calculated from adjacent scene duration" } }, { "id": "shader-thermal-distortion", "title": "Thermal Distortion Shader Transition", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch", "vfx" ], "styleTags": [ "dark", "cinematic" ], "motionTags": [ "shader" ], "assetRoles": [ "transition", "effect" ], "naturalLanguageTriggers": [ "thermal distortion", "thermal-distortion", "热浪", "热扭曲", "shader transition", "转场特效", "shader转场" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 0.8 }, "install": { "command": "npm install @hyperframes/shader-transitions", "includeSnippet": "" }, "assetCount": 1, "hasPreview": false, "bestFor": "从底部升起的热浪扭曲", "avoidWhen": "极简风格、静态内容、无场景切换的短动画", "generationHints": { "cdnScript": "", "initCall": "HyperframesShaderTransitions.init({ bgColor, scenes: [...], transitions: [{ time, shader: 'shader-thermal-distortion', duration }], timeline, compositionId })", "durationRange": "0.6-0.9s, auto-calculated from adjacent scene duration" } }, { "id": "shader-flash-through-white", "title": "Flash Through White Shader Transition", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch", "vfx" ], "styleTags": [ "apple_like", "premium", "editorial" ], "motionTags": [ "shader", "steady_premium" ], "assetRoles": [ "transition", "effect" ], "naturalLanguageTriggers": [ "flash through white", "flash-through-white", "闪白", "闪光转场", "shader transition", "转场特效", "shader转场" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 0.8 }, "install": { "command": "npm install @hyperframes/shader-transitions", "includeSnippet": "" }, "assetCount": 1, "hasPreview": false, "bestFor": "闪白后揭示下一场景", "avoidWhen": "极简风格、静态内容、无场景切换的短动画", "generationHints": { "cdnScript": "", "initCall": "HyperframesShaderTransitions.init({ bgColor, scenes: [...], transitions: [{ time, shader: 'shader-flash-through-white', duration }], timeline, compositionId })", "durationRange": "0.6-0.9s, auto-calculated from adjacent scene duration" } }, { "id": "shader-cross-warp-morph", "title": "Cross Warp Morph Shader Transition", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch", "vfx" ], "styleTags": [ "cinematic", "dark" ], "motionTags": [ "shader", "reveal" ], "assetRoles": [ "transition", "effect" ], "naturalLanguageTriggers": [ "cross warp morph", "cross-warp-morph", "交叉扭曲", "融合转场", "shader transition", "转场特效", "shader转场" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 0.8 }, "install": { "command": "npm install @hyperframes/shader-transitions", "includeSnippet": "" }, "assetCount": 1, "hasPreview": false, "bestFor": "噪声驱动融合，同时混合两个场景", "avoidWhen": "极简风格、静态内容、无场景切换的短动画", "generationHints": { "cdnScript": "", "initCall": "HyperframesShaderTransitions.init({ bgColor, scenes: [...], transitions: [{ time, shader: 'shader-cross-warp-morph', duration }], timeline, compositionId })", "durationRange": "0.6-0.9s, auto-calculated from adjacent scene duration" } }, { "id": "shader-light-leak", "title": "Light Leak Shader Transition", "type": "block", "category": { "id": "05", "name": "转场、Shader 与镜头切换" }, "intentDomains": [ "transition", "product_launch", "vfx" ], "styleTags": [ "cinematic", "editorial" ], "motionTags": [ "shader", "soft_fluid" ], "assetRoles": [ "transition", "effect" ], "naturalLanguageTriggers": [ "light leak", "light-leak", "漏光", "镜头光晕", "film burn", "shader transition", "转场特效", "shader转场" ], "format": { "width": 1920, "height": 1080, "aspect": "landscape_16_9", "durationSeconds": 0.8 }, "install": { "command": "npm install @hyperframes/shader-transitions", "includeSnippet": "" }, "assetCount": 1, "hasPreview": false, "bestFor": "温暖电影感漏光，带镜头光晕", "avoidWhen": "极简风格、静态内容、无场景切换的短动画", "generationHints": { "cdnScript": "", "initCall": "HyperframesShaderTransitions.init({ bgColor, scenes: [...], transitions: [{ time, shader: 'shader-light-leak', duration }], timeline, compositionId })", "durationRange": "0.6-0.9s, auto-calculated from adjacent scene duration" } } ], "examples": [ { "id": "airbnb-deck", "title": "Airbnb Deck", "description": "Airbnb 风格演示文稿" }, { "id": "decision-tree", "title": "Decision Tree", "description": "决策树动画" }, { "id": "kinetic-type", "title": "Kinetic Type", "description": "动态排版示例" }, { "id": "motion-blur", "title": "Motion Blur", "description": "运动模糊效果示例" }, { "id": "nyt-graph", "title": "NYT Graph", "description": "纽约时报风格数据图表" }, { "id": "play-mode", "title": "Play Mode", "description": "交互式播放模式示例" }, { "id": "product-promo", "title": "Product Promo", "description": "产品宣传片模板" }, { "id": "slideshow-demo", "title": "Slideshow Demo", "description": "幻灯片演示" }, { "id": "startup-pitch", "title": "Startup Pitch", "description": "创业公司 pitch deck" }, { "id": "swiss-grid", "title": "Swiss Grid", "description": "瑞士排版网格风格" }, { "id": "vignelli", "title": "Vignelli", "description": "Vignelli 设计风格" }, { "id": "vscode-theme-visualizer", "title": "VS Code Theme Viz", "description": "VS Code 主题可视化" }, { "id": "warm-grain", "title": "Warm Grain", "description": "暖色调颗粒感风格" } ], "generationModes": { "assemble_existing_catalog_items": { "description": "Use installed catalog blocks/components. Blocks are included with data-composition-src; components require pasting installed snippets, not using placeholder comments as final visuals.", "bestFor": [ "fast assembly", "known catalog visuals", "using registry items as-is" ], "htmlRequirement": "Wrapper composition may include installed blocks, but component placeholder comments must be resolved to real snippet content before render." }, "generate_new_hyperframes_html": { "description": "Generate a new HyperFrames block/component using catalog items as references and HyperFrames-AI-Generation-Patterns-codex.md as the implementation standard.", "bestFor": [ "custom animation", "new visual style", "user asks to write HTML animation", "catalog items are inspiration but not exact fit" ], "htmlRequirement": "Must create complete renderable HyperFrames HTML with scoped CSS, fixed dimensions, paused GSAP timeline, window.__timelines[id], duration padding, async/fallback handling as needed." } }, "qualityGates": { "beforeRender": [ "HTML has fixed data-width, data-height, and data-duration for block mode.", "Block HTML has data-composition-id and scoped CSS under that id.", "Primary animation uses gsap.timeline({ paused: true }) and registers window.__timelines[id].", "Timeline covers declared duration and pads final duration if needed.", "No wall-clock Date.now(), interaction-only hover, or unbounded requestAnimationFrame drives primary progress.", "Async fonts/assets/WebGL register timeline only after ready, or provide fallback timeline.", "Component snippets are real pasted HTML/CSS/JS or documented attach functions, not placeholder comments.", "Text is readable at target video size and safe-zone aware for captions.", "CSS selectors are scoped or unique to avoid host pollution." ], "patternsReference": "/Users/zhichao/claude/hf-projects/HyperFrames-AI-Generation-Patterns-codex.md" } }