hyper-animator-codex 0.7.1 → 0.8.0

package/skills/hyper-animator-codex/references/hyperframes-catalog-map.json

@@ -1,7 +1,7 @@
 {
   "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",
+    "humanGuide": "references/HyperFrames-AI-Generation-Patterns-codex.md",
     "generatedAt": "2026-06-29",
     "registryReadableItems": 133,
     "blocks": 108,
@@ -155,7 +155,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 15.0
+        "durationSeconds": 15
       },
       "install": {
         "command": "hyperframes add data-chart",
@@ -219,7 +219,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `data-chart`<br>Data Chart<br><small>#data #chart #statistics</small> | Block | Animated bar + line chart with staggered reveal, NYT-style typography, and value labels | 适合财务、增长、排行榜、统计结论等数据可视化段落。 | `hyperframes add data-chart`<br>`<div data-composition-src=\"compositions/data-chart.html\" data-duration=\"15\" data-width=\"1920\" data-height=\"1080\"></div>` | 可调参数: --bg-color, --text-color; 有预览视频 |"
       }
     },
@@ -257,7 +256,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 12.0
+        "durationSeconds": 12
       },
       "install": {
         "command": "hyperframes add flowchart",
@@ -317,7 +316,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `flowchart`<br>Flowchart<br><small>#diagram #flowchart #interactive</small> | Block | Animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction | 适合讲解流程、决策树、因果关系、产品路径或教程中的逻辑结构。 | `hyperframes add flowchart`<br>`<div data-composition-src=\"compositions/flowchart.html\" data-duration=\"12\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -357,7 +355,7 @@
         "width": 1440,
         "height": 2560,
         "aspect": "portrait_9_16",
-        "durationSeconds": 12.0
+        "durationSeconds": 12
       },
       "install": {
         "command": "hyperframes add flowchart-vertical",
@@ -419,7 +417,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `flowchart-vertical`<br>Flowchart Vertical<br><small>#diagram #flowchart #interactive #portrait</small> | Block | Portrait animated decision tree with SVG connectors, sticky-note nodes, cursor interaction, and typing correction | 适合讲解流程、决策树、因果关系、产品路径或教程中的逻辑结构。 | `hyperframes add flowchart-vertical`<br>`<div data-composition-src=\"compositions/flowchart-vertical.html\" data-duration=\"12\" data-width=\"1440\" data-height=\"2560\"></div>` | 有预览视频 |"
       }
     },
@@ -465,7 +462,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 7.0
+        "durationSeconds": 7
       },
       "install": {
         "command": "hyperframes add north-korea-locked-down",
@@ -529,7 +526,6 @@
         }
       },
       "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`<br>North Korea Locked Down<br><small>#showcase #map #annotation #youtube #kinetic</small> | 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`<br>`<div data-composition-src=\"compositions/north-korea-locked-down.html\" data-duration=\"7\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 1 个 asset; 有预览视频 |"
       }
     },
@@ -573,7 +569,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 6.0
+        "durationSeconds": 6
       },
       "install": {
         "command": "hyperframes add nyc-paris-flight",
@@ -637,7 +633,6 @@
         }
       },
       "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`<br>NYC Paris Flight<br><small>#showcase #travel #map #youtube #sfx</small> | 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`<br>`<div data-composition-src=\"compositions/nyc-paris-flight.html\" data-duration=\"6\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 2 个 asset; 有预览视频 |"
       }
     },
@@ -680,7 +675,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 12.0
+        "durationSeconds": 12
       },
       "install": {
         "command": "hyperframes add spain-map",
@@ -742,7 +737,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `spain-map`<br>Spain Map<br><small>#data #map #geography #spain #europe #choropleth</small> | Block | Animated Spain choropleth by autonomous community with staggered reveals and gradient legend — D3 conic conformal projection | 适合解释地理范围、路线、区域对比、政策/事件位置、数据新闻地图。 | `hyperframes add spain-map`<br>`<div data-composition-src=\"compositions/spain-map.html\" data-duration=\"12\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -784,7 +778,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 12.0
+        "durationSeconds": 12
       },
       "install": {
         "command": "hyperframes add us-map",
@@ -846,7 +840,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `us-map`<br>US Map<br><small>#data #map #geography #usa #choropleth</small> | Block | Animated US choropleth map with staggered state reveals, value labels, and gradient legend — pure inline SVG with GSAP | 适合解释地理范围、路线、区域对比、政策/事件位置、数据新闻地图。 | `hyperframes add us-map`<br>`<div data-composition-src=\"compositions/us-map.html\" data-duration=\"12\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -886,7 +879,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 12.0
+        "durationSeconds": 12
       },
       "install": {
         "command": "hyperframes add us-map-bubble",
@@ -948,7 +941,6 @@
         }
       },
       "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`<br>US Bubble Map<br><small>#data #map #geography #usa #bubble #cities</small> | Block | Animated US bubble map with proportional city markers, value callouts, and connection lines — composable with us-map | 适合解释地理范围、路线、区域对比、政策/事件位置、数据新闻地图。 | `hyperframes add us-map-bubble`<br>`<div data-composition-src=\"compositions/us-map-bubble.html\" data-duration=\"12\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -989,7 +981,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 12.0
+        "durationSeconds": 12
       },
       "install": {
         "command": "hyperframes add us-map-flow",
@@ -1051,7 +1043,6 @@
         }
       },
       "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`<br>US Flow Map<br><small>#data #map #geography #usa #flow #connections #arcs</small> | Block | Animated connection arcs between US cities over a base map — composable origin-destination flow visualization | 适合解释地理范围、路线、区域对比、政策/事件位置、数据新闻地图。 | `hyperframes add us-map-flow`<br>`<div data-composition-src=\"compositions/us-map-flow.html\" data-duration=\"12\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -1091,7 +1082,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 10.0
+        "durationSeconds": 10
       },
       "install": {
         "command": "hyperframes add us-map-hex",
@@ -1153,7 +1144,6 @@
         }
       },
       "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`<br>US Hex Grid Map<br><small>#data #map #geography #usa #hexgrid #tilegrid</small> | Block | Animated hexagonal tile grid map — each state as an equal-weight hex with data fill and abbreviation label | 适合解释地理范围、路线、区域对比、政策/事件位置、数据新闻地图。 | `hyperframes add us-map-hex`<br>`<div data-composition-src=\"compositions/us-map-hex.html\" data-duration=\"10\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -1194,7 +1184,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 14.0
+        "durationSeconds": 14
       },
       "install": {
         "command": "hyperframes add world-map",
@@ -1256,7 +1246,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `world-map`<br>World Map<br><small>#data #map #geography #world #choropleth</small> | Block | Animated world choropleth with country-by-country reveal, tooltip labels, and rotating globe inset — D3 Natural Earth projection | 适合解释地理范围、路线、区域对比、政策/事件位置、数据新闻地图。 | `hyperframes add world-map`<br>`<div data-composition-src=\"compositions/world-map.html\" data-duration=\"14\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -1298,7 +1287,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 5.0
+        "durationSeconds": 5
       },
       "install": {
         "command": "hyperframes add apple-money-count",
@@ -1360,7 +1349,6 @@
         }
       },
       "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`<br>Apple Money Count<br><small>#showcase #finance #kinetic #youtube #sfx</small> | 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`<br>`<div data-composition-src=\"compositions/apple-money-count.html\" data-duration=\"5\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 1 个 asset; 有预览视频 |"
       }
     },
@@ -1449,7 +1437,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `instagram-follow`<br>Instagram Follow<br><small>#social #overlay #instagram</small> | Block | Animated Instagram follow overlay with profile card and follow button | 适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。 | `hyperframes add instagram-follow`<br>`<div data-composition-src=\"compositions/instagram-follow.html\" data-duration=\"4.5\" data-width=\"1080\" data-height=\"1920\"></div>` | 包含 1 个 asset; 有预览视频 |"
       }
     },
@@ -1490,7 +1477,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 8.0
+        "durationSeconds": 8
       },
       "install": {
         "command": "hyperframes add lower-third-bild",
@@ -1544,7 +1531,6 @@
         }
       },
       "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`<br>Lower Third — BILD Style<br><small>#broadcast #lower-third #news #overlay</small> | 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`<br>`<div data-composition-src=\"compositions/lower-third-bild.html\" data-duration=\"8\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 2 个 asset |"
       }
     },
@@ -1640,7 +1626,6 @@
         }
       },
       "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`<br>Lower Third — Accent Underline<br><small>#lower-third #overlay #podcast #interview #minimal</small> | 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`<br>`<div data-composition-src=\"compositions/lt-accent-underline.html\" data-duration=\"4.8\" data-width=\"1920\" data-height=\"1080\"></div>` | - |"
       }
     },
@@ -1740,7 +1725,6 @@
         }
       },
       "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`<br>Lower Third — Bold Block<br><small>#lower-third #overlay #podcast #interview #bold</small> | Block | High-energy podcast lower third: solid dark block wipes in, uppercase name slams up, accent tag pops | 适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。 | `hyperframes add lt-bold-block`<br>`<div data-composition-src=\"compositions/lt-bold-block.html\" data-duration=\"4.8\" data-width=\"1920\" data-height=\"1080\"></div>` | - |"
       }
     },
@@ -1838,7 +1822,6 @@
         }
       },
       "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`<br>Lower Third — Clean Bar<br><small>#lower-third #overlay #podcast #interview</small> | Block | Minimal white-card lower third for podcasts/interviews: accent tab, name + role, clip-wipe entrance | 适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。 | `hyperframes add lt-clean-bar`<br>`<div data-composition-src=\"compositions/lt-clean-bar.html\" data-duration=\"4.8\" data-width=\"1920\" data-height=\"1080\"></div>` | - |"
       }
     },
@@ -1932,7 +1915,6 @@
         }
       },
       "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`<br>Lower Third — Color Block<br><small>#lower-third #overlay #podcast #interview #bold</small> | Block | High-energy lower third: bold accent-color block slides in with overshoot, condensed name + mono role | 适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。 | `hyperframes add lt-color-block`<br>`<div data-composition-src=\"compositions/lt-color-block.html\" data-duration=\"4.8\" data-width=\"1920\" data-height=\"1080\"></div>` | - |"
       }
     },
@@ -2028,7 +2010,6 @@
         }
       },
       "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`<br>Lower Third — Dark Card<br><small>#lower-third #overlay #podcast #interview #dark</small> | Block | Charcoal card lower third for bright footage: name, drawn accent underline, role; slide-up entrance | 适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。 | `hyperframes add lt-dark-card`<br>`<div data-composition-src=\"compositions/lt-dark-card.html\" data-duration=\"4.8\" data-width=\"1920\" data-height=\"1080\"></div>` | - |"
       }
     },
@@ -2122,7 +2103,6 @@
         }
       },
       "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`<br>Lower Third — Kicker Name<br><small>#lower-third #overlay #podcast #interview #bold</small> | Block | Cardless lower third with an accent eyebrow/kicker tag, heavy name, and a drawn baseline; for footage | 适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。 | `hyperframes add lt-kicker-name`<br>`<div data-composition-src=\"compositions/lt-kicker-name.html\" data-duration=\"4.8\" data-width=\"1920\" data-height=\"1080\"></div>` | - |"
       }
     },
@@ -2219,7 +2199,6 @@
         }
       },
       "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`<br>Lower Third — Mask Reveal<br><small>#lower-third #overlay #podcast #interview #bold</small> | 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`<br>`<div data-composition-src=\"compositions/lt-mask-reveal.html\" data-duration=\"4.8\" data-width=\"1920\" data-height=\"1080\"></div>` | - |"
       }
     },
@@ -2315,7 +2294,6 @@
         }
       },
       "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`<br>Lower Third — Side Rule<br><small>#lower-third #overlay #podcast #interview #minimal</small> | Block | Cardless lower third with a vertical accent bar; condensed display name + mono role, text-shadowed for footage | 适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。 | `hyperframes add lt-side-rule`<br>`<div data-composition-src=\"compositions/lt-side-rule.html\" data-duration=\"4.8\" data-width=\"1920\" data-height=\"1080\"></div>` | - |"
       }
     },
@@ -2411,7 +2389,6 @@
         }
       },
       "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`<br>Lower Third — Soft Pill<br><small>#lower-third #overlay #podcast #interview #minimal</small> | Block | Rounded white pill lower third for podcasts/interviews: status dot, name + role, scale-pop entrance | 适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。 | `hyperframes add lt-soft-pill`<br>`<div data-composition-src=\"compositions/lt-soft-pill.html\" data-duration=\"4.8\" data-width=\"1920\" data-height=\"1080\"></div>` | - |"
       }
     },
@@ -2510,7 +2487,6 @@
         }
       },
       "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`<br>Lower Third — Stack Bars<br><small>#lower-third #overlay #podcast #interview #bold</small> | 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`<br>`<div data-composition-src=\"compositions/lt-stack-bars.html\" data-duration=\"4.8\" data-width=\"1920\" data-height=\"1080\"></div>` | - |"
       }
     },
@@ -2551,7 +2527,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 5.0
+        "durationSeconds": 5
       },
       "install": {
         "command": "hyperframes add macos-notification",
@@ -2612,7 +2588,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `macos-notification`<br>macOS Notification<br><small>#social #overlay #notification</small> | Block | Animated macOS-style notification banner with app icon and message | 适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。 | `hyperframes add macos-notification`<br>`<div data-composition-src=\"compositions/macos-notification.html\" data-duration=\"5\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -2656,7 +2631,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 7.0
+        "durationSeconds": 7
       },
       "install": {
         "command": "hyperframes add news-ticker",
@@ -2710,7 +2685,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `news-ticker`<br>News Ticker<br><small>#lower-third #overlay #news #ticker</small> | Block | Premium broadcast-style lower-third ticker with live label, headline ribbon, and scrolling news crawl. | 适合人物介绍、播客嘉宾名牌、新闻标题条、采访画面叠加。 | `hyperframes add news-ticker`<br>`<div data-composition-src=\"compositions/news-ticker.html\" data-duration=\"7\" data-width=\"1920\" data-height=\"1080\"></div>` | - |"
       }
     },
@@ -2748,7 +2722,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 5.0
+        "durationSeconds": 5
       },
       "install": {
         "command": "hyperframes add reddit-post",
@@ -2799,7 +2773,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `reddit-post`<br>Reddit Post Card<br><small>#social #overlay #reddit</small> | Block | Animated Reddit post card overlay with upvotes and comments | 适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。 | `hyperframes add reddit-post`<br>`<div data-composition-src=\"compositions/reddit-post.html\" data-duration=\"5\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -2837,7 +2810,7 @@
         "width": 1080,
         "height": 1920,
         "aspect": "portrait_9_16",
-        "durationSeconds": 5.0
+        "durationSeconds": 5
       },
       "install": {
         "command": "hyperframes add spotify-card",
@@ -2888,7 +2861,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `spotify-card`<br>Spotify Now Playing<br><small>#social #overlay #spotify</small> | Block | Animated Spotify now-playing card with album art and progress bar | 适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。 | `hyperframes add spotify-card`<br>`<div data-composition-src=\"compositions/spotify-card.html\" data-duration=\"5\" data-width=\"1080\" data-height=\"1920\"></div>` | 有预览视频 |"
       }
     },
@@ -2977,7 +2949,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `tiktok-follow`<br>TikTok Follow<br><small>#social #overlay #tiktok</small> | Block | Animated TikTok follow overlay with profile card and follow button | 适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。 | `hyperframes add tiktok-follow`<br>`<div data-composition-src=\"compositions/tiktok-follow.html\" data-duration=\"4.5\" data-width=\"1080\" data-height=\"1920\"></div>` | 包含 1 个 asset; 有预览视频 |"
       }
     },
@@ -3018,7 +2989,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 7.0
+        "durationSeconds": 7
       },
       "install": {
         "command": "hyperframes add vpn-youtube-spot",
@@ -3080,7 +3051,6 @@
         }
       },
       "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`<br>VPN YouTube Spot<br><small>#app #showcase #youtube #sfx</small> | Block | Snappy Apple-style YouTube insert showing a phone finding and installing a friendly VPN app with sound effects. | 适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。 | `hyperframes add vpn-youtube-spot`<br>`<div data-composition-src=\"compositions/vpn-youtube-spot.html\" data-duration=\"7\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 1 个 asset; 有预览视频 |"
       }
     },
@@ -3118,7 +3088,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 5.0
+        "durationSeconds": 5
       },
       "install": {
         "command": "hyperframes add x-post",
@@ -3169,7 +3139,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `x-post`<br>X Post Card<br><small>#social #overlay #twitter</small> | Block | Animated X/Twitter post card overlay with engagement metrics | 适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。 | `hyperframes add x-post`<br>`<div data-composition-src=\"compositions/x-post.html\" data-duration=\"5\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -3261,7 +3230,6 @@
         }
       },
       "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`<br>YouTube Lower Third<br><small>#social #overlay #youtube</small> | Block | Animated YouTube subscribe lower third with avatar and channel info | 适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。 | `hyperframes add yt-lower-third`<br>`<div data-composition-src=\"compositions/yt-lower-third.html\" data-duration=\"4.5\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 1 个 asset; 有预览视频 |"
       }
     },
@@ -3360,7 +3328,6 @@
         "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`<br>Emoji Pop<br><small>#captions #caption-style #emoji #social</small> | Component | Emoji integration with stroked text and horizontal squeeze entrance | 适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。 | `hyperframes add caption-emoji-pop`<br>`<!-- paste from compositions/components/caption-emoji-pop.html into your composition -->` | 有预览视频 |"
       }
     },
@@ -3460,7 +3427,6 @@
         "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`<br>Highlight<br><small>#captions #caption-style #highlight #social #tiktok</small> | Component | Red background sweep behind each active word, TikTok-style | 适合把社交平台内容、关注引导、通知卡片或播放状态做成画面叠加素材。 | `hyperframes add caption-highlight`<br>`<!-- paste from compositions/components/caption-highlight.html into your composition -->` | 有预览视频 |"
       }
     },
@@ -3501,7 +3467,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 8.0
+        "durationSeconds": 8
       },
       "install": {
         "command": "hyperframes add code-3d-extrude",
@@ -3563,7 +3529,6 @@
         }
       },
       "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`<br>Code 3D Extrude<br><small>#code #code-animation #3d #webgl #developer</small> | 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`<br>`<div data-composition-src=\"compositions/code-3d-extrude.html\" data-duration=\"8\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -3604,7 +3569,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 6.0
+        "durationSeconds": 6
       },
       "install": {
         "command": "hyperframes add code-diff",
@@ -3665,7 +3630,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `code-diff`<br>Code Diff<br><small>#code #code-animation #diff #developer</small> | Block | An edit shown as a colored diff — removed lines collapse in red, added lines expand in green. | 适合把代码变化、重点行、diff、滚动、粒子/3D 编译感做成叙事镜头。 | `hyperframes add code-diff`<br>`<div data-composition-src=\"compositions/code-diff.html\" data-duration=\"6\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -3705,7 +3669,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 5.0
+        "durationSeconds": 5
       },
       "install": {
         "command": "hyperframes add code-highlight",
@@ -3766,7 +3730,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `code-highlight`<br>Code Highlight Sweep<br><small>#code #code-animation #highlight #developer</small> | 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`<br>`<div data-composition-src=\"compositions/code-highlight.html\" data-duration=\"5\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -3811,7 +3774,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 8.0
+        "durationSeconds": 8
       },
       "install": {
         "command": "hyperframes add code-particle-assemble",
@@ -3873,7 +3836,6 @@
         }
       },
       "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`<br>Code Particle Assemble<br><small>#code #code-animation #particles #gpu #webgl #developer</small> | 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`<br>`<div data-composition-src=\"compositions/code-particle-assemble.html\" data-duration=\"8\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -3915,7 +3877,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 6.0
+        "durationSeconds": 6
       },
       "install": {
         "command": "hyperframes add code-scroll",
@@ -3976,7 +3938,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `code-scroll`<br>Code Scroll To Line<br><small>#code #code-animation #scroll #developer</small> | 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`<br>`<div data-composition-src=\"compositions/code-scroll.html\" data-duration=\"6\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -4018,7 +3979,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 7.0
+        "durationSeconds": 7
       },
       "install": {
         "command": "hyperframes add code-shader-dissolve",
@@ -4082,7 +4043,6 @@
         }
       },
       "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`<br>Code Shader Dissolve<br><small>#code #code-animation #shader #webgl #developer</small> | 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`<br>`<div data-composition-src=\"compositions/code-shader-dissolve.html\" data-duration=\"7\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -4126,7 +4086,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 12.0
+        "durationSeconds": 12
       },
       "install": {
         "command": "hyperframes add code-snippet-apple-terminal-basic",
@@ -4190,7 +4150,6 @@
         }
       },
       "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`<br>Code Snippet - Apple Terminal Basic<br><small>#code #developer #showcase #terminal #apple #apple-terminal</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-apple-terminal-basic.html\" data-duration=\"12\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -4235,7 +4194,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 12.0
+        "durationSeconds": 12
       },
       "install": {
         "command": "hyperframes add code-snippet-apple-terminal-clear-dark",
@@ -4299,7 +4258,6 @@
         }
       },
       "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`<br>Code Snippet - Apple Terminal Clear Dark<br><small>#code #developer #showcase #terminal #apple #apple-terminal</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-apple-terminal-clear-dark.html\" data-duration=\"12\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -4344,7 +4302,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 12.0
+        "durationSeconds": 12
       },
       "install": {
         "command": "hyperframes add code-snippet-apple-terminal-clear-light",
@@ -4408,7 +4366,6 @@
         }
       },
       "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`<br>Code Snippet - Apple Terminal Clear Light<br><small>#code #developer #showcase #terminal #apple #apple-terminal</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-apple-terminal-clear-light.html\" data-duration=\"12\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -4452,7 +4409,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 12.0
+        "durationSeconds": 12
       },
       "install": {
         "command": "hyperframes add code-snippet-apple-terminal-grass",
@@ -4516,7 +4473,6 @@
         }
       },
       "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`<br>Code Snippet - Apple Terminal Grass<br><small>#code #developer #showcase #terminal #apple #apple-terminal</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-apple-terminal-grass.html\" data-duration=\"12\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -4560,7 +4516,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 12.0
+        "durationSeconds": 12
       },
       "install": {
         "command": "hyperframes add code-snippet-apple-terminal-homebrew",
@@ -4624,7 +4580,6 @@
         }
       },
       "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`<br>Code Snippet - Apple Terminal Homebrew<br><small>#code #developer #showcase #terminal #apple #apple-terminal</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-apple-terminal-homebrew.html\" data-duration=\"12\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -4668,7 +4623,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 12.0
+        "durationSeconds": 12
       },
       "install": {
         "command": "hyperframes add code-snippet-apple-terminal-man-page",
@@ -4732,7 +4687,6 @@
         }
       },
       "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`<br>Code Snippet - Apple Terminal Man Page<br><small>#code #developer #showcase #terminal #apple #apple-terminal</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-apple-terminal-man-page.html\" data-duration=\"12\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -4777,7 +4731,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 12.0
+        "durationSeconds": 12
       },
       "install": {
         "command": "hyperframes add code-snippet-apple-terminal-novel",
@@ -4841,7 +4795,6 @@
         }
       },
       "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`<br>Code Snippet - Apple Terminal Novel<br><small>#code #developer #showcase #terminal #apple #apple-terminal</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-apple-terminal-novel.html\" data-duration=\"12\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -4885,7 +4838,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 12.0
+        "durationSeconds": 12
       },
       "install": {
         "command": "hyperframes add code-snippet-apple-terminal-ocean",
@@ -4949,7 +4902,6 @@
         }
       },
       "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`<br>Code Snippet - Apple Terminal Ocean<br><small>#code #developer #showcase #terminal #apple #apple-terminal</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-apple-terminal-ocean.html\" data-duration=\"12\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -4993,7 +4945,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 12.0
+        "durationSeconds": 12
       },
       "install": {
         "command": "hyperframes add code-snippet-apple-terminal-pro",
@@ -5057,7 +5009,6 @@
         }
       },
       "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`<br>Code Snippet - Apple Terminal Pro<br><small>#code #developer #showcase #terminal #apple #apple-terminal</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-apple-terminal-pro.html\" data-duration=\"12\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -5101,7 +5052,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 12.0
+        "durationSeconds": 12
       },
       "install": {
         "command": "hyperframes add code-snippet-apple-terminal-red-sands",
@@ -5165,7 +5116,6 @@
         }
       },
       "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`<br>Code Snippet - Apple Terminal Red Sands<br><small>#code #developer #showcase #terminal #apple #apple-terminal</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-apple-terminal-red-sands.html\" data-duration=\"12\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -5210,7 +5160,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 12.0
+        "durationSeconds": 12
       },
       "install": {
         "command": "hyperframes add code-snippet-apple-terminal-silver-aerogel",
@@ -5274,7 +5224,6 @@
         }
       },
       "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`<br>Code Snippet - Apple Terminal Silver Aerogel<br><small>#code #developer #showcase #terminal #apple #apple-terminal</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-apple-terminal-silver-aerogel.html\" data-duration=\"12\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -5318,7 +5267,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 12.0
+        "durationSeconds": 12
       },
       "install": {
         "command": "hyperframes add code-snippet-apple-terminal-solid-colors",
@@ -5382,7 +5331,6 @@
         }
       },
       "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`<br>Code Snippet - Apple Terminal Solid Colors<br><small>#code #developer #showcase #terminal #apple #apple-terminal</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-apple-terminal-solid-colors.html\" data-duration=\"12\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -5424,7 +5372,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 11.0
+        "durationSeconds": 11
       },
       "install": {
         "command": "hyperframes add code-snippet-dark-2026",
@@ -5487,7 +5435,6 @@
         }
       },
       "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`<br>Code Snippet - Dark 2026<br><small>#code #developer #showcase #vscode</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-dark-2026.html\" data-duration=\"11\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 1 个 asset |"
       }
     },
@@ -5529,7 +5476,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 11.0
+        "durationSeconds": 11
       },
       "install": {
         "command": "hyperframes add code-snippet-dark-modern",
@@ -5592,7 +5539,6 @@
         }
       },
       "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`<br>Code Snippet - Dark Modern<br><small>#code #developer #showcase #vscode</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-dark-modern.html\" data-duration=\"11\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 1 个 asset |"
       }
     },
@@ -5634,7 +5580,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 11.0
+        "durationSeconds": 11
       },
       "install": {
         "command": "hyperframes add code-snippet-dark-plus",
@@ -5697,7 +5643,6 @@
         }
       },
       "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`<br>Code Snippet - Dark+<br><small>#code #developer #showcase #vscode</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-dark-plus.html\" data-duration=\"11\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 1 个 asset |"
       }
     },
@@ -5739,7 +5684,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 6.0
+        "durationSeconds": 6
       },
       "install": {
         "command": "hyperframes add code-snippet-flight",
@@ -5800,7 +5745,6 @@
         }
       },
       "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`<br>Code Snippet Flight<br><small>#code #code-animation #flight #developer</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-flight.html\" data-duration=\"6\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -5840,7 +5784,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 11.0
+        "durationSeconds": 11
       },
       "install": {
         "command": "hyperframes add code-snippet-high-contrast",
@@ -5903,7 +5847,6 @@
         }
       },
       "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`<br>Code Snippet - High Contrast<br><small>#code #developer #showcase #vscode</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-high-contrast.html\" data-duration=\"11\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 1 个 asset |"
       }
     },
@@ -5945,7 +5888,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 11.0
+        "durationSeconds": 11
       },
       "install": {
         "command": "hyperframes add code-snippet-high-contrast-light",
@@ -6008,7 +5951,6 @@
         }
       },
       "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`<br>Code Snippet - High Contrast Light<br><small>#code #developer #showcase #vscode</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-high-contrast-light.html\" data-duration=\"11\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 1 个 asset |"
       }
     },
@@ -6050,7 +5992,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 11.0
+        "durationSeconds": 11
       },
       "install": {
         "command": "hyperframes add code-snippet-light-2026",
@@ -6113,7 +6055,6 @@
         }
       },
       "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`<br>Code Snippet - Light 2026<br><small>#code #developer #showcase #vscode</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-light-2026.html\" data-duration=\"11\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 1 个 asset |"
       }
     },
@@ -6155,7 +6096,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 11.0
+        "durationSeconds": 11
       },
       "install": {
         "command": "hyperframes add code-snippet-light-modern",
@@ -6218,7 +6159,6 @@
         }
       },
       "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`<br>Code Snippet - Light Modern<br><small>#code #developer #showcase #vscode</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-light-modern.html\" data-duration=\"11\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 1 个 asset |"
       }
     },
@@ -6260,7 +6200,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 11.0
+        "durationSeconds": 11
       },
       "install": {
         "command": "hyperframes add code-snippet-light-plus",
@@ -6323,7 +6263,6 @@
         }
       },
       "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`<br>Code Snippet - Light+<br><small>#code #developer #showcase #vscode</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-light-plus.html\" data-duration=\"11\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 1 个 asset |"
       }
     },
@@ -6363,7 +6302,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 11.0
+        "durationSeconds": 11
       },
       "install": {
         "command": "hyperframes add code-snippet-monokai",
@@ -6426,7 +6365,6 @@
         }
       },
       "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`<br>Code Snippet - Monokai<br><small>#code #developer #showcase #vscode</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-monokai.html\" data-duration=\"11\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 1 个 asset |"
       }
     },
@@ -6468,7 +6406,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 11.0
+        "durationSeconds": 11
       },
       "install": {
         "command": "hyperframes add code-snippet-solarized-light",
@@ -6531,7 +6469,6 @@
         }
       },
       "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`<br>Code Snippet - Solarized Light<br><small>#code #developer #showcase #vscode</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-solarized-light.html\" data-duration=\"11\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 1 个 asset |"
       }
     },
@@ -6573,7 +6510,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 11.0
+        "durationSeconds": 11
       },
       "install": {
         "command": "hyperframes add code-snippet-visual-studio-dark",
@@ -6636,7 +6573,6 @@
         }
       },
       "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`<br>Code Snippet - Visual Studio Dark<br><small>#code #developer #showcase #vscode</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-visual-studio-dark.html\" data-duration=\"11\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 1 个 asset |"
       }
     },
@@ -6678,7 +6614,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 11.0
+        "durationSeconds": 11
       },
       "install": {
         "command": "hyperframes add code-snippet-visual-studio-light",
@@ -6741,7 +6677,6 @@
         }
       },
       "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`<br>Code Snippet - Visual Studio Light<br><small>#code #developer #showcase #vscode</small> | 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`<br>`<div data-composition-src=\"compositions/code-snippet-visual-studio-light.html\" data-duration=\"11\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 1 个 asset |"
       }
     },
@@ -6782,7 +6717,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 5.0
+        "durationSeconds": 5
       },
       "install": {
         "command": "hyperframes add code-typing",
@@ -6843,7 +6778,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `code-typing`<br>Code Typing<br><small>#code #code-animation #typing #developer</small> | Block | Token-streamed typing reveal with a caret that tracks the frontier — deterministic, no CSS animation. | 适合把代码变化、重点行、diff、滚动、粒子/3D 编译感做成叙事镜头。 | `hyperframes add code-typing`<br>`<div data-composition-src=\"compositions/code-typing.html\" data-duration=\"5\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -6940,7 +6874,6 @@
         "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`<br>Blend Difference<br><small>#text #text-effect #effect #blend-mode #contrast #inversion</small> | 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`<br>`<!-- paste from compositions/components/caption-blend-difference.html into your composition -->` | - |"
       }
     },
@@ -7039,7 +6972,6 @@
         "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`<br>Clip Wipe<br><small>#captions #caption-style #wipe #clip-path #reveal</small> | Component | Left-to-right clip-path wipe reveal per word | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-clip-wipe`<br>`<!-- paste from compositions/components/caption-clip-wipe.html into your composition -->` | 有预览视频 |"
       }
     },
@@ -7136,7 +7068,6 @@
         "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`<br>Editorial Emphasis<br><small>#captions #caption-style #editorial #typography #emphasis</small> | Component | Dual-font system with dramatic size contrast for emphasis words | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-editorial-emphasis`<br>`<!-- paste from compositions/components/caption-editorial-emphasis.html into your composition -->` | 有预览视频 |"
       }
     },
@@ -7236,7 +7167,6 @@
         "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`<br>Glitch RGB<br><small>#captions #caption-style #glitch #cyber #tech</small> | Component | RGB chromatic aberration with CRT scanline overlay | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-glitch-rgb`<br>`<!-- paste from compositions/components/caption-glitch-rgb.html into your composition -->` | 有预览视频 |"
       }
     },
@@ -7332,7 +7262,6 @@
         "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`<br>Gradient Fill<br><small>#captions #caption-style #gradient #colorful</small> | Component | Gradient-clipped text with elastic bounce entrance | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-gradient-fill`<br>`<!-- paste from compositions/components/caption-gradient-fill.html into your composition -->` | 有预览视频 |"
       }
     },
@@ -7429,7 +7358,6 @@
         "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`<br>Kinetic Slam<br><small>#captions #caption-style #kinetic #typography #slam</small> | Component | Full-screen single-word display with alternating entrance directions | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-kinetic-slam`<br>`<!-- paste from compositions/components/caption-kinetic-slam.html into your composition -->` | 有预览视频 |"
       }
     },
@@ -7532,7 +7460,6 @@
         "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`<br>Matrix Decode<br><small>#captions #caption-style #matrix #scramble #decode</small> | Component | Character scramble animation before text reveal | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-matrix-decode`<br>`<!-- paste from compositions/components/caption-matrix-decode.html into your composition -->` | 有预览视频 |"
       }
     },
@@ -7627,7 +7554,6 @@
         "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`<br>Neon Accent<br><small>#captions #caption-style #neon #glow #accent</small> | Component | Multi-color neon glow accents with wiggle drift animation | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-neon-accent`<br>`<!-- paste from compositions/components/caption-neon-accent.html into your composition -->` | 有预览视频 |"
       }
     },
@@ -7722,7 +7648,6 @@
         "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`<br>Neon Glow<br><small>#captions #caption-style #neon #glow #gaming</small> | Component | Cyan and magenta neon glow with keyword accent colors | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-neon-glow`<br>`<!-- paste from compositions/components/caption-neon-glow.html into your composition -->` | 有预览视频 |"
       }
     },
@@ -7820,7 +7745,6 @@
         "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`<br>Parallax Layers<br><small>#captions #caption-style #parallax #3d #depth</small> | Component | Behind-subject 3D text layering with vertical stretch effect | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-parallax-layers`<br>`<!-- paste from compositions/components/caption-parallax-layers.html into your composition -->` | 有预览视频 |"
       }
     },
@@ -7917,7 +7841,6 @@
         "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`<br>Particle Burst<br><small>#captions #caption-style #particles #burst #effects</small> | Component | Keyword words trigger colored particle explosions | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-particle-burst`<br>`<!-- paste from compositions/components/caption-particle-burst.html into your composition -->` | 有预览视频 |"
       }
     },
@@ -8012,7 +7935,6 @@
         "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`<br>Pill Karaoke<br><small>#captions #caption-style #karaoke #pill</small> | Component | Pill-shaped container with per-word karaoke color highlight | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-pill-karaoke`<br>`<!-- paste from compositions/components/caption-pill-karaoke.html into your composition -->` | 有预览视频 |"
       }
     },
@@ -8106,7 +8028,6 @@
         "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`<br>Texture<br><small>#captions #caption-style #texture #mask</small> | 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`<br>`<!-- paste from compositions/components/caption-texture.html into your composition -->` | 包含 6 个 asset; 有预览视频 |"
       }
     },
@@ -8204,7 +8125,6 @@
         "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`<br>Weight Shift<br><small>#captions #caption-style #minimal #typography</small> | Component | Elegant font-weight transition between caption lines | 适合短视频口播、TikTok/YouTube Shorts/Reels、关键词强调、歌词/逐词 karaoke。 | `hyperframes add caption-weight-shift`<br>`<!-- paste from compositions/components/caption-weight-shift.html into your composition -->` | 有预览视频 |"
       }
     },
@@ -8243,7 +8163,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 4.0
+        "durationSeconds": 4
       },
       "install": {
         "command": "hyperframes add chromatic-radial-split",
@@ -8292,7 +8212,6 @@
         }
       },
       "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`<br>Chromatic Radial Split<br><small>#transition #shader</small> | Block | Shader transition with chromatic aberration radial split | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add chromatic-radial-split`<br>`<div data-composition-src=\"compositions/chromatic-radial-split.html\" data-duration=\"4\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -8333,7 +8252,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 4.0
+        "durationSeconds": 4
       },
       "install": {
         "command": "hyperframes add cinematic-zoom",
@@ -8382,7 +8301,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `cinematic-zoom`<br>Cinematic Zoom<br><small>#transition #shader</small> | Block | Shader transition with dramatic zoom blur | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add cinematic-zoom`<br>`<div data-composition-src=\"compositions/cinematic-zoom.html\" data-duration=\"4\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -8422,7 +8340,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 4.0
+        "durationSeconds": 4
       },
       "install": {
         "command": "hyperframes add cross-warp-morph",
@@ -8471,7 +8389,6 @@
         }
       },
       "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`<br>Cross Warp Morph<br><small>#transition #shader</small> | Block | Shader transition with cross-warped morphing | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add cross-warp-morph`<br>`<div data-composition-src=\"compositions/cross-warp-morph.html\" data-duration=\"4\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -8510,7 +8427,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 4.0
+        "durationSeconds": 4
       },
       "install": {
         "command": "hyperframes add domain-warp-dissolve",
@@ -8559,7 +8476,6 @@
         }
       },
       "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`<br>Domain Warp Dissolve<br><small>#transition #shader</small> | Block | Shader transition with fractal noise domain warping | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add domain-warp-dissolve`<br>`<div data-composition-src=\"compositions/domain-warp-dissolve.html\" data-duration=\"4\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -8598,7 +8514,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 4.0
+        "durationSeconds": 4
       },
       "install": {
         "command": "hyperframes add flash-through-white",
@@ -8647,7 +8563,6 @@
         }
       },
       "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`<br>Flash Through White<br><small>#transition #shader</small> | Block | Shader transition with white flash crossfade | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add flash-through-white`<br>`<div data-composition-src=\"compositions/flash-through-white.html\" data-duration=\"4\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -8688,7 +8603,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 4.0
+        "durationSeconds": 4
       },
       "install": {
         "command": "hyperframes add glitch",
@@ -8737,7 +8652,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `glitch`<br>Glitch<br><small>#transition #shader</small> | Block | Shader transition with digital glitch artifacts | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add glitch`<br>`<div data-composition-src=\"compositions/glitch.html\" data-duration=\"4\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -8776,7 +8690,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 4.0
+        "durationSeconds": 4
       },
       "install": {
         "command": "hyperframes add gravitational-lens",
@@ -8825,7 +8739,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `gravitational-lens`<br>Gravitational Lens<br><small>#transition #shader</small> | Block | Shader transition with gravitational lensing distortion | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add gravitational-lens`<br>`<div data-composition-src=\"compositions/gravitational-lens.html\" data-duration=\"4\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -8865,7 +8778,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 4.0
+        "durationSeconds": 4
       },
       "install": {
         "command": "hyperframes add light-leak",
@@ -8914,7 +8827,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `light-leak`<br>Light Leak<br><small>#transition #shader</small> | Block | Shader transition with cinematic light leak overlay | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add light-leak`<br>`<div data-composition-src=\"compositions/light-leak.html\" data-duration=\"4\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -8953,7 +8865,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 4.0
+        "durationSeconds": 4
       },
       "install": {
         "command": "hyperframes add ridged-burn",
@@ -9002,7 +8914,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `ridged-burn`<br>Ridged Burn<br><small>#transition #shader</small> | Block | Shader transition with ridged turbulence burn effect | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add ridged-burn`<br>`<div data-composition-src=\"compositions/ridged-burn.html\" data-duration=\"4\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -9041,7 +8952,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 4.0
+        "durationSeconds": 4
       },
       "install": {
         "command": "hyperframes add ripple-waves",
@@ -9090,7 +9001,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `ripple-waves`<br>Ripple Waves<br><small>#transition #shader</small> | Block | Shader transition with concentric ripple wave distortion | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add ripple-waves`<br>`<div data-composition-src=\"compositions/ripple-waves.html\" data-duration=\"4\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -9130,7 +9040,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 4.0
+        "durationSeconds": 4
       },
       "install": {
         "command": "hyperframes add sdf-iris",
@@ -9179,7 +9089,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `sdf-iris`<br>SDF Iris<br><small>#transition #shader</small> | Block | Shader transition with signed distance field iris reveal | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add sdf-iris`<br>`<div data-composition-src=\"compositions/sdf-iris.html\" data-duration=\"4\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -9218,7 +9127,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 4.0
+        "durationSeconds": 4
       },
       "install": {
         "command": "hyperframes add swirl-vortex",
@@ -9267,7 +9176,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `swirl-vortex`<br>Swirl Vortex<br><small>#transition #shader</small> | Block | Shader transition with swirling vortex distortion | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add swirl-vortex`<br>`<div data-composition-src=\"compositions/swirl-vortex.html\" data-duration=\"4\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -9306,7 +9214,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 4.0
+        "durationSeconds": 4
       },
       "install": {
         "command": "hyperframes add thermal-distortion",
@@ -9355,7 +9263,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `thermal-distortion`<br>Thermal Distortion<br><small>#transition #shader</small> | Block | Shader transition with heat haze thermal distortion | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add thermal-distortion`<br>`<div data-composition-src=\"compositions/thermal-distortion.html\" data-duration=\"4\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -9392,7 +9299,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 11.0
+        "durationSeconds": 11
       },
       "install": {
         "command": "hyperframes add transitions-3d",
@@ -9451,7 +9358,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `transitions-3d`<br>3D Transitions<br><small>#transition #showcase</small> | Block | Showcase of 3D perspective flip and rotate transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-3d`<br>`<div data-composition-src=\"compositions/transitions-3d.html\" data-duration=\"11\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -9490,7 +9396,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 20.0
+        "durationSeconds": 20
       },
       "install": {
         "command": "hyperframes add transitions-blur",
@@ -9549,7 +9455,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `transitions-blur`<br>Blur Transitions<br><small>#transition #showcase</small> | Block | Showcase of blur-based transitions between scenes | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-blur`<br>`<div data-composition-src=\"compositions/transitions-blur.html\" data-duration=\"20\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -9585,7 +9490,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 21.0
+        "durationSeconds": 21
       },
       "install": {
         "command": "hyperframes add transitions-cover",
@@ -9644,7 +9549,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `transitions-cover`<br>Cover Transitions<br><small>#transition #showcase</small> | Block | Showcase of cover/uncover slide transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-cover`<br>`<div data-composition-src=\"compositions/transitions-cover.html\" data-duration=\"21\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -9680,7 +9584,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 14.0
+        "durationSeconds": 14
       },
       "install": {
         "command": "hyperframes add transitions-destruction",
@@ -9739,7 +9643,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `transitions-destruction`<br>Destruction Transitions<br><small>#transition #showcase</small> | Block | Showcase of destructive break-apart transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-destruction`<br>`<div data-composition-src=\"compositions/transitions-destruction.html\" data-duration=\"14\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -9775,7 +9678,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 24.0
+        "durationSeconds": 24
       },
       "install": {
         "command": "hyperframes add transitions-dissolve",
@@ -9834,7 +9737,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `transitions-dissolve`<br>Dissolve Transitions<br><small>#transition #showcase</small> | Block | Showcase of dissolve and fade transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-dissolve`<br>`<div data-composition-src=\"compositions/transitions-dissolve.html\" data-duration=\"24\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -9870,7 +9772,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 21.0
+        "durationSeconds": 21
       },
       "install": {
         "command": "hyperframes add transitions-distortion",
@@ -9929,7 +9831,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `transitions-distortion`<br>Distortion Transitions<br><small>#transition #showcase</small> | Block | Showcase of warp and distortion transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-distortion`<br>`<div data-composition-src=\"compositions/transitions-distortion.html\" data-duration=\"21\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -9965,7 +9866,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 11.0
+        "durationSeconds": 11
       },
       "install": {
         "command": "hyperframes add transitions-grid",
@@ -10024,7 +9925,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `transitions-grid`<br>Grid Transitions<br><small>#transition #showcase</small> | Block | Showcase of grid-based tile transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-grid`<br>`<div data-composition-src=\"compositions/transitions-grid.html\" data-duration=\"11\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -10062,7 +9962,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 21.0
+        "durationSeconds": 21
       },
       "install": {
         "command": "hyperframes add transitions-light",
@@ -10121,7 +10021,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `transitions-light`<br>Light Transitions<br><small>#transition #showcase</small> | Block | Showcase of light-based glow and flash transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-light`<br>`<div data-composition-src=\"compositions/transitions-light.html\" data-duration=\"21\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -10157,7 +10056,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 15.0
+        "durationSeconds": 15
       },
       "install": {
         "command": "hyperframes add transitions-mechanical",
@@ -10216,7 +10115,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `transitions-mechanical`<br>Mechanical Transitions<br><small>#transition #showcase</small> | Block | Showcase of mechanical shutter and iris transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-mechanical`<br>`<div data-composition-src=\"compositions/transitions-mechanical.html\" data-duration=\"15\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -10252,7 +10150,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 20.0
+        "durationSeconds": 20
       },
       "install": {
         "command": "hyperframes add transitions-other",
@@ -10311,7 +10209,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `transitions-other`<br>Other Transitions<br><small>#transition #showcase</small> | Block | Showcase of miscellaneous creative transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-other`<br>`<div data-composition-src=\"compositions/transitions-other.html\" data-duration=\"20\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -10347,7 +10244,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 24.0
+        "durationSeconds": 24
       },
       "install": {
         "command": "hyperframes add transitions-push",
@@ -10406,7 +10303,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `transitions-push`<br>Push Transitions<br><small>#transition #showcase</small> | Block | Showcase of push and slide transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-push`<br>`<div data-composition-src=\"compositions/transitions-push.html\" data-duration=\"24\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -10445,7 +10341,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 20.0
+        "durationSeconds": 20
       },
       "install": {
         "command": "hyperframes add transitions-radial",
@@ -10504,7 +10400,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `transitions-radial`<br>Radial Transitions<br><small>#transition #showcase</small> | Block | Showcase of radial wipe and reveal transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-radial`<br>`<div data-composition-src=\"compositions/transitions-radial.html\" data-duration=\"20\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -10542,7 +10437,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 15.0
+        "durationSeconds": 15
       },
       "install": {
         "command": "hyperframes add transitions-scale",
@@ -10601,7 +10496,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `transitions-scale`<br>Scale Transitions<br><small>#transition #showcase</small> | Block | Showcase of scale and zoom transitions | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add transitions-scale`<br>`<div data-composition-src=\"compositions/transitions-scale.html\" data-duration=\"15\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -10645,7 +10539,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 8.0
+        "durationSeconds": 8
       },
       "install": {
         "command": "hyperframes add vfx-text-cursor",
@@ -10697,7 +10591,6 @@
         }
       },
       "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`<br>VFX Text Cursor<br><small>#html-in-canvas #text #shader #cursor #chromatic</small> | 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`<br>`<div data-composition-src=\"compositions/vfx-text-cursor.html\" data-duration=\"8\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -10737,7 +10630,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 4.0
+        "durationSeconds": 4
       },
       "install": {
         "command": "hyperframes add whip-pan",
@@ -10786,7 +10679,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `whip-pan`<br>Whip Pan<br><small>#transition #shader</small> | Block | Shader transition simulating a fast camera whip pan | 适合高质感 scene-to-scene 转场，尤其科技、电影感、游戏感内容。 | `hyperframes add whip-pan`<br>`<div data-composition-src=\"compositions/whip-pan.html\" data-duration=\"4\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -10877,7 +10769,6 @@
         "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`<br>Grid Pixelate Wipe<br><small>#transition #wipe #grid #pixelate</small> | 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`<br>`<!-- paste from compositions/components/grid-pixelate-wipe.html into your composition -->` | - |"
       }
     },
@@ -10973,7 +10864,6 @@
         "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`<br>Parallax Unzoom<br><small>#transition #reveal #unzoom #parallax #grid #hero</small> | 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`<br>`<!-- paste from compositions/components/parallax-unzoom.html into your composition -->` | - |"
       }
     },
@@ -11066,7 +10956,6 @@
         "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`<br>Parallax Zoom<br><small>#transition #zoom #parallax #grid #hero</small> | Component | Center card scales up to fill the frame while siblings parallax outward — inspired by the eBay Playbook hero transition | 适合在多镜头剪辑里快速试选某一类转场风格，或作为转场示例库。 | `hyperframes add parallax-zoom`<br>`<!-- paste from compositions/components/parallax-zoom.html into your composition -->` | - |"
       }
     },
@@ -11165,7 +11054,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `app-showcase`<br>App Showcase<br><small>#showcase #app #3d</small> | Block | Fitness app product showcase with three floating smartphone screens | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add app-showcase`<br>`<div data-composition-src=\"compositions/app-showcase.html\" data-duration=\"5.5\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -11216,7 +11104,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 15.0
+        "durationSeconds": 15
       },
       "install": {
         "command": "hyperframes add ios26-liquid-glass",
@@ -11279,7 +11167,6 @@
         }
       },
       "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`<br>iOS 26 Liquid Glass Home Screen<br><small>#liquid-glass-html-in-canvas #webgpu #3d #iphone #ios26 #notifications #gltf #html-in-canvas</small> | 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`<br>`<div data-composition-src=\"compositions/ios26-liquid-glass.html\" data-duration=\"15\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 28 个 asset; 有预览视频 |"
       }
     },
@@ -11325,7 +11212,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 8.0
+        "durationSeconds": 8
       },
       "install": {
         "command": "hyperframes add liquid-glass-context-menu",
@@ -11386,7 +11273,6 @@
         }
       },
       "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`<br>Liquid Glass Context Menu<br><small>#html-in-canvas #liquid-glass-html-in-canvas #webgpu</small> | Block | Frosted glass context menu panel drifting over an aurora shader background | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add liquid-glass-context-menu`<br>`<div data-composition-src=\"compositions/liquid-glass-context-menu.html\" data-duration=\"8\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -11432,7 +11318,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 8.0
+        "durationSeconds": 8
       },
       "install": {
         "command": "hyperframes add liquid-glass-media-controls",
@@ -11493,7 +11379,6 @@
         }
       },
       "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`<br>Liquid Glass Media Controls<br><small>#html-in-canvas #liquid-glass-html-in-canvas #webgpu</small> | Block | Frosted glass media control panels spreading over an aurora shader background | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add liquid-glass-media-controls`<br>`<div data-composition-src=\"compositions/liquid-glass-media-controls.html\" data-duration=\"8\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -11538,7 +11423,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 8.0
+        "durationSeconds": 8
       },
       "install": {
         "command": "hyperframes add liquid-glass-notification",
@@ -11599,7 +11484,6 @@
         }
       },
       "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`<br>Liquid Glass Notification<br><small>#html-in-canvas #liquid-glass-html-in-canvas #webgpu</small> | Block | Frosted glass notification cards floating over an aurora shader background | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add liquid-glass-notification`<br>`<div data-composition-src=\"compositions/liquid-glass-notification.html\" data-duration=\"8\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 1 个 asset; 有预览视频 |"
       }
     },
@@ -11645,7 +11529,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 8.0
+        "durationSeconds": 8
       },
       "install": {
         "command": "hyperframes add liquid-glass-widgets",
@@ -11706,7 +11590,6 @@
         }
       },
       "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`<br>Liquid Glass Widgets<br><small>#html-in-canvas #liquid-glass-html-in-canvas #webgpu</small> | Block | Frosted glass stat cards, showcase panel and pill chips over an aurora shader background | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add liquid-glass-widgets`<br>`<div data-composition-src=\"compositions/liquid-glass-widgets.html\" data-duration=\"8\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 1 个 asset; 有预览视频 |"
       }
     },
@@ -11751,7 +11634,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 15.0
+        "durationSeconds": 15
       },
       "install": {
         "command": "hyperframes add macos-tahoe-liquid-glass",
@@ -11813,7 +11696,6 @@
         }
       },
       "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`<br>macOS Tahoe Liquid Glass Desktop<br><small>#html-in-canvas #3d #macos #tahoe #gltf</small> | 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`<br>`<div data-composition-src=\"compositions/macos-tahoe-liquid-glass.html\" data-duration=\"15\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 18 个 asset; 有预览视频 |"
       }
     },
@@ -11854,7 +11736,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 13.0
+        "durationSeconds": 13
       },
       "install": {
         "command": "hyperframes add ui-3d-reveal",
@@ -11914,7 +11796,6 @@
         }
       },
       "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`<br>3D UI Reveal<br><small>#showcase #3d #reveal</small> | Block | Perspective 3D reveal animation for UI elements | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add ui-3d-reveal`<br>`<div data-composition-src=\"compositions/ui-3d-reveal.html\" data-duration=\"13\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -11958,7 +11839,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 15.0
+        "durationSeconds": 15
       },
       "install": {
         "command": "hyperframes add vfx-iphone-device",
@@ -12020,7 +11901,6 @@
         }
       },
       "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`<br>iPhone & MacBook 3D Showcase<br><small>#html-in-canvas #3d #device #iphone #macbook #gltf</small> | 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`<br>`<div data-composition-src=\"compositions/vfx-iphone-device.html\" data-duration=\"15\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 4 个 asset; 有预览视频 |"
       }
     },
@@ -12061,7 +11941,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 12.0
+        "durationSeconds": 12
       },
       "install": {
         "command": "hyperframes add vfx-liquid-background",
@@ -12126,7 +12006,6 @@
         }
       },
       "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`<br>Liquid Background<br><small>#html-in-canvas #liquid #webgl #displacement #background</small> | 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`<br>`<div data-composition-src=\"compositions/vfx-liquid-background.html\" data-duration=\"12\" data-width=\"1920\" data-height=\"1080\"></div>` | 可调参数: --bg-color, --text-color; 有预览视频 |"
       }
     },
@@ -12166,7 +12045,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 20.0
+        "durationSeconds": 20
       },
       "install": {
         "command": "hyperframes add vfx-liquid-glass",
@@ -12228,7 +12107,6 @@
         }
       },
       "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`<br>Liquid Glass<br><small>#html-in-canvas #webgl</small> | Block | VFX composition block | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add vfx-liquid-glass`<br>`<div data-composition-src=\"compositions/vfx-liquid-glass.html\" data-duration=\"20\" data-width=\"1920\" data-height=\"1080\"></div>` | 可调参数: --bg-color, --accent-color; 有预览视频 |"
       }
     },
@@ -12266,7 +12144,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 15.0
+        "durationSeconds": 15
       },
       "install": {
         "command": "hyperframes add vfx-magnetic",
@@ -12328,7 +12206,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `vfx-magnetic`<br>Magnetic<br><small>#html-in-canvas #webgl</small> | Block | VFX composition block | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add vfx-magnetic`<br>`<div data-composition-src=\"compositions/vfx-magnetic.html\" data-duration=\"15\" data-width=\"1920\" data-height=\"1080\"></div>` | 可调参数: --bg-color, --text-color; 有预览视频 |"
       }
     },
@@ -12366,7 +12243,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 10.0
+        "durationSeconds": 10
       },
       "install": {
         "command": "hyperframes add vfx-portal",
@@ -12428,7 +12305,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `vfx-portal`<br>Portal<br><small>#html-in-canvas #webgl</small> | Block | VFX composition block | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add vfx-portal`<br>`<div data-composition-src=\"compositions/vfx-portal.html\" data-duration=\"10\" data-width=\"1920\" data-height=\"1080\"></div>` | 可调参数: --bg-color, --portal-color; 有预览视频 |"
       }
     },
@@ -12466,7 +12342,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 12.0
+        "durationSeconds": 12
       },
       "install": {
         "command": "hyperframes add vfx-shatter",
@@ -12525,7 +12401,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `vfx-shatter`<br>Shatter<br><small>#html-in-canvas #webgl</small> | Block | VFX composition block | 适合产品发布、App 功能展示、iPhone/MacBook 设备包装、未来感 UI 预告。 | `hyperframes add vfx-shatter`<br>`<div data-composition-src=\"compositions/vfx-shatter.html\" data-duration=\"12\" data-width=\"1920\" data-height=\"1080\"></div>` | 有预览视频 |"
       }
     },
@@ -12563,7 +12438,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 12.0
+        "durationSeconds": 12
       },
       "install": {
         "command": "hyperframes add blue-sweater-intro-video",
@@ -12624,7 +12499,6 @@
         }
       },
       "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`<br>Blue Sweater Intro Video<br><small>#showcase #ai #creator #sfx</small> | Block | Warm AI creator intro sequence that resolves into an X follow card for @_blue_sweater_. | 适合需要快速插入一个可复用视觉模块的场景。 | `hyperframes add blue-sweater-intro-video`<br>`<div data-composition-src=\"compositions/blue-sweater-intro-video.html\" data-duration=\"12\" data-width=\"1920\" data-height=\"1080\"></div>` | 包含 2 个 asset; 有预览视频 |"
       }
     },
@@ -12666,7 +12540,7 @@
         "width": 1920,
         "height": 1080,
         "aspect": "landscape_16_9",
-        "durationSeconds": 6.0
+        "durationSeconds": 6
       },
       "install": {
         "command": "hyperframes add logo-outro",
@@ -12719,7 +12593,6 @@
         }
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `logo-outro`<br>Logo Outro<br><small>#branding #outro #logo</small> | Block | Cinematic logo reveal with piece-by-piece assembly, glow bloom, tagline fade-in, and URL pill | 适合品牌片尾、频道收尾、产品 logo reveal。 | `hyperframes add logo-outro`<br>`<div data-composition-src=\"compositions/logo-outro.html\" data-duration=\"6\" data-width=\"1920\" data-height=\"1080\"></div>` | 可调参数: --bg-color, --accent-color; 有预览视频 |"
       }
     },
@@ -12809,7 +12682,6 @@
         "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`<br>Grain Overlay<br><small>#texture #grain #overlay #film</small> | Component | Animated film grain texture overlay using CSS keyframes — adds warmth and analog character to any composition | 适合作为现有镜头的氛围增强层、质感覆盖、聚焦或高级感处理。 | `hyperframes add grain-overlay`<br>`<!-- paste from compositions/components/grain-overlay.html into your composition -->` | - |"
       }
     },
@@ -12908,7 +12780,6 @@
         "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`<br>Morph Text<br><small>#text #text-effect #typography #morph #gooey #kinetic #animation</small> | 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`<br>`<!-- paste from compositions/components/morph-text.html into your composition -->` | 有预览视频 |"
       }
     },
@@ -13009,7 +12880,6 @@
         "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`<br>Motion Blur<br><small>#effect #motion-blur #velocity #animation #physics</small> | 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`<br>`<!-- paste from compositions/components/motion-blur.html into your composition -->` | - |"
       }
     },
@@ -13102,7 +12972,6 @@
         "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`<br>Shimmer Sweep<br><small>#text #shimmer #highlight #effect</small> | Component | Animated light sweep across text or elements using a CSS gradient mask — ideal for AI accents and premium reveals | 适合作为现有镜头的氛围增强层、质感覆盖、聚焦或高级感处理。 | `hyperframes add shimmer-sweep`<br>`<!-- paste from compositions/components/shimmer-sweep.html into your composition -->` | - |"
       }
     },
@@ -13203,7 +13072,6 @@
         "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`<br>Texture Mask Text<br><small>#text #text-effect #effect #texture #mask</small> | Component | CSS luminance masks that cut holes through letterforms - 66 pre-built texture masks from ambientCG PBR color maps | 适合作为现有镜头的氛围增强层、质感覆盖、聚焦或高级感处理。 | `hyperframes add texture-mask-text`<br>`<!-- paste from compositions/components/texture-mask-text/texture-mask-text.html into your composition -->` | 包含 66 个 asset |"
       }
     },
@@ -13292,7 +13160,6 @@
         "formatMatches": {}
       },
       "source": {
-        "guidePath": "/Users/zhichao/Library/Mobile Documents/iCloud~md~obsidian/Documents/Vault/Projects/教程/HyperFrames/catalog-research/HyperFrames-Catalog-Guide-Combined.md",
         "sourceRow": "| `vignette`<br>Vignette<br><small>#vignette #overlay #cinematic #effect</small> | Component | Cinematic radial vignette overlay using a pure-CSS gradient — darkens the edges to pull focus toward the center | 适合作为现有镜头的氛围增强层、质感覆盖、聚焦或高级感处理。 | `hyperframes add vignette`<br>`<!-- paste from compositions/components/vignette.html into your composition -->` | - |"
       }
     }
@@ -13397,6 +13264,6 @@
       "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"
+    "patternsReference": "references/HyperFrames-AI-Generation-Patterns-codex.md"
   }
-}
+}