HyperFrames Notification Cascade 编辑契约全解变量槽位、安全替换与受保护区域【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本指南围绕 HyperFrames 注册表registry中的notification-cascade竖版广告块展开系统讲解其 TEMPLATE.md 所定义的编辑契约哪些内容是模板自有的、哪些槽位允许替换、为什么必须通过set_template_variable_defaults而不是直接改写 HTML以及替换时不得触碰的受保护区域。读完本文你将能安全地把这个通知瀑布模板改造成任何品牌的成片广告同时不破坏其构图、节奏与品牌质感并理解仓库中自动化测试对这份契约的守护机制。一、表面所有权这是广告位不是一套应用界面notification-cascade在 registry-item.json 中被声明为type: hyperframes:block标签为showcase / mock-ui / notification / vertical / ad-template维度 1080×1920竖屏时长 14 秒。它的形态是手机系统通知一条接一条落下、在屏幕上层层堆叠随后整摞通知向上抬起让位给一张品牌收尾卡closing card。TEMPLATE.md 的 Surface ownership 一节首先划清了所有权边界属于模板模板自有通知的几何布局geometry、背景backdrop、堆叠行为stacking、排版typography与运动motion。属于投放品牌放入声明槽位品牌名、品牌真实域名、品牌自己的标志。这一条约束的深层含义是该块本质上是一个广告容器。模板的作者负责把通知瀑布这一视觉母题做得足够精致可信而 remix二次创作成品必须服务于真实存在的品牌因此品牌方的真实名称、真实域名、自有标志必须出现在声明好的身份槽位中而不是被模板默认文案HyperFrames 自身所替代。二、可编辑槽位全景data-composition-variables中声明的十个变量编辑边界的第一条铁律是只有声明在data-composition-variables中的默认值才是可编辑的。实际声明位于 notification-cascade.html 根元素html标签上是一个 HTML 实体编码的 JSON 数组完整定义了 10 个变量变量 id类型角色标签默认值说明notifTitlestringcontentNotification titleNew render每条横幅加粗的首行message1stringcontentMessage 1Launch video is ready.第一条落下的横幅副标题message2stringcontentMessage 2All checks passed.第二条横幅副标题message3stringcontentMessage 34K render done in 92s.第三条横幅副标题message4stringcontentMessage 4Published to the catalog.第四条横幅副标题appNamestringcontentApp nameHyperFrames每条横幅角落署名的品牌名必须使用真实品牌名portrays: [subject_name]headlineTopstringcontentEnd-card line 1SHIP VIDEO收尾卡第一行headlineAccentstringcontentEnd-card line 2FROM HTML收尾卡强调色第二行footerTextstringcontentEnd-card footerhyperframes.heygen.com收尾卡大标题下方的品牌域名portrays: [subject_domain]brandLogoimagecontentBrand logoassets/hyperframes-logo-white.svg居中于收尾卡的品牌透明标志portrays: [subject_logo]从这份声明可以看出三层设计意图内容与身份分离appName、footerText、brandLogo三个槽位通过portrays字段显式标注它们呈现的是主体品牌的身份信息名字、域名、标志这是模板作者希望 remix 时重点替换的槽位。文本与图片分工9 个字符串槽位负责文案1 个图片槽位brandLogo负责图形身份。注意brandLogo的默认值是相对路径assets/hyperframes-logo-white.svg而 HTML 中对应的img通过data-var-srcbrandLogo绑定该变量。长度红线TEMPLATE.md 明确要求替换文案长度控制在原文案的±20% 以内。这一限制服务于两个目的避免文本溢出撑坏固定高度的横幅/收尾卡如.nc-banner高度 176px、标题区固定定位以及避免时间线上本来匹配好的排版节奏失衡。三、场景结构与时间线几何与运动参数从哪里来虽然 TEMPLATE.md 不允许改动场景结构与时间参数但理解它们有助于知道哪些被锁死、为什么被锁死。该模板由四个clip场景轨道track组成全部通过data-start/data-duration/data-track-index声明式排布在 14 秒时间线上这套属性契约详见 docs/concepts/data-attributes.mdx场景data-startdata-duration内容nc-base背景板014真实照片 assets/desk-backdrop.jpg 暗角模拟实拍素材nc-stack通知堆1.598.03四条 810×176px 横幅 Show less 胶囊条与关闭按钮nc-endcard收尾卡9.894.11深色压暗层、衬线大标题、品牌标志、域名脚注nc-fade开场淡入00.7从黑场淡出动画由 GSAP 时间线驱动脚本顶部以注释明确标注每一个决定性数字都是从参考片实测得出spec provenance: measured核心常量如下var PITCH 214; /* 横幅间距px */ var ENTRY [1.6033, 3.6033, 5.6033, 7.6033]; /* 每 2.000s 到达一条 */ var FADE_D 0.3333; /* 线性透明度渐变 */ var RISE 22; /* 入场微上移px */ var RESTACK_D 1.0; /* 让位滑动expo.out */ var EXIT_T 9.2033; /* 整摞退场 */ var ENDCARD_T 9.9033; /* 收尾卡入场 */ var ENDCARD_D 0.5667; /* 收尾卡淡入时长 */运动设计的可读性要点每条横幅以线性淡入 expo.out微上移入场新横幅落下时已在场上的横幅与胶囊条按一个PITCH214px整整齐齐向上让位收尾卡出现前整摞通知以expo.out上移 560px 并淡出同时深色 scrim 淡入——这一切都锁死在模板中替换文案不会、也不应改变它。值得注意的还有色彩体系模板通过 CSS 自定义属性接入 HyperFrames 的 UI 令牌如--nc-glass: var(--hf-ui-surface-raised, rgba(250,246,241,0.94))且没有声明任何颜色变量。这正是 TEMPLATE.md 中颜色受保护的代码依据——调色板属于模板的设计资产不对外暴露为可编辑槽位。四、安全编辑机制为什么只能走set_template_variable_defaultsTEMPLATE.md 的 Safe editing mechanics 一节给出了唯一合法的编辑姿势调用一次set_template_variable_defaults传入已存在的变量 id 及新默认值。不要直接编辑或重写index.html即本块的 composition 文件或其data-composition-variables属性。原因有二该属性中声明的是HTML 实体编码的 JSONsetter 会保留这种编码手工改写极易破坏转义结构导致声明解析失败。永远不要编辑__template_baseline__.html或任何重复的组合文件——基线文件是模板的权威快照用于对比与校验。图片槽位只传图片工具返回的 token而不是任意路径或 base64 内容从而保证图片资源经过受控流程进入组合。setter 成功后必须进行校验Validate after the setter succeeds确认变量已按预期生效再继续。为什么仓库把这条契约看得如此重要在 packages/cli/src/registry/registryBlocks.test.ts 中有一段针对每个被推广模板的测试ships a safe editing contract and declared variables for every promoted template它逐条断言每个被推广块的清单必须包含且仅包含一个TEMPLATE.mdtype: hyperframes:assettarget 为TEMPLATE.mdTEMPLATE.md 中必须出现## Safe editing mechanics、set_template_variable_defaults、HTML-entity-encoded JSON这三个关键词composition 文件的data-composition-variables必须能被解析为 JSON 数组且长度大于 0块内不得出现video固定媒体每个图片类型变量必须被绑定要么存在[data-var-src变量id]元素要么该变量 id 在 HTML 中出现多次。也就是说编辑契约本身是发布门禁的一部分——一个没有向 agent 讲清只能通过 setter 改默认值、不得直接动 HTML的块无法通过注册表测试。这也是为什么在 HyperFrames 的创作流程中agent 应当把 TEMPLATE.md 当作与 composition 同等重要的资产来对待。五、受保护区域这些内容一律不许动TEMPLATE.md 的 Protected 一节开出了一份明确的禁改清单结合 notification-cascade.html 的源码可以逐条对应受保护项对应源码位置CSS、布局、背景、通知外观chromestyle块中的全部规则如.nc-banner的 135px 左偏移、810px 宽度、26px 圆角、玻璃质感var(--nc-glass)场景结构四个clipsection 的划分与轨道索引data-track-index1..4时长、时间点、缓动、堆叠、揭示行为GSAP 时间线中的PITCH/ENTRY/FADE_D/RISE/RESTACK_D/EXIT_T/ENDCARD_T/ENDCARD_D常量与expo.out缓动声明槽位之外的任何图片背景图assets/desk-backdrop.jpg仅作场景底板不在可替换之列颜色模板未声明任何颜色变量调色板由--hf-ui-*令牌与模板内嵌色值锁定这条清单的逻辑与表面所有权一脉相承编辑者拥有的是文案与品牌身份模板作者拥有的是视觉工程。越界修改任何受保护项都可能让这个块失去通知瀑布的质感也意味着后续无法与基线文件做干净对比。六、实践把 Notification Cascade 改造成你的品牌广告综合 TEMPLATE.md、registry-item.json 与 composition 源码一次合规的 remix 流程可以归纳为阅读 TEMPLATE.md确认该块的编辑契约与受保护区域它是随块一起分发的资产见 registry-item.json 的 files 列表。定位变量声明打开 composition 的根元素data-composition-variables核对 10 个变量的 id、类型与默认值也可对照 registry-item.json 中的variables数组二者保持一致。调用set_template_variable_defaults一次性替换文本槽位notifTitle、message1–message4四条通知的文案保持原长 ±20% 以内身份槽位appName横幅署名、footerText收尾卡域名、headlineTop/headlineAccent收尾卡标语图片槽位brandLogo传入图片工具返回的 token且必须是在深色收尾卡上依然清晰可辨的透明标志。setter 成功后校验确认每条横幅副标题按顺序message1在最下、message4最先入场正确呈现收尾卡三要素标语、标志、域名就位。不要直接改写 HTML 的data-composition-variables、编辑__template_baseline__.html或重复组合文件、替换背景照片、改动任何 CSS 或时间线常量。关于运行时变量如何落地composition 脚本给出了参考实现通过window.__hyperframes.getVariables()读取覆盖值未提供时回退到声明默认值文本经过text()函数处理——非字符串回退默认值、空串回退默认值、超过 80 字符截断到 80 字符。这解释了为什么 TEMPLATE.md 强调只改声明槽位脚本已经为每个槽位实现了覆盖优先、默认兜底的机制你只需把新默认值喂给 setter渲染端会自动完成替换。七、小结notification-cascade的 TEMPLATE.md 是 HyperFrames 注册表块编辑契约的典型范本其核心可浓缩为三条原则所有权分离模板负责视觉工程品牌负责身份内容、槽位白名单只有data-composition-variables中声明的 10 个变量可改且长度 ±20% 红线、setter 单入口通过set_template_variable_defaults修改默认值保留 HTML 实体编码绝不手改 composition 文件。仓库侧通过 registryBlocks.test.ts 把这一契约固化为发布门禁确保每个被推广的块都能被 agent 安全、可预测地二次创作。掌握这套契约你就掌握了 HyperFrames 广告类块的标准工作方式。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
HyperFrames Notification Cascade 编辑契约全解变量槽位、安全替换与受保护区域【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes本指南围绕 HyperFrames 注册表registry中的notification-cascade竖版广告块展开系统讲解其 TEMPLATE.md 所定义的编辑契约哪些内容是模板自有的、哪些槽位允许替换、为什么必须通过set_template_variable_defaults而不是直接改写 HTML以及替换时不得触碰的受保护区域。读完本文你将能安全地把这个通知瀑布模板改造成任何品牌的成片广告同时不破坏其构图、节奏与品牌质感并理解仓库中自动化测试对这份契约的守护机制。一、表面所有权这是广告位不是一套应用界面notification-cascade在 registry-item.json 中被声明为type: hyperframes:block标签为showcase / mock-ui / notification / vertical / ad-template维度 1080×1920竖屏时长 14 秒。它的形态是手机系统通知一条接一条落下、在屏幕上层层堆叠随后整摞通知向上抬起让位给一张品牌收尾卡closing card。TEMPLATE.md 的 Surface ownership 一节首先划清了所有权边界属于模板模板自有通知的几何布局geometry、背景backdrop、堆叠行为stacking、排版typography与运动motion。属于投放品牌放入声明槽位品牌名、品牌真实域名、品牌自己的标志。这一条约束的深层含义是该块本质上是一个广告容器。模板的作者负责把通知瀑布这一视觉母题做得足够精致可信而 remix二次创作成品必须服务于真实存在的品牌因此品牌方的真实名称、真实域名、自有标志必须出现在声明好的身份槽位中而不是被模板默认文案HyperFrames 自身所替代。二、可编辑槽位全景data-composition-variables中声明的十个变量编辑边界的第一条铁律是只有声明在data-composition-variables中的默认值才是可编辑的。实际声明位于 notification-cascade.html 根元素html标签上是一个 HTML 实体编码的 JSON 数组完整定义了 10 个变量变量 id类型角色标签默认值说明notifTitlestringcontentNotification titleNew render每条横幅加粗的首行message1stringcontentMessage 1Launch video is ready.第一条落下的横幅副标题message2stringcontentMessage 2All checks passed.第二条横幅副标题message3stringcontentMessage 34K render done in 92s.第三条横幅副标题message4stringcontentMessage 4Published to the catalog.第四条横幅副标题appNamestringcontentApp nameHyperFrames每条横幅角落署名的品牌名必须使用真实品牌名portrays: [subject_name]headlineTopstringcontentEnd-card line 1SHIP VIDEO收尾卡第一行headlineAccentstringcontentEnd-card line 2FROM HTML收尾卡强调色第二行footerTextstringcontentEnd-card footerhyperframes.heygen.com收尾卡大标题下方的品牌域名portrays: [subject_domain]brandLogoimagecontentBrand logoassets/hyperframes-logo-white.svg居中于收尾卡的品牌透明标志portrays: [subject_logo]从这份声明可以看出三层设计意图内容与身份分离appName、footerText、brandLogo三个槽位通过portrays字段显式标注它们呈现的是主体品牌的身份信息名字、域名、标志这是模板作者希望 remix 时重点替换的槽位。文本与图片分工9 个字符串槽位负责文案1 个图片槽位brandLogo负责图形身份。注意brandLogo的默认值是相对路径assets/hyperframes-logo-white.svg而 HTML 中对应的img通过data-var-srcbrandLogo绑定该变量。长度红线TEMPLATE.md 明确要求替换文案长度控制在原文案的±20% 以内。这一限制服务于两个目的避免文本溢出撑坏固定高度的横幅/收尾卡如.nc-banner高度 176px、标题区固定定位以及避免时间线上本来匹配好的排版节奏失衡。三、场景结构与时间线几何与运动参数从哪里来虽然 TEMPLATE.md 不允许改动场景结构与时间参数但理解它们有助于知道哪些被锁死、为什么被锁死。该模板由四个clip场景轨道track组成全部通过data-start/data-duration/data-track-index声明式排布在 14 秒时间线上这套属性契约详见 docs/concepts/data-attributes.mdx场景data-startdata-duration内容nc-base背景板014真实照片 assets/desk-backdrop.jpg 暗角模拟实拍素材nc-stack通知堆1.598.03四条 810×176px 横幅 Show less 胶囊条与关闭按钮nc-endcard收尾卡9.894.11深色压暗层、衬线大标题、品牌标志、域名脚注nc-fade开场淡入00.7从黑场淡出动画由 GSAP 时间线驱动脚本顶部以注释明确标注每一个决定性数字都是从参考片实测得出spec provenance: measured核心常量如下var PITCH 214; /* 横幅间距px */ var ENTRY [1.6033, 3.6033, 5.6033, 7.6033]; /* 每 2.000s 到达一条 */ var FADE_D 0.3333; /* 线性透明度渐变 */ var RISE 22; /* 入场微上移px */ var RESTACK_D 1.0; /* 让位滑动expo.out */ var EXIT_T 9.2033; /* 整摞退场 */ var ENDCARD_T 9.9033; /* 收尾卡入场 */ var ENDCARD_D 0.5667; /* 收尾卡淡入时长 */运动设计的可读性要点每条横幅以线性淡入 expo.out微上移入场新横幅落下时已在场上的横幅与胶囊条按一个PITCH214px整整齐齐向上让位收尾卡出现前整摞通知以expo.out上移 560px 并淡出同时深色 scrim 淡入——这一切都锁死在模板中替换文案不会、也不应改变它。值得注意的还有色彩体系模板通过 CSS 自定义属性接入 HyperFrames 的 UI 令牌如--nc-glass: var(--hf-ui-surface-raised, rgba(250,246,241,0.94))且没有声明任何颜色变量。这正是 TEMPLATE.md 中颜色受保护的代码依据——调色板属于模板的设计资产不对外暴露为可编辑槽位。四、安全编辑机制为什么只能走set_template_variable_defaultsTEMPLATE.md 的 Safe editing mechanics 一节给出了唯一合法的编辑姿势调用一次set_template_variable_defaults传入已存在的变量 id 及新默认值。不要直接编辑或重写index.html即本块的 composition 文件或其data-composition-variables属性。原因有二该属性中声明的是HTML 实体编码的 JSONsetter 会保留这种编码手工改写极易破坏转义结构导致声明解析失败。永远不要编辑__template_baseline__.html或任何重复的组合文件——基线文件是模板的权威快照用于对比与校验。图片槽位只传图片工具返回的 token而不是任意路径或 base64 内容从而保证图片资源经过受控流程进入组合。setter 成功后必须进行校验Validate after the setter succeeds确认变量已按预期生效再继续。为什么仓库把这条契约看得如此重要在 packages/cli/src/registry/registryBlocks.test.ts 中有一段针对每个被推广模板的测试ships a safe editing contract and declared variables for every promoted template它逐条断言每个被推广块的清单必须包含且仅包含一个TEMPLATE.mdtype: hyperframes:assettarget 为TEMPLATE.mdTEMPLATE.md 中必须出现## Safe editing mechanics、set_template_variable_defaults、HTML-entity-encoded JSON这三个关键词composition 文件的data-composition-variables必须能被解析为 JSON 数组且长度大于 0块内不得出现video固定媒体每个图片类型变量必须被绑定要么存在[data-var-src变量id]元素要么该变量 id 在 HTML 中出现多次。也就是说编辑契约本身是发布门禁的一部分——一个没有向 agent 讲清只能通过 setter 改默认值、不得直接动 HTML的块无法通过注册表测试。这也是为什么在 HyperFrames 的创作流程中agent 应当把 TEMPLATE.md 当作与 composition 同等重要的资产来对待。五、受保护区域这些内容一律不许动TEMPLATE.md 的 Protected 一节开出了一份明确的禁改清单结合 notification-cascade.html 的源码可以逐条对应受保护项对应源码位置CSS、布局、背景、通知外观chromestyle块中的全部规则如.nc-banner的 135px 左偏移、810px 宽度、26px 圆角、玻璃质感var(--nc-glass)场景结构四个clipsection 的划分与轨道索引data-track-index1..4时长、时间点、缓动、堆叠、揭示行为GSAP 时间线中的PITCH/ENTRY/FADE_D/RISE/RESTACK_D/EXIT_T/ENDCARD_T/ENDCARD_D常量与expo.out缓动声明槽位之外的任何图片背景图assets/desk-backdrop.jpg仅作场景底板不在可替换之列颜色模板未声明任何颜色变量调色板由--hf-ui-*令牌与模板内嵌色值锁定这条清单的逻辑与表面所有权一脉相承编辑者拥有的是文案与品牌身份模板作者拥有的是视觉工程。越界修改任何受保护项都可能让这个块失去通知瀑布的质感也意味着后续无法与基线文件做干净对比。六、实践把 Notification Cascade 改造成你的品牌广告综合 TEMPLATE.md、registry-item.json 与 composition 源码一次合规的 remix 流程可以归纳为阅读 TEMPLATE.md确认该块的编辑契约与受保护区域它是随块一起分发的资产见 registry-item.json 的 files 列表。定位变量声明打开 composition 的根元素data-composition-variables核对 10 个变量的 id、类型与默认值也可对照 registry-item.json 中的variables数组二者保持一致。调用set_template_variable_defaults一次性替换文本槽位notifTitle、message1–message4四条通知的文案保持原长 ±20% 以内身份槽位appName横幅署名、footerText收尾卡域名、headlineTop/headlineAccent收尾卡标语图片槽位brandLogo传入图片工具返回的 token且必须是在深色收尾卡上依然清晰可辨的透明标志。setter 成功后校验确认每条横幅副标题按顺序message1在最下、message4最先入场正确呈现收尾卡三要素标语、标志、域名就位。不要直接改写 HTML 的data-composition-variables、编辑__template_baseline__.html或重复组合文件、替换背景照片、改动任何 CSS 或时间线常量。关于运行时变量如何落地composition 脚本给出了参考实现通过window.__hyperframes.getVariables()读取覆盖值未提供时回退到声明默认值文本经过text()函数处理——非字符串回退默认值、空串回退默认值、超过 80 字符截断到 80 字符。这解释了为什么 TEMPLATE.md 强调只改声明槽位脚本已经为每个槽位实现了覆盖优先、默认兜底的机制你只需把新默认值喂给 setter渲染端会自动完成替换。七、小结notification-cascade的 TEMPLATE.md 是 HyperFrames 注册表块编辑契约的典型范本其核心可浓缩为三条原则所有权分离模板负责视觉工程品牌负责身份内容、槽位白名单只有data-composition-variables中声明的 10 个变量可改且长度 ±20% 红线、setter 单入口通过set_template_variable_defaults修改默认值保留 HTML 实体编码绝不手改 composition 文件。仓库侧通过 registryBlocks.test.ts 把这一契约固化为发布门禁确保每个被推广的块都能被 agent 安全、可预测地二次创作。掌握这套契约你就掌握了 HyperFrames 广告类块的标准工作方式。【免费下载链接】hyperframesWrite HTML. Render video. Built for agents.项目地址: https://gitcode.com/GitHub_Trending/hy/hyperframes创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
